Parallel DOM Architecture for Interactive Science Simulations


PhET Interactive Simulations Project

Jesse Greenberg

Taliesin L. Smith, Sam Reid, Emily B. Moore

W4A, April 23, 2018

2: Overview

3: Introductions

PhET Interactive Simulations Project

4: Presetnation Hook (optional)

I like panels

  • panel left list

I like bulleted lists

  • panel-right list

5: Interactive Science Simulations

  • Are more readily available
  • Do not require special equipment
  • Create a safe lab-like exploratory experience
  • Support student learning (D’Angelo et 2014)
  • Allow students to experiment & discover
  • Help students to think about science

Images courtesy PhET's facebook page.

PhET Interactive Simulations being used in a classroom with desktop computers. PhET Interactive Sim being used in foreign country and language. PhET Interactive Simulations being used by small kids for fun on the couch.

6: PhET Interactive Simulations

Several New HTML5 PhET Simulations.
  • Started in 2002
  • 170 science & math simulations
  • Run 100 Million+ times/year
  • 87 languages
  • Flexible & exploratory
  • Used with a diverse age range
  • Free of cost & openly licensed

7: Sim Demo {demo}

Design Features

  • Intuitive & easy to use
  • Highly interactive
  • Real-time feedback
  • Fun & game-like
  • Subtle connections to real world
  • Very flexible
Linked image to demo

8: Slide 8

Panel left title

  • Panel left item

Panel right title

  • Panel right item

9: PhET’s Scene Graph - Scenery

A simplified piece of the scene graph's data tree structure, and the rendered result representing a negatively charged balloon against the wall with each object showing their positive and negative charges.
  • Open source sim architecture (by PhET) that runs all the HTML5 simulations
  • Data tree structure that represents each graphical element within parent and child nodes
  • Handles the logical & spatial arrangements of the graphical scene
  • For performance & flexibility Scenery uses multiple graphics renderers SVG, Canvas, and WebGL

10: Enhanced Scenery - Parallel DOM

The same simplified piece of the scene graph's data tree structure, showing the yellow balloon against the wall, but now with two rendered representations, the rendered graphics and the rendered HTML of the Parallel DOM.M
  • Renders nodes as HTML elements
  • Leverages structural & interaction semantics of HTML & ARIA
  • Creates a robust accessibility layer
  • Alternative input (& other a11y features) are agnostic to the graphics renderer
  • Keeps all accessibility features in one place, minimizing maintenance costs & reducing complexity of sim code

11: Slide 11

Sub heading

12: Slide 12

Sub heading

13: Slide 13

Sub heading

14: Slide 14

Sub heading

15: Slide 15

Sub heading

16: Slide 16

Sub heading

Slide 17: Conlcusion?

Maybe it is time to wrap up?

18: Resources & Funders

Resources

Funders

The National Science Foundation; The Hewlett Foundation; University of Colorado.

Contact us

Get involved! Follow PhET

19: Finding PhET Simulations

You may want to link to some extra demos, or maybe not?

PhET's Website

Demonstrated A11y Sims

Early work on A11y Sims

← →

/