Feature/quiz feedback 704

[SouparnaChatterjee]

Feature/quiz-feedback-704
Enhance Pop Quiz Feedback: Correct/Incorrect Messages, Explanations & Try Again (#704)

Fixes #704

Changes done:

• Added congratulatory messages for correct answers with explanations
• Added hints for incorrect answers
• Implemented "Try Again" button to reset quiz selection
• Added animations for correct/incorrect selections
• Supported both light and dark themes
• Disabled other options after selection

Screenshots / Demo

Before:

After:
https://github.com/user-attachments/assets/c94b39dc-228f-494d-b56c-4939331fafe7

Summary by CodeRabbit

• New Features

  • Added quiz feedback blocks showing per-answer explanations and clear correct/incorrect indication.
  • Added a reset button to retry answered questions and restored interactivity.

• Style

  • Added entry animations for correct (pulse) and incorrect (shake) responses.
  • Added dark-mode styling and improved spacing/typography for feedback.
  • Smooth scroll to revealed feedback for better focus.

[coderabbitai]

Walkthrough

Adds a new quiz feedback stylesheet and imports it into both light and dark theme SCSS files. Reworks quiz behavior in assets/js/quiz.js: collects answers from ordered/unordered lists with per-answer feedback, replaces inline handlers with a delegated ShowQuizAnswer(event) handler, and adds ResetQuiz(questionContainer) and escapeHtml(text). The script now renders a dedicated feedback container after answer selection, disables other options, and can auto-scroll to feedback.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Feature/quiz feedback 704' directly references the issue number and describes the feature being implemented (quiz feedback), clearly conveying the primary change.
Linked Issues check	✅ Passed	The PR successfully implements all requirements from issue #704: feedback messages for correct/incorrect answers, explanations, hints, reset button, animations, and dark theme support.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing quiz feedback functionality; the README cleanup is a minor ancillary fix.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (4)

README.md (1)

197-198: Copyright year bump looks good

The update to 2025 is consistent with the rest of the PR; no issues from a code/doc standpoint. As a follow‑up (not blocking), you may want to later extend the “Pop Quizzes” section above to mention the new per‑answer explanations/hints format so authors know how to provide them.

_sass/quiz-feedback.scss (1)

5-33: Answered/disabled answer states and correctness styling align with JS behavior

The .answered and .quiz-disabled rules correctly reinforce the JS logic (no re‑selection, dimmed alternatives, clear correct/incorrect highlighting). There is a small overlap between .quiz-question.answered .quiz-answer and .quiz-answer.quiz-disabled opacity handling, but it’s benign; you can keep it as‑is or consolidate later for tidiness.

assets/js/quiz.js (2)

83-149: ShowQuizAnswer flow matches the new UX (lock answers, show feedback, allow retry)

The event-based ShowQuizAnswer correctly locks the question after one selection, visually distinguishes the chosen answer, disables the rest, and displays either an explanation or hint plus a “Try Again” button, then scrolls to the feedback. The use of scrollIntoView with smooth behavior is a reasonable enhancement; if it’s unsupported the feedback still appears, so there’s no functional blocker here.

---

151-172: ResetQuiz and escapeHtml utilities are appropriate and align with the new flow

ResetQuiz cleanly restores the question to its initial state (removing answered/disabled/show‑answer classes and clearing feedback), which pairs well with the “Try Again” button, and escapeHtml is correctly implemented for the characters relevant to your feedback/answer text. Once you escape the answer text when rendering options, this helper will fully centralize your safety guarantees.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6a01b5d and cb6b6e8.

📒 Files selected for processing (6)

• README.md (1 hunks)
• _sass/quiz-feedback.scss (1 hunks)
• about.md (1 hunks)
• assets/css/just-the-docs-circuitverse.scss (1 hunks)
• assets/css/just-the-docs-circuitversedark.scss (1 hunks)
• assets/js/quiz.js (3 hunks)

🔇 Additional comments (6)

about.md (1)

10-10: About page copyright year update is correct

The 2025 copyright line aligns with README and the project state; no additional changes needed here.

assets/css/just-the-docs-circuitversedark.scss (1)

7-9: Dark theme import order for quiz feedback looks correct

Adding @import "quiz-feedback"; at the end ensures the new quiz feedback styles (including dark‑mode overrides) are available and can override earlier rules where needed. No issues here.

assets/css/just-the-docs-circuitverse.scss (1)

3-5: Quiz feedback styles correctly wired into light theme

Importing quiz-feedback at the end of the light theme stylesheet is appropriate and keeps feedback visuals consistent with the dark theme integration.

_sass/quiz-feedback.scss (2)

34-129: Animations, feedback box, and reset button styles are cohesive

The pulse/shake and fade‑in animations, feedback box styling, and reset button states form a clear, consistent feedback UI. Focus styles are left to browser defaults, which keeps keyboard accessibility intact; no blocking issues here.

---

131-158: Dark‑mode overrides correctly target feedback and answer states

The body.dark-mode overrides for feedback boxes and shown correct/incorrect answers map cleanly to the classes used in the JS and should preserve contrast on dark backgrounds. This integration looks sound.

assets/js/quiz.js (1)

65-80: No legacy ShowQuizAnswer calls found—event binding migration is complete

Verification confirms the transition was done correctly. The function is defined with signature ShowQuizAnswer(event) at line 83, extracting the element via event.currentTarget. The only reference in the entire codebase is the proper event binding at line 79 via $('.quiz-answer').on('click', ShowQuizAnswer). No direct calls with element arguments remain.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

_sass/quiz-feedback.scss (1)

87-99: Consider a reduced-motion fallback for animation accessibility.

Nice animation touch, but users with reduced-motion preferences should get a non-animated experience.

♿ Suggested enhancement

 `@keyframes` incorrect-shake {
@@
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .feedback-correct,
+  .feedback-incorrect {
+    animation: none;
+  }
+}

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: eb8b0374-e839-4b80-95df-688e498fcc52

📥 Commits

Reviewing files that changed from the base of the PR and between d42f91c and eec1cc3.

📒 Files selected for processing (1)

• _sass/quiz-feedback.scss