Embed custom HTML5, iframe, and PhET sims

Teachers and students can use the Share File widgets to add custom interactivity to Stile lessons.

Stile recognises HTML5 files, which offers opportunities to embed custom simulations and interactives such as: 

PhET interactive simulations

PhET simulations are the easiest to embed as they are fully built and ready to go.

DownloadPhETsim.png

Select one of the compatible sims and download the file from the PhET website.

In Stile, add a Share file widget to the lesson and upload the freshly downloaded HTML file. The file should optimise for viewing in Stile, and the simulation will appear.

UploadPhETsim.png

Add a caption (optional) and click Done to save changes. 
Note: Student work done in these simulations will not be saved as the Share file widget is not a question.

Embed HTML and iFrame

Stile will recognise HTML files as long as they are formatted in plain text as HTML5. HTML files can be created with the most basic text editors available. Click here for a tutorial from W3Schools.

Upload the HTML file using the Share file widget. The file will render on the page as long as it is formatted correctly.

iFrameTest.png

An iframe - or 'inline frame' - embeds a web element from another site into the HTML document. Click here to learn more about using iframe tags. This can be helpful for adding desmos graphs, videos that are not supported by the video widget, and coding sandboxes for students to explore. 
Note: Student work done in these embedded environments will not be saved as the Share file widget is not a question.

Request an upload from a student

OpenResponse-FilesMedia.png

Students can also upload HTML files. Allow them to do this with either the Student upload widget or the Open response widget. This can offer a great way for them to explore web design, embed their own simulations and research, and more.

0 Comments

Article is closed for comments.