Math Division

/* 1. Scoped Container to protect Website Layout */ #lnd-quiz-wrapper { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin: 25px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.05); width: 100%; max-width: 100%; box-sizing: border-box; /* Fix padding issues */ } /* 2. Set Selectors */ .set-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 25px; } .set-btn { background: #2c3e50; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: 0.3s; } .set-btn:hover { background: #3498db; } .set-btn.active { background: #3498db; font-weight: bold; border: 2px solid #2980b9; } /* 3. Question Display (Urdu Fixes) */ .question-display { text-align: center; margin: 20px 0; } .q-text { font-size: 32px; /* Large for visibility */ font-weight: bold; color: #2d3436; /* Urdu Overlap Fixes */ line-height: 2.5em; padding: 15px 0; font-family: 'Jameel Noori Nastaleeq', 'Arial', sans-serif; } /* 4. Options Grid */ .options-container { display: grid; grid-template-columns: repeat(2, 1fr); /* 2 columns mobile friendly */ gap: 15px; margin-bottom: 20px; } .option-card { background: #f1f2f6; border: 2px solid #ced6e0; border-radius: 8px; padding: 15px; font-size: 22px; font-weight: bold; text-align: center; cursor: pointer; transition: all 0.2s ease; user-select: none; } /* 5. Feedback Colors & Animations */ .correct-ans { background-color: #00b894 !important; /* Bold Green */ color: white !important; border-color: #00b894 !important; } .wrong-ans { background-color: #d63031 !important; /* Bold Red */ color: white !important; border-color: #d63031 !important; } /* 6. Navigation Buttons */ .nav-area { text-align: center; margin-top: 20px; height: 50px; /* Reserve space */ } .next-btn { background: #0984e3; color: white; border: none; padding: 12px 30px; font-size: 18px; border-radius: 5px; cursor: pointer; display: none; /* Hidden until answer selected */ } .next-btn:hover { background: #74b9ff; } /* 7. Result Section (Fixed Table) */ .result-view { display: none; text-align: center; } .reward-img { font-size: 80px; margin: 10px 0; animation: popIn 0.5s; } @keyframes popIn { 0% {transform: scale(0);} 80% {transform: scale(1.1);} 100% {transform: scale(1);} } .advice-msg { font-size: 20px; font-weight: bold; margin: 15px 0; padding: 10px; border-radius: 5px; } .bad-advice { color: #c0392b; background: #ffeaa7; border: 1px solid #fab1a0; } .good-advice { color: #27ae60; background: #bef2e5; border: 1px solid #55efc4; } /* Fixed Table - No Scrolling */ .summary-table { width: 100%; border-collapse: collapse; table-layout: fixed; /* Forces columns to fit screen */ margin-bottom: 20px; font-size: 14px; } .summary-table th, .summary-table td { border: 1px solid #bdc3c7; padding: 10px 5px; word-wrap: break-word; } .summary-table th { background: #ecf0f1; color: #2c3e50; } /* Social Buttons */ .social-share { display: flex; gap: 10px; justify-content: center; margin-top: 20px; } .share-link { padding: 10px 15px; color: white; text-decoration: none; border-radius: 4px; font-weight: bold; font-size: 13px; } .wa { background: #25D366; } .fb { background: #1877F2; } /* Utility */ .hidden { display: none !important; } .timer-badge { float: right; font-weight: bold; color: #e17055; } Class 3 Math: Division Quiz Select a Set to Start (30 Questions per Set) Q: 1/30 00:00 Loading... Next Question ➡ Total Score Right Wrong Time 30 0 0 0 00:00 Share WhatsApp Share Facebook Attempt Another Set Detailed Summary # Question Your Ans Correct // --- 1. CONFIGURATION & STATE --- const TOTAL_SETS = 10; const Q_PER_SET = 30; let allQuestions = []; // Will hold 300 unique questions let currentSetData = []; let currentQIndex = 0; let score = 0; let timerInt; let timeElapsed = 0; let userAnswers = []; // History for results let isAnswered = false; // --- 2. SOUND ENGINE (Web Audio API) --- const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); function playSound(type) { if (audioCtx.state === 'suspended') audioCtx.resume(); const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.connect(gain); gain.connect(audioCtx.destination); if (type === 'wrong') { // LONG HORRIBLE BEEP // Sawtooth wave + descending pitch = "Fail" sound osc.type = 'sawtooth'; osc.frequency.setValueAtTime(120, audioCtx.currentTime); osc.frequency.linearRampToValueAtTime(40, audioCtx.currentTime + 1.5); // Drops low gain.gain.setValueAtTime(0.5, audioCtx.currentTime); gain.gain.linearRampToValueAtTime(0.01, audioCtx.currentTime + 1.5); // Fade out osc.start(); osc.stop(audioCtx.currentTime + 1.5); // Plays for 1.5 seconds } else { // Nice Ding osc.type = 'sine'; osc.frequency.setValueAtTime(600, audioCtx.currentTime); osc.frequency.exponentialRampToValueAtTime(1200, audioCtx.currentTime + 0.1); gain.gain.setValueAtTime(0.2, audioCtx.currentTime); gain.gain.linearRampToValueAtTime(0.01, audioCtx.currentTime + 0.5); osc.start(); osc.stop(audioCtx.currentTime + 0.5); } } // --- 3. QUESTION GENERATOR (300 UNIQUE) --- function initQuiz() { let pool = []; // Loop to generate Division Facts: Dividend / Divisor = Quotient // We need 300 unique facts. for(let divisor = 2; divisor 0) opts.add(w); // Ensure positive } let optArray = Array.from(opts).sort(() => Math.random() - 0.5); const box = document.getElementById('options-box'); box.innerHTML = ''; optArray.forEach(val => { let btn = document.createElement('div'); btn.className = 'option-card'; btn.innerText = val; // Single display, no duplicate Urdu/Eng needed for Numbers btn.onclick = () => handleAnswer(val, correct, btn); box.appendChild(btn); }); } function handleAnswer(selected, correct, btnElem) { if(isAnswered) return; // Prevent multi-click isAnswered = true; let qText = document.getElementById('question-text').innerText; let isRight = (selected === correct); // Styling if(isRight) { score++; btnElem.classList.add('correct-ans'); playSound('right'); } else { btnElem.classList.add('wrong-ans'); playSound('wrong'); // Long horrible beep // Highlight correct one let allOpts = document.querySelectorAll('.option-card'); allOpts.forEach(o => { if(parseInt(o.innerText) === correct) o.classList.add('correct-ans'); }); } // Save History userAnswers.push({ q: qText, u: selected, c: correct, stat: isRight }); // Show Next Button (Wait for user to click it) document.getElementById('next-btn').style.display = 'inline-block'; } function nextQuestion() { currentQIndex++; if(currentQIndex < Q_PER_SET) { renderQuestion(); } else { finalizeQuiz(); } } // --- 5. RESULTS & REWARDS --- function finalizeQuiz() { clearInterval(timerInt); document.getElementById('quiz-panel').classList.add('hidden'); document.getElementById('result-panel').style.display = 'block'; // Calc Stats let wrong = Q_PER_SET - score; let percent = (score / Q_PER_SET) * 100; document.getElementById('res-score').innerText = score; document.getElementById('res-right').innerText = score; document.getElementById('res-wrong').innerText = wrong; document.getElementById('res-time').innerText = document.getElementById('timer').innerText; // Reward Logic let icon = ""; let advice = ""; let styleClass = ""; if(percent >= 90) { icon = "👑💎🏆"; // Crown, Diamond, Cup advice = "OUTSTANDING! You earned the Diamond Crown!"; styleClass = "good-advice"; } else if (percent >= 70) { icon = "🥈🎈"; advice = "Great Job! Keep practicing to get the Crown."; styleClass = "good-advice"; } else if (percent >= 50) { icon = "😐⚠️"; advice = "Just Passed. You need to work harder."; styleClass = "bad-advice"; } else { // Punishments icon = "🐍🐊👹🧟"; // Snake, Croc, Monster advice = "FAILED! The monsters are angry! Study Division NOW!"; styleClass = "bad-advice"; } document.getElementById('reward-icon').innerText = icon; document.getElementById('score-text').innerText = `You Scored ${Math.round(percent)}%`; const ab = document.getElementById('advice-box'); ab.innerText = advice; ab.className = "advice-msg " + styleClass; // Populate Table const tbody = document.getElementById('detail-body'); tbody.innerHTML = ''; userAnswers.forEach((item, i) => { let row = ` ${i+1} ${item.q} ${item.u} ${item.c} `; tbody.innerHTML += row; }); // Social Links let url = window.location.href; let txt = `I got ${score}/${Q_PER_SET} in the Division Quiz! Can you beat me?`; document.getElementById('share-wa').href = `https://api.whatsapp.com/send?text=${encodeURIComponent(txt + " " + url)}`; document.getElementById('share-fb').href = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`; } // Start initQuiz();

Math Division

Class 3 Math: Division Quiz

Detailed Summary

Majid Farooq

Leave a Reply Cancel reply

Class 3 Math: Division Quiz

Detailed Summary

Majid Farooq

Related Articles

English Punctuation

Use of Pronoun

Equivalent Fractions

Initial Blends

Digraphs

Prepositions

Leave a Reply Cancel reply