Quadrilateral HTML Guide - en

Tips for Teachers Quadrilateral
In Quadrilateral students explore the properties of and relationships between named four-sided shapes.
SHOW or hide TOGGLE shape

current shape sounds on or off
name
RESET SHAPE
and keep guides
MOVE shape
corners and sides ADD visual
guides to support
shape property
ACCESS sim
exploration
controls (sound
on/off, keyboard LOCK corners
shortcuts) or add and sides to the
features (sounds smaller grid steps
options, voicing)
Model Simpli cations

• Only simple quadrilaterals are possible in the simulation. The simulation prevents crossed or complex
quadrilaterals and corners or sides cannot be dragged if the next step will produce a crossed shape.
• Not all possible shapes are named in the simulation. We include: Convex, Concave, Dart, Kite, Trapezoid,
Isosceles Trapezoid, Parallelogram, Rectangle, Rhombus, and Square. Other named shapes that may be
of interest can be explored, but are not explicitly named in the Show Shape Name display, such as: Right
Trapezoid, Acute Trapezoid, Obtuse Trapezoid.
• The sim includes the named shape: "Triangle?". The name is included to acknowledge the appearance
as a triangle, but the shape still presents with four named vertices and four named sides. Teachers are
encouraged to have a conversation with their students on whether it is in fact a triangle or not.
• See the Model Documentation for more details.
Suggestions for Use

Sample Challenge Prompts
• With Shape Name Hidden, discover what happens to the side lengths and angles of the starting shape
when moving different corners. What about moving a side?
• What ways can you change a shape that keeps the name of the shape? Can you maintain a
parallelogram by moving a side? What about a corner? Is a kite similar or different? Why?
• What is the simplest change you can make to a shape to create another shape? How many shapes can
you make with only one corner or side move from the starting shape?
• Is a square a rectangle? Is a rhombus a kite? Use the guides to help nd common traits between
different named shapes to answer these and similar questions.
Fiedler and Smith, May 2023 Page 1 of 4

fi

fi

Customization Options
Query parameters allow for customization of the simulation, and can be added by appending a '?' to the
sim URL, and separating each query parameter with a ‘&’. The general URL pattern is:
…html?queryParameter1&queryParameter2&queryParameter3
For example, in Quadrilateral, if you want to mute audio (audio=muted) and disable pan and zoom
(supportsPanAndZoom=false) use:
https://phet.colorado.edu/sims/html/quadrilateral/latest/quadrilateral_all.html?audio=muted&supportsPanAndZoom=false
To run this in Spanish (locale=es), the URL would become:

https://phet.colorado.edu/sims/html/quadrilateral/latest/quadrilateral_all.html?locale=es&audio=muted&supportsPanAndZoom=false
Indicates this customization can be accessed from the Preferences menu within the simulation.
Query Parameter and Description Example Links
soundDesign - set the sound design at sim soundDesign=shapeUnique
load, rather than changing in the Preferences
Menu. Values are shapeLayers (default) or
shapeUnique.
reducedStepSize - reduce the step size by 4- reducedStepSize
fold, allowing more continuous movement of
corners and side. NOTE: Finding certain named
shapes becomes more dif cult with ner
movement.
inheritTrapezoidSound - changes the default inheritTrapezoidSound
shapeLayers sound design to include inclusive
inheritance of parallel sides (trapezoid to
parallelograms) and adjacent angle equivalence
(isosceles trapezoid to rectangle/square). Append
to add auditory emphasis that parallelograms are a
set of trapezoids.
locale - specify the language of the simulation locale=es (Spanish)
using ISO 639-1 codes. Available locales can be locale=it (Italian)

found on the simulation page on the Translations
tab. Note: this only works if the simulation URL
ends in “_all.html”.
audio - if muted, audio is muted by default. If audio=muted
disabled, all audio is permanently turned off. audio=disabled
allowLinks - when false, disables links that allowLinks=false

take students to an external URL. Default is true.
supportsPanAndZoom - when false, disables supportsPanAndZoom=false
panning and zooming using pinch-to-zoom or
browser zoom controls. Default is true.

fi
fi

Device and Input Features

Alternative Input and Touchscreen Devices
• Move the corners and sides with smaller steps by holding the SHIFT key while dragging with a mouse
or using the keyboard (Arrow keys/WASD).
• To use small steps when using a touchscreen device, toggle the Small Steps lock button.
• Quickly reset the shape with ALT/OPTION + SHIFT + R.
• See the Keyboard Shortcuts dialog in the navigation bar for other helpful shortcuts.
Auditory Features
Sound and Soni cation
• Shapes with similar properties play the same sound tracks. As you create shapes with more speci c
requirements, new sounds are layered on while retaining previous sounds to highlight their relationship
to other shapes.
• Change the sound design of the simulation to only map a track to each unique named shaped in the
Audio tab of the Preferences menu or use the query parameter list in the Customization Options
above.
• A warning sounds plays when the next step of either a corner or side would create a complex/crossed
shape.
• See the Sound Features Video for more useful tips on how concepts and sound are integrated in this
sim. See the published Sound Design Documentation for more details on all sounds in this simulation.
Voicing
• This simulation features browser-based spoken description through our Voicing feature. Enable Voicing
in the Audio tab of the Preferences menu. See the Introduction to Voicing video for more about this
feature.
• When the option "Voice object details and changes" is checked, learners have access to speci c
details about the corners and sides. Delivery of this information varies based on input method. With
keyboard use, learners will get information as they move a corner or side in discrete steps whereas
mouse and touch users will get information on click/tap, but not during active dragging.
• When the option "Voice surrounding context changes" is checked, the voicing of shape changes is the
same for all inputs, but differs depending on whether the “Shape Name Hidden” is toggled to display
the current shape name. When left on "Shape Name Hidden", the voicing describes key shape
properties of the latest most-speci c shape (e.g., "Opposite sides in parallel.", "All right angles."). When
the shape name is displayed, the Voicing provides the name of the latest most-speci c shape (e.g.,
"Found a Parallelogram.", "Found a Rectangle."). In both case, the Voicing will also voice consistent
property changes as a shape is maintained, (e.g., "Opposite sides in parallel as shape gets smaller.",
"All right angles as shape gets bigger.").
fi
fi

fi

fi
fi

Prototype Features
Camera Input: Hands
If a camera (e.g, webcam) is available on your device, you can enable a feature to detect your own nger
positions to move the corners of the quadrilateral. This feature leverages the computer vision capabilities
of the open-source MediaPipe model. It does not collect any data/images.
• Add the query parameter ?cameraInput=hands to the end of the simulation URL.
• The feature requires two hands to be present in the detection window. This can be from two individuals
for cooperative exploration!
• The corner to nger mappings are as follow: Corner A: Left Index, Corner B: Right Index, Corner C:
Right Thumb, Corner D: Left Thumb (see image below).
• in Quadrilateral, this feature assumes the camera is facing you and may not map correctly if the
camera is placed elsewhere (e.g., above).
Tips and Disclaimers

• The simulation will take longer to load the necessary resources for real time hand detection.
• This feature is resource intensive and may have poor performance on some devices.
• This feature does not work of ine.
• The horizontal and vertical range of the corners are mapped to the upper and lower bounds of your
camera window. Try backing away from your camera for more range of motion and to adjust the
size of the shape. Add the query parameter &showVideo to the simulation URL for a resizable
camera preview for troubleshooting.
Corner A: Left Index, Corner B: Right Index, Corner C: Right Thumb, Corner D:
Left Thumb.
See the simulation page for all supported inclusive features.
See all published activities for Quadrilateral here.

For more tips on using PhET sims with your students, see Tips for Using PhET.
fi

fl

fi

Quadrilateral HTML Guide - en

Uploaded by

Copyright:

Available Formats

Quadrilateral HTML Guide - en

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Quadrilateral HTML Guide - en

Uploaded by

Copyright:

Available Formats

Tips for Teachers Quadrilateral

SHOW or hide TOGGLE shape

Model Simpli cations

Suggestions for Use

Fiedler and Smith, May 2023 Page 1 of 4

To run this in Spanish (locale=es), the URL would become:

using ISO 639-1 codes. Available locales can be locale=it (Italian)

allowLinks - when false, disables links that allowLinks=false

Device and Input Features

Fiedler and Smith, May 2023 Page 3 of 4

Tips and Disclaimers

See the simulation page for all supported inclusive features.

See all published activities for Quadrilateral here.

You might also like