🧩 Weekend Project: JavaScript Fundamentals

What You're Building

Your target is an interactive quiz game that runs in the browser. A player picks a category, answers a series of questions, gets instant feedback on each one, and sees a final score with a performance summary. It's small enough to finish in a weekend, but big enough to force every fundamental you learned this week to earn its place.

Here's the important reframe: this is not a tutorial you copy line by line. It's a guided build. Each milestone gives you a goal, the shape of the code, and a checkpoint to verify before moving on. You write the code. When you get stuck, the reference snippets are there — but reach for them second, not first.

💡 Why a quiz game? A quiz is a loop over a list with a score. That's the skeleton of countless real programs — checkout flows, onboarding wizards, survey tools, flashcard apps. Learn to build one cleanly and you've learned a pattern you'll reuse for years.

Polya's Framework as a Build Plan

George Polya was a mathematician whose 1945 book How to Solve It distilled problem-solving into four steps. They map perfectly onto software: rushing to code (step 3) before understanding (step 1) and planning (step 2) is the number-one reason beginner projects sprawl into a mess.

Applied to this weekend:

1. Understand — What exactly is a "quiz game"? Inputs are the player's category choice and their answers; outputs are questions, feedback, and a final score. Constraints: at least three categories, two question types, and a running score.
2. Devise a plan — Split the work into the five milestones below. Decide your data shape before writing a single function.
3. Execute — Build milestone by milestone, checking each one works before starting the next.
4. Review & extend — Test edge cases, then add one improvement that's genuinely yours.

The Milestone Roadmap

Each milestone is a checkpoint you can run and verify. Don't move on until the current one works — a half-finished feature stacked on another half-finished feature is impossible to debug.

Milestone 1 — Data & State

Goal: define the questions your game asks and the single object that tracks a game in progress. Nothing plays yet — you're laying the foundation.

Design the question shape first

Every question is an object with the same fields. Deciding these fields up front is the single most important design choice in the whole project — everything else reads from this shape.

// quiz.js

// --- DATA: the questions ---
const QUESTIONS = [
  {
    category: 'JavaScript',
    difficulty: 'easy',
    prompt: 'Which keyword declares a block-scoped variable that can be reassigned?',
    options: ['var', 'let', 'const', 'def'],
    answer: 'let',
    explanation: '`let` is block-scoped and reassignable. `const` is block-scoped but cannot be reassigned.',
    points: 10,
  },
  {
    category: 'JavaScript',
    difficulty: 'easy',
    prompt: 'True or false: JavaScript and Java are the same language.',
    options: ['True', 'False'],
    answer: 'False',
    explanation: 'They are unrelated languages with different designs; the shared name is a historical marketing choice.',
    points: 10,
  },
  {
    category: 'JavaScript',
    difficulty: 'medium',
    prompt: 'Which array method adds an element to the END of an array?',
    options: ['push()', 'unshift()', 'pop()', 'shift()'],
    answer: 'push()',
    explanation: '`push()` appends to the end; `unshift()` adds to the start; `pop()`/`shift()` remove.',
    points: 20,
  },
  {
    category: 'HTML',
    difficulty: 'easy',
    prompt: 'Which tag creates a hyperlink?',
    options: ['<link>', '<a>', '<href>', '<nav>'],
    answer: '<a>',
    explanation: 'The <a> (anchor) tag, with an href attribute, creates a hyperlink.',
    points: 10,
  },
  {
    category: 'CSS',
    difficulty: 'medium',
    prompt: 'Which value of the display property enables a flexible box layout?',
    options: ['block', 'grid', 'flex', 'inline'],
    answer: 'flex',
    explanation: 'Setting `display: flex` turns an element into a flex container.',
    points: 20,
  },
];

Create the state object

A game in progress has moving parts: which question we're on, the score, and whether it's over. Bundle them into one object rather than scattering loose global variables. This is a deliberate scope decision — one shared source of truth.

// --- STATE: the game in progress ---
let state = {
  questions: [],        // the questions for THIS game (filtered + shuffled)
  index: 0,             // which question we're showing
  score: 0,             // running points
  correct: 0,           // count of right answers
  answered: false,      // has the player answered the current question?
  over: false,          // is the game finished?
};

Milestone 2 — Game Engine

Goal: the pure logic of the game, with no screen output yet. These functions read and change state. You'll test them from the console before touching the DOM — separating logic from display makes both easier to debug.

Start, shuffle, and advance

// --- ENGINE ---

// Fisher-Yates shuffle so each game differs. Returns a NEW array.
function shuffle(list) {
  const copy = [...list];
  for (let i = copy.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [copy[i], copy[j]] = [copy[j], copy[i]];  // swap via destructuring
  }
  return copy;
}

// Unique category names, derived from the data (never hard-coded).
function getCategories() {
  return [...new Set(QUESTIONS.map(q => q.category))];
}

// Begin a game. Pass a category, or null for "all categories".
function startGame(category = null) {
  const pool = category
    ? QUESTIONS.filter(q => q.category === category)
    : QUESTIONS;

  state = {
    questions: shuffle(pool),
    index: 0,
    score: 0,
    correct: 0,
    answered: false,
    over: false,
  };
}

// The question currently on screen.
function currentQuestion() {
  return state.questions[state.index];
}

// Advance to the next question, or end the game.
function advance() {
  if (state.index < state.questions.length - 1) {
    state.index++;
    state.answered = false;
  } else {
    state.over = true;
  }
}

Grade an answer

This is the heart of the loop: compare the player's choice to the correct answer, update the score, and guard against double-answering with the answered flag.

// Returns true if the answer was correct. Ignores repeat answers.
function submitAnswer(choice) {
  if (state.answered || state.over) return false;

  const q = currentQuestion();
  const isCorrect = choice === q.answer;

  if (isCorrect) {
    state.score += q.points;
    state.correct++;
  }
  state.answered = true;
  return isCorrect;
}

startGame('JavaScript');
currentQuestion().prompt;        // shows a JS question
submitAnswer(currentQuestion().answer);  // true — correct!
state.score;                     // 10 or 20
advance();
state.index;                     // 1

Milestone 3 — Render to the DOM

Goal: make it playable. Add the HTML shell, then write display functions that read state and paint the screen. The engine already works — this milestone only shows what it's doing.

The HTML shell

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Quiz</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main id="app">
    <div id="category-screen"></div>
    <div id="quiz-screen" hidden>
      <p id="progress"></p>
      <h2 id="prompt"></h2>
      <div id="options"></div>
      <p id="feedback"></p>
      <button id="next-btn" hidden>Next →</button>
    </div>
    <div id="results-screen" hidden></div>
  </main>
  <script src="quiz.js"></script>
</body>
</html>

Render functions

Each function grabs an element, reads state, and updates the page. Note the pattern: the DOM never stores game truth — it only reflects state.

// --- RENDER ---

function renderCategories() {
  const screen = document.getElementById('category-screen');
  screen.innerHTML = '<h1>Pick a category</h1>';

  [...getCategories(), 'All'].forEach(cat => {
    const btn = document.createElement('button');
    btn.textContent = cat;
    btn.addEventListener('click', () => {
      startGame(cat === 'All' ? null : cat);
      show('quiz-screen');
      renderQuestion();
    });
    screen.appendChild(btn);
  });
}

function renderQuestion() {
  const q = currentQuestion();
  document.getElementById('progress').textContent =
    `Question ${state.index + 1} of ${state.questions.length} · ${q.difficulty}`;
  document.getElementById('prompt').innerHTML = q.prompt;
  document.getElementById('feedback').textContent = '';
  document.getElementById('next-btn').hidden = true;

  const box = document.getElementById('options');
  box.innerHTML = '';
  q.options.forEach(opt => {
    const btn = document.createElement('button');
    btn.className = 'option';
    btn.innerHTML = opt;
    btn.addEventListener('click', () => handleChoice(opt, q.answer));
    box.appendChild(btn);
  });
}

function handleChoice(choice, answer) {
  const wasCorrect = submitAnswer(choice);
  const q = currentQuestion();
  const fb = document.getElementById('feedback');
  fb.textContent = (wasCorrect ? '✅ Correct! ' : '❌ Not quite. ') + q.explanation;

  // Lock the buttons so you can't answer twice.
  document.querySelectorAll('.option').forEach(b => b.disabled = true);
  document.getElementById('next-btn').hidden = false;
}

// Show one screen, hide the others.
function show(screenId) {
  ['category-screen', 'quiz-screen', 'results-screen'].forEach(id => {
    document.getElementById(id).hidden = (id !== screenId);
  });
}

// Wire up the Next button and kick things off.
document.getElementById('next-btn').addEventListener('click', () => {
  advance();
  if (state.over) { renderResults(); show('results-screen'); }
  else renderQuestion();
});

renderCategories();  // start the app

Milestone 4 — Scoring & Results

Goal: close the loop with a results screen that reports score, accuracy, and a performance message. This is where control flow shines — an if/else if ladder turns a raw percentage into human feedback.

// --- RESULTS ---

function performanceMessage(percent) {
  if (percent >= 90) return 'Outstanding — you know this cold!';
  if (percent >= 70) return 'Great work, solid understanding.';
  if (percent >= 50) return 'Good effort — keep practicing.';
  return 'Early days — review and try again!';
}

function renderResults() {
  const total = state.questions.length;
  const percent = Math.round((state.correct / total) * 100);

  document.getElementById('results-screen').innerHTML = `
    <h1>Game over</h1>
    <p>Score: <strong>${state.score}</strong> points</p>
    <p>Correct: ${state.correct} / ${total} (${percent}%)</p>
    <p>${performanceMessage(percent)}</p>
    <button id="again">Play again</button>
  `;

  document.getElementById('again').addEventListener('click', renderCategories);
  document.getElementById('again').addEventListener('click', () => show('category-screen'));
}

Game over
Score: 40 points
Correct: 3 / 5 (60%)
Good effort — keep practicing.
[ Play again ]

Milestone 5 — Polish & Extend

Goal: this is Polya's step 4 — review, then extend. Pick at least one extension and make it yours. This is what turns a followed tutorial into a project you can talk about.

Choose an extension

• Countdown timer — give each question 15 seconds; time-out counts as wrong.
• High score in localStorage — persist the best score across page reloads.
• More categories & questions — add your own subject (music, history, your hobby).
• Streak bonus — award extra points for consecutive correct answers.
• Difficulty filter — let the player choose easy / medium / hard.

Worked extension: a per-question timer

A timer is a great exercise in setInterval, closures, and cleanup. The trick beginners miss is clearing the interval so timers don't stack up.

let timerId = null;

function startTimer(seconds, onExpire) {
  let remaining = seconds;
  const label = document.getElementById('progress');

  clearInterval(timerId);            // cancel any previous timer
  timerId = setInterval(() => {
    remaining--;
    label.dataset.time = `⏱ ${remaining}s`;
    if (remaining <= 0) {
      clearInterval(timerId);
      onExpire();                    // e.g. auto-submit a wrong answer
    }
  }, 1000);
}

// When rendering a question:
//   startTimer(15, () => handleChoice('__timeout__', currentQuestion().answer));
// Remember to clearInterval(timerId) inside handleChoice so answering stops the clock.

Persist a high score

function saveHighScore(score) {
  const best = Number(localStorage.getItem('quizHighScore')) || 0;
  if (score > best) {
    localStorage.setItem('quizHighScore', String(score));
    return true;  // new record!
  }
  return false;
}
// Call saveHighScore(state.score) inside renderResults().

Completion Checklist

Tick every box before you call it done. Each one maps back to a fundamental from this module.

What Good Looks Like

Self-assessment is a skill. Grade your own project against this rubric — being honest here is worth more than any grade someone else gives you.

Summary & Quiz

📚 Further Reading

• MDN — JavaScript reference
• The Modern JavaScript Tutorial (javascript.info)
• Eloquent JavaScript (free online book)
• MDN — Document Object Model (DOM)

🚀 What's Next?

You've built a real program from raw fundamentals. Next we move up a level of abstraction into objects — how to create them with literals and constructors, the topic that will let you model richer things than a flat list of questions.