Update index.html

index.html

@@ -66,6 +66,31 @@
             font-weight: bold;
             color: #0078D4;
         }
+        .answer-btn {
+            margin: 10px;
+            padding: 15px 20px;
+            font-size: 18px;
+            cursor: pointer;
+            display: block;
+            width: 100%;
+            max-width: 300px;
+            text-align: center;
+            border: 2px solid #005a9e;
+            border-radius: 5px;
+            background-color: #0078D4;
+            color: #fff;
+            font-weight: bold;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .answer-btn:hover {
+            background-color: #005a9e;
+            color: #f0f0f0;
+        }
+        .answer-btn.disabled {
+            background-color: #cccccc;
+            color: #666;
+            cursor: not-allowed;
+        }
         .feedback {
             margin-top: 10px;
             font-size: 18px;
@@ -159,6 +184,8 @@
             const isCorrect = selectedAnswer === question.correct;
             const value = (difficulty + 1) * 100;
 
+            document.querySelectorAll('.answer-btn').forEach(btn => btn.classList.add('disabled'));
+
             if (isCorrect) {
                 score += value;
                 questionDisplay.innerHTML += `<p class="feedback" style="color: green;">Correct! You earned $${value}.</p>`;