Every project / Useful Apps
❓ Tech Trivia
A quiz app about computers and the internet. Swap in your own questions on any subject.
- Language
- HTML, CSS & JavaScript
- Level
- Beginner
- Category
- Useful Apps
What you'll learn
- Arrays of objects
- Creating buttons from data
- Keeping score
- Shuffling
- CSS transitions
How it works
- The questions live in questions.js as a list of objects: the question, its choices, and which choice is right.
- Each game shuffles them with the Fisher–Yates shuffle, a fair way to mix up a list.
- The answer buttons are built from that data, so adding a question needs no new HTML.
- Your score updates as you go, and the last screen shows your percentage.
Files
| File | Lines | |
|---|---|---|
index.html | 20 | the page: what shows up |
questions.js | 34 | Change these to quiz people on anything! `answer` is the position of the right choice (0 = first) |
quiz.js | 84 | what it does |
style.css | 76 | how it looks |
Challenges
Each one is a bit harder than the last. Teachers: these make good assignment instructions.
- Write 5 questions about a subject you love and replace mine.
- Show a progress bar at the top.
- Add a 10-second timer for each question.
- Show which questions you got wrong at the end, with the right answers.
- Keep a high-score table with names in localStorage.