Interactive SICP JS

Overview

Interactive SICP-JS feature allows readers to interact with program snippets (with all the playground tools) without taking the reader away from the book.

Setting up environment variables

By default, the SICP-JS JSON files will be fetched from https://source-academy.github.io/sicp/.

Hosting locally (or from another web server)

Create a .env file in root of cadet-frontend. Add the following line REACT_APP_INTERACTIVE_SICP_URL="http://127.0.0.1:8080/", replacing the URL with the URL where the JSON files are hosted. Follow these instructions to set up a local SICP web server.

Implementation

XML files in the SICP repo are preprocessed into JSON files. These files are parsed recursively to create the page.

Math

Math equations are parsed using the react-latex-next library.

Code Snippets

1. Code snippets in the book that are suitable for evaluation can be clicked. The code snippet will expand to reveal the source academy playground.
2. Opening another code snippet should close all other code snippets.
3. Some code snippets may have dependencies, in which case one can click on show/hide dependencies button to show or hide dependencies respectively. In either case, the program can still be run (dependencies are added to prepend if necessary).
4. Code snippets can be resized by dragging the bottom edge.

Refs

Each section is assigned its own ref so that the page can scroll to it. One can scroll to a section of the page by adding a hash to the end of the URL. (e.g. …/interactive-sicp/1.1.1#p3 scrolls to paragraph 3).

The table below shows the format for each element. Text in brackets are to be replaced with the corresponding number or string (e.g. p{NUMBER} should be p1, p2,…).

Element	Hash Format
Paragraph	p{NUMBER}
Figure	p{fig-{DISPLAY_NAME}
Footnote	footnote-{NUMBER}
Exercise	ex-{NUMBER}

Yet to Implement

• Footnote link
• Exercise link
• Heading