Math Fraction

#stijob-quiz-wrapper { font-family: 'Arial', sans-serif; max-width: 100%; margin: 20px auto; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden; } /* Header & Navigation */ .quiz-header { background: #ffcc00; /* LND Yellow */ color: #000; padding: 15px; text-align: center; font-weight: bold; font-size: 1.2rem; border-bottom: 4px solid #00adef; /* LND Blue */ } .set-selector { padding: 10px; background: #f0f0f0; text-align: center; border-bottom: 1px solid #ccc; } .set-selector select { padding: 8px; font-size: 16px; border-radius: 4px; } /* Question Area */ .question-container { padding: 20px; text-align: center; min-height: 300px; position: relative; } .urdu-text { font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif; font-size: 24px; line-height: 2.2; /* Fix for Urdu overlap */ direction: rtl; margin: 15px 0; color: #333; } /* Visual Fraction Display (SVG) */ .fraction-visual { margin: 20px auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 400px; } .shape-item { width: 50px; height: 50px; } /* Options Grid */ .options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; padding: 20px; } .option-btn { background: #555; color: #fff; border: none; padding: 15px; font-size: 20px; cursor: pointer; border-radius: 4px; transition: all 0.2s; } .option-btn:hover { background: #333; } /* Feedback Strips */ .feedback-strip { display: none; padding: 15px; color: white; font-weight: bold; text-align: center; margin-top: 10px; font-size: 18px; } .feedback-correct { background: #28a745; border: 2px solid #1e7e34; } .feedback-wrong { background: #dc3545; border: 2px solid #bd2130; } /* Navigation Buttons */ .nav-controls { padding: 20px; text-align: center; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .btn-next { background: #00adef; color: white; border: none; padding: 10px 25px; font-size: 16px; border-radius: 4px; cursor: pointer; display: none; /* Hidden until answer is picked */ } /* Result Table (Fixed Layout) */ .result-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999; overflow-y: auto; padding: 20px; } .result-content { background: #fff; margin: 20px auto; padding: 20px; max-width: 600px; border-radius: 8px; } table.result-table { width: 100%; border-collapse: collapse; table-layout: fixed; /* Fixed layout as requested */ margin-bottom: 20px; } table.result-table th, table.result-table td { border: 1px solid #ddd; padding: 8px; text-align: center; word-wrap: break-word; } table.result-table th { background: #f4f4f4; } .reward-section { text-align: center; margin: 20px 0; padding: 20px; border: 2px dashed #ccc; } .reward-icon { font-size: 60px; display: block; margin-bottom: 10px; } .reward-msg { font-weight: bold; font-size: 1.1rem; } .social-share { display: flex; gap: 10px; justify-content: center; margin-top: 20px; } .share-btn { padding: 10px 20px; color: white; text-decoration: none; border-radius: 4px; font-weight: bold; } .share-wa { background: #25D366; } .share-fb { background: #1877F2; } LND Class 3 Mathematics - Fractions Quiz Select a Set to Begin Choose Quiz Set: Set 1 Set 2 Set 3 Set 4 Set 5 Set 6 Set 7 Set 8 Set 9 Set 10 Time: 00:00 Question 1 / 30 رنگ دار حصہ کی کسر (Fraction) بتائیں۔ ✓ Correct Answer! ✗ Wrong Answer! Score: 0 Next Question → Quiz Result Summary Total Obtained Time Status 30 Detailed Report # Correct Ans Result Share on WhatsApp Share on Facebook Attempt Another Set // --- CONFIGURATION --- const totalSets = 10; const questionsPerSet = 30; // --- STATE --- let currentSet = 1; let currentQIndex = 0; let score = 0; let timerInterval; let startTime; let questions = []; // Stores the generated questions for the current set let userAnswers = []; // Stores {q: index, correct: bool, correctVal: string} // --- AUDIO --- const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); function playHorribleBeep() { if (audioCtx.state === 'suspended') audioCtx.resume(); const osc = audioCtx.createOscillator(); const gainNode = audioCtx.createGain(); osc.connect(gainNode); gainNode.connect(audioCtx.destination); osc.type = 'sawtooth'; // Harsh sound osc.frequency.value = 150; // Low pitch // Modulation for "horrible" effect osc.frequency.exponentialRampToValueAtTime(50, audioCtx.currentTime + 0.5); osc.start(); gainNode.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 0.8); osc.stop(audioCtx.currentTime + 0.8); } // --- GENERATOR ENGINE --- // Generates 300 unique questions on the fly function generateQuestions(setNum) { const setQuestions = []; // Seed the generator with setNum so it's consistent but different per set let seed = setNum * 100; const shapes = ['circle', 'square', 'star', 'triangle', 'cylinder', 'strawberry']; for (let i = 0; i < questionsPerSet; i++) { // Determine Denominator (Total parts): 2 to 10 // Varies based on index to ensure spread let total = (i % 9) + 2; // Determine Numerator (Colored parts): 1 to Total-1 let colored = Math.floor((Math.random() * (total - 1))) + 1; // Select Shape let shape = shapes[i % shapes.length]; // Create Distractor Options let options = new Set(); options.add(`${colored}/${total}`); // Correct answer while(options.size < 3) { let d_total = Math.floor(Math.random() * 9) + 2; let d_col = Math.floor(Math.random() * (d_total - 1)) + 1; let opt = `${d_col}/${d_total}`; // Avoid duplicate values like 1/2 and 2/4 (simplified logic for text match) if (opt !== `${colored}/${total}`) options.add(opt); } setQuestions.push({ id: i, colored: colored, total: total, shape: shape, options: Array.from(options).sort(() => Math.random() - 0.5) // Shuffle }); } return setQuestions; } // --- RENDER VISUALS --- function getShapeSVG(type, isColored) { const color = isColored ? getShapeColor(type) : 'none'; const stroke = '#000'; const strokeW = '2'; const fill = isColored ? color : '#fff'; // SVG Paths if (type === 'circle') return ``; if (type === 'square') return ``; if (type === 'triangle') return ``; if (type === 'star') return ``; // Cylinder simplified as a rectangle with ellipses if (type === 'cylinder') return ``; // Strawberry (Emoji fallback or simple shape) if (type === 'strawberry') return `🍓`; return ''; } function getShapeColor(type) { if(type === 'star') return '#28a745'; // Green if(type === 'triangle') return '#00adef'; // Blue if(type === 'strawberry') return '#ff0000'; // Red return '#4caf50'; // Default Greenish } function renderVisual(q) { const container = document.getElementById('visual-container'); container.innerHTML = ''; // For simple shapes, we draw N individual items for (let i = 0; i < q.total; i++) { let isColored = i < q.colored; // Create wrapper let div = document.createElement('div'); div.className = 'shape-item'; div.innerHTML = getShapeSVG(q.shape, isColored); container.appendChild(div); } } // --- GAME LOGIC --- function loadSet() { currentSet = document.getElementById('setSelect').value; questions = generateQuestions(currentSet); currentQIndex = 0; score = 0; userAnswers = []; document.getElementById('current-score').innerText = '0'; document.getElementById('game-area').style.display = 'block'; document.getElementById('result-modal').style.display = 'none'; startTimer(); loadQuestion(); } function loadQuestion() { const q = questions[currentQIndex]; document.getElementById('q-counter').innerText = `Question ${currentQIndex + 1} / ${questionsPerSet}`; // Reset UI document.getElementById('feedback-correct').style.display = 'none'; document.getElementById('feedback-wrong').style.display = 'none'; document.getElementById('next-btn').style.display = 'none'; // Render Visuals renderVisual(q); // Render Options const optsContainer = document.getElementById('options-container'); optsContainer.innerHTML = ''; q.options.forEach(opt => { let btn = document.createElement('button'); btn.className = 'option-btn'; btn.innerText = opt; btn.onclick = () => checkAnswer(opt, q, btn); optsContainer.appendChild(btn); }); } function checkAnswer(selected, q, btnElement) { // Disable all buttons const buttons = document.querySelectorAll('.option-btn'); buttons.forEach(b => b.disabled = true); const correctVal = `${q.colored}/${q.total}`; const isCorrect = (selected === correctVal); if (isCorrect) { score++; document.getElementById('current-score').innerText = score; document.getElementById('feedback-correct').style.display = 'block'; btnElement.style.background = '#28a745'; } else { playHorribleBeep(); document.getElementById('feedback-wrong').style.display = 'block'; btnElement.style.background = '#dc3545'; // Highlight correct one buttons.forEach(b => { if(b.innerText === correctVal) b.style.background = '#28a745'; }); } // Save for summary userAnswers.push({ qNum: currentQIndex + 1, isCorrect: isCorrect, correctVal: correctVal }); document.getElementById('next-btn').style.display = 'inline-block'; } function nextQuestion() { currentQIndex++; if (currentQIndex { const now = new Date(); const diff = Math.floor((now - startTime) / 1000); const m = Math.floor(diff / 60).toString().padStart(2, '0'); const s = (diff % 60).toString().padStart(2, '0'); document.getElementById('timer').innerText = `${m}:${s}`; }, 1000); } // --- RESULTS & REWARDS --- function finishQuiz() { clearInterval(timerInterval); const now = new Date(); const timeTaken = document.getElementById('timer').innerText; // Show Modal const modal = document.getElementById('result-modal'); modal.style.display = 'block'; // Basic Stats document.getElementById('res-score').innerText = score; document.getElementById('res-time').innerText = timeTaken; const percentage = (score / questionsPerSet) * 100; document.getElementById('res-status').innerText = percentage >= 50 ? 'PASS' : 'FAIL'; document.getElementById('res-status').style.color = percentage >= 50 ? 'green' : 'red'; // Rewards const rewardBox = document.getElementById('reward-box'); let icon = ''; let msg = ''; let color = ''; if (percentage >= 90) { icon = '💎👑'; // Diamond Crown msg = 'Excellent! You get a Diamond Crown!'; color = 'gold'; } else if (percentage >= 70) { icon = '🏆'; // Cup msg = 'Good Job! You get a Gold Cup!'; color = '#daa520'; } else if (percentage >= 50) { icon = '💍'; // Ring msg = 'Not Bad! You get a Ring.'; color = 'silver'; } else if (percentage >= 30) { icon = '🐦'; // Crow msg = 'Poor! Work harder or the Crow will catch you!'; color = 'orange'; } else { icon = '🐊🐍'; // Snake/Croc msg = 'Very Bad! Beware of the Snake and Crocodile! Study Hard!'; color = 'red'; } rewardBox.innerHTML = `${icon}${msg}`; // Detailed Table const tbody = document.getElementById('detailed-rows'); tbody.innerHTML = ''; userAnswers.forEach(ans => { let row = ` ${ans.qNum} ${ans.correctVal} ${ans.isCorrect ? 'Right' : 'Wrong'} `; tbody.innerHTML += row; }); // Social Sharing Links const currentUrl = encodeURIComponent(window.location.href); const shareText = encodeURIComponent(`I scored ${score}/${questionsPerSet} in the LND Class 3 Fraction Quiz! Can you beat me?`); document.getElementById('share-wa').href = `https://wa.me/?text=${shareText}%20${currentUrl}`; document.getElementById('share-fb').href = `https://www.facebook.com/sharer/sharer.php?u=${currentUrl}&quote=${shareText}`; } // Init window.onload = function() { loadSet(); };

Math Fraction

Majid Farooq

Leave a Reply Cancel reply

Quiz Result Summary

Detailed Report

Majid Farooq

Related Articles

Use of Articles A/An/The

Trigraphs

Math Subtraction

Proper and Common Noun

Initial Blends

Identify Symbols

Leave a Reply Cancel reply