<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math Speed Test</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        #math-speed-test-app {
            /* Main container for the entire app to isolate styles */
            font-family: 'Poppins', Arial, sans-serif;
            background-color: #0d0d0d;
            color: #e0e0e0;
            padding: 20px 0;
            line-height: 1.6;
        }

        #math-speed-test-app .container {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            justify-content: center;
            max-width: 1200px;
            margin: auto;
        }

        #math-speed-test-app .card {
            background: #1e1e1e;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
            border: 1px solid #333;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            width: 100%;
            max-width: 450px;
        }

        #math-speed-test-app .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
        }
        
        #math-speed-test-app .game-title {
            font-size: 2.2rem;
            color: #00e5ff;
            text-shadow: 0 0 10px #007bff, 0 0 20px #007bff;
            margin-bottom: 20px;
            font-weight: 700;
        }

        #math-speed-test-app .game-instructions, #math-speed-test-app .help-section p {
            font-size: 1rem;
            line-height: 1.6;
        }

        #math-speed-test-app .help-title {
            font-size: 1.8rem;
            color: #fff;
            margin-bottom: 15px;
            border-bottom: 2px solid #00e5ff;
            padding-bottom: 10px;
        }

        #math-speed-test-app .help-subtitle {
            font-size: 1.3rem;
            color: #00e5ff;
            margin: 20px 0 10px;
        }

        #math-speed-test-app .help-list {
            list-style-type: none;
            padding-left: 0;
        }

        #math-speed-test-app .help-list li {
            margin-bottom: 12px;
            padding-left: 25px;
            position: relative;
        }
        
        #math-speed-test-app .help-list li::before {
            content: "✓";
            color: #00ff00;
            position: absolute;
            left: 0;
            font-weight: bold;
        }

        #math-speed-test-app .game-header-info {
            display: flex;
            justify-content: space-between;
            font-size: 1rem;
            margin-bottom: 20px;
        }

        #math-speed-test-app .game-header-info span {
            padding: 5px 10px;
            background: #2a2a2a;
            border-radius: 8px;
        }

        #math-speed-test-app .game-equation {
            font-size: 2.5rem;
            margin: 30px 0;
            padding: 20px;
            background: #2a2a2a;
            border-radius: 10px;
            box-shadow: inset 0 0 8px #007bff;
            font-weight: 600;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #math-speed-test-app .game-equation sup {
            font-size: 1.5rem;
            top: -0.5em;
        }

        #math-speed-test-app .game-input {
            width: 100%;
            max-width: 200px;
            padding: 15px;
            font-size: 1.2rem;
            background: #2a2a2a;
            color: #e0e0e0;
            border: 2px solid #444;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 15px;
            transition: border-color 0.3s;
        }
        
        #math-speed-test-app .game-input:focus {
            outline: none;
            border-color: #00e5ff;
        }

        #math-speed-test-app .game-controls {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin: 25px 0;
        }

        #math-speed-test-app .game-button {
            padding: 12px 25px;
            font-size: 1rem;
            font-weight: 600;
            background: linear-gradient(45deg, #007bff, #00bfff);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
        }
        
        #math-speed-test-app .game-button:hover {
            transform: scale(1.05);
            box-shadow: 0 0 15px #00e5ff;
        }

        #math-speed-test-app .game-feedback {
            font-size: 1.2rem;
            margin: 20px 0;
            animation: fadeIn 0.5s;
            font-weight: 600;
        }
        
        #math-speed-test-app .game-feedback.correct {
            color: #00ff00;
            text-shadow: 0 0 5px #00ff00;
            animation: bounce 0.6s ease-in-out;
        }
        
        #math-speed-test-app .game-feedback.wrong {
            color: #ff3333;
            text-shadow: 0 0 5px #ff3333;
            animation: shake 0.6s;
        }

        #math-speed-test-app .game-timer {
            font-size: 1.1rem;
            color: #ffcc00;
            margin-top: 15px;
        }

        #math-speed-test-app .game-progress-bar {
            height: 8px;
            background: #2a2a2a;
            border-radius: 5px;
            margin: 15px 0;
            overflow: hidden;
        }

        #math-speed-test-app .game-progress {
            height: 100%;
            background: linear-gradient(90deg, #007bff, #00bfff);
            transition: width 0.5s ease-out;
        }

        #math-speed-test-app .hidden {
            display: none;
        }
        
        #math-speed-test-app .center-text {
            text-align: center;
        }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
        @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } }

        @media (max-width: 768px) {
            #math-speed-test-app .container {
                flex-direction: column;
            }
            #math-speed-test-app .card {
                padding: 20px;
            }
            #math-speed-test-app .game-title {
                font-size: 2rem;
            }
            #math-speed-test-app .game-equation {
                font-size: 2rem;
            }
            #math-speed-test-app .game-controls {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<div id="math-speed-test-app">
    <div class="container">
        <div class="card help-section">
            <h2 class="help-title center-text">How This Math Speed Test Will Help You</h2>
            <p>This interactive mini-game is designed for Class 11 students preparing for exams like JEE, NEET, or board tests. It sharpens your problem-solving speed, builds confidence under time pressure, and reinforces key math concepts like algebra and quadratics. Regular play can improve your accuracy and quick thinking, essential for competitive exams.</p>
            <h3 class="help-subtitle">Tips to Boost Your Score</h3>
            <ul class="help-list">
                <li>Practice daily for 10-15 minutes to build speed and familiarity with equation types.</li>
                <li>Focus on weak areas—review mistakes and learn the quadratic formula thoroughly for higher levels.</li>
                <li>Use mental math tricks to solve faster without a calculator.</li>
                <li>Aim for streaks to level up quickly and earn more points.</li>
                <li>Time yourself in mock tests on ProSyllabus to simulate real exam conditions.</li>
            </ul>
        </div>
        
        <div class="card game-wrapper">
            <h1 class="game-title">Math Speed Test for Class 11</h1>
            
            <div id="startScreen" class="center-text">
                <p class="game-instructions">Answer 5 questions as fast as you can to test your skills!</p>
                <button id="startButton" class="game-button">Start Game</button>
            </div>
            
            <div id="gameScreen" class="hidden">
                <div class="game-header-info">
                    <span id="level">Level: 1</span>
                    <span id="streak">Streak: 0</span>
                </div>
                <div id="equation" class="game-equation"></div>
                <input type="number" id="answer" placeholder="Enter x" class="game-input" autofocus>
                
                <div class="game-controls">
                    <button id="submit" class="game-button">Submit</button>
                    <button id="pause" class="game-button">Pause</button>
                    <button id="resume" class="game-button hidden">Resume</button>
                </div>
                
                <div id="feedback" class="game-feedback"></div>
                
                <div class="game-progress-bar"><div id="progress" class="game-progress" style="width: 100%;"></div></div>
                
                <div class="game-header-info">
                    <span id="score">Score: 0</span>
                    <span>High Score: <span id="highScore">0</span></span>
                    <span id="questionNum">Question: 1/5</span>
                </div>
                <div id="timer" class="game-timer">Time left: 30s</div>
            </div>
            
            <div id="endScreen" class="hidden center-text">
                <h2 class="help-title">Game Over!</h2>
                <p class="game-instructions">Your Final Score: <span id="finalScore">0</span></p>
                <button id="restart" class="game-button">Play Again</button>
            </div>
        </div>
    </div>
</div>
    
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
    <script>
        let score = 0;
        let streak = 0;
        let level = 1;
        let timeLeft = 30;
        let timerInterval;
        let correctAnswer;
        let highScore = localStorage.getItem('highScore') || 0;
        let questionNumber = 1;
        const totalQuestions = 5;
        let isPaused = false;
        
        const startScreen = document.getElementById('startScreen');
        const gameScreen = document.getElementById('gameScreen');
        const endScreen = document.getElementById('endScreen');
        const startButton = document.getElementById('startButton');
        const submitButton = document.getElementById('submit');
        const pauseButton = document.getElementById('pause');
        const resumeButton = document.getElementById('resume');
        const restartButton = document.getElementById('restart');
        const answerInput = document.getElementById('answer');
        const equationDisplay = document.getElementById('equation');
        const feedbackDisplay = document.getElementById('feedback');
        const scoreDisplay = document.getElementById('score');
        const highScoreDisplay = document.getElementById('highScore');
        const questionNumDisplay = document.getElementById('questionNum');
        const levelDisplay = document.getElementById('level');
        const streakDisplay = document.getElementById('streak');
        const timerDisplay = document.getElementById('timer');
        const progressDisplay = document.getElementById('progress');
        const finalScoreDisplay = document.getElementById('finalScore');
        
        highScoreDisplay.innerText = highScore;

        function generateEquation() {
            let a, b, c, equationText;
            if (level === 1) {
                // Linear Equations
                a = Math.floor(Math.random() * 10) + 1;
                b = Math.floor(Math.random() * 20) - 10;
                c = Math.floor(Math.random() * 20) - 10;
                correctAnswer = (c - b) / a;
                equationText = `${a}x + ${b} = ${c}`;
            } else if (level === 2) {
                // Simple Quadratic Equations
                a = Math.floor(Math.random() * 5) + 1;
                b = Math.floor(Math.random() * 10) + 1;
                c = -Math.floor(Math.random() * 10) - 1;
                const discriminant = b ** 2 - 4 * a * c;
                if (discriminant < 0) return generateEquation(); // Regenerate if no real roots
                correctAnswer = (-b + Math.sqrt(discriminant)) / (2 * a);
                equationText = `${a}x² + ${b}x + ${c} = 0`;
            } else {
                // Level 3: Simple trig with a bit more complexity
                const trigFuncs = ['sin', 'cos'];
                const func = trigFuncs[Math.floor(Math.random() * trigFuncs.length)];
                let angle = Math.floor(Math.random() * 180);
                let value = Math[func](angle * Math.PI / 180).toFixed(2);
                correctAnswer = angle;
                equationText = `${func}(x°) = ${value}`;
            }
            
            equationDisplay.innerHTML = equationText.replace('x²', 'x<sup>2</sup>');
            answerInput.value = '';
            feedbackDisplay.innerText = '';
            feedbackDisplay.classList.remove('correct', 'wrong');
            
            levelDisplay.innerText = `Level: ${level}`;
            streakDisplay.innerText = `Streak: ${streak}`;
            questionNumDisplay.innerText = `Question: ${questionNumber}/${totalQuestions}`;
            
            timeLeft = 30;
            startTimer();
        }

        function startTimer() {
            timerDisplay.innerText = `Time left: ${timeLeft}s`;
            progressDisplay.style.width = '100%';
            clearInterval(timerInterval);
            timerInterval = setInterval(() => {
                if (!isPaused) {
                    timeLeft--;
                    timerDisplay.innerText = `Time left: ${timeLeft}s`;
                    progressDisplay.style.width = `${(timeLeft / 30) * 100}%`;
                    if (timeLeft <= 0) {
                        clearInterval(timerInterval);
                        feedbackDisplay.innerText = `Time's up! The answer was ${correctAnswer.toFixed(2)}`;
                        feedbackDisplay.classList.add('wrong');
                        streak = 0;
                        answerInput.value = '';
                        setTimeout(nextQuestion, 2000);
                    }
                }
            }, 1000);
        }

        function nextQuestion() {
            questionNumber++;
            if (questionNumber > totalQuestions) {
                endGame();
            } else {
                generateEquation();
            }
        }

        function endGame() {
            clearInterval(timerInterval);
            gameScreen.classList.add('hidden');
            endScreen.classList.remove('hidden');
            finalScoreDisplay.innerText = score;
            if (score > highScore) {
                highScore = score;
                localStorage.setItem('highScore', highScore);
                highScoreDisplay.innerText = highScore;
                confetti({
                    particleCount: 250,
                    spread: 90,
                    origin: { y: 0.6 }
                });
            }
        }

        function startGame() {
            startScreen.classList.add('hidden');
            gameScreen.classList.remove('hidden');
            score = 0;
            streak = 0;
            level = 1;
            questionNumber = 1;
            scoreDisplay.innerText = `Score: ${score}`;
            highScoreDisplay.innerText = highScore;
            generateEquation();
        }

        startButton.addEventListener('click', startGame);
        
        submitButton.addEventListener('click', () => {
            const userAnswer = parseFloat(answerInput.value);
            clearInterval(timerInterval);
            if (!isPaused) {
                if (Math.abs(userAnswer - correctAnswer) < 0.01) {
                    feedbackDisplay.innerText = 'Correct!';
                    feedbackDisplay.classList.add('correct');
                    score += (level * 20);
                    streak++;
                    if (streak >= 3) {
                        level = Math.min(level + 1, 3);
                    }
                    confetti({ particleCount: 100, spread: 60, origin: { y: 0.8 } });
                } else {
                    feedbackDisplay.innerText = `Wrong! The answer was ${correctAnswer.toFixed(2)}`;
                    feedbackDisplay.classList.add('wrong');
                    streak = 0;
                }
                scoreDisplay.innerText = `Score: ${score}`;
                setTimeout(nextQuestion, 2000);
            }
        });

        pauseButton.addEventListener('click', () => {
            isPaused = true;
            pauseButton.classList.add('hidden');
            resumeButton.classList.remove('hidden');
            timerDisplay.innerText = 'Paused';
        });

        resumeButton.addEventListener('click', () => {
            isPaused = false;
            resumeButton.classList.add('hidden');
            pauseButton.classList.remove('hidden');
            startTimer();
        });

        restartButton.addEventListener('click', () => {
            endScreen.classList.add('hidden');
            startGame();
        });
        
        // Allow submitting with Enter key
        answerInput.addEventListener('keyup', (event) => {
            if (event.key === 'Enter') {
                submitButton.click();
            }
        });
    </script>
</body>
</html>

<a href="/exam/nisd">This article has been published in National Institute of Social Defence Previous Year Papers Free Online Mock Test. Explore everything related to it here.</a

Enhanced Math Speed Test for Class 11 Students - Interactive Mini Game Updated on Wed Aug 06 2025

Challenge your math skills with this enhanced speed test mini-game for Class 11 students, now with levels, confetti, and more!

How This Math Speed Test Will Help You

Tips to Boost Your Score

Math Speed Test for Class 11

Game Over!

Group Discussions