THE-MATH-GAME

Amey-Thakur · Amey-Thakur · commit 305b80ceb97d · 2026-01-15T01:43:30.000-05:00
diff --git a/Source Code/css/style.css b/Source Code/css/style.css
@@ -16,6 +16,11 @@
     box-sizing: border-box;
 }
 
+/*
+  Body Background:
+  Uses a radial-gradient() for a dynamic, visually appealing background.
+  The gradient creates a spotlight effect, transitioning from white (#fff) at the center to grey (#ccc) at the edges.
+*/
 body {
     width: 100%;
     height: 100vh;
@@ -102,6 +107,12 @@ h1 {
     justify-content: space-between;
 }
 
+/*
+  Answer Box Styling:
+  Flexbox column layout with centered content.
+  CSS transition provides smooth hover/active state animations.
+  The 'cursor: pointer' and ':hover'/':active' pseudo-classes enhance user interaction feedback.
+*/
 .box {
     width: 85px;
     height: 85px;
diff --git a/Source Code/index.html b/Source Code/index.html
@@ -21,6 +21,11 @@
 
 <body>
     <h1>The Math Game</h1>
+    <!-- 
+        Main Game Container:
+        Houses all game UI elements including score, question display,
+        answer choices, start/reset button, and timer.
+    -->
     <div id="container">
         <div id="score">
             Score : <span id="scorevalue">0</span>
@@ -37,6 +42,11 @@ <h1>The Math Game</h1>
         <div id="instruction">
             Click on the Correct Answer
         </div>
+        <!-- 
+            Answer Choices:
+            Four answer boxes displayed using Flexbox layout.
+            Only one contains the correct answer; the rest are random distractors.
+        -->
         <div id="choices">
             <div id="box1" class="box"></div>
             <div id="box2" class="box"></div>
diff --git a/Source Code/js/script.js b/Source Code/js/script.js
@@ -8,6 +8,9 @@
  * Repository: https://github.com/Amey-Thakur/THE-MATH-GAME
  * License: MIT
  */
+// Game State Variables
+// Tracks whether the game is active, the current score, the timer interval reference,
+// the remaining time, and the correct answer for the current question.
 var playing = false;
 var score = 0;
 var action;
@@ -79,6 +82,12 @@ for (let i = 1; i < 5; i++) {
     }
 }
 
+/**
+ * Countdown Timer Implementation
+ * Uses setInterval() to decrement the time every 1000ms (1 second).
+ * When time reaches zero, the game ends: score is displayed, UI is reset,
+ * and the game state is set to 'not playing'.
+ */
 function startCountdown() {
     action = setInterval(() => {
         //reduce time by 1sec in loops
@@ -120,6 +129,13 @@ function showElement(Id) {
     document.querySelector("#" + Id).style.display = "block";
 }
 
+/**
+ * Question & Answer Generation Algorithm
+ * Generates two random single-digit numbers (1-9) and calculates their product.
+ * Places the correct answer in a randomly selected box (1-4).
+ * Fills remaining boxes with unique wrong answers using a do-while loop
+ * to avoid duplicates (preventing identical distractor values).
+ */
 function generateQA() {
     //generating random number between 1-9
     var x = 1 + Math.round(9 * Math.random());
