Learn Phonics Game

by Venkatesh Dematti

HTML

<h1>Learn Phonics!</h1>
  <p id="instruction">Click the letter that makes this sound:</p>
  <p id="phonics-sound" style="font-size: 28px; color: #007bff;">"Ah"</p>
  <div id="buttons"></div>
  <p id="message" class="message"></p>

CSS

body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 0;
      padding: 0;
    }
    h1 {
      color: #333;
    }
    .button {
      display: inline-block;
      margin: 10px;
      padding: 20px;
      background-color: #f0a500;
      border: none;
      border-radius: 10px;
      font-size: 24px;
      color: white;
      cursor: pointer;
      transition: 0.3s;
    }
    .button:hover {
      background-color: #ff7f11;
    }
    .message {
      font-size: 20px;
      font-weight: bold;
    }

JavaScript

const instruction = document.getElementById('instruction');
    const phonicsSound = document.getElementById('phonics-sound');
    const buttonsContainer = document.getElementById('buttons');
    const message = document.getElementById('message');

    // Map of letter sounds
    const phonicsMap = {
      A: "Ah",
      B: "Buh",
      C: "Cuh",
      D: "Duh",
      E: "Eh",
      F: "Fuh",
      G: "Guh",
      H: "Huh",
      I: "Ih",
      J: "Juh",
      K: "Kuh",
      L: "Luh",
      M: "Muh",
      N: "Nuh",
      O: "Oh",
      P: "Puh",
      Q: "Kwuh",
      R: "Ruh",
      S: "Suh",
      T: "Tuh",
      U: "Uh",
      V: "Vuh",
      W: "Wuh",
      X: "Ks",
      Y: "Yuh",
      Z: "Zuh"
    };

    // Generate a random letter and its sound
    const createGame = () => {
      // Clear message and buttons
      message.textContent = '';
      buttonsContainer.innerHTML = '';

      // Select a random letter and sound
      const letters = Object.keys(phonicsMap);
      const targetLetter = letters[Math.floor(Math.random() * letters.length)];
      const targetSound = phonicsMap[targetLetter];

      // Display the sound
      phonicsSound.textContent = `"${targetSound}"`;

      // Create 4 options (one correct, 3 random)
      const options = new Set([targetLetter]);
      while (options.size < 4) {
        const randomLetter = letters[Math.floor(Math.random() * letters.length)];
        options.add(randomLetter);
      }

      // Shuffle options
      const shuffledOptions = Array.from(options).sort(() => Math.random() - 0.5);

      // Generate buttons
      shuffledOptions.forEach(letter => {
        const button = document.createElement('button');
        button.textContent = letter;
        button.className = 'button';
        button.onclick = () => {
          if (letter === targetLetter) {
            message.textContent = 'Correct! 🎉';
            message.style.color = 'green';
            setTimeout(createGame, 1500); // Start new game...