From b5bf5118071366e9f6a1bc376033958e968e4711 Mon Sep 17 00:00:00 2001 From: Rugved Chavan Date: Tue, 28 Oct 2025 18:36:40 +0530 Subject: [PATCH 1/3] Made minor fixes to the UI, made text visible --- src/pages/Trivia.jsx | 42 ++++++++++++++++++++++++++---------------- 1 file changed, 26 insertions(+), 16 deletions(-) diff --git a/src/pages/Trivia.jsx b/src/pages/Trivia.jsx index 99ea430..44b39df 100644 --- a/src/pages/Trivia.jsx +++ b/src/pages/Trivia.jsx @@ -2,20 +2,20 @@ * TRIVIA QUIZ DASHBOARD TODOs * --------------------------- * Easy: - * - [ ] Add difficulty selector (easy/medium/hard) - * - [ ] Indicate correct answer after selection (current partially does w/ classes; improve UX) - * - [ ] Add next question button instead of showing all - * - [ ] Shuffle category list order + * - [ ] Add difficulty selector (easy/medium/hard) + * - [ ] Indicate correct answer after selection (current partially does w/ classes; improve UX) + * - [ ] Add next question button instead of showing all + * - [ ] Shuffle category list order * Medium: - * - [ ] Timer per question + bonus points for speed - * - [ ] Show progress bar (questions answered / total) - * - [x] Local high score persistence - * - [ ] Review mode (see all answers after completion) + * - [ ] Timer per question + bonus points for speed + * - [ ] Show progress bar (questions answered / total) + * - [x] Local high score persistence + * - [ ] Review mode (see all answers after completion) * Advanced: - * - [ ] Question set builder (choose amount, difficulty, category) - * - [ ] Accessibility: better focus states & keyboard answer selection - * - [ ] Multiplayer / shared score (stub for future) - * - [ ] Extract quiz logic into hook (useQuiz) for reuse/testing + * - [ ] Question set builder (choose amount, difficulty, category) + * - [ ] Accessibility: better focus states & keyboard answer selection + * - [ ] Multiplayer / shared score (stub for future) + * - [ ] Extract quiz logic into hook (useQuiz) for reuse/testing */ import { useEffect, useState, useRef } from 'react'; @@ -295,20 +295,26 @@ export default function Trivia() { background: #d1ecf1; } - .answer-button.result-correct { + /* --- FIX: Changed from .answer-button.result-correct to .result-correct --- */ + .result-correct { border-color: #28a745; background: #d4edda; color: #155724; } - .answer-button.result-wrong { + /* --- FIX: Changed from .answer-button.result-wrong to .result-wrong --- */ + .result-wrong { border-color: #dc3545; background: #f8d7da; color: #721c24; } - .answer-button.result-neutral { - opacity: 0.6; + /* --- FIX: Changed from .answer-button.result-neutral to .result-neutral --- */ + /* --- FIX: Removed opacity: 0.6 and set solid colors --- */ + .result-neutral { + opacity: 1; + color: #6c757d; + background: #f8f9fa; } .btn-primary { @@ -443,6 +449,8 @@ export default function Trivia() { font-size: 14px; background: white; cursor: pointer; + /* --- FIX: Added dark color for dropdown text --- */ + color: #333; } .results-container { @@ -482,6 +490,8 @@ export default function Trivia() { margin: 8px 0; border-radius: 8px; border: 2px solid #ddd; + /* --- FIX: Added default dark color --- */ + color: #333; } `} From e03558b75a3a830579fbe99dc393200c8f275d11 Mon Sep 17 00:00:00 2001 From: Rugved Chavan Date: Tue, 28 Oct 2025 18:45:29 +0530 Subject: [PATCH 2/3] Made 'Category' and 'Difficulty' visible --- src/pages/Trivia.jsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/pages/Trivia.jsx b/src/pages/Trivia.jsx index 44b39df..9564a84 100644 --- a/src/pages/Trivia.jsx +++ b/src/pages/Trivia.jsx @@ -295,22 +295,18 @@ export default function Trivia() { background: #d1ecf1; } - /* --- FIX: Changed from .answer-button.result-correct to .result-correct --- */ .result-correct { border-color: #28a745; background: #d4edda; color: #155724; } - /* --- FIX: Changed from .answer-button.result-wrong to .result-wrong --- */ .result-wrong { border-color: #dc3545; background: #f8d7da; color: #721c24; } - /* --- FIX: Changed from .answer-button.result-neutral to .result-neutral --- */ - /* --- FIX: Removed opacity: 0.6 and set solid colors --- */ .result-neutral { opacity: 1; color: #6c757d; @@ -438,8 +434,10 @@ export default function Trivia() { display: flex; flex-direction: column; gap: 5px; - font-weight: 600; - color: #1e4d6b; + /* --- FIX: Made bolder and darker --- */ + font-weight: 700; + color: light-white; + font-size: 15px; } .controls-section select { @@ -449,7 +447,6 @@ export default function Trivia() { font-size: 14px; background: white; cursor: pointer; - /* --- FIX: Added dark color for dropdown text --- */ color: #333; } @@ -490,7 +487,6 @@ export default function Trivia() { margin: 8px 0; border-radius: 8px; border: 2px solid #ddd; - /* --- FIX: Added default dark color --- */ color: #333; } `} From 2fe64ec813f9cf47f529c8866a12cf982c9d1644 Mon Sep 17 00:00:00 2001 From: Rugved Chavan Date: Tue, 28 Oct 2025 18:47:26 +0530 Subject: [PATCH 3/3] Made question visible --- src/pages/Trivia.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Trivia.jsx b/src/pages/Trivia.jsx index 9564a84..2835a1a 100644 --- a/src/pages/Trivia.jsx +++ b/src/pages/Trivia.jsx @@ -572,7 +572,7 @@ export default function Trivia() { style={{ width: `${progressPercent}%` }} > -

+

Question {currentQuestionIndex + 1} of {questions.length}