Web Interpreter Usage Guide

This interpreter implements the web level of 61A Scheme, adding several additional features. An overview of some of them is below. A full reference of the additional primitives this interpreter implements is available here. This supplements the regular 61A Scheme primitives that this interpreter also implements.

You can also run Logic in this interpreter by calling (logic) or clicking here. Logic is currently based on the Summer 2016 version. Make sure to include (logic) at the top of your files when using the editor.

Diagramming and Visualization

You can draw an environment diagram of the current environment with (diagram). This diagram will not automatically update, so you'll need to call (diagram) again if you want to see changes. If you don't want to draw the entire environment you can instead call (draw-pair pair), passing in a pair to draw just that pair.

To visualize the execution of some code (in a manner similar to the Python Tutor), use (visualize code) (replacing code with one or more Scheme expressions). This will diagram the environment before the execution of the code and then allow you to use the buttons above the visualization to navigation between visualization steps. Each time a new frame is created, a frame returns, or a name is bound or modified (except for binding arguments), one step is added to the visualization. Note that your code is executed immediately when using the visualizer and that the environments you see are only saved snapshots.

To exit the visualizer, click the x button. You will not be able to call visualize anything else until you exit the existing visualization.

The diagramming may break with large environments. It will definitely crash if your lists have any cycles (in fact, lists with cycles will probably crash the entire interpreter).

Debugger

While the visualizer will execute the code provided to it immediately, (debug code) actually lets you step through the execution of your code. Click the Step button to execute one step at a time or click the Continue button to keep executing until encountering a breakpoint or the end of your code. You can set a breakpoint by calling (breakpoint) somewhere in your code. The debugger will diagram your code after every step.

Libraries and Demos

You can load various libraries and demos with the (library 'id) and (demo 'id) commands.

Available libraries and demos:

Themes

You can change the interpreter's theme with (theme 'theme-name). Use (reset-theme) to return to the default.

Available themes:

Also, after loading the monochrome theme, you can call (ui-monochrome background foreground) to use your own colors.

If you want to customize your own theme, you can use they ui-color, ui-border, and ui-text-style primitives (see ui-monochrome for an example). You can also add custom CSS with set-custom-css.

Your theme will automatically be saved whenever you make a change and will be re-applied when you reopen the interpreter.

Event Listeners and Buttons

Event listeners allow you to execute a given procedure when a certain event is triggered. You can create a listener with (listener 'event-name procedure). Use (cancel 'event-name) to cancel all listeners attached to that event or (handle 'event-name procedure) to cancel all existing listeners and then bind a new one. You can listen for mouse events on the turtle canvas with turtle_mouseclick, turtle_mousedown, turtle_mouseenter, turtle_mouseleave, turtle_mousemove, turtle_mouseover, turtle_mouseout, and turtle_mouseup.

You can create buttons that appear in the upper right corner of the screen with (create-button 'id "Label") and delete them with (delete-button 'id). Listen for button clicks with with (listener 'button_id procedure) (replacing id with your button's id).

You can also trigger your own events with (trigger-event 'event-name args...).

Turtle Graphics

This interpreter implements 61A's version of Turtle graphics in Scheme using an HTML5 Canvas. There are a couple of differences:

Saving, Loading, and Editing

An editor where you can edit code side-by-side with the interpreter is available here. Anything you enter in the editor will be autosaved, but cannot be referenced from the regular interpreter. You can save to a particular file by adding the file URL parameter with the name of the file to use (e.g. editor.html?file=my-filename). You can also open a file in the editor from the interpreter with the (edit 'file) command. You can load code saved to a file with (load 'file). You can also save a log of everything you've typed into the interpreter to a file with (save 'file).

If you want to load code from a URL, you can use (download 'url). The URL must start with https:// or http:// and special characters and spaces should be URL encoded to avoid issues with interpretation.

Sharing Environments

If you want to share your current environment with a friend (or another browser), use the (upload) command to upload all of the code you've entered into the interpreter. Once the upload is complete, you'll be provided with a link to a GitHub gist with your code. There will be a comment on the gist with links to open the code in the interpreter or the editor. You can also load the code into the interpreter with (download 'gist-id).

Offline Use

The interpreter supports HTML5 caching that allows it to be loaded without an Internet connection. All of your saved bindings will remain available while you're offline, though for obvious reasons, you will not be able to use the upload or download commands. You will, however, be able to use the library, demo, and theme commands, since the code necessary for using them is pre-cached.

Embedding

An embeddable version of this interpreter is available here. See this page for more information

JavaScript Evaluation

The web interpreter supports fairly comprehensive JS interop. A full guide is available here