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

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

        #log-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;
        }

        #log-speed-test-app .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
        }

        #log-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;
        }

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

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

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

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

        #log-speed-test-app .help-list li {
            margin-bottom: 12px;
            padding-left: 25px;
            position: relative;
        }

        #log-speed-test-app .help-list li::before {
            content: "✓";
            color: #00ff00;
            position: absolute;
            left: 0;
            font-weight: bold;
        }

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

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

        #log-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;
            white-space: nowrap;
            overflow-x: auto;
        }
        
        #log-speed-test-app .game-equation sub {
            font-size: 1.5rem;
            bottom: -0.5em;
        }

        #log-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;
        }

        #log-speed-test-app .game-input:focus {
            outline: none;
            border-color: #00e5ff;
        }

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

        #log-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;
        }

        #log-speed-test-app .game-button:hover {
            transform: scale(1.05);
            box-shadow: 0 0 15px #00e5ff;
        }

        #log-speed-test-app .game-feedback {
            font-size: 1.2rem;
            margin: 20px 0;
            animation: fadeIn 0.5s;
            font-weight: 600;
        }

        #log-speed-test-app .game-feedback.correct {
            color: #00ff00;
            text-shadow: 0 0 5px #00ff00;
            animation: bounce 0.6s ease-in-out;
        }

        #log-speed-test-app .game-feedback.wrong {
            color: #ff3333;
            text-shadow: 0 0 5px #ff3333;
            animation: shake 0.6s;
        }

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

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

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

        #log-speed-test-app .hidden {
            display: none;
        }

        #log-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) {
            #log-speed-test-app .container {
                flex-direction: column;
            }
            #log-speed-test-app .card {
                padding: 20px;
            }
            #log-speed-test-app .game-title {
                font-size: 2rem;
            }
            #log-speed-test-app .game-equation {
                font-size: 2rem;
            }
            #log-speed-test-app .game-controls {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<div id="log-speed-test-app">
    <div class="container">
        <div class="card help-section">
            <h2 class="help-title center-text">Logarithm Speed Test: Quick Rules</h2>
            <p>This game is designed to help you quickly solve basic logarithm problems. It's a great way to practice for competitive exams by improving your speed and accuracy with core concepts. Sharpen your skills and see how high you can score!</p>
            <h3 class="help-subtitle">Tips for Logarithms</h3>
            <ul class="help-list">
                <li>Remember the definition: log<sub>b</sub>(x) = y is the same as b<sup>y</sup> = x.</li>
                <li>Practice with common bases like 2, 10, and e.</li>
                <li>Look for opportunities to apply the **Power Rule**: log<sub>b</sub>(x<sup>y</sup>) = y · log<sub>b</sub>(x).</li>
                <li>The **Product Rule** is key: log<sub>b</sub>(xy) = log<sub>b</sub>(x) + log<sub>b</sub>(y).</li>
                <li>The **Quotient Rule** is equally important: log<sub>b</sub>(x/y) = log<sub>b</sub>(x) - log<sub>b</sub>(y).</li>
            </ul>
        </div>
        
        <div class="card game-wrapper">
            <h1 class="game-title">Logarithm Speed Test</h1>
            
            <div id="startScreen" class="center-text">
                <p class="game-instructions">Answer 10 logarithm 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/10</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('logHighScore') || 0;
        let questionNumber = 1;
        const totalQuestions = 10;
        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 base, arg, result, equationText;
            const bases = [2, 3, 5, 10];
            const randomBase = bases[Math.floor(Math.random() * bases.length)];
            const randomPower = Math.floor(Math.random() * 5) + 1; // Powers 1-5
            
            const questionType = Math.floor(Math.random() * 3);
            
            if (questionType === 0) { // Find the result: log_b(x) = ?
                base = randomBase;
                arg = Math.pow(base, randomPower);
                correctAnswer = randomPower;
                equationText = `log<sub>${base}</sub>(${arg})`;
            } else if (questionType === 1) { // Find the argument: log_b(x) = y
                base = randomBase;
                result = randomPower;
                arg = Math.pow(base, result);
                correctAnswer = arg;
                equationText = `log<sub>${base}</sub>(x) = ${result}`;
            } else { // Find the base: log_b(x) = y
                base = randomBase;
                result = randomPower;
                arg = Math.pow(base, result);
                correctAnswer = base;
                equationText = `log<sub>x</sub>(${arg}) = ${result}`;
            }

            equationDisplay.innerHTML = equationText;
            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}`;
                        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('logHighScore', 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 = localStorage.getItem('logHighScore') || 0;
            generateEquation();
        }

        startButton.addEventListener('click', startGame);
        
        submitButton.addEventListener('click', () => {
            const userAnswer = parseFloat(answerInput.value);
            clearInterval(timerInterval);
            if (!isPaused) {
                if (userAnswer === correctAnswer) {
                    feedbackDisplay.innerText = 'Correct! 🎉';
                    feedbackDisplay.classList.add('correct');
                    score += (level * 20) + timeLeft; // Bonus for speed
                    streak++;
                    if (streak >= 3) {
                        level = Math.min(level + 1, 3);
                    }
                    confetti({ particleCount: 100, spread: 60, origin: { y: 0.8 } });
                } else {
                    feedbackDisplay.innerText = `Wrong! The correct answer was ${correctAnswer}`;
                    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();
        });
        
        answerInput.addEventListener('keyup', (event) => {
            if (event.key === 'Enter') {
                submitButton.click();
            }
        });
    </script>
</body>
</html>

<a href="/exam/jee-main">This article has been published in JEE Main Previous Year Papers Free Online Mock Test. Explore everything related to it here.</a

Logarithm Speed Test for Exam Prep - Interactive Mini Game Updated on Wednesday, August 6, 2025

Sharpen your logarithm skills with this interactive mini-game designed to improve your speed and accuracy for competitive exams.

Logarithm Speed Test: Quick Rules

Tips for Logarithms

Logarithm Speed Test

Game Over!

Group Discussions