/* Scoped Styles to prevent conflict with Jannah Theme */ #lnd-quiz-wrapper h2 { color: #2c3e50; text-align: center; margin-bottom: 10px; font-size: 24px; } #lnd-quiz-wrapper h3 { text-align: center; color: #16a085; font-size: 18px; } /* Urdu Fixes */ .urdu-text { font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif; line-height: 2.8 !important; /* Strict spacing fix */ padding: 10px 0; font-size: 1.25em; text-align: center; display: block; } /* Grid for Set Selection */ .quiz-set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-top: 20px; } .quiz-set-btn { background: #2980b9; color: white; border: none; padding: 15px 5px; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 14px; transition: 0.2s; text-align: center; } .quiz-set-btn:hover { background: #1c5980; } /* Quiz Interface */ #quiz-play-area { display: none; margin-top: 20px; } .quiz-meta-bar { display: flex; justify-content: space-between; background: #f0f2f5; padding: 10px; border-radius: 5px; margin-bottom: 20px; font-weight: 600; color: #444; } .quiz-timer { color: #c0392b; } .question-display { font-size: 28px; text-align: center; background: #ecf0f1; padding: 30px 10px; margin-bottom: 20px; border-radius: 8px; border-left: 5px solid #2980b9; } .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } /* Mobile adjustment for options */ @media (max-width: 480px) { .options-grid { grid-template-columns: 1fr; } } .option-btn { background: #fff; border: 2px solid #bdc3c7; padding: 15px; border-radius: 6px; cursor: pointer; font-size: 18px; text-align: center; transition: all 0.2s; font-weight: bold; } .option-btn:hover:not(.disabled) { background: #eef2f3; border-color: #2980b9; } /* Instant Feedback Colors */ .option-btn.correct-strip { background: #d4edda !important; border-color: #28a745 !important; color: #155724; } .option-btn.wrong-strip { background: #f8d7da !important; border-color: #dc3545 !important; color: #721c24; } .disabled { pointer-events: none; opacity: 0.9; } .nav-btn { width: 100%; margin-top: 20px; padding: 12px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; color: white; display: none; } .next-q { background: #2980b9; } .finish-q { background: #27ae60; } /* Result Section - Fixed Mobile Layout */ #result-area { display: none; } .score-box { background: #fff3cd; color: #856404; padding: 15px; text-align: center; border-radius: 5px; border: 1px solid #ffeeba; margin-bottom: 20px; } /* Custom Table Structure (Div based for mobile responsiveness) */ .result-table-header { display: flex; background: #2c3e50; color: white; padding: 10px; font-weight: bold; border-radius: 5px 5px 0 0; } .result-row { display: flex; border-bottom: 1px solid #ddd; padding: 10px; align-items: center; background: #fff; } .result-row:nth-child(even) { background: #f9f9f9; } .col-1 { width: 15%; font-size: 0.9em; color: #7f8c8d; } .col-2 { width: 50%; font-weight: bold; } .col-3 { width: 35%; text-align: right; font-size: 0.9em; } .ans-tag { display: block; } .user-wrong { color: #c0392b; text-decoration: line-through; } .user-correct { color: #27ae60; } .real-ans { color: #27ae60; font-weight: bold; } /* Social Share */ .share-box { margin-top: 25px; padding-top: 15px; border-top: 2px dashed #eee; text-align: center; } .social-link { display: inline-block; text-decoration: none; padding: 10px 20px; color: white; border-radius: 4px; margin: 5px; font-size: 14px; } .wa-btn { background: #25D366; } .fb-btn { background: #1877F2; } Class 3 Math LND Quiz (Multiplication) پنجاب ایجوکیشن ڈیپارٹمنٹ: ریاضی (ضرب) ٹیسٹ Select a Set (30 Questions Each) Set 1 1 / 30 00:00 Next Question See Results Result Summary # Question Answer Challenge your friends: Share on WhatsApp Share on Facebook Try Another Set (function(){ // Quiz Application Encapsulated to avoid global scope conflicts const quizApp = { totalSets: 10, qsPerSet: 30, data: [], state: { currentSet: 0, currentQ: 0, score: 0, timer: 0, timerInt: null, history: [] }, // Generator: Creates 300 UNIQUE questions initData: function() { const uniqueCheck = new Set(); const allQs = []; const add = (qStr, ans) => { if(!uniqueCheck.has(qStr)) { uniqueCheck.add(qStr); allQs.push({ q: qStr, a: ans }); } }; // Phase 1: Tables 2-12 for(let i=2; i b.classList.add('disabled')); const isCorrect = (userAns === correctAns); if(isCorrect) { btn.classList.add('correct-strip'); this.state.score++; } else { btn.classList.add('wrong-strip'); // Show correct answer visually allBtns.forEach(b => { if(parseInt(b.innerText) === correctAns) b.classList.add('correct-strip'); }); } // Save to history this.state.history.push({ q: this.data[this.state.currentSet][this.state.currentQ].q, u: userAns, c: correctAns, ok: isCorrect }); // Show Navigation if(this.state.currentQ < this.qsPerSet - 1) { document.getElementById('btn-next').style.display = 'block'; } else { document.getElementById('btn-finish').style.display = 'block'; } }, nextQuestion: function() { this.state.currentQ++; this.renderQuestion(); }, finishQuiz: function() { clearInterval(this.state.timerInt); document.getElementById('quiz-play-area').style.display = 'none'; document.getElementById('result-area').style.display = 'block'; // Fill Summary document.getElementById('final-score').innerText = `Your Score: ${this.state.score} / ${this.qsPerSet}`; document.getElementById('final-time').innerText = `Completed in: ${document.getElementById('timer-label').innerText}`; // Rewards / Advice const pct = (this.state.score / this.qsPerSet) * 100; let msg = ""; let color = ""; if(pct === 100) { msg = "🏆 SUPERB! You are a Math Genius!"; color="green"; } else if(pct >= 80) { msg = "🌟 Excellent! Very good job."; color="blue"; } else if(pct >= 50) { msg = "👍 Good effort! Keep practicing."; color="#d35400"; } else { msg = "⚠️ You need more practice with tables."; color="red"; } const rMsg = document.getElementById('reward-msg'); rMsg.innerText = msg; rMsg.style.color = color; // Fill Table const table = document.getElementById('result-rows-container'); table.innerHTML = ''; this.state.history.forEach((h, i) => { const row = document.createElement('div'); row.className = 'result-row'; row.innerHTML = ` ${i+1} ${h.q} ${h.ok ? `✔ ${h.u}` : `${h.u} (${h.c})` } `; table.appendChild(row); }); // Social Links const url = window.location.href; const shareText = `I got ${this.state.score}/${this.qsPerSet} in LND Class 3 Math Quiz! Try here: `; document.getElementById('share-wa').href = `https://api.whatsapp.com/send?text=${encodeURIComponent(shareText + " " + url)}`; document.getElementById('share-fb').href = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}"e=${encodeURIComponent(shareText)}`; } }; // Expose to global for button clicks window.quizApp = quizApp; quizApp.initData(); quizApp.initUI(); })();
