Feature/quiz feedback 704#736
Conversation
- Add congratulatory messages for correct answers with explanations - Add hints for incorrect answers - Implement Try Again button to reset quiz - Add animations for correct/incorrect selections - Support both light and dark themes - Disable other options after selection Closes CircuitVerse#704
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
WalkthroughThis pull request implements a quiz feedback system that delivers immediate, interactive responses to student answers. It introduces a new SCSS partial with feedback block styling, animation states, and dark-mode support. The JavaScript logic extracts correct and incorrect answers alongside explanation text from the HTML markup, renders them with sanitized feedback data attributes, and handles answer clicks via event delegation. When a user selects an answer, the system displays a feedback block indicating correctness, shows the associated explanation or hint, disables further responses, and provides a "Try Again" button to reset the question. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
README.md (1)
197-198: Copyright year bump looks goodThe 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 behaviorThe
.answeredand.quiz-disabledrules correctly reinforce the JS logic (no re‑selection, dimmed alternatives, clear correct/incorrect highlighting). There is a small overlap between.quiz-question.answered .quiz-answerand.quiz-answer.quiz-disabledopacity 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
ShowQuizAnswercorrectly 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 ofscrollIntoViewwith 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
ResetQuizcleanly restores the question to its initial state (removing answered/disabled/show‑answer classes and clearing feedback), which pairs well with the “Try Again” button, andescapeHtmlis 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
📒 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 correctThe 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 correctAdding
@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 themeImporting
quiz-feedbackat 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 cohesiveThe 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 statesThe
body.dark-modeoverrides 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 legacyShowQuizAnswercalls found—event binding migration is completeVerification confirms the transition was done correctly. The function is defined with signature
ShowQuizAnswer(event)at line 83, extracting the element viaevent.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.
There was a problem hiding this comment.
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
📒 Files selected for processing (1)
_sass/quiz-feedback.scss
magic-peach
left a comment
magic-peach
left a comment
There was a problem hiding this comment.
The core feedback logic is good — disable-on-answer, show correct answer on wrong selection, Try Again reset, dark mode support all work as intended.
Two things to fix before merge:
-
The README.md change (removing a trailing newline) is unrelated to this PR. Please revert it — it makes the diff noisy and can conflict with other PRs touching that file.
-
Correct answers will now always render before incorrect ones because
ol(correct) is processed beforeul(incorrect). On every quiz in the book the right answer will visually appear at the top of the options list, which makes quizzes trivially easy to game. The original code had the same ordering issue in reverse — worth shuffling theanswersarray before rendering so option order is randomised.
|
@Nihal4777 LGTM |
3 participants
Feature/quiz-feedback-704
Enhance Pop Quiz Feedback: Correct/Incorrect Messages, Explanations & Try Again (#704)
Fixes #704
Changes done:
Screenshots / Demo
Before:
After:
https://github.com/user-attachments/assets/c94b39dc-228f-494d-b56c-4939331fafe7
Summary by CodeRabbit
Release Notes
New Features
Style