PhET John Travoltage Simulation Design
Jonathan Hung
Justin Obara
Introduction
The goal is to create an accessible and inclusive design and implementation of the existing John Travoltage simulation.
The design and development approach is to create an equivalent version of the simulation using solely native HTML 5 elements. The purpose of this approach is to create an interaction that is natively supported by assertive technologies, and integrate this as the parallel DOM to the existing simulation. Design and usability will be informed by a participatory design process involving experts and stakeholders.
Current Demos
- John Travoltage Simulation with Keyboard and Screen Reader Accessibility
- Demo
- Early HTML 5 Prototype
- Design - this wiki page
- John Travoltage Simulation Prototype with sonification
One Sim. Multiple On-Ramps.
To a sighted user, the John Travoltage sim appears as it would on the left below. To a non-sighted user, the same simulation would appear like on the right below.
Coupled with sonification, updating text descriptions, support for keyboard and gesture input - users can have multiple ways of interacting with the sim.
This is what the current development version of the native HTML 5 version is like:
Try the demo at: https://jhung.github.io/john-travoltage-html/
Updating Description of the Sim
After the sim's header, there is a description of the sim. As the user interacts with the sim, this description is updated to reflect the current state of the sim. The intention is that the user can come back to this description any time to get an updated description.
Because the simulation has a finite possible states, it's possible to automatically generate a text description to reflect what is happened visually.
Initial Description
The following paragraph is the sim's description on first load, and before any action has been performed. This initial description is replaced by sentences taken from the tables below once the user has interacted with the sim.
"Actor John Travolta is standing with a foot on the rug, and his hand is very close to the doorknob."
Foot Rub Description Table
Rubbing has occurred with a change in charge qty. | John has rubbed his foot on the rug and has gained | a small a moderate a large the maximum | number of negative charges. |
---|---|---|---|
No rubbing has occurred and no change in charge qty. | No description needed. |
Additional description for slight foot movements that don't change the quantity of charge in a significant way. This will not be implemented immediately and will depend on initial testing.
Rubbing has occurred but only slight change in charge qty. | John has rubbed his foot on the rug slightly and he still has a | small moderate large | number of negative charges. |
---|
Hand Description Table
Moved away from doorknob | His* hand has moved | away from | the doorknob, and is
| closest to very close to close to somewhat close to neither far or close to somewhat far from far from farthest from | it.
|
---|---|---|---|---|---|
Moved toward doorknob | toward | ||||
No change in position | - | His* hand is | the doorknob. |
* replace "His" with "John" if there is no foot description.
Additional description for slight movements that don't result in a change in the descriptive hand position region. This will not be implemented immediately and will depend on initial testing.
Moved slightly away from doorknob | His hand has moved slightly | away from | the doorknob, and is still
| closest to very close to close to somewhat close to neither far or close to somewhat far from far from farthest from | it. |
---|---|---|---|---|---|
Moved slightly toward doorknob | toward |
Charge Description Table
The following description is rendered only when there has been a discharge.
"John's small number of negative charges have been discharged and there are no negative charges left."
Change in the quantity of charges after a discharge occurred | The small The moderate The large | number of extra negative charges on John have been discharged | and there | are | no a small number of a moderate number of a large number of | negative charges left. |
---|---|---|---|---|---|---|
No discharge and no change in quantity of charges | There are | a small a moderate a large | - | number of charges on John. |
Example Descriptions
The following is an example of how a description of the sim updates as a user interacts with the game.
Description text | |
---|---|
Default description on sim load | "John is standing with a foot on the rug, and his hand is very close to the doorknob." |
After foot has moved and a few charges have been gathered. No hand movement. | "John has rubbed his foot on the rug and has gained a small number of negative charges. His hand is very close to the doorknob." |
After hand is moved closer to the doorknob | "John's hand has moved toward the doorknob, and is very close to it. There is a small amount of charges on John." |
A few more charges are gained and some discharge occurs. | "John has rubbed his foot on the rug and has gained a moderate number of negative charges. His hand is very close to the doorknob. The large amount of extra negative charges on John have been discharged and there is a small amount of negative charges left." |
Scene Description and Leg Position Changes (Sep 2016)
Based on user experiences, the strings used to describe the movement of the foot needed to change to better reflect what is happening visually and in the model.
Rename the foot slider label to "Leg swing".
Scene Description | Current | Proposed |
---|---|---|
Default Description | John is standing with his foot on the carpet, and his hand is close to the doorknob. | “John is near the door and standing on a rug. His hand is close to the metal doorknob, and he is ready to swing his leg to rub his foot on the rug.” |
With charges and hand position change | John is standing with his foot on the carpet, and his hand is close to the doorknob. He has 19 charges. | “John has [#] of electron[s] on his body. His hand is [close / very close / etc.] to the metal doorknob, and he is ready to rub his foot on the rug." |
Foot Slider and Electrons Status | Current | Proposed |
---|---|---|
Foot on carpet, no charge gained. | “Position 18 on the carpet.” | "Position 18, foot rubbing on the rug." |
Foot on carpet, charge gained. | “Position 17 on the carpet." "Total electrons: 1” | "Position 18, foot rubbing on the rug." "Electrons on body: 1" |
Foot off carpet | "Position 10 off the carpet." | "Position 10, foot off the rug." |
Leg and Arm as an HTML Slider
Implement the arm and leg as an HTML slider. For further background on this decision, see PhET John Travoltage Arm Implementation Research.
Reasoning
- A slider is immediately understood by a screen reader.
- Non-sighted keyboard users would understand how to use it.
- The slider maps nicely to the range of motion of the arm or leg:
- Each extreme of the slider would be the extremes of the limb motion
- Middle of the slider would be closest arm position to the door knob, or the perpendicular position of the leg to the carpet.
- Native keyboard support:
- Cursor keys move the slider.
- PgUp / PgDown skips by increments.
- Home / End moves from one extreme to the other.
No-Wrapping
- If the arm is implemented using a slider, there will not be any wrapping when the user has reached an extreme. They will be forced to move in the opposite direction. This is mitigated by the supported native short-cut keys.
Arm Implementation as Slider
To someone using a screen reader, the hand position is controlled by a slider with values ranging from 0 to 60. By default the slider will be at position 12. As the user adjusts the slider, the screen reader will read back the slider position and its relative position to the door knob.
To a sighted user, the arm can be dragged around in a circle but the motion stops at the 0 (or 60) mark at the top of the circle.
Implementation Details
- Slider label "Hand position"
- As the position on the slider moves / hand moves around the arc:
- the sim description is updated with new text if the region changes.
- the AT would read back the region if it changes
- two notes are played indicating both proximity and direction of arm movement relative to the doorknob.
- The default value is approximately 12 (exact value TBD)
Interesting Moments
Moment | Result |
---|---|
Focus lands on arm |
|
Up / Right Arrow Press |
|
Down / Left Arrow Press |
|
PgUp Press |
|
PgDn Press |
|
Arm movement |
|
0 |
|
1 to 8 |
|
9 to 16 |
|
17 to 24 |
|
25 to 32 |
|
33 to 40 |
|
41 to 49 |
|
50 |
|
51 to 59 |
|
60 to 67 |
|
68 to 75 |
|
76 to 83 |
|
84 to 91 |
|
92 to 99 |
|
100 |
|
Leg Implementation as Slider
- Using a clock scheme: Value range: 0 to 30. 0 is at the right, and 30 is at the left.
- Label "Foot position"
- As the leg moves around in an arc:
- the sim description is updated with new text if the region changes.
- the AT would read back the region if it changes
- a brushing sound is heard if the foot moves within the "on carpet" region.
- The default value is about 12 (exact value TBD)
- See this IRC chat log: https://botbot.me/freenode/fluid-work/2015-11-26/?msg=54983997&page=1
- Also see PhET John Travoltage Arm Implementation Research
Interesting Moments
Moment | Result |
---|---|
Focus lands on the leg |
|
Up / Right Arrow Press |
|
Down / Left Arrow Press |
|
PgDn Press |
|
PgUp Press |
|
Leg Movement |
|
0 to 9 |
|
10 to 20 |
|
21 to 30 |
|
Sonification
See: PhET John Travoltage Sonification Design
Design Sketches
Screen Reader Perspective
A rendering of the John Travoltage simulation as perceived by a screen reader.
The diagram shows the simulation in its default state, and after the user has gathered electrons and has discharged them.
Interaction Mock-Up
The following are mock-ups illustrating some of the above elements put together with visuals from the simulation.
Current sketch - Dec, 2015 (Download)
Learning Outcomes
- distance and charge are related
- The more charge you have, the farther you can be to discharge
- The less charge you have, the closer you need to be to discharge
- electrons repel each other
- it is possible to create a generator by putting the finger close to the doorknob and constantly rub your feet (although this isn't directly related to static electricity)
Interactive components
- Arm rotation
- controls distance from finger to doorknob
- 360 degrees of movement
- Foot shuffle
- controls the quantity of charge
- 180 degrees of movement
Design and Interaction Notes
- For younger learners - keep it simple
- Travoltage is often used as an introductory sim for PhET
Charge / discharge behaviour:
- distribution of the charge within the body does not matter
- there is a maximum quantity of charge (i.e. there is a finite capacity)
- discharge is at a constant rate regardless of the quantity of charges.