Update index.html

index.html

@@ -66,14 +66,16 @@
             font-weight: bold;
             color: #0078D4;
         }
+        .answer-container {
+            display: flex;
+            justify-content: center;
+            margin-top: 20px;
+        }
         .answer-btn {
-            margin: 10px;
-            padding: 15px 20px;
+            margin: 5px;
+            padding: 10px 15px;
             font-size: 18px;
             cursor: pointer;
-            display: block;
-            width: 100%;
-            max-width: 300px;
             text-align: center;
             border: 2px solid #005a9e;
             border-radius: 5px;
@@ -171,7 +173,7 @@
             questionDisplay.innerHTML = `
                 <h2>${categories[category]} for $${(difficulty + 1) * 100}</h2>
                 <p>${question.q}</p>
-                ${answerHtml}
+                <div class="answer-container">${answerHtml}</div>
             `;
             cardElement.classList.add('disabled');
             cardElement.style.backgroundColor = '#cccccc';
@@ -184,7 +186,11 @@
             const isCorrect = selectedAnswer === question.correct;
             const value = (difficulty + 1) * 100;
 
-            document.querySelectorAll('.answer-btn').forEach(btn => btn.classList.add('disabled'));
+            // Disable all answer buttons
+            document.querySelectorAll('.answer-btn').forEach(btn => {
+                btn.disabled = true;
+                btn.classList.add('disabled');
+            });
 
             if (isCorrect) {
                 score += value;