ChatGPT + Articulate Storyline: Creating Custom Games as Web Objects

 

A while back, I experimented with creating simple games like Snake 🐍 and a Shooting game 🔫 using ChatGPT-5, just for fun. That got me thinking: What if the same approach could be used at work to make eLearning more engaging?

So, I decided to push the idea further — by building a Mario-style platformer game in GPT-5 and embedding it directly into Articulate Storyline. The result? Learners can play the game inside the course, and when they reach the flag, Storyline shows a Congratulations layer with a button to continue to the next lesson.

✨ Why this matters

Articulate Storyline already offers an incredible set of tools for interaction and gamification — from triggers and variables to drag-and-drops and quizzes. But by embedding a custom HTML5 mini-game, we can take it to the next level.

Imagine this scenario:

• A learner finishes a lesson
• Scores 100% on the quiz
• And instead of just seeing “Well done,” they unlock a bonus game right inside Storyline

No switching apps. No external browser windows. Just a seamless, playful reward that makes the learning journey more memorable.

🔹 Step-by-Step: How I Built It

1. Create the game in ChatGPT-5

I asked ChatGPT-5 to generate a simple Mario-style HTML5 platformer with coins, lava pits, a flagpole, and cheerful chiptune music. The result was a single index.html file — fully self-contained with code, graphics, and sounds.

2. Insert into Storyline as a Web Object

• In Storyline: Insert → Web Object
• Point to the folder containing your index.html
• Set it to Display in Slide (not “in a new window”)

This ensures the game appears directly inside your Storyline slide.

3. Create a Storyline variable

• Add a True/False variable called gamecomplete (default = False).
• (Optional) Add more variables like coins, deaths, difficulty if you want to track those.

4. Add a JavaScript listener

On the same slide, insert a trigger: Execute JavaScript → When timeline starts, and paste this code:

window.addEventListener("message", function (e) { if (e.data && e.data.type === "platformerComplete") { var p = GetPlayer(); p.SetVar("gamecomplete", true); p.SetVar("coins", e.data.coins || 0); p.SetVar("deaths", e.data.deaths || 0); p.SetVar("difficulty", e.data.difficulty || ""); } });

When the learner reaches the flag, the game sends a message called platformerComplete. Storyline listens for that and flips gamecomplete to True.

5. Build the Congratulations layer

• Add a new layer called Congratulations
• Add a message: “Congratulations! You finished the game 🎉”
• Add a button: “Proceed to Next Lesson” → Jump to Next Slide

6. Show the layer when the variable changes

• Add a trigger: Show layer “Congratulations” when variable changes → If gamecomplete == True

7. Publish and test

• Publish to Web or LMS
• Play the game in Storyline → reach the flag → see the Congratulations layer → click Proceed → next slide

✅ The Result

A smooth, gamified experience where:

• Learners don’t leave Storyline
• A game feels like a natural extension of the course
• Rewards add motivation and fun, without breaking the flow

And the best part: it’s not limited to platformers. You can do this with any HTML5 mini-game — jigsaws, quizzes, puzzles, simulations — as long as it sends a postMessage back to Storyline.

 

✨ Gamification doesn’t have to be complicated or expensive. With a little creativity, tools like ChatGPT and Storyline can turn learning into an experience that feels fun, surprising, and motivating.