‪PhET-iO Test Sim‬ PhET-iO 1.6.0-dev.1

Link	Description
Simulation	The simulation without any data streams or iframes.
Studio	Shows all of the instrumented PhET-iO elements in a simulation, with their corresponding IDs, types and a basic functionality for interacting with them. This also provides a "Generate HTML" feature which can be used to create a customized simulation or to generate a template/starting point for developing new wrappers.
Data: colorized	Shows the PhET-iO Data Stream in the console, colorized and optimized for human readability. The console must be open to see this data. Chrome/Firefox/Safari only.
Data: JSON	Shows the PhET-iO Data Stream in the console, formatted in JSON, suitable for machine parsing and analysis. The console must be open to see this data.
Data: textarea	Shows the PhET-iO Data Stream in the wrapper frame instead of the console.
Data: recording	The simulation is embedded in a full-size iframe and emits events to the console. Query parameters can be added to redirect the data stream to another location. Unlike the preceding wrappers, this includes high-frequency events, which are necessary for playback.
Data: playback	Plays back a previously recorded session (make sure to use the same browser as was used for recording to rule out platform-specific issues).
State	Shows a JSON object representing the simulation's state, and immediately sets the state to a copy of the simulation for testing the ability to set state to a simulation. Provides a "Launch" button to launch another copy of the simulation with the given state using query parameters.
Mirror Inputs	Captures user input events and mirrors them to a copy of the simulation, to test for visual playback (like a recorded screen capture).
Screenshot	Shows a "Screenshot" button that can be used to capture and display screenshots from a live simulation.
Active	Shows a button that enables the user to toggle whether a simulation is active (running and taking user input) or inactive (paused and not accepting user input).
Diff	Shows differences between two versions of the simulation.
Multi	Shows an example of how to use multiple versions PhET-iO Client/iframe pairs to have more than one sim in the same wrapper.
PhET-iO API Documentation	Documentation for globals imported in the phet-io.js library, phet-io and simulation query parameters, a list of options that can be passed to Client.launchSim(), and more.
PhET-iO API JSON	This JSON file consists of the entire PhET-iO API for this version of ‪PhET-iO Test Sim‬, in a machine readable format. See the PhET-iO API Documentation for how this file can be loaded and used in a wrapper.
PhET-iO Guide	Documentation for instructional designers about best practices for simulation customization with PhET-iO Studio.
Client Requests	Provides instructions and the specific phetioIDs for client-requested customizations.

Wrapper Development

A PhET-iO wrapper embeds a PhET-iO simulation and leverages the PhET-iO API and feature set. The preceding wrappers demonstrate the PhET-iO API and features for this simulation, and can be used as examples to begin new wrapper development. Here is a basic example/template for a wrapper:

This file can be used as a template for beginning your own wrapper development. Alternatively, you can launch the Studio wrapper above and press the "Download HTML" button to create a template like the one above with customizations provided by the Studio wrapper.

A good place to start is by downloading the example above (or one generated by Studio => "Generate HTML") and launching it on your development machine. Try printing messages to the console from the onEvent callback. Once that is working, you can start using phetioClient.invoke to send commands to the simulation. To invoke multiple commands, use phetioClient.invokeSequence(), shown in an example later in this page. All necessary globals like Client, are imported from the file phet-io.js.

Development and Debugging Modes

When developing wrappers, there are a few tools that can make the process easier. Typically these would be used with the browser Dev Tools open, so that you can catch and inspect errors.

Passing debug: true as an option to Client.launchSim() will load the PhET-iO simulation with lower error tolerance. In this mode, problems are easier to catch and solve while developing the wrapper.
You can handle errors received from the simulation frame with the onError callback option in launchSim().

These options are only recommended for development. When moving to production ready software, the onError callback may still be useful, but the debug option may cause unwanted problems. For a complete list of options that can be passed to Client.launchSim(), as well as a list of all valid query parameters both for the wrapper and simulation frames, see the Full API Documentation.