Interactive zone

Practice studio

Terminal Code Quest, flashcards, timed drill, bilingual glossary, bookmarks and progress export.

Mission terminal

Mission 1 — Clicker score

The mini-game shows a score of 0. Implement addScore() and updateDisplay() so each click increments the counter.

✓ addScore() function✓ Increments score✓ updateDisplay() function✓ Updates the DOM

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Alfred Clicker</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0; min-height: 100vh; display: grid; place-items: center;
      font-family: system-ui, sans-serif;
      background: linear-gradient(160deg, #0b1f1c, #0f7f78);
      color: #f4faf9;
    }
    .card {
      text-align: center; padding: 2rem; border-radius: 1.25rem;
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
      box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    }
    h1 { margin: 0 0 0.5rem; font-size: 1.5rem; }
    #score-display { font-size: 3rem; font-weight: 800; color: #5eead4; margin: 1rem 0; }
    button {
      border: none; border-radius: 999px; padding: 0.85rem 1.6rem;
      font-weight: 700; cursor: pointer; background: #14b8a6; color: #0b1f1c;
    }
    button:active { transform: scale(0.97); }
  </style>
</head>
<body>
  <div class="card">
    <h1>🎯 Alfred Clicker</h1>
    <p>Clique pour marquer des points !</p>
    <div id="score-display">0</div>
    <button id="click-btn" type="button">+1 point</button>
  </div>
  <script>
    let score = 0;

    function addScore() {
      // TODO: ajoute 1 au score
    }

    function updateDisplay() {
      // TODO: affiche score dans #score-display
    }

    document.getElementById("click-btn").addEventListener("click", () => {
      addScore();
      updateDisplay();
    });
  </script>
</body>
</html>

alfred@mission ~ output

$ The mini-game shows a score of 0. Implement addScore() and updateDisplay() so each click increments the counter.

0/3 missions completed ·