munchboka-edutools 0.2.3__py3-none-any.whl

munchboka_edutools/static/js/timedQuiz/multipleChoiceQuestion.js

@@ -0,0 +1,184 @@
+// Generate UUID function
+function generateUUID() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        const r = Math.random() * 16 | 0,
+              v = c === 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+}
+
+function shuffleArray(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+}
+
+class MultipleChoiceQuestion {
+    constructor({ id, content, answers }) {
+        this.id = id;
+        this.content = content;
+        this.answers = answers.map((answer) => {
+            if (!answer.hasOwnProperty('id')) {
+                answer.id = generateUUID();
+            }
+            return answer;
+        });
+        this.selectedAnswers = new Set();
+        this.elements = {}; // Store elements for easy access
+        this.correctlyAnswered = false; // Track if the question is correctly answered
+    }
+
+    shuffleAnswers() {
+        shuffleArray(this.answers);
+    }
+
+    render(containerId) {
+        const container = document.getElementById(containerId);
+
+        // Create question element
+        const questionCard = document.createElement('div');
+        questionCard.classList.add('question-card');
+        questionCard.innerHTML = this.content;
+
+        // Append the question card to the container
+        container.appendChild(questionCard);
+
+        // Render LaTeX in the question
+        this.renderMathInElement(questionCard);
+
+        // Apply syntax highlighting to the question card
+        this.applySyntaxHighlighting(questionCard);
+
+        // Create answers container
+        const answersGrid = document.createElement('div');
+        answersGrid.classList.add('answers-grid');
+
+        // Append the answers grid to the container
+        container.appendChild(answersGrid);
+
+        // Create answer elements
+        this.answers.forEach((answer) => {
+            const answerCard = document.createElement('div');
+            answerCard.classList.add('answer-card');
+            answerCard.innerHTML = answer.content;
+            answerCard.dataset.answerId = answer.id;
+
+            // Append the answer card to the answers grid
+            answersGrid.appendChild(answerCard);
+
+            // Render LaTeX in the answer
+            this.renderMathInElement(answerCard);
+
+            // Apply syntax highlighting to the answer card
+            this.applySyntaxHighlighting(answerCard);
+
+            // Mark as selected if previously selected
+            if (this.selectedAnswers.has(answer.id)) {
+                answerCard.classList.add('selected');
+            }
+
+            // Disable interaction if question is correctly answered
+            if (this.correctlyAnswered) {
+                answerCard.classList.add('disabled');
+            } else {
+                // Add click event to handle selection
+                answerCard.addEventListener('click', () => this.toggleSelection(answerCard));
+            }
+        });
+
+        // Store elements for later access
+        this.elements.container = container;
+        this.elements.questionCard = questionCard;
+        this.elements.answersGrid = answersGrid;
+
+        // Apply correct class if previously answered correctly
+        if (this.correctlyAnswered) {
+            this.elements.questionCard.classList.add('correct');
+        }
+    }
+
+    toggleSelection(answerCard) {
+        const answerId = answerCard.dataset.answerId;
+        if (this.selectedAnswers.has(answerId)) {
+            this.selectedAnswers.delete(answerId);
+            answerCard.classList.remove('selected');
+        } else {
+            // If single-choice, deselect other answers
+            if (this.isSingleChoice()) {
+                this.selectedAnswers.clear();
+                const allAnswerCards = this.elements.answersGrid.querySelectorAll('.answer-card');
+                allAnswerCards.forEach(card => card.classList.remove('selected'));
+            }
+            this.selectedAnswers.add(answerId);
+            answerCard.classList.add('selected');
+        }
+    }
+
+    checkAnswers(showAlert = true) {
+        // Get the correct answer IDs
+        const correctAnswerIds = this.answers
+            .filter(answer => answer.isCorrect)
+            .map(answer => answer.id);
+
+        // Compare selectedAnswers with correctAnswerIds
+        const isCorrect =
+            this.selectedAnswers.size === correctAnswerIds.length &&
+            [...this.selectedAnswers].every(id => correctAnswerIds.includes(id));
+
+        // Provide visual feedback
+        if (isCorrect) {
+            this.elements.questionCard.classList.remove('incorrect'); // ✅ Remove incorrect class
+            this.elements.questionCard.classList.add('correct');
+            this.correctlyAnswered = true; // Mark question as correctly answered
+            // Disable further interaction
+            const allAnswerCards = this.elements.answersGrid.querySelectorAll('.answer-card');
+            allAnswerCards.forEach(card => {
+                card.classList.add('disabled');
+
+                const newCard = card.cloneNode(true);
+                card.parentNode.replaceChild(newCard, card);
+            });
+        } else {
+            this.elements.questionCard.classList.add('incorrect');
+        }
+
+        // Optionally display feedback if showAlert is true
+        if (showAlert) {
+            alert(isCorrect ? 'Correct!' : 'Incorrect. Please try again.');
+        }
+
+        return isCorrect;
+    }
+
+    markAsCorrectlyAnswered() {
+        this.correctlyAnswered = true;
+    }
+
+    isSingleChoice() {
+        // Determine if the question is single-choice
+        const correctAnswersCount = this.answers.filter(answer => answer.isCorrect).length;
+        return correctAnswersCount === 1;
+    }
+
+    renderMathInElement(element) {
+        // Ensure KaTeX renders LaTeX inside the element
+        renderMathInElement(element, {
+            delimiters: [
+                { left: '$$', right: '$$', display: true },
+                { left: '$', right: '$', display: false },
+                { left: '\\[', right: '\\]', display: true },
+                { left: '\\(', right: '\\)', display: false }
+                // ... other delimiters if needed ...
+            ]
+        });
+    }
+
+    applySyntaxHighlighting(element) {
+        // Apply syntax highlighting to code blocks
+        const codeBlocks = element.querySelectorAll('code');
+        codeBlocks.forEach(block => {
+            hljs.highlightElement(block);
+        });
+    }
+}

munchboka_edutools/static/js/timedQuiz/timedMultipleChoiceQuiz.js

@@ -0,0 +1,244 @@
+class TimedMultipleChoiceQuiz {
+    constructor(containerId, questionsData, timeLimit = 60) {
+        this.containerId = containerId;
+        this.container = document.getElementById(containerId);
+        if (!this.container) {
+            throw new Error('Container not found');
+        }
+        this.questionsData = questionsData;
+        this.timeLimit = timeLimit; // Time limit in seconds
+        this.remainingTime = timeLimit;
+        this.currentQuestionIndex = 0;
+        this.correctAnswers = 0;
+        this.questionsAttempted = 0;
+        this.uniqueId = generateUUID();
+        this.correctlyAnsweredQuestions = new Set(); // Track correctly answered questions
+        this.init();
+    }
+
+    init() {
+        // Shuffle the questions
+        this.shuffleQuestions();
+
+        // Generate the HTML structure
+        this.generateHTML();
+
+        // Wait for the user to start the quiz
+    }
+
+    shuffleQuestions() {
+        for (let i = this.questionsData.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [this.questionsData[i], this.questionsData[j]] = [this.questionsData[j], this.questionsData[i]];
+        }
+    }
+
+    generateHTML() {
+        // Set up the main structure
+        this.container.innerHTML = `
+            <div id="timer-container-${this.uniqueId}" class="timer-container" style="display: none;">
+                <div id="progress-bar-${this.uniqueId}" class="progress-bar"></div>
+                <span id="timer-${this.uniqueId}" class="timer-text">${this.formatTime(this.remainingTime)}</span>
+            </div>
+            <div id="question-container-${this.uniqueId}" class="mcq-container" style="display: none;"></div>
+            <div class="button-container">
+                <button id="start-quiz-${this.uniqueId}" class="button button-run">Start Quiz</button>
+                <button id="submit-answer-${this.uniqueId}" class="button button-run" style="display: none;">Sjekk svar</button>
+            </div>
+            <!-- Toast Notifications -->
+            <div id="toast-success-${this.uniqueId}" class="toast toast-success" style="display: none;">
+                <p>Riktig! 🎉</p>
+            </div>
+            <div id="toast-error-${this.uniqueId}" class="toast toast-error" style="display: none;">
+                <p>Feil svar!</p>
+            </div>
+        `;
+
+        // Add event listener for the start button
+        document.getElementById(`start-quiz-${this.uniqueId}`).addEventListener('click', () => this.startQuiz());
+    }
+
+    startQuiz() {
+        // Hide the start button
+        const startButton = document.getElementById(`start-quiz-${this.uniqueId}`);
+        startButton.style.display = 'none';
+
+        // Show the timer container
+        const timerContainer = document.getElementById(`timer-container-${this.uniqueId}`);
+        timerContainer.style.display = 'block';
+
+        // Show the question container
+        const questionContainer = document.getElementById(`question-container-${this.uniqueId}`);
+        questionContainer.style.display = 'block';
+
+        // Show the submit button
+        const submitButton = document.getElementById(`submit-answer-${this.uniqueId}`);
+        submitButton.style.display = 'inline-block';
+
+        // Add event listener for the submit button
+        submitButton.addEventListener('click', () => this.submitAnswer());
+
+        // Start the timer
+        this.startTimer();
+
+        // Show the first question
+        this.showQuestion();
+    }
+
+    formatTime(seconds) {
+        const mins = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+    }
+
+    startTimer() {
+        this.updateTimerUI();
+        this.timerInterval = setInterval(() => {
+            this.remainingTime--;
+            this.updateTimerUI();
+
+            if (this.remainingTime <= 0) {
+                this.endQuiz();
+            }
+        }, 1000);
+    }
+
+    updateTimerUI() {
+        // Update the timer text
+        const timerText = document.getElementById(`timer-${this.uniqueId}`);
+        timerText.textContent = this.formatTime(this.remainingTime);
+    
+        // Update the progress bar
+        const progressBar = document.getElementById(`progress-bar-${this.uniqueId}`);
+        const percentage = (this.remainingTime / this.timeLimit) * 100;
+        progressBar.style.width = `${percentage}%`;
+    
+        // Remove existing state classes
+        progressBar.classList.remove('progress-bar-warning', 'progress-bar-danger');
+    
+        // Change the color of the progress bar if time is running out
+        if (percentage <= 20) {
+            progressBar.classList.add('progress-bar-danger'); // Red
+        } else if (percentage <= 50) {
+            progressBar.classList.add('progress-bar-warning'); // Yellow
+        } else {
+            // Default is green, no additional class needed
+        }
+    }
+
+    showQuestion() {
+        // Increment the number of questions attempted
+        if (this.currentQuestionIndex >= this.questionsData.length) {
+            this.endQuiz();
+            return;
+        }
+
+        this.questionsAttempted++;
+
+        if (this.currentQuestionIndex >= this.questionsData.length) {
+            // Restart from the first question if we've reached the end
+            this.currentQuestionIndex = 0;
+            // Optionally reshuffle the questions here
+            // this.shuffleQuestions();
+        }
+
+        const questionData = this.questionsData[this.currentQuestionIndex];
+
+        // Clear the question container before rendering the new question
+        const questionContainer = document.getElementById(`question-container-${this.uniqueId}`);
+        questionContainer.innerHTML = ''; // Clear previous question
+
+        // Render the new question
+        this.currentQuestion = new MultipleChoiceQuestion(questionData);
+        this.currentQuestion.shuffleAnswers();
+        this.currentQuestion.render(`question-container-${this.uniqueId}`);
+    }
+
+    submitAnswer() {
+        const isCorrect = this.currentQuestion.checkAnswers(false); // Pass 'false' to suppress alerts
+
+        if (isCorrect) {
+            this.correctAnswers++;
+            this.correctlyAnsweredQuestions.add(this.currentQuestionIndex); // Track correct answer
+            this.currentQuestion.markAsCorrectlyAnswered();
+
+            // this.showToast('success');
+        } else {
+            // this.showToast('error');
+        }
+
+        setTimeout(() => {
+            this.currentQuestionIndex++;
+            this.showQuestion();
+        }, 500);
+
+        // Move to the next question immediately
+        // this.currentQuestionIndex++;
+        // this.showQuestion();
+    }
+
+    showToast(type) {
+        const toastId = type === 'success' ? `toast-success-${this.uniqueId}` : `toast-error-${this.uniqueId}`;
+        const toast = document.getElementById(toastId);
+
+        if (!toast) {
+            console.error(`Toast element with ID ${toastId} not found.`);
+            return;
+        }
+
+        // Ensure the container is positioned relatively
+        if (getComputedStyle(this.container).position === 'static') {
+            this.container.style.position = 'relative';
+        }
+
+        // Display the toast in the center of the container
+        toast.style.position = 'absolute';
+        toast.style.top = '50%';
+        toast.style.left = '50%';
+        toast.style.transform = 'translate(-50%, -50%)';
+        toast.style.display = 'block';
+
+        // Hide the toast after a short delay
+        setTimeout(() => {
+            toast.style.display = 'none';
+        }, 500); // Display for 0.5 seconds
+    }
+
+    endQuiz() {
+        // Stop the timer
+        clearInterval(this.timerInterval);
+
+        // Determine the appropriate message
+        let completionMessage;
+        if (this.remainingTime <= 0) {
+            completionMessage = `Tiden er ute! Du svarte riktig på ${this.correctAnswers} av ${this.questionsAttempted} spørsmål. 🎉`;
+        } else {
+            completionMessage = `Du har fullført quizen! Du svarte riktig på ${this.correctAnswers} av ${this.questionsAttempted} spørsmål. 🎉`;
+        }
+
+        // Clear the container and display the final score
+        this.container.innerHTML = `
+            <div class="quiz-completion-message">
+                <p>${completionMessage}</p>
+                <button id="restart-quiz-${this.uniqueId}" class="button button-run">Start på nytt</button>
+            </div>
+        `;
+
+        // Add event listener to restart the quiz
+        document.getElementById(`restart-quiz-${this.uniqueId}`).addEventListener('click', () => this.restartQuiz());
+    }
+
+    restartQuiz() {
+        // Reset variables
+        this.remainingTime = this.timeLimit;
+        this.currentQuestionIndex = 0;
+        this.correctAnswers = 0;
+        this.questionsAttempted = 0;
+
+        // Shuffle questions again
+        this.shuffleQuestions();
+
+        // Reinitialize the quiz
+        this.init();
+    }
+}

munchboka_edutools/static/js/timedQuiz/utils.js

@@ -0,0 +1,6 @@
+function shuffleArray(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+}

munchboka_edutools/static/js/utils.js

@@ -0,0 +1,3 @@
+// Placeholder JS to verify asset registration
+window.munchbokaEdutools = window.munchbokaEdutools || {};
+console.debug("munchboka-edutools: utils.js loaded");

munchboka_edutools-0.2.3.dist-info/METADATA

@@ -0,0 +1,109 @@
+Metadata-Version: 2.4
+Name: munchboka-edutools
+Version: 0.2.3
+Summary: Sphinx/Jupyter Book directives and assets for Munchboka and VGS books
+Project-URL: Homepage, https://github.com/reneaas/munchboka-edutools
+Project-URL: Issues, https://github.com/reneaas/munchboka-edutools/issues
+Author: René Ask
+License: MIT License
+        
+        Copyright (c) [2024] [René Alexander Ask]
+        
+        Permission is hereby granted, free of charge, to any person obtaining a copy
+        of this software and associated documentation files (the "Software"), to deal
+        in the Software without restriction, including without limitation the rights
+        to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+        copies of the Software, and to permit persons to whom the Software is
+        furnished to do so, subject to the following conditions:
+        
+        The above copyright notice and this permission notice shall be included in all
+        copies or substantial portions of the Software.
+        
+        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+        SOFTWARE.
+License-File: LICENSE
+Keywords: directives,education,jupyter-book,munchboka,sphinx
+Classifier: Framework :: Sphinx :: Extension
+Classifier: Framework :: Sphinx :: Theme
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Programming Language :: Python :: 3
+Classifier: Topic :: Documentation
+Requires-Python: >=3.9
+Requires-Dist: matplotlib>=3.7
+Requires-Dist: numpy>=1.23
+Requires-Dist: plotmath
+Requires-Dist: scipy>=1.9
+Requires-Dist: signchart
+Requires-Dist: sphinx>=6.0
+Requires-Dist: sympy>=1.11
+Provides-Extra: dev
+Requires-Dist: black; extra == 'dev'
+Requires-Dist: build; extra == 'dev'
+Requires-Dist: jupyter-book; extra == 'dev'
+Requires-Dist: pytest; extra == 'dev'
+Requires-Dist: ruff; extra == 'dev'
+Requires-Dist: twine; extra == 'dev'
+Description-Content-Type: text/markdown
+
+# munchboka-edutools
+
+Reusable Sphinx / Jupyter Book directives and assets for Norwegian educational content.
+
+## Install
+
+```bash
+pip install munchboka-edutools
+```
+
+## Usage (Jupyter Book `_config.yml`)
+
+```yaml
+sphinx:
+  extra_extensions:
+    - munchboka_edutools
+```
+
+All packaged directives are auto-registered. Static assets are placed under `_static/munchboka/` during the build.
+
+## Development
+
+Clone and install dev extras:
+
+```bash
+pip install -e .[dev]
+```
+
+### Local demo book
+
+Build the embedded demo book:
+
+```bash
+jupyter-book build book/
+```
+
+### Adding a new directive
+
+1. Create `src/munchboka_edutools/directives/my_directive.py` exposing `setup(app)`.
+2. The package auto-loads modules under `munchboka_edutools.directives`.
+3. Add an example page in `book/examples/`.
+
+### Testing
+
+Run tests:
+
+```bash
+pytest -q
+```
+
+### Releasing
+
+Tag a version (`v0.1.0`) and the GitHub Action will build and publish.
+
+## License
+
+MIT