❓ Project 3: Quiz App

Chapter: JavaScript — Core to ES6+ · Level ★★★ · Time: 60 min

SCORE___ / 20

NameClassDate

After this worksheet you can

Structure data as an array of objectsRender UI dynamically from dataAdd a timerPersist scores with localStorage

📚 Quick Recap

🎯 What you'll practice: Data-driven rendering, DOM events, timers, and localStorage — combining Lessons 14–18.

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

5To read a saved high score back as a number, wrap it in ().

6Restarting the quiz must reset score, timer, and question .

7Write one question object with question, options array, and correctIndex.

8Why must localStorage.getItem() results be converted with Number() before comparing scores?

9Describe how clicking an option should check correctness and update score.

🚀 Section C · Challenge ● CHALLENGE 5

10Design the shuffle logic for the stretch goal: randomize both question order and option order on each quiz restart. Outline the approach.

💭 Reflection — the most useful thing I learned:

A ___/4 B ___/11 C ___/5 Total ___/20 Teacher's Signature Parent's Signature

✂ answer key — fold or cut before handing out

1-B 2-B 3-B 4-A | 5 = Number 6 = index 7 = { question: "What is 2+2?", options: ["3","4","5","6"], correctIndex: 1 } 8 = localStorage always stores values as strings, so a stored "12" compared to a number score with > or < would compare as strings/coerce unpredictably unless explicitly converted 9 = On click, compare the clicked option's index to correctIndex; if equal, increment score and show green feedback, else show red feedback, then advance to the next question | 10 = Use a Fisher-Yates shuffle (or .sort(()=>Math.random()-0.5) for simplicity) on a copy of the questions array at quiz start, and shuffle each question's options array the same way — while remembering to update correctIndex to match the new option order.

📄 Need offline practice?Print this worksheet or open the one-page cheat sheet.

🗒 Cheat Sheet

🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

🚀 Section C · Challenge ● CHALLENGE 5