Students can share their code online by creating and embedding an HTML file for their programs.
Creating an Embeddable HTML File
Programs that students create in the CodeHS Sandbox can be embedded on other sites. To embed a Sandbox program:
Open the Sandbox program.
Click Share at the top of the Code Editor, then Embed.
Choose your settings, then click the green Copy button.
The generated code will wrap your program in an iframe
and can be embedded in any HTML document.
Viewing Your HTML file
There are a number of ways that students can embed their code:
On Your Computer
Create a file called codehs.html on your desktop.
Copy and paste the HTML code provided into that file.
Double-click the file to open it in your browser. You now have a webpage running outside of CodeHS, locally on your computer!
Embed Code Online
Create a file called codehs.html on your desktop.
Copy and paste the HTML code provided into that file.
Upload this file to the Internet
Visit your webpage.
Using the codehs.me Homepage
While students can embed their HTML files on any website, they also have the option to create their own homepage hosted on codehs.me!
To do this, students can go to the Sandbox and click Edit Homepage:
Here, students can paste in the embed code they previously generated. Their websites will be visible at [student username].codehs.me.
โ
Check out this blog post to learn more about how this tool was built and how it works!
CodeHS Tutorial
Our team created a tutorial to show how you can use the CodeHS Graphics JavaScript library outside of CodeHS on any website. Check it out here:
Still have questions? Contact our team at hello@codehs.com to learn more!