From e5265ae008da78643b04dafc8c8120ef282392bf Mon Sep 17 00:00:00 2001 From: SouparnaChatterjee Date: Wed, 19 Nov 2025 13:24:28 +0530 Subject: [PATCH 1/2] fix: update copyright year to 2025 --- README.md | 3 ++- about.md | 3 +-- 2 files changed, 3 insertions(+), 3 deletions(-) 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/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. From cb6b6e82c2782c778b2950495e72f98bcae52b76 Mon Sep 17 00:00:00 2001 From: SouparnaChatterjee Date: Wed, 19 Nov 2025 20:27:12 +0530 Subject: [PATCH 2/2] feat: Add feedback and explanations to Pop Quiz (#704) - 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 #704 --- _sass/quiz-feedback.scss | 158 ++++++++++++++++++ assets/css/just-the-docs-circuitverse.scss | 2 + .../css/just-the-docs-circuitversedark.scss | 4 +- assets/js/quiz.js | 132 +++++++++++++-- 4 files changed, 283 insertions(+), 13 deletions(-) create mode 100644 _sass/quiz-feedback.scss 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/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( + '' + + '' + ); + } else { + feedbackDiv.addClass('feedback-incorrect'); + feedbackDiv.html( + '' + + '' + ); } + + // 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