Math Addition

LND Class 3 Math - Addition :root { --header-blue: #0091EA; /* Bright Blue from screenshot */ --strip-yellow: #FFD600; /* Vivid Yellow from screenshot */ --bg-color: #BBDEFB; /* Light Blue background */ --box-black: #000000; --btn-grey: #616161; --text-white: #FFFFFF; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { margin: 0; padding: 0; font-family: 'Arial', sans-serif; background: var(--bg-color); color: #333; height: 100vh; display: flex; flex-direction: column; } /* SCREENSHOT REPLICATION STYLES */ .top-header { background-color: var(--header-blue); color: white; padding: 15px 20px; font-size: 1.2rem; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .yellow-strip { background-color: var(--strip-yellow); color: black; padding: 10px 20px; font-weight: bold; font-size: 1.1rem; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; } .main-content { flex: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 800px; margin: 0 auto; padding-top: 20px; } /* THE BLACK QUESTION BOX */ .black-box { background-color: var(--box-black); color: white; width: 90%; height: 200px; /* Fixed height like screenshot */ display: flex; justify-content: center; align-items: center; font-size: 3rem; /* Large text */ font-weight: bold; margin-bottom: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.3); } /* OPTION BUTTONS */ .options-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3 Columns exactly like screenshot */ gap: 10px; width: 90%; margin-bottom: 20px; } .opt-btn { background-color: var(--btn-grey); color: white; border: none; padding: 15px 5px; font-size: 1.5rem; font-weight: bold; cursor: pointer; text-align: center; transition: transform 0.1s; } .opt-btn:active { transform: scale(0.95); } .opt-btn.correct { background-color: #2E7D32 !important; } /* Dark Green */ .opt-btn.wrong { background-color: #C62828 !important; } /* Dark Red */ /* VIEWS */ .view-section { display: none; width: 100%; } .view-section.active { display: block; } /* MENU LIST */ .set-list { padding: 10px; } .set-item { background: white; padding: 15px; margin-bottom: 10px; border-radius: 4px; border-left: 5px solid var(--header-blue); box-shadow: 0 2px 4px rgba(0,0,0,0.1); cursor: pointer; display: flex; justify-content: space-between; font-size: 1.1rem; } /* RESULT TABLE */ .result-container { padding: 20px; background: white; margin: 10px; border-radius: 8px; } .summary-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.9rem; } .summary-table th { background: var(--header-blue); color: white; padding: 10px; } .summary-table td { border-bottom: 1px solid #ddd; padding: 10px; text-align: center; } .summary-table tr.correct-row { background-color: #E8F5E9; } .summary-table tr.wrong-row { background-color: #FFEBEE; } /* UTILS */ .btn-action { background: var(--header-blue); color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 4px; margin-top: 15px; cursor: pointer; width: 100%; } /* URDU FONT FIX & Layout Logic */ .urdu-text { font-family: 'Jameel Noori Nastaleeq', 'Arial', sans-serif; line-height: 2; padding: 5px 0; } .share-area { display: flex; gap: 10px; margin-top: 20px; } .share-btn { flex: 1; padding: 10px; color: white; text-align: center; text-decoration: none; border-radius: 4px; font-weight: bold; } .whatsapp { background-color: #25D366; } .facebook { background-color: #1877F2; } LND SLOs Select Practice Set LND SLOs Q. 1 - ADDITION ⏱ 00:00 0 + 0 Next Question Exit Quiz Result Card Score: 0 / 30 Time Taken: 00:00 Share WhatsApp Share Facebook Q# Question Your Ans Result Back to Home /* LOGIC: 1. Generate 10 Sets of 30 unique questions (Total 300). 2. Sets 1-3: 2-Digit Addition (e.g., 46 + 33). 3. Sets 4-6: 3-Digit Addition (e.g., 125 + 342). 4. Sets 7-9: 4-Digit Addition (e.g., 5731 + 1564). 5. Set 10: Mixed Bag. */ const totalSets = 10; const qsPerSet = 30; let questionBank = {}; // Stores generated questions by Set ID // --- QUESTION GENERATOR --- function generateQuestions() { for (let set = 1; set { if (b.innerText == correct) b.classList.add('correct'); }); } // Save History userHistory.push({ qNum: currentQIndex + 1, question: questionBank[currentSetId][currentQIndex].q, selected: selected, correct: correct, isCorrect: isCorrect }); // Show Next Button document.getElementById('next-btn').style.display = 'block'; } function nextQuestion() { currentQIndex++; if (currentQIndex < qsPerSet) { loadQuestion(); } else { finishQuiz(); } } function finishQuiz() { clearInterval(timerInterval); // Switch View document.querySelector('.active').classList.remove('active'); document.getElementById('view-result').classList.add('active'); // Populate Data document.getElementById('final-score').innerText = userScore; document.getElementById('final-time').innerText = document.getElementById('timer').innerText; // Generate Table const tbody = document.getElementById('result-body'); tbody.innerHTML = ''; userHistory.forEach(h => { const tr = document.createElement('tr'); tr.className = h.isCorrect ? 'correct-row' : 'wrong-row'; tr.innerHTML = ` ${h.qNum} ${h.question} ${h.selected} ${h.correct} ${h.isCorrect ? '✔' : ''} `; tbody.appendChild(tr); }); // Setup Share Links const shareText = `I scored ${userScore}/30 in the LND Class 3 Addition Quiz! Time: ${document.getElementById('timer').innerText}`; const url = window.location.href; document.getElementById('share-wa').href = `https://wa.me/?text=${encodeURIComponent(shareText + " " + url)}`; document.getElementById('share-fb').href = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}&quote=${encodeURIComponent(shareText)}`; } function goHome() { if (confirm("Go back to home menu?")) { clearInterval(timerInterval); document.querySelector('.active').classList.remove('active'); document.getElementById('view-home').classList.add('active'); } }

Math Addition

Score: 0 / 30

Majid Farooq

Leave a Reply Cancel reply

Score: 0 / 30

Majid Farooq

Related Articles

Trigraphs

Proper and Common Noun

SVO (Subject-Verb-Object)

Math Identify the shapes

Use of Pronoun

Math Fraction

Leave a Reply Cancel reply