/* quiz section */ .quiz-section background: white; border-radius: 2rem; padding: 2rem; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); margin-top: 1rem;

function updateScoreDisplay() let correctCount = 0; for (let i = 0; i < questions.length; i++) if (userAnswers[i] !== null && userAnswers[i] === questions[i].correct) correctCount++; const scoreEl = document.getElementById('scoreDisplay'); if (scoreEl) scoreEl.innerText = `Score: $correctCount / $questions.length`;

.fact-list li::before content: "📐"; position: absolute; left: 0; top: 0;

.reset-btn:hover background: #1f5e7a; transform: scale(0.97);

// build options with highlight style (show selected if any) let optionsHtml = ''; q.options.forEach((opt, optIdx) => let additionalClass = ''; let isSelected = (selectedIdx === optIdx); // optional: subtle background if correct answer (but we keep clean) optionsHtml += `<button class="option-btn" data-qidx="$i" data-oidx="$optIdx" style="$isSelected ? 'background:#d4e3f0; border-color:#1f6e8c;' : ''">$String.fromCharCode(65+optIdx). $opt</button>`; );

// Additional: interactive cheat sheet hover effect? not needed but nice // just to add an easter egg: console message console.log("📐 Geometry Lessons Review loaded — keep practicing proofs!"); </script> </body> </html>

.fact-list li margin-bottom: 0.7rem; padding-left: 1.6rem; position: relative;