chore: update common files

Author: schnaitter

_static/assessment.js

@@ -1,72 +1,78 @@
-document.addEventListener('DOMContentLoaded', function() {
-    // Wait a bit for sphinx-design to initialize
-    setTimeout(() => {
-        initializeCarousels();
-    }, 500);
+document.addEventListener("DOMContentLoaded", function () {
+  // Wait a bit for sphinx-design to initialize
+  setTimeout(() => {
+    initializeCarousels();
+  }, 500);
 });
 
 function initializeCarousels() {
-    const carousels = document.querySelectorAll('.sd-cards-carousel');
+  const carousels = document.querySelectorAll(".sd-cards-carousel");
 
-    carousels.forEach((carousel, index) => {
-        // Ensure carousel is wrapped
-        if (!carousel.parentElement.classList.contains('sd-cards-carousel-wrapper')) {
-            const wrapper = document.createElement('div');
-            wrapper.className = 'sd-cards-carousel-wrapper';
-            carousel.parentNode.insertBefore(wrapper, carousel);
-            wrapper.appendChild(carousel);
-        }
-        
-        // Create navigation buttons
-        const prevButton = document.createElement('button');
-        prevButton.innerHTML = '<i class="fas fa-chevron-left"></i>';
-        prevButton.className = 'carousel-nav-button carousel-prev';
-        
-        const nextButton = document.createElement('button');
-        nextButton.innerHTML = '<i class="fas fa-chevron-right"></i>';
-        nextButton.className = 'carousel-nav-button carousel-next';
-        
-        // Add buttons to carousel
-        carousel.parentElement.appendChild(prevButton);
-        carousel.parentElement.appendChild(nextButton);
-        
-        // Navigation logic
-        prevButton.addEventListener('click', () => {
-            const cardWidth = carousel.offsetWidth;
-            carousel.scrollBy({
-                left: -cardWidth,
-                behavior: 'smooth'
-            });
-        });
-        
-        nextButton.addEventListener('click', () => {
-            const cardWidth = carousel.offsetWidth;
-            carousel.scrollBy({
-                left: cardWidth,
-                behavior: 'smooth'
-            });
-        });
-        
-        // Update button states
-        const updateButtons = () => {
-            prevButton.classList.toggle('disabled', carousel.scrollLeft <= 0);
-            nextButton.classList.toggle('disabled', 
-                carousel.scrollLeft >= carousel.scrollWidth - carousel.clientWidth - 5); // 5px buffer
-        };
-        
-        // Add event listeners
-        carousel.addEventListener('scroll', updateButtons);
-        window.addEventListener('resize', () => {
-            updateButtons();
-            // Ensure proper scroll position on resize
-            const currentIndex = Math.round(carousel.scrollLeft / carousel.offsetWidth);
-            carousel.scrollTo({
-                left: currentIndex * carousel.offsetWidth,
-                behavior: 'auto'
-            });
-        });
-        
-        // Initialize button states
-        updateButtons();
+  carousels.forEach((carousel, index) => {
+    // Ensure carousel is wrapped
+    if (
+      !carousel.parentElement.classList.contains("sd-cards-carousel-wrapper")
+    ) {
+      const wrapper = document.createElement("div");
+      wrapper.className = "sd-cards-carousel-wrapper";
+      carousel.parentNode.insertBefore(wrapper, carousel);
+      wrapper.appendChild(carousel);
+    }
+
+    // Create navigation buttons
+    const prevButton = document.createElement("button");
+    prevButton.innerHTML = '<i class="fas fa-chevron-left"></i>';
+    prevButton.className = "carousel-nav-button carousel-prev";
+
+    const nextButton = document.createElement("button");
+    nextButton.innerHTML = '<i class="fas fa-chevron-right"></i>';
+    nextButton.className = "carousel-nav-button carousel-next";
+
+    // Add buttons to carousel
+    carousel.parentElement.appendChild(prevButton);
+    carousel.parentElement.appendChild(nextButton);
+
+    // Navigation logic
+    prevButton.addEventListener("click", () => {
+      const cardWidth = carousel.offsetWidth;
+      carousel.scrollBy({
+        left: -cardWidth,
+        behavior: "smooth",
+      });
+    });
+
+    nextButton.addEventListener("click", () => {
+      const cardWidth = carousel.offsetWidth;
+      carousel.scrollBy({
+        left: cardWidth,
+        behavior: "smooth",
+      });
     });
+
+    // Update button states
+    const updateButtons = () => {
+      prevButton.classList.toggle("disabled", carousel.scrollLeft <= 0);
+      nextButton.classList.toggle(
+        "disabled",
+        carousel.scrollLeft >= carousel.scrollWidth - carousel.clientWidth - 5,
+      ); // 5px buffer
+    };
+
+    // Add event listeners
+    carousel.addEventListener("scroll", updateButtons);
+    window.addEventListener("resize", () => {
+      updateButtons();
+      // Ensure proper scroll position on resize
+      const currentIndex = Math.round(
+        carousel.scrollLeft / carousel.offsetWidth,
+      );
+      carousel.scrollTo({
+        left: currentIndex * carousel.offsetWidth,
+        behavior: "auto",
+      });
+    });
+
+    // Initialize button states
+    updateButtons();
+  });
 }

_static/carousel.js

@@ -7,8 +7,8 @@ div.cell_output table {
 }
 
 
-div.cell_output table tbody tr, 
-div.cell_output table tbody tr th, 
+div.cell_output table tbody tr,
+div.cell_output table tbody tr th,
 div.cell_output table tbody tr td {
     text-align: left !important;
     position: relative;
@@ -85,7 +85,7 @@ div.cell_output tbody tr:hover{
         min-width: 100px;
         font-size: 14px;
     }
-    
+
     div.cell_output table tbody tr:hover td {
         font-size: 13px;
         padding: 10px 6px;

_static/custom-table.css

@@ -187,4 +187,4 @@ html[data-theme='dark'] .reset-button {
 
 .drop-area.incorrect-answer {
     background-color: #f8d7da;
-}
+}

_static/drag_drop.css

@@ -337,7 +337,7 @@ html[data-theme='dark'] div.story > .admonition-title::after {
     color: #b876d1
 }
 
-/* Fix bibliography URL overflow */
+/* Fix bibliography URL overflow — targets actual rendered HTML */
 div.citation {
     display: flex;
     flex-wrap: wrap;
@@ -354,4 +354,4 @@ div.citation .docutils {
     word-wrap: break-word;
     min-width: 0;
     flex: 1;
-}
+}

_static/quadriga.css

@@ -8,6 +8,6 @@
 __version__ = "0.1.0"
 
 # Import important modules to make them available at the top level
-from . import colors
+from . import colors as colors
 
 # Metadata submodule is not imported directly as it's intended to be used as a standalone CLI tool

quadriga/__init__.py

@@ -1,22 +1,23 @@
-from IPython.display import HTML
 import json
 import uuid
 
+from IPython.display import HTML
+
 
 def create_answer_box(question_id, rows=4):
-    """Create an answer box with a submit button."""
+    """Create an answer box with an info popup button."""
     return HTML(f"""
     <div style="padding: 5px; border-radius: 5px; margin: 10px 0;">
         <textarea id="answer-{question_id}" rows="{rows}" style="width: 100%; margin-top: 10px; padding: 10px; border: 1px solid #ced4da; border-radius: 4px;" placeholder="Ihre Antwort"></textarea>
-        <button id="btn-answer-{question_id}" onclick="lockAnswer('answer-{question_id}')" style="margin-top: 5px; padding: 5px 12px; background-color: #00305e; color: white; border: none; border-radius: 4px; cursor: pointer;">Bestätigen</button>
+        <button id="btn-answer-{question_id}" onclick="alert('Ihre Eingabe wird nicht überprüft oder gespeichert. Dieses Textfeld dient lediglich Ihrer eigenen Reflexion und der aktiven Wiedergabe der Lerninhalte.')" style="margin-top: 5px; padding: 5px 12px; background-color: #00305e; color: white; border: none; border-radius: 4px; cursor: pointer;">OK</button>
     </div>
     """)
 
 
 class DragDropQuiz:
     """
     A simple drag-and-drop quiz generator for Jupyter Books.
-    
+
     Usage:
     quiz = DragDropQuiz()
     quiz.create_matching_quiz(
@@ -26,14 +27,16 @@ class DragDropQuiz:
         correct_mapping={"Description 1": "Option A", "Description 2": "Option B", "Description 3": "Option C"}
     )
     """
-    
+
     def __init__(self):
         self.quiz_counter = 0
-    
-    def create_matching_quiz(self, title, descriptions, options, correct_mapping, show_feedback=True, feedback_messages=None):
+
+    def create_matching_quiz(
+        self, title, descriptions, options, correct_mapping, show_feedback=True, feedback_messages=None
+    ):
         """
         Create a drag-and-drop matching quiz.
-        
+
         Parameters:
         - title (str): The quiz title/question
         - descriptions (list): List of items to be matched (static labels)
@@ -44,33 +47,33 @@ def create_matching_quiz(self, title, descriptions, options, correct_mapping, sh
         """
         self.quiz_counter += 1
         quiz_id = f"drag_drop_quiz_{self.quiz_counter}_{uuid.uuid4().hex[:8]}"
-        
+
         # Set default feedback messages if none provided
         if feedback_messages is None:
             feedback_messages = {
                 "correct": "Perfekt! Alle {total} Zuordnungen sind korrekt!",
                 "incorrect": "Leider sind keine Zuordnungen korrekt. Versuchen Sie es noch einmal!",
-                "partial": "Teilweise richtig: {correct} von {total} Zuordnungen sind korrekt."
+                "partial": "Teilweise richtig: {correct} von {total} Zuordnungen sind korrekt.",
             }
-        
-        # Convert correct mapping to use indices for earlier elements, but map option texts directly
+
+        # Convert correct mapping to use indices for easier JavaScript handling
         desc_to_idx = {desc: i for i, desc in enumerate(descriptions)}
-        
+        opt_to_idx = {opt: i for i, opt in enumerate(options)}
+
         correct_pairs = []
         for desc, opt in correct_mapping.items():
-            if desc in desc_to_idx:
-                # We store the string `opt` instead of the index so duplicate texts work
-                correct_pairs.append([desc_to_idx[desc], opt])
-        
+            if desc in desc_to_idx and opt in opt_to_idx:
+                correct_pairs.append([desc_to_idx[desc], opt_to_idx[opt]])
+
         html_content = self._generate_html(
             quiz_id, title, descriptions, options, correct_pairs, show_feedback, feedback_messages
         )
-        
+
         return HTML(html_content)
-    
+
     def _generate_html(self, quiz_id, title, descriptions, options, correct_pairs, show_feedback, feedback_messages):
         """Generate the complete HTML for the drag-and-drop quiz."""
-        
+
         # Generate static description labels with drop zones
         description_zones = ""
         for i, desc in enumerate(descriptions):
@@ -82,7 +85,7 @@ def _generate_html(self, quiz_id, title, descriptions, options, correct_pairs, s
                     </div>
                 </div>
             '''
-        
+
         # Generate draggable options
         draggable_options = ""
         for i, option in enumerate(options):
@@ -91,29 +94,29 @@ def _generate_html(self, quiz_id, title, descriptions, options, correct_pairs, s
                     {option}
                 </div>
             '''
-        
+
         return f'''
         <div class="drag-drop-quiz" id="{quiz_id}">
             <div class="quiz-title">{title}</div>
-            
+
             <div class="quiz-main">
                 <div class="descriptions-container">
                     {description_zones}
                 </div>
             </div>
-            
+
             <div class="options-container">
                 <div class="options-title">Ziehen Sie diese zu den passenden Beschreibungen</div>
                 <div class="options-list" id="{quiz_id}_options">
                     {draggable_options}
                 </div>
             </div>
-            
+
             <div class="quiz-controls">
                 <button class="quiz-button" onclick="checkAnswer_{quiz_id}()">Antwort prüfen</button>
                 <button class="quiz-button reset-button" onclick="resetQuiz_{quiz_id}()">Zurücksetzen</button>
             </div>
-            
+
             <div id="{quiz_id}_feedback"></div>
         </div>
         <script>
@@ -131,5 +134,3 @@ def _generate_html(self, quiz_id, title, descriptions, options, correct_pairs, s
             }});
         </script>
         '''
-    
-    

quadriga/assessment.py

@@ -1,4 +1,4 @@
-"""This submodule contains all QUADRIGA color presets for the various libraries used."""
+"""QUADRIGA color presets for various libraries used."""
 
 jupyterquiz = {
     "--jq-multiple-choice-bg": "#00305e",

quadriga/colors.py

@@ -7,17 +7,17 @@
 
 __all__ = [
     "create_bibtex",
+    "create_citation_cff",
     "extract_from_book_config",
-    "update_citation_cff",
     "update_version_from_tag",
     "utils",
 ]
 
 # Import the modules to make their functions available
 from . import (
     create_bibtex,
+    create_citation_cff,
     extract_from_book_config,
-    update_citation_cff,
     update_version_from_tag,
     utils,
 )