{"version":"1.0.0","templatekey":"mathfever","name":"Math Fever","instructions":"<p>Students choose the correct equations. They must go quickly because there is only 1 minute to solve as many as they can.</p>","content":"<div id=\"{{AUTOID}}_game_container\" class=\"generico-game-container\">\n    <div id=\"{{AUTOID}}_game_area\">\n        <p>Choose the equation that equals:</p>\n        <h2 id=\"{{AUTOID}}_target_answer\" class=\"generico-target-answer\"></h2>\n        <p class=\"generico-timer\">Time left: <span id=\"{{AUTOID}}_timer\">60</span>s</p>\n        <p class=\"generico-score\">Score: <span id=\"{{AUTOID}}_score\">0</span></p>\n\n        <div id=\"{{AUTOID}}_equations\" class=\"generico-equations-grid\">\n            <!-- Equation blocks will be injected here by JS -->\n        </div>\n    </div>\n\n    <div id=\"{{AUTOID}}_game_over\" class=\"generico-game-over-message\" style=\"display: none;\">\n        <h2>Game Over!</h2>\n        <p>Your final score: <span id=\"{{AUTOID}}_score_final\"></span></p>\n        <button id=\"{{AUTOID}}_restart_button\" class=\"generico-restart-button\">Play Again</button>\n    </div>\n</div>","templateend":"","variabledefaults":"","jscontent":"require(['core/log'], function(log) {\n    let score = 0;\n    let timeLeft = 60;\n    let timerInterval;\n    let currentTargetAnswer;\n    const operators = ['+', '-', '*'];\n\n    const rootElement = document.getElementById('{{AUTOID}}_game_container');\n    if (!rootElement) {\n        log.error('Game container not found for AUTOID: {{AUTOID}}');\n        return;\n    }\n\n    // Cache DOM elements\n    const targetAnswerDisplay = rootElement.querySelector('#{{AUTOID}}_target_answer');\n    const timerDisplay = rootElement.querySelector('#{{AUTOID}}_timer');\n    const scoreDisplay = rootElement.querySelector('#{{AUTOID}}_score');\n    const scoreFinalDisplay = rootElement.querySelector('#{{AUTOID}}_score_final');\n    const equationContainer = rootElement.querySelector('#{{AUTOID}}_equations');\n    const gameOverDisplay = rootElement.querySelector('#{{AUTOID}}_game_over');\n    const restartButton = rootElement.querySelector('#{{AUTOID}}_restart_button');\n    const gameArea = rootElement.querySelector('#{{AUTOID}}_game_area');\n\n    function getRandomInt(min, max) {\n        min = Math.ceil(min);\n        max = Math.floor(max);\n        return Math.floor(Math.random() * (max - min + 1)) + min;\n    }\n\n    function evaluateEquation(equationString) {\n        try {\n            // Using Function constructor for safe eval, avoids direct global eval\n            return new Function('return ' + equationString)();\n        } catch (e) {\n            log.error('Error evaluating equation:', equationString, e);\n            return NaN;\n        }\n    }\n\n    function generateStage() {\n        let equations = [];\n        let correctEquationString;\n        let correctResult;\n\n        // Determine the correct equation and its result, ensuring it's valid\n        while (true) {\n            let op1 = getRandomInt(1, 15);\n            let op2 = getRandomInt(1, 15);\n            let operator = operators[getRandomInt(0, operators.length - 1)];\n\n            correctEquationString = `${op1} ${operator} ${op2}`;\n            correctResult = evaluateEquation(correctEquationString);\n\n            // Ensure the result is reasonable (e.g., non-negative, not too large)\n            if (!isNaN(correctResult) && correctResult >= 0 && correctResult <= 150) {\n                break; // Found a valid result\n            }\n        }\n\n        currentTargetAnswer = correctResult;\n        targetAnswerDisplay.textContent = currentTargetAnswer;\n\n        // Add the correct equation to the list\n        equations.push({ equation: correctEquationString, isCorrect: true });\n\n        // Generate 5 incorrect equations\n        while (equations.length < 6) {\n            let incorrOp1 = getRandomInt(1, 15);\n            let incorrOp2 = getRandomInt(1, 15);\n            let incorrOperator = operators[getRandomInt(0, operators.length - 1)];\n            let incorrEquationString = `${incorrOp1} ${incorrOperator} ${incorrOp2}`;\n            let incorrResult = evaluateEquation(incorrEquationString);\n\n            // Ensure it's different from the correct result, reasonable, and not a duplicate equation string\n            if (!isNaN(incorrResult) && incorrResult !== correctResult && incorrResult >= 0 && incorrResult <= 150 &&\n                !equations.some(eq => eq.equation === incorrEquationString)) {\n                equations.push({ equation: incorrEquationString, isCorrect: false });\n            }\n        }\n\n        // Shuffle equations\n        for (let i = equations.length - 1; i > 0; i--) {\n            const j = Math.floor(Math.random() * (i + 1));\n            [equations[i], equations[j]] = [equations[j], equations[i]];\n        }\n\n        // Render equations\n        equationContainer.innerHTML = ''; // Clear previous equations\n        equations.forEach((eqData) => {\n            // Create element without core/dom\n            const tempDiv = document.createElement('div');\n            tempDiv.innerHTML = `\n                <div class=\"generico-equation-block\" tabindex=\"0\" role=\"button\" aria-label=\"Equation ${eqData.equation}\">\n                    ${eqData.equation}\n                </div>\n            `;\n            const eqBlock = tempDiv.firstElementChild;\n\n            eqBlock.addEventListener('click', () => handleEquationClick(eqData));\n            eqBlock.addEventListener('keydown', (e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    handleEquationClick(eqData);\n                }\n            });\n            equationContainer.appendChild(eqBlock);\n        });\n    }\n\n    function handleEquationClick(eqData) {\n        if (eqData.isCorrect) {\n            score++;\n            scoreDisplay.textContent = score;\n            generateStage(); // Load next stage\n        }\n    }\n\n    function startGame() {\n        score = 0;\n        timeLeft = 60;\n        scoreDisplay.textContent = score;\n        timerDisplay.textContent = timeLeft;\n        gameOverDisplay.style.display = 'none';\n        restartButton.style.display = 'none';\n        gameArea.style.display = 'block'; // Ensure game area is visible\n\n        generateStage();\n        startTimer();\n    }\n\n    function startTimer() {\n        if (timerInterval) clearInterval(timerInterval);\n        timerInterval = setInterval(() => {\n            timeLeft--;\n            timerDisplay.textContent = timeLeft;\n            if (timeLeft <= 0) {\n                endGame();\n            }\n        }, 1000);\n    }\n\n    function endGame() {\n        clearInterval(timerInterval);\n        gameArea.style.display = 'none'; // Hide game area\n        gameOverDisplay.style.display = 'block';\n        scoreFinalDisplay.textContent = score; // Display final score\n        restartButton.style.display = 'block';\n    }\n\n    // Attach event listener for restart button\n    restartButton.addEventListener('click', startGame);\n\n    // Initial game start\n    startGame();\n});","importcss":"","customcss":".generico-game-container {\n    font-family: Arial, sans-serif;\n    max-width: 600px;\n    margin: 20px auto;\n    padding: 20px;\n    border: 1px solid #ddd;\n    box-shadow: 0 0 10px rgba(0,0,0,0.1);\n    background-color: #f9f9f9;\n    text-align: center;\n}\n\n.generico-target-answer {\n    font-size: 2.5em;\n    color: #007bff;\n    margin: 15px 0;\n}\n\n.generico-timer,\n.generico-score {\n    font-size: 1.2em;\n    margin-bottom: 10px;\n}\n\n.generico-equations-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive grid */\n    gap: 15px;\n    margin-top: 25px;\n}\n\n.generico-equation-block {\n    background-color: #fff;\n    border: 2px solid #e0e0e0;\n    padding: 20px;\n    font-size: 1.5em;\n    font-weight: bold;\n    cursor: pointer;\n    border-radius: 8px;\n    transition: all 0.2s ease-in-out;\n    user-select: none; /* Prevent text selection */\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 80px; /* Ensure consistent height */\n}\n\n.generico-equation-block:hover {\n    background-color: #e6f2ff;\n    border-color: #007bff;\n    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);\n    transform: translateY(-2px);\n}\n\n.generico-equation-block:active {\n    background-color: #cce0ff;\n    border-color: #0056b3;\n    transform: translateY(0);\n}\n\n.generico-game-over-message {\n    margin-top: 30px;\n    padding: 20px;\n    background-color: #ffe6e6;\n    border: 1px solid #ff0000;\n    border-radius: 8px;\n    color: #ff0000;\n}\n\n.generico-game-over-message h2 {\n    color: #ff0000;\n    font-size: 2em;\n    margin-bottom: 10px;\n}\n\n.generico-restart-button {\n    background-color: #28a745;\n    color: white;\n    padding: 12px 25px;\n    font-size: 1.2em;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    margin-top: 20px;\n    transition: background-color 0.2s ease;\n}\n\n.generico-restart-button:hover {\n    background-color: #218838;\n}","dataset":"","datasetvars":"","allowedcontexts":"","allowedcontextids":""}