Read Time from the Clock

/* --- CSS STYLES --- */ #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; position: relative; } .quiz-header { background: #ffcc00; /* Yellow */ color: #000; padding: 15px; text-align: center; font-weight: bold; font-size: 22px; border-bottom: 5px solid #00adef; /* Blue */ } /* SET SELECTION GRID */ .set-selection-area { padding: 15px; background: #f4f4f4; border-bottom: 1px solid #ddd; text-align: center; } .set-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; } .set-btn { background: #fff; border: 2px solid #ccc; border-radius: 4px; padding: 10px 15px; font-size: 14px; cursor: pointer; font-weight: bold; color: #555; flex: 1 1 80px; /* Responsive flex */ max-width: 100px; } .set-btn:hover { background: #e9e9e9; } .set-btn.active-set { background: #00adef; color: white; border-color: #0081b3; box-shadow: inset 0 3px 5px rgba(0,0,0,0.2); } .timer-display { margin-top: 15px; font-size: 20px; color: #d9534f; font-weight: bold; background: #fff; padding: 5px 15px; border-radius: 20px; border: 1px solid #ddd; display: inline-block; } /* QUESTION AREA */ .question-container { padding: 20px; text-align: center; min-height: 450px; } .urdu-text { font-family: 'Noto Nastaliq Urdu', serif; font-size: 26px; line-height: 2.2; padding: 10px 0; direction: rtl; color: #333; } .clock-visual { margin: 0 auto; max-width: 250px; height: auto; } /* OPTIONS */ .options-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* 2 columns mobile */ gap: 15px; padding: 10px; margin-top: 15px; } @media (min-width: 600px) { .options-grid { grid-template-columns: repeat(4, 1fr); } } .option-btn { background: #444; color: #fff; border: none; padding: 15px; font-size: 20px; font-weight: bold; cursor: pointer; border-radius: 6px; box-shadow: 0 4px 0 #222; } .option-btn:active { transform: translateY(4px); box-shadow: none; } .option-btn:disabled { opacity: 0.7; cursor: not-allowed; } /* FEEDBACK */ .feedback-strip { display: none; padding: 15px; color: white; font-weight: bold; text-align: center; margin-top: 20px; font-size: 18px; border-radius: 5px; } .feedback-correct { background: #28a745; } .feedback-wrong { background: #dc3545; } .btn-next { background: #00adef; color: white; border: none; padding: 12px 40px; font-size: 18px; font-weight: bold; border-radius: 5px; cursor: pointer; display: none; margin-top: 10px; } /* RESULT POPUP */ .result-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 10000; overflow-y: auto; padding: 20px; box-sizing: border-box; } .result-content { background: #fff; margin: 10px auto; padding: 20px; max-width: 500px; border-radius: 8px; border: 5px solid #ffcc00; text-align: center; } table.result-table { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 14px; } table.result-table th { background: #eee; padding: 10px; border: 1px solid #ccc; } table.result-table td { padding: 8px; border: 1px solid #ccc; } .reward-icon { font-size: 60px; display: block; margin: 10px 0; } .reward-msg { font-size: 18px; font-weight: bold; margin-bottom: 15px; } .social-share a { display: inline-block; margin: 5px; padding: 10px 20px; color: white; text-decoration: none; border-radius: 4px; font-weight: bold; } .share-wa { background: #25D366; } .share-fb { background: #1877F2; } LND Math: Read Time (Clock) Select Quiz Set: Loading Sets... ⏱ 00:00 Question 1 / 30 کلاک دیکھ کر وقت (Time) بتائیں۔ ✓ CORRECT! ✗ WRONG! Next Question → Score: 0 Quiz Result TotalScoreTimeStatus 30 #CorrectYour Ans✓/✗ WhatsApp Facebook Try Another Set // Namespace to avoid conflicts var QuizApp = (function() { // --- CONFIG --- var totalSets = 10; var questionsPerSet = 30; var currentSet = 1; var currentQIndex = 0; var score = 0; var timerInterval = null; var startTime = null; var currentQuestions = []; var userAnswers = []; var audioCtx = null; // --- AUDIO --- function playHorribleBeep() { if (!window.AudioContext && !window.webkitAudioContext) return; if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); if (audioCtx.state === 'suspended') audioCtx.resume(); var osc = audioCtx.createOscillator(); var gain = audioCtx.createGain(); osc.connect(gain); gain.connect(audioCtx.destination); osc.type = 'sawtooth'; osc.frequency.setValueAtTime(150, audioCtx.currentTime); osc.frequency.exponentialRampToValueAtTime(50, audioCtx.currentTime + 0.6); gain.gain.setValueAtTime(0.5, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.6); osc.start(); osc.stop(audioCtx.currentTime + 0.6); } // --- SVG CLOCK --- function getClockSVG(h, m) { var minAng = m * 6; var hourAng = (h * 30) + (m * 0.5); // Build SVG String var svg = ''; svg += ''; // Numbers for(var i=1; i=70) { icon='🏆'; msg='Good Job! Gold Cup!'; col='#b8860b'; } else if(pct>=50) { icon='💍'; msg='Passed. Silver Ring.'; col='#555'; } else if(pct>=30) { icon='🐦'; msg='Poor! The Crow is watching!'; col='orange'; } else { icon='🐊🐍'; msg='Failed! Beware the Snake!'; col='red'; } rBox.innerHTML = ''+icon+''+msg+''; // Details var tbody = document.getElementById('detailed-rows'); tbody.innerHTML = ''; userAnswers.forEach(function(r) { var row = ''+r.num+''+r.cor+''+r.sel+''+(r.isCorr?'✓':'✗')+''; tbody.innerHTML += row; }); // Social var url = encodeURIComponent(window.location.href); var txt = encodeURIComponent("Scored "+score+"/30 in LND Clock Quiz! "+msg); document.getElementById('share-wa').href = "https://wa.me/?text=" + txt + "%20" + url; document.getElementById('share-fb').href = "https://www.facebook.com/sharer/sharer.php?u=" + url + "&quote=" + txt; } // --- INIT --- function init() { renderButtons(); loadSet(1); } // Return public methods return { init: init, nextQuestion: nextQuestion }; })(); // Force Init after small delay to ensure DOM is ready setTimeout(function() { QuizApp.init(); }, 500);

Read Time from the Clock

Majid Farooq

Leave a Reply Cancel reply

Quiz Result

Majid Farooq

Related Articles

Math Fraction

Identify Symbols

Math Subtraction

Math Multiplication

Math Addition

Math Even and Odd

Leave a Reply Cancel reply