🗝️ Variable Vault
Sort incoming values into their correct data type bins!
🗝️ Variable Vault — Data Type Sorter
A value appears — click the correct type bin before you run out of lives!
📚 What You'll Learn
- String: Text in quotes —
"hello" - Number: Any numeric value —
42,3.14 - Boolean: Only
trueorfalse - Null / Undefined: Intentional emptiness
🎯 How to Play
- A value appears in the spotlight above
- Click the correct type bin below it
- You have 3 lives — wrong answers cost a life!
- 10 rounds total — build your combo streak!
💡 Quick Cheat Sheet
"text"or'text'→ String0,42,-7,3.14→ Numbertrueorfalse→ Booleannull,undefined→ Null/Undef
Round: —/10
Score: 0
🔥 Streak: 0
Lives: ❤️❤️❤️
What JavaScript type is this?
Press Start!
String
"text"
Number
42 / 3.14
Boolean
true/false
Null/Undef
null
⚙️ Function Factory — I/O Machine
A value enters the machine — click the correct output it produces!
📚 What You'll Learn
- Function: A machine that takes input and returns output
- Parameters: The inputs a function accepts
- return: The value the function sends back
- Arrow functions: Short function syntax with
=>
🎯 How to Play
- Read the function code inside the machine
- See the input value on the left
- Click the correct output on the right
- 6 rounds — trace the logic step by step!
💡 Pro Tips
- Substitute the input into the function manually
return n * 2withn = 5→10- Watch for string concatenation vs addition
- Check the
returnline — that's the answer!
Round: 1/6
Score: 0
📥 Input
—
⚙️ The Function Machine
loading...
⚙️ ⚙️ ⚙️ →
📤 Output = ?
🔄 Loop Labyrinth — Maze Runner
Write loop code to guide the hero 🧙 through the maze to the exit 🚪!
📚 What You'll Learn
- for loop: Repeat a block a set number of times
- while loop: Repeat while a condition is true
- Iteration: Each loop "step" is one execution
- Loop counter: Track how many times you've looped
🎯 Game Commands
moveRight()— one step rightmoveLeft()— one step leftmoveDown()— one step downmoveUp()— one step up- Use a
forloop to move multiple steps!
💡 Pro Tips
for (let i = 0; i < 3; i++) { moveRight(); }- Plan your route on the grid first
- Count the squares to know your loop count
- Fewer moves = more stars! ⭐
🗺️ The Maze — Level 1/3
Moves: 0
💻 Write Your Loop Code
Write code to move your hero! 🧙
🧠 Condition Kingdom — Code Crossroads
The hero reaches a fork in the road — which path does the code take?
📚 What You'll Learn
- if statement: Runs code only when condition is true
- else: Runs when the condition is false
- Comparison operators:
===,!==,>,< - Logical operators:
&&(AND),||(OR)
🎯 How to Play
- Read the variable value and the
ifcondition - Click YES if the condition evaluates to true
- Click NO if the condition evaluates to false
- 8 scenarios — fill all the round dots to win!
💡 Quick Examples
if (10 > 5)→ YES (true)if ("a" === "b")→ NO (false)if (score >= 90)with score=85 → NO===checks value AND type — be careful!
Score: 0
Correct: 0/8
let score = 85;
if (score >= 90)
🧙
YES — true
condition is met
OR
NO — false
condition fails
🎯 DOM Domain — Element Hunt
Click the element on the live page that matches the JavaScript selector!
📚 What You'll Learn
- DOM: The page as a tree of selectable elements
- querySelector: Find by CSS selector
- getElementById: Find by exact id
- querySelectorAll: Find all matching elements
🎯 How to Play
- Read the selector shown at the top
- Hover over page elements to see their IDs/classes
- Click the element that the selector would find
- 6 challenges — each teaches a different selector!
💡 Selector Quick Guide
#myId→ element with that id.myClass→ element with that classh1→ element with that tag namenav a→ <a> inside a <nav>
Challenge: 1/6
Score: 0
🎯 Click the element that matches:
document.querySelector('#hero-title')
⚡ Event Encounter — Event Snap!
A scenario appears — snap the correct JavaScript event name before time runs out!
📚 What You'll Learn
- addEventListener: Listen for events
- click: Mouse button pressed and released
- keydown: Keyboard key pressed
- mouseover: Mouse enters an element
🎯 How to Play
- Read the scenario on the card
- Click the correct event name from the options
- You have 8 seconds per round!
- Faster correct answers = bonus points! ⚡
💡 Event Cheat Sheet
- 🖱️ click / dblclick / mousedown
- 🖱️ mouseover / mouseout / mousemove
- ⌨️ keydown / keyup / keypress
- 📝 input / submit / change / scroll
Round: 1/10
Score: 0
Press Start to begin!
📦 Array Arena — Method Match
See the before and after arrays — click the method that makes the transformation!
📚 What You'll Learn
- map: Transform every element
- filter: Keep only matching elements
- push / pop: Add/remove at the end
- sort / reverse: Reorder elements
🎯 How to Play
- The BEFORE array is shown on the left
- The AFTER (target) array is on the right
- Click the method that transforms Before → After
- 6 rounds — each reveals a new array power!
💡 Method Quick Guide
[1,2,3].map(x=>x*2)→[2,4,6][1,2,3,4].filter(x=>x>2)→[3,4][3,1,2].sort()→[1,2,3][1,2,3].reverse()→[3,2,1]
Round: 1/6
Score: 0
⬅️ Before
which method?
→
?
✨ After
🏰 Debug Dungeon — Boss Battle!
The Bug Boss stands between you and victory — fix the bugs to drain its HP!
📚 What You'll Learn
- Syntax errors: Missing brackets, wrong operators
- Logic errors: Code runs but produces wrong result
- Naming errors: Wrong variable/function names
- Return errors: Missing or wrong return values
🎯 How to Play
- The Bug Boss has 5 HP — one per bug
- Click the line of code that contains the bug
- Then pick the correct fix from the options
- Each fix removes 1 HP from the Boss!
💡 Bug Hunting Tips
- Check
=vs===— very common bug! - Capital letters matter — JavaScript is case-sensitive
- Look for missing
returnstatements - Arrays start at index
[0], not[1]!
🦹
⚠️ THE BUG BOSS
5 / 5 bugs remaining
🐛 Bug 1 of 5
script.js
👆 Click the buggy line