Example
Memory Game - Halloween Themed
đź’» How I Built It
The entire game was created in Visual Studio Code using three simple files:
• index.html for structure
• style.css for layout and styling
• script.js for the game logic, randomisation, and sound effects
Everything from the flipping animation to the timer, levels, and scoring is written manually, no external frameworks or plug-ins.
🔊 Sounds and Offline Assets
All the spooky sounds (for flipping, matching, and wrong guesses) are included as Base64-encoded audio strings, meaning they’re embedded directly into the HTML and don’t rely on external hosting.
However, if you’d rather use your own sound effects or images, simply replace them in the code and host them securely.
📦 Try It Yourself – Download & Use the Package
You can download the complete compressed ZIP package here containing the HTML, CSS, and JavaScript attached to this article.
Once downloaded, you can use the package in two main ways:
Option 1: Add to Storyline 360 as a Web Object
1. Extract the ZIP file to a local folder.
2. In Storyline, go to Insert → Web Object.
3. Browse to your extracted folder and select the file containing the index.html.
4. Storyline will automatically include the CSS, script, and sounds when you publish.
âś… All audio and image assets will work perfectly when self-contained inside Storyline.
Option 2: Use in Rise 360 with the Custom Code Block (Beta)
1. Open your Rise course and insert a Custom Code Block.
2. Copy the full HTML from the index.html file and paste it into the code editor.
3. Host any sound or image assets externally (for example, upload them in a hidden Rise lesson and copy their URLs).
4. Replace the placeholder links in the code with your hosted URLs.
⚠️ At present, Rise’s Custom Code Block requires URLs for hosted assets. Embedded local audio and image files won’t render within Rise directly, they will, however, work seamlessly when published through Storyline.
🧠Why Try Something Like This?
A memory game like this may seem simple, but it’s a brilliant way to:
• Teach recall and recognition skills.
• Reinforce visual or brand associations.
• Add short, rewarding “micro-challenges” to your courses.
• Demonstrate how game mechanics can enhance engagement.
And because it’s coded from scratch, you can easily adapt it for almost any learning context, from compliance topics to onboarding or product knowledge.
đź‘» Play the Demo
🧩 Final Thoughts
This little project was created as a fun Halloween-themed experiment, but the same approach could be used for almost anything, and it works equally well inside Rise 360 or Storyline 360.
No RepliesBe the first to reply
Getting Started with the E-Learning Challenges
Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.