@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;700&display=swap'); /* MAIN WRAPPER */ #stijob-lnd-shapes-wrapper { font-family: 'Arial', sans-serif; max-width: 100%; margin: 20px auto; background: #e0f7fa; /* Light Blue background like LND app */ border: 1px solid #00adef; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden; position: relative; } /* HEADER */ .lnd-header { background: #00adef; /* Cyan/Blue */ color: #fff; padding: 10px 15px; font-weight: bold; font-size: 18px; } .question-bar { background: #ffcc00; /* Yellow strip */ color: #000; text-align: center; padding: 10px; font-weight: bold; font-size: 20px; border-bottom: 2px solid #e6b800; } /* SET SELECTION */ .set-selection-area { padding: 15px; background: #fff; text-align: center; border-bottom: 1px solid #ddd; } .set-grid { display: grid; grid-template-columns: repeat(5, 1fr); /* 5 buttons per row */ gap: 8px; margin-bottom: 15px; } @media (max-width: 450px) { .set-grid { grid-template-columns: repeat(3, 1fr); } } .set-btn { background: #f8f9fa; border: 2px solid #ccc; padding: 8px; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 14px; color: #555; } .set-btn.active-set { background: #00adef; color: #fff; border-color: #008cc0; } .timer-badge { display: inline-block; background: #fff; border: 2px solid #d9534f; color: #d9534f; font-weight: bold; padding: 5px 15px; border-radius: 20px; font-size: 18px; } /* GAME AREA */ .game-area { padding: 0; background: #b3e5fc; /* Light blue body */ } /* BLACK SCREEN FOR SHAPE */ .shape-screen { background-color: #000; width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; position: relative; } .urdu-instruction { position: absolute; right: 10px; bottom: 50%; transform: translateY(50%); color: #fff; font-family: 'Noto Nastaliq Urdu', serif; font-size: 24px; direction: rtl; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } @media (max-width: 600px) { .urdu-instruction { position: static; width: 100%; text-align: center; background: #000; padding-bottom: 10px; transform: none; } .shape-screen { flex-direction: column; height: auto; padding: 20px 0; } } /* OPTIONS - STRICT 2 COLUMNS */ .options-container { padding: 15px; background: #b3e5fc; display: grid; grid-template-columns: 1fr 1fr; /* Two Columns Fixed */ gap: 15px; } .option-btn { background: #666; /* Grey background like screenshot */ color: #fff; border: none; padding: 15px; font-size: 16px; font-weight: bold; border-radius: 0; /* Rectangular buttons */ cursor: pointer; box-shadow: 0 3px 0 #444; display: flex; flex-direction: column; align-items: center; justify-content: center; text-transform: uppercase; } .option-btn span.urdu { font-family: 'Noto Nastaliq Urdu', serif; font-size: 18px; margin-top: 5px; } .option-btn:active { transform: translateY(3px); box-shadow: none; } .option-btn:disabled { opacity: 0.8; cursor: default; transform: none; box-shadow: none; } /* FEEDBACK STRIPS */ .feedback-strip { display: none; width: 100%; padding: 12px; text-align: center; color: #fff; font-weight: bold; font-size: 18px; text-transform: uppercase; } .strip-green { background: #008000; border-top: 2px solid #006400; } /* Bold Green */ .strip-red { background: #ff0000; border-top: 2px solid #8b0000; } /* Bold Red */ .next-btn-container { text-align: center; padding: 10px; display: none; background: #fff; } .btn-next { background: #00adef; color: white; border: none; padding: 10px 40px; font-size: 18px; font-weight: bold; border-radius: 4px; cursor: pointer; } /* RESULT MODAL */ .result-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.95); z-index: 10000; overflow-y: auto; padding: 20px; } .result-box { background: #fff; max-width: 500px; margin: 30px auto; border-radius: 8px; border: 5px solid #ffcc00; padding: 20px; text-align: center; } .summary-table { width: 100%; border-collapse: collapse; margin: 15px 0; table-layout: fixed; } .summary-table th { background: #eee; padding: 10px; border: 1px solid #999; } .summary-table td { padding: 10px; border: 1px solid #999; font-weight: bold; font-size: 18px; } .details-scroll { max-height: 200px; overflow-y: scroll; border: 1px solid #ccc; text-align: left; margin-bottom: 15px; } .details-table { width: 100%; border-collapse: collapse; font-size: 14px; } .details-table th { position: sticky; top: 0; background: #333; color: #fff; padding: 5px; } .details-table td { padding: 5px; border-bottom: 1px solid #eee; } .reward-area { background: #fff8e1; padding: 15px; border: 2px dashed #ffb300; margin-bottom: 15px; border-radius: 8px; } .reward-emoji { font-size: 60px; line-height: 1; display: block; margin-bottom: 10px; } .reward-text { font-size: 18px; font-weight: bold; } .social-btn { display: inline-block; padding: 10px 15px; color: #fff; text-decoration: none; border-radius: 4px; margin: 5px; font-weight: bold; } .wa-btn { background: #25D366; } .fb-btn { background: #1877F2; } LND SLOs Q. 1 - IDENTIFY SHAPES ⏱ 00:00 شکل (Shape) پہچانیں۔ ✓ Correct Answer! ✗ Wrong Answer! Next Button → Score: 0 / 30 Quiz Result TotalMarksWrongTime 30 #Right AnsYour Ans✓/✗ Share Result: WhatsApp Facebook Try Another Set var QuizEngine = (function(){ // --- CONFIG --- var totalSets = 10; var qPerSet = 30; var currentSet = 1; var qIndex = 0; var score = 0; var wrongs = 0; var timerInt = null; var startTime; var setQuestions = []; var history = []; var audioCtx; // --- SHAPE DATA --- // Format: { id: 'sq', eng: 'SQUARE', urdu: 'مربع' } var shapes = [ { id: 'sq', eng: 'SQUARE', urdu: 'مربع' }, { id: 'rec', eng: 'RECTANGLE', urdu: 'مستطیل' }, { id: 'tri', eng: 'TRIANGLE', urdu: 'مثلث' }, { id: 'cir', eng: 'CIRCLE', urdu: 'دائرہ' }, { id: 'semi', eng: 'SEMI-CIRCLE', urdu: 'آدھا دائرہ' }, { id: 'oval', eng: 'OVAL', urdu: 'بیضوی' }, { id: 'star', eng: 'STAR', urdu: 'ستارہ' }, { id: 'dia', eng: 'DIAMOND', urdu: 'لوزی' }, // Rhombus { id: 'pen', eng: 'PENTAGON', urdu: 'مخمس' }, { id: 'hex', eng: 'HEXAGON', urdu: 'مسدس' } ]; var colors = ['white', 'red', 'yellow', '#00adef', '#eaff00']; // --- AUDIO --- function playHorribleBeep() { try { var AC = window.AudioContext || window.webkitAudioContext; if(!AC) return; if(!audioCtx) audioCtx = new AC(); if(audioCtx.state === 'suspended') audioCtx.resume(); var osc = audioCtx.createOscillator(); var gain = audioCtx.createGain(); osc.type = 'sawtooth'; osc.frequency.setValueAtTime(120, audioCtx.currentTime); osc.frequency.linearRampToValueAtTime(50, audioCtx.currentTime + 1.0); // Dropping pitch gain.gain.setValueAtTime(0.5, audioCtx.currentTime); gain.gain.linearRampToValueAtTime(0.01, audioCtx.currentTime + 1.0); osc.connect(gain); gain.connect(audioCtx.destination); osc.start(); osc.stop(audioCtx.currentTime + 1.0); } catch(e) { console.error(e); } } // --- SVG FACTORY --- function getSVG(shapeId, color, rot) { var svg = ''; var center = 'transform-origin: 50px 50px; transform: rotate('+rot+'deg);'; switch(shapeId) { case 'sq': svg += ``; break; case 'rec': // Make it clearly distinct from square svg += ``; break; case 'tri': svg += ``; break; case 'cir': svg += ``; break; case 'semi': svg += ``; break; case 'oval': svg += ``; break; case 'star': svg += ``; break; case 'dia': svg += ``; break; case 'pen': svg += ``; break; case 'hex': svg += ``; break; } svg += ''; return svg; } // --- GENERATOR --- function generateSetData(setNum) { var data = []; // Random seed logic roughly based on setNum to ensure variance but consistency per set load for(var i=0; i= 70) { emoji='🏆'; txt='Good Job! Gold Cup!'; col='#d4af37'; } else if(pct >= 50) { emoji='💍'; txt='Passed. Silver Ring.'; col='blue'; } else if(pct >= 30) { emoji='🐦'; txt='Poor! The Crow is watching.'; col='orange'; } else { emoji='🐍🐊🐕'; txt='FAIL! Beware the Snake & Dog!'; col='red'; } rDiv.innerHTML = `${emoji}${txt}`; // Table var tbody = document.getElementById('details-body'); tbody.innerHTML = ''; history.forEach(function(h){ var color = h.isRight ? 'green' : 'red'; var mark = h.isRight ? '✓' : '✗'; var row = ` ${h.q} ${h.right.eng} ${h.sel.eng} ${mark} `; tbody.innerHTML += row; }); // Social var url = encodeURIComponent(window.location.href); var t = encodeURIComponent("I scored "+score+"/30 in LND Shapes Quiz! " + txt); document.getElementById('share-wa').href = "https://wa.me/?text=" + t + " " + url; document.getElementById('share-fb').href = "https://www.facebook.com/sharer/sharer.php?u=" + url + ""e=" + t; } return { init: init, nextQ: nextQ }; })(); // Start setTimeout(QuizEngine.init, 500);
