diff --git a/README.md b/README.md
index 3ef1b66d..9093f31b 100755
--- a/README.md
+++ b/README.md
@@ -194,4 +194,5 @@ In addition to these plugins, Interactive book also inherit's all the plugins us
---
### Create, Contribute, Learn, and succeed with CircuitVerse!!!
-Interactive-Book is © 2024 by [CircuitVerse](https://circuitverse.org/)
+Interactive-Book is © 2025 by [CircuitVerse](https://circuitverse.org/)
+
diff --git a/_sass/quiz-feedback.scss b/_sass/quiz-feedback.scss
new file mode 100644
index 00000000..a735509e
--- /dev/null
+++ b/_sass/quiz-feedback.scss
@@ -0,0 +1,158 @@
+/* ===============================================
+ Pop Quiz Feedback Styles
+ =============================================== */
+
+/* Disable pointer events on answered questions */
+.quiz-question.answered .quiz-answer {
+ cursor: not-allowed;
+}
+
+.quiz-question.answered .quiz-answer:not(.quiz-show-answer) {
+ opacity: 0.5;
+}
+
+/* Disabled answers */
+.quiz-answer.quiz-disabled {
+ pointer-events: none;
+ opacity: 0.5;
+}
+
+/* Enhanced correct answer styling */
+.quiz-answer.quiz-show-answer.quiz-true {
+ background-color: #d4edda !important;
+ border-color: #28a745 !important;
+ animation: correctPulse 0.5s ease;
+}
+
+/* Enhanced incorrect answer styling */
+.quiz-answer.quiz-show-answer.quiz-false {
+ background-color: #f8d7da !important;
+ border-color: #dc3545 !important;
+ animation: incorrectShake 0.5s ease;
+}
+
+/* Animations */
+@keyframes correctPulse {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.02); }
+}
+
+@keyframes incorrectShake {
+ 0%, 100% { transform: translateX(0); }
+ 25% { transform: translateX(-5px); }
+ 75% { transform: translateX(5px); }
+}
+
+/* Feedback Container */
+.quiz-feedback-container {
+ margin-top: 1.5rem;
+}
+
+/* Feedback Box */
+.quiz-feedback {
+ padding: 1.25rem;
+ border-radius: 8px;
+ animation: fadeInUp 0.4s ease;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ margin-bottom: 1rem;
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.feedback-correct {
+ background-color: #d4edda;
+ border: 1px solid #c3e6cb;
+ color: #155724;
+}
+
+.feedback-incorrect {
+ background-color: #f8d7da;
+ border: 1px solid #f5c6cb;
+ color: #721c24;
+}
+
+.feedback-header {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ margin-bottom: 0.75rem;
+ font-weight: 600;
+ font-size: 1.1rem;
+}
+
+.feedback-icon {
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+.feedback-correct .feedback-icon {
+ color: #28a745;
+}
+
+.feedback-incorrect .feedback-icon {
+ color: #dc3545;
+}
+
+.feedback-message {
+ line-height: 1.6;
+ font-size: 0.95rem;
+ margin-bottom: 1rem;
+}
+
+/* Reset button */
+.quiz-reset-btn {
+ padding: 0.5rem 1rem;
+ background-color: #6c757d;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 0.9rem;
+ transition: background-color 0.2s ease;
+
+ &:hover {
+ background-color: #5a6268;
+ }
+
+ &:active {
+ transform: scale(0.98);
+ }
+}
+
+/* Dark mode adjustments */
+body.dark-mode {
+ .feedback-correct {
+ background-color: #1e3a28;
+ border-color: #28a745;
+ color: #7fdb9f;
+ }
+
+ .feedback-incorrect {
+ background-color: #3a1e1e;
+ border-color: #dc3545;
+ color: #f5b7bd;
+ }
+
+ .quiz-answer.quiz-show-answer.quiz-true {
+ background-color: #1e3a28 !important;
+ border-color: #28a745 !important;
+ }
+
+ .quiz-answer.quiz-show-answer.quiz-false {
+ background-color: #3a1e1e !important;
+ border-color: #dc3545 !important;
+ }
+
+ .quiz-feedback {
+ box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
+ }
+}
\ No newline at end of file
diff --git a/about.md b/about.md
index 11f373d9..248f0eb9 100644
--- a/about.md
+++ b/about.md
@@ -6,9 +6,8 @@ disable_comments: true
description: ""
---
-
# About Interactive Book
-Interactive-Book is © 2024 by [CircuitVerse](https://circuitverse.org/).
+Interactive-Book is © 2025 by [CircuitVerse](https://circuitverse.org/).
## CircuitVerse
[CircuitVerse](https://circuitverse.org) is a digital circuit simulation platform. It aims to provide a platform where circuits can be designed and simulated using a graphical user interface. While users can design complete CPU implementations within the simulator, the software is designed primarily for educational use. CircuitVerse is an opensource project with an active community.
diff --git a/assets/css/just-the-docs-circuitverse.scss b/assets/css/just-the-docs-circuitverse.scss
index 8ca3178f..53635b1a 100644
--- a/assets/css/just-the-docs-circuitverse.scss
+++ b/assets/css/just-the-docs-circuitverse.scss
@@ -1,3 +1,5 @@
---
---
{% include css/just-the-docs.scss.liquid color_scheme="circuitverse" %}
+
+@import "quiz-feedback";
\ No newline at end of file
diff --git a/assets/css/just-the-docs-circuitversedark.scss b/assets/css/just-the-docs-circuitversedark.scss
index f88fa83b..163111a5 100644
--- a/assets/css/just-the-docs-circuitversedark.scss
+++ b/assets/css/just-the-docs-circuitversedark.scss
@@ -4,4 +4,6 @@
.text-grey-dk-100 {
color: white!important;
-}
\ No newline at end of file
+}
+
+@import "quiz-feedback";
\ No newline at end of file
diff --git a/assets/js/quiz.js b/assets/js/quiz.js
index 7322aa80..0cf2ec7a 100644
--- a/assets/js/quiz.js
+++ b/assets/js/quiz.js
@@ -15,16 +15,28 @@ $(function() {
question.append('Question ' + questionNo + '');
question.append('' + questionText + '
');
- // Get answers
+ // Get answers with explanations/hints
var answers = [];
- $(this).find('ul').each(function() {
+
+ // Correct answers from with explanations
+ $(this).find('ol').each(function() {
$(this).children('li').each(function() {
- answers.push([false, $(this).contents().get(0).nodeValue.trim()]);
+ var text = $(this).contents().get(0).nodeValue.trim();
+ // Check for explanation in tag, otherwise use default
+ var explanation = $(this).find('em').text() ||
+ "Correct! Well done.";
+ answers.push([true, text, explanation]);
});
});
- $(this).find('ol').each(function() {
+
+ // Incorrect answers from with hints
+ $(this).find('ul').each(function() {
$(this).children('li').each(function() {
- answers.push([true, $(this).contents().get(0).nodeValue.trim()]);
+ var text = $(this).contents().get(0).nodeValue.trim();
+ // Check for hint in tag, otherwise use default
+ var hint = $(this).find('em').text() ||
+ "That's not correct. Try again!";
+ answers.push([false, text, hint]);
});
});
@@ -42,11 +54,19 @@ $(function() {
classes += 'quiz-false';
}
- questionAnswers.append('' +
- answer[1] +
- '
');
+ var answerDiv = $('' +
+ answer[1] +
+ '
');
+
+ questionAnswers.append(answerDiv);
});
+
+ // Add feedback container
+ var feedbackContainer = $('');
+
question.append(questionAnswers);
+ question.append(feedbackContainer);
quiz.append(question);
});
@@ -54,13 +74,101 @@ $(function() {
quizSettings.after('
');
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 = $('');
+
+ if (isCorrect) {
+ feedbackDiv.addClass('feedback-correct');
+ feedbackDiv.html(
+ '' +
+ '' + feedbackText + '
'
+ );
+ } else {
+ feedbackDiv.addClass('feedback-incorrect');
+ feedbackDiv.html(
+ '' +
+ '' + feedbackText + '
'
+ );
}
+
+ // Add reset button
+ var resetBtn = $('');
+ 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 = {
+ '&': '&',
+ '<': '<',
+ '>': '>',
+ '"': '"',
+ "'": '''
+ };
+ return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
function FilterHtml(contents) {
@@ -90,4 +198,4 @@ function FilterHtml(contents) {
});
return html;
-}
+}
\ No newline at end of file