Interactive PhET simulation | GSoC 2018
Jesse Tuning Greenberg
Jesse.Greenberg at colorado.edu
Tue Mar 6 20:53:55 UTC 2018
Hello Nilay,
My name is Jesse Greenberg, I am a software enigineer for PhET interactive
simulations and the mentor for the GSoC project you are interested in. I am
happy to hear you are interested in the project. Thank you sending your
background information, and thank you for reviewing the Scenery
documentation.
To become more familiar with PhET, please do the following:
1) Review the PhET Development Overview
<https://docs.google.com/document/d/1Ys1EiwnqQGYuzGOcQSr4uXDes35mF1v1XhMZIl10nk8/edit#heading=h.otez332l59q9>
to
get project dependencies and learn how to run a PhET simulation locally.
This document also has information about PhET's coding style guidelines.
2) Once you are able to run the Example Simulation at
http://localhost:8080/example-sim/example-sim_en.html, please do the
following tasks to familiarize yourself with our codebase:
- Run the simulation with accessibility enabled. This can be done by
adding the ?accessibility query parameter at the end of the ULR like
http://localhost:8080/example-sim/example-sim_en.html?accessibility.
Buttons in the control panel should now be focusable with "tab" key.
- Use Scenery's API for accessibility to make the BarMagnetNode
focusable. You will have to set a tag name on the node for it to be
focusable.
- Use Scenery's API for accessibility to add an accessible label and
description to the BarMagnetNode. The label should be "Bar Magnet". The
description should be "The bar magnet is oriented in a S-N orientation".
- When the orientation of the BarMagnetNode changes, update its
accessible description to reflect the change. It should say
- The bar magnet is oriented in a S-N orientation" when the south
pole is on the left, and
- The bar magnet is oriented in a N-S orientation" when the south
pole is on the right.
- [Extra Credit] If you feel you have time, add a "Move Magnet" button
below the "Flip Polarity" button. When pressed, it should move the bar
magnet to a random location somewhere in the screen.
Additional information that might be helpful:
- The code for the control panel is in
C:\PATH\example-sim\js\example\view\ControlPanel.js.
- The API for accessibility in Scenery is documented and defined in
C:\PATH\scenery\js\accessibility\Accessibility.js.
- There are a couple of ways to verify your accessible labels and
descriptions. One way is to use a screen reader to "read" through the sim
and find the accessible content. But if you do not have a screen reader,
you can also inspect the HTML to find the descriptions. The sim has a div
with class="accessibility". After you give a node a tag name or accessible
label, new elements and content will appear under this div.
- Feel free to look through other UI components in
https://github.com/phetsims/sun for examples of how to specify tag
names, labels, and descriptions.
Please let me know if you have questions about the above items.
Best,
- Jesse Greenberg
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20180306/1ee76abc/attachment.html>
More information about the fluid-work
mailing list