Sky Picker Word Balloon Adventure : eLearning Gamification with JavaScript in Articulate Storyline

Project Overview

Gamification in eLearning is more than just fun—it challenges us to think differently about user engagement, interaction design, and learning outcomes. Sky Picker: Word Balloon Adventure is a project I built to explore how far we can push gamification within Articulate Storyline using custom JavaScript code.

This version was designed specifically for our eLearning and instructional design community—as a non-commercial release and an open learning resource.

---

Project Highlights

• ✅ Fully interactive game created in Articulate Storyline
• 🧩 Controlled entirely through 205+ lines of custom JavaScript
• 🎯 Physics-based animation: gravity, jump, air resistance
• 🐤 Dynamic obstacles and game logic
• 🖱️ Supports both keyboard and touch device controls
• ❤️ Built with community sharing in mind

---

Preview

Preview of the game interface and gameplay

---

How It Works

At the core of the game is a simple concept:

Match the object in the air with the word displayed at the top of the screen.

Players control a hot air balloon to collect the correct object while avoiding birds and distractions. The game features:

• Jump mechanics (tap or spacebar)
• Left/right movement (arrows or drag gesture)
• Level progression based on correct answers
• Life system (5 total lives; wrong answers and collisions reduce lives)

---

Game Instructions (In-Game)

🎯 Goal: Pick the object that matches the word at the top.
⬅️➡️ Move: Arrow keys or drag left/right
⏫ Jump: Spacebar or tap to float
💔 Lives: 5 — lose one for wrong picks or hitting birds
✅ Progress: Complete each level to unlock the next

---

💻 The Code Behind It

This game was originally created for a client, at a time when Articulate Storyline had no official JavaScript API. Everything—object movement, collision detection, animation timing—was custom-coded using raw JavaScript and basic physics formulas.

Here are some features handled purely by code:

• Simulated gravity and air resistance
• Jump velocity and drag control
• Bird movement with dynamic difficulty
• Object spawning and detection
• Level state tracking

---

Code Snippet Example

(You can replace this with an actual code block plugin or code formatting widget on your blog)

const FlappyBirdGame = {
    state: {
        isJumping: false,
        fallSpeed: 0,
        currentX: 0,
        currentY: 0,
        currentRotation: 0,
        gameLoop: null,
        animationFrame: null,
        moveSpeed: 5,
        lastJumpTime: 0,
        jumpCooldown: 150,
        maxFallSpeed: 1,
        airResistance: 0.98,
        keysPressed: {},
        initialX: 0,
        initialY: 0
    },

---

Screenshots showing balloon physics and object interaction

---

Source File & Community Access

This version was built exclusively for the eLearning community, with no intent of monetization or promotion. I believe in sharing practical examples that others can build on.

I’ll be releasing the following soon:

• 🔓 Full source file (.story)
• 📄 Complete JavaScript code
• 📘 Step-by-step tutorial guide

💬 If you’re interested, leave a comment or message me directly — I’ll share the files and update this post with download links soon.

---

Download Source File

Download the Source File (Coming Soon)

---

Final Thoughts

Sky Picker is a small example of what’s possible when we combine creativity with code—even in tools not originally built for game mechanics. I hope this inspires others to experiment, break boundaries, and bring more life into learning experiences.