index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Subitizing Game</title>
<style>
  body { font-family: Arial, sans-serif; }
  #game-container { display: flex; position: relative; }
  #canvas { border: 1px solid black; width: 300px; height: 300px; margin-right: 20px; }
  #controls { display: flex; flex-direction: column; }
  .mode-btn { margin: 10px 0; }
  #guess { margin: 10px 0; width: 60px; }
  #feedback { margin: 10px 0; font-weight: bold; }
  #timer-container {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.1);
    padding: 4px 8px;
    border-radius: 4px;
    text-align: right;
    font-size: 0.9rem;
  }
  #avg-time {
    font-size: 0.8rem;
    color: #555;
  }
</style>
</head>
<body>

<h1>Subitizing Game</h1>

<div id="instructions">
  <p>Instructions:</p>
  <ul>
    <li>Select a mode: Perceptual or Conceptual.</li>
    <li>Look at the circles displayed in the box.</li>
    <li>Type your guess of the total number of circles and press Enter.</li>
    <li>If correct, a new problem will appear automatically!</li>
  </ul>
</div>

<div id="game-container">
  <canvas id="canvas" width="300" height="300"></canvas>
  <div id="timer-container">
    <div id="timer">Time: 0s</div>
    <div id="avg-time">Avg: 0s</div>
  </div>
  <div id="controls">
    <button id="perceptual-btn" class="mode-btn">Perceptual Mode</button>
    <button id="conceptual-btn" class="mode-btn">Conceptual Mode</button>
    <input type="number" id="guess" placeholder="Guess">
    <div id="feedback"></div>
  </div>
</div>

<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const guessInput = document.getElementById('guess');
  const feedback = document.getElementById('feedback');
  const timerDisplay = document.getElementById('timer');
  const avgTimeDisplay = document.getElementById('avg-time');

  let mode = null;
  let correctAnswer = 0;
  const radius = 17; // bigger circles
  const minDistance = radius * 2 + 4; // adjust spacing for new radius
  let timer = 0;
  let timerInterval;
  let times = []; // store times for average

  document.getElementById('perceptual-btn').addEventListener('click', () => {
    mode = 'perceptual';
    startGame();
  });

  document.getElementById('conceptual-btn').addEventListener('click', () => {
    mode = 'conceptual';
    startGame();
  });

  guessInput.addEventListener('keyup', (e) => {
    if (e.key === 'Enter') {
      checkAnswer();
    }
  });

  function startGame() {
    generateProblem();
    feedback.textContent = '';
    guessInput.value = '';
    guessInput.focus();
    startTimer();
  }

  function generateProblem() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (mode === 'perceptual') {
      correctAnswer = getRandomInt(1, 5);
      const positions = generateNonOverlappingPositions(correctAnswer);
      drawCircles(positions, '#1A85FF');
    } else if (mode === 'conceptual') {
      correctAnswer = getRandomInt(6, 8);
      const redCount = getRandomInt(1, correctAnswer - 1);
      const blueCount = correctAnswer - redCount;

      const allPositions = generateNonOverlappingPositions(correctAnswer);
      const bluePositions = allPositions.slice(0, blueCount);
      const pinkPositions = allPositions.slice(blueCount);

      drawCircles(bluePositions, '#1A85FF');
      drawCircles(pinkPositions, '#D41159');
    }
  }

  function generateNonOverlappingPositions(count) {
    const positions = [];
    let tries = 0;
    const maxTries = 5000;

    while (positions.length < count && tries < maxTries) {
      let x = getRandomInt(radius, canvas.width - radius);
      let y = getRandomInt(radius, canvas.height - radius);
      let isFarEnough = true;

      for (let p of positions) {
        if (Math.hypot(p.x - x, p.y - y) < minDistance) {
          isFarEnough = false;
          break;
        }
      }

      if (isFarEnough) {
        positions.push({ x, y });
      }
      tries++;
    }

    // Fallback in case of too tight constraints
    while (positions.length < count) {
      positions.push({
        x: getRandomInt(radius, canvas.width - radius),
        y: getRandomInt(radius, canvas.height - radius)
      });
    }

    return positions;
  }

  function drawCircles(positions, color) {
    positions.forEach(pos => {
      ctx.beginPath();
      ctx.arc(pos.x, pos.y, radius, 0, 2 * Math.PI, false);
      ctx.fillStyle = color;
      ctx.fill();
      ctx.closePath();
    });
  }

  function checkAnswer() {
    const guess = parseInt(guessInput.value);
    if (guess === correctAnswer) {
      feedback.textContent = '✔️ Correct!';
      stopTimer();
      times.push(timer);
      updateAverageTime();
      setTimeout(() => {
        generateProblem();
        feedback.textContent = '';
        guessInput.value = '';
        guessInput.focus();
        startTimer();
      }, 500);
    } else {
      feedback.textContent = `❌ Incorrect. Try again!`;
      guessInput.focus();
    }
  }

  function startTimer() {
    timer = 0;
    timerDisplay.textContent = 'Time: 0s';
    clearInterval(timerInterval);
    timerInterval = setInterval(() => {
      timer++;
      timerDisplay.textContent = `Time: ${timer}s`;
    }, 1000);
  }

  function stopTimer() {
    clearInterval(timerInterval);
  }

  function updateAverageTime() {
    const sum = times.reduce((a, b) => a + b, 0);
    const avg = (sum / times.length).toFixed(1);
    avgTimeDisplay.textContent = `Avg: ${avg}s`;
  }

  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
</script>

</body>
</html>