Feature/quiz feedback 704

README.md

@@ -195,4 +195,3 @@ In addition to these plugins, Interactive book also inherit's all the plugins us
 ### Create, Contribute, Learn, and succeed with CircuitVerse!!!
 
 Interactive-Book is © 2026 by [CircuitVerse](https://circuitverse.org/)
-

_sass/quiz-feedback.scss

@@ -0,0 +1,100 @@
+// Quiz feedback styles
+
+$color-correct-bg: #d4edda;
+$color-correct-border: #28a745;
+$color-correct-text: #155724;
+$color-incorrect-bg: #f8d7da;
+$color-incorrect-border: #dc3545;
+$color-incorrect-text: #721c24;
+$color-reset-bg: #6c757d;
+$color-reset-hover: #5a6268;
+$color-reset-text: #ffffff;
+$color-dark-correct-bg: #1e3a28;
+$color-dark-correct-border: #28a745;
+$color-dark-correct-text: #7fdb9f;
+$color-dark-incorrect-bg: #3a1e1e;
+$color-dark-incorrect-border: #dc3545;
+$color-dark-incorrect-text: #f5b7bd;
+$color-dark-shadow: rgba(255, 255, 255, 0.1);
+
+// Correct answer styling
+.feedback-correct {
+  animation: correct-pulse 0.5s ease;
+  background-color: $color-correct-bg;
+  border: 1px solid $color-correct-border;
+  border-radius: 4px;
+  color: $color-correct-text;
+  margin-top: 0.5rem;
+  padding: 0.75rem;
+}
+
+// Incorrect answer styling
+.feedback-incorrect {
+  animation: incorrect-shake 0.5s ease;
+  background-color: $color-incorrect-bg;
+  border: 1px solid $color-incorrect-border;
+  border-radius: 4px;
+  color: $color-incorrect-text;
+  margin-top: 0.5rem;
+  padding: 0.75rem;
+}
+
+// Feedback message
+.feedback-message {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  margin-bottom: 1rem;
+}
+
+// Reset button
+.quiz-reset-btn {
+  background-color: $color-reset-bg;
+  border: 0;
+  border-radius: 4px;
+  color: $color-reset-text;
+  cursor: pointer;
+  font-size: 0.9rem;
+  padding: 0.5rem 1rem;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: $color-reset-hover;
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+// Dark mode adjustments
+.dark-mode {
+  .feedback-correct {
+    background-color: $color-dark-correct-bg;
+    border-color: $color-dark-correct-border;
+    color: $color-dark-correct-text;
+  }
+
+  .feedback-incorrect {
+    background-color: $color-dark-incorrect-bg;
+    border-color: $color-dark-incorrect-border;
+    color: $color-dark-incorrect-text;
+  }
+
+  .quiz-feedback {
+    box-shadow: 0 2px 8px $color-dark-shadow;
+  }
+}
+
+// Animations
+@keyframes correct-pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.02); }
+  100% { transform: scale(1); }
+}
+
+@keyframes incorrect-shake {
+  0% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  75% { transform: translateX(5px); }
+  100% { transform: translateX(0); }
+}

assets/css/just-the-docs-circuitverse.scss

@@ -1,3 +1,5 @@
 ---
 ---
 {% include css/just-the-docs.scss.liquid color_scheme="circuitverse" %}
+
+@import "quiz-feedback";

assets/css/just-the-docs-circuitversedark.scss

@@ -4,4 +4,6 @@
 
 .text-grey-dk-100 {
     color: white!important;
-}
+}
+
+@import "quiz-feedback";

assets/js/quiz.js

@@ -15,16 +15,31 @@ $(function() {
             question.append('<em>Question ' + questionNo + '</em>');
             question.append('<p>' + questionText + '</p>');
 
-            // Get answers
             var answers = [];
-            $(this).find('ul').each(function() {
+
+            // Correct answers from <ol> with explanations
+            $(this).find('ol').each(function() {
                 $(this).children('li').each(function() {
-                    answers.push([false, $(this).contents().get(0).nodeValue.trim()]);
+                    // Extract visible answer text, excluding any <em> explanation node
+                    var $li = $(this).clone();
+                    $li.children('em').remove();
+                    var text = $li.text().trim();
+                    var explanation = $(this).find('em').text() ||
+                        "Correct! Well done.";
+                    answers.push([true, text, explanation]);
                 });
             });
-            $(this).find('ol').each(function() {
+
+            // Incorrect answers from <ul> with hints
+            $(this).find('ul').each(function() {
                 $(this).children('li').each(function() {
-                    answers.push([true, $(this).contents().get(0).nodeValue.trim()]);
+                    // Extract visible answer text, excluding any <em> hint node
+                    var $li = $(this).clone();
+                    $li.children('em').remove();
+                    var text = $li.text().trim();
+                    var hint = $(this).find('em').text() ||
+                        "That's not correct. Try again!";
+                    answers.push([false, text, hint]);
                 });
             });
 
@@ -42,25 +57,121 @@ $(function() {
                     classes += 'quiz-false';
                 }
 
-                questionAnswers.append('<div class="' + classes + '" onclick="ShowQuizAnswer(this)">' +
-                answer[1] +
-                '</div>');
+                var answerDiv = $('<div class="' + classes + '" data-feedback="' +
+                    escapeHtml(answer[2]) + '">' +
+                    escapeHtml(answer[1]) +
+                    '</div>');
+
+                questionAnswers.append(answerDiv);
             });
+
+            // Add feedback container
+            var feedbackContainer = $('<div class="quiz-feedback-container"></div>');
+
             question.append(questionAnswers);
+            question.append(feedbackContainer);
 
             quiz.append(question);
         });
 
         quizSettings.after('<br>');
         quizSettings.after(quiz);
         quizSettings.remove();
+
+        // Attach click handlers after DOM insertion
+        $('.quiz-answer').on('click', ShowQuizAnswer);
     }
 });
 
-function ShowQuizAnswer(element) {
-    if (!$(element).hasClass('quiz-show-answer')) {
-        $(element).addClass('quiz-show-answer');
+function ShowQuizAnswer(event) {
+    var element = $(event.currentTarget);
+    var questionContainer = element.closest('.quiz-question');
+    var allAnswers = questionContainer.find('.quiz-answer');
+    var feedbackContainer = questionContainer.find('.quiz-feedback-container');
+
+    // Prevent re-selection
+    if (questionContainer.hasClass('answered')) {
+        return;
+    }
+
+    // Mark question as answered
+    questionContainer.addClass('answered');
+
+    // Show the selected answer
+    if (!element.hasClass('quiz-show-answer')) {
+        element.addClass('quiz-show-answer');
     }
+
+    // Disable all other answers
+    allAnswers.not(element).addClass('quiz-disabled');
+
+    // Determine if correct or incorrect
+    var isCorrect = element.hasClass('quiz-true');
+    var feedbackText = element.data('feedback');
+
+    // Create and show feedback
+    var feedbackDiv = $('<div class="quiz-feedback"></div>');
+
+    if (isCorrect) {
+        feedbackDiv.addClass('feedback-correct');
+        feedbackDiv.html(
+            '<div class="feedback-header">' +
+                '<span class="feedback-icon">&#10003;</span>' +
+                '<span class="feedback-title">Correct!</span>' +
+            '</div>' +
+            '<div class="feedback-message">' + feedbackText + '</div>'
+        );
+    } else {
+        feedbackDiv.addClass('feedback-incorrect');
+        feedbackDiv.html(
+            '<div class="feedback-header">' +
+                '<span class="feedback-icon">&#10007;</span>' +
+                '<span class="feedback-title">Not quite right</span>' +
+            '</div>' +
+            '<div class="feedback-message">' + feedbackText + '</div>'
+        );
+    }
+
+    // Add reset button
+    var resetBtn = $('<button class="quiz-reset-btn">Try Again</button>');
+    resetBtn.on('click', function() {
+        ResetQuiz(questionContainer);
+    });
+    feedbackDiv.append(resetBtn);
+
+    // Show feedback with animation
+    feedbackContainer.html(feedbackDiv);
+
+    // Smooth scroll to feedback
+    setTimeout(function() {
+        feedbackDiv[0].scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest'
+        });
+    }, 100);
+}
+
+function ResetQuiz(questionContainer) {
+    // Remove answered state
+    questionContainer.removeClass('answered');
+
+    // Reset all answers
+    var allAnswers = questionContainer.find('.quiz-answer');
+    allAnswers.removeClass('quiz-show-answer quiz-disabled');
+
+    // Clear feedback
+    questionContainer.find('.quiz-feedback-container').empty();
+}
+
+function escapeHtml(text) {
+    var map = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#039;'
+    };
+    return text.replace(/[&<>"']/g, function(m) { return map[m]; });
 }
 
 function FilterHtml(contents) {
@@ -75,7 +186,7 @@ function FilterHtml(contents) {
         }
         return true;
     });
-    
+
     var html = "";
     contents.each(function() {
         if (this.nodeType == 3) {
@@ -88,6 +199,6 @@ function FilterHtml(contents) {
         }
         html += ' ';
     });
-   
+
     return html;
-}
+}