Code assistant
The Easiest & Best Method: Publish to a Free Hosting Service
It's free: Services like Netlify, Vercel, and GitHub Pages offer generous free tiers perfect for this kind of project.It's fast: These services are optimized to serve web content quickly all over the world.It's reliable: Your app will always be online and available.Easy to embed: You get a clean URL that Moodle can handle perfectly.
Download the Files: First, you'll need the files for your app. For your convenience, here they are:index.html index.tsx metadata.json
Create a Folder: Place all three files into a single folder on your computer. You can name it something like pizzeria-simulator.Sign up for Netlify: Go toNetlify.com and sign up for a free account.Drag and Drop: Once you're logged into your Netlify dashboard, you can literally drag the pizzeria-simulator folder from your computer and drop it onto the deployment area on their website.Publish! Netlify will automatically build and deploy your site in a matter of seconds. It will then provide you with a public URL, something like https://unique-name-12345.netlify.app.
As a URL Resource: In your Moodle course, click "Add an activity or resource," select "URL," and simply paste the Netlify link you just created. This is the simplest way.Embedded in a Page (Recommended for a seamless experience): For a more integrated feel, you can embed the simulator directly within a Moodle page.Add a "Page" resource in Moodle. In the page content editor, click the "HTML" or "</>" button to switch to the code view. Paste the following code, replacing the src with your Netlify URL: Html <p>Interact with the Pizzeria Simulator below to learn about key economic principles!</p> <div style="width: 100%; height: 800px; border: 1px solid #ccc; overflow: hidden; resize: vertical;"> <iframe src="https://your-netlify-app-url.netlify.app" style="width: 100%; height: 100%; border: none;" title="Pizzeria Production Simulator"> </iframe> </div>
Alternative Method: Zipping the Files
Poor User Experience: Students would have to download the zip file, extract it on their own computer, and then open the index.html file locally. This is a lot of extra steps and can be confusing.Potential Security Issues: Modern browsers have security restrictions that can sometimes prevent locally opened files from running JavaScript correctly, which could break the simulation.