@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /* --- Base Variables & Reset --- */ #mock-test-wrapper { --primary: #004d99; --secondary: #e6f0ff; --success: #28a745; --warning: #ffc107; --danger: #dc3545; --text-main: #333; --bg-body: #f4f7f6; --border-color: #cce0ff; font-family: 'Poppins', sans-serif; background-color: var(--bg-body); color: var(--text-main); -webkit-tap-highlight-color: transparent; min-height: 100vh; display: flex; flex-direction: column; } #mock-test-wrapper * { box-sizing: border-box; } /* --- Header --- */ #mock-test-wrapper .header { background-color: var(--primary); color: white; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 60px; box-shadow: 0 2px 10px rgba(0,0,0,0.15); z-index: 99999; /* Increased to sit above WP headers */ } #mock-test-wrapper .header h3 { font-size: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; color: white;} #mock-test-wrapper .header-controls { display: flex; align-items: center; gap: 10px; } #mock-test-wrapper .timer-display { background: var(--warning); color: #000; padding: 5px 12px; border-radius: 5px; font-weight: 700; font-size: 1em; } #mock-test-wrapper .palette-toggle { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); color: white; padding: 6px 12px; border-radius: 5px; cursor: pointer; font-weight: 600; display: none; } /* --- Main Layout --- */ #mock-test-wrapper .main-content { display: flex; padding-top: 60px; flex: 1; } #mock-test-wrapper .question-area { flex: 1; padding: 20px; padding-bottom: 160px; max-width: 900px; margin: 0 auto; width: 100%; } /* --- Sidebar (Palette) --- */ #mock-test-wrapper .sidebar { width: 320px; background-color: #fff; padding: 20px; box-shadow: -2px 0 10px rgba(0,0,0,0.1); position: fixed; right: 0; top: 60px; bottom: 0; overflow-y: auto; z-index: 99998; transition: transform 0.3s ease; border-left: 4px solid var(--primary); } #mock-test-wrapper .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } #mock-test-wrapper .close-sidebar { background: none; border: none; font-size: 1.5em; cursor: pointer; display: none; color: var(--danger); } #mock-test-wrapper .legend p { font-size: 0.85em; line-height: 1.6; color: #555; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px; } #mock-test-wrapper .legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: middle; } #mock-test-wrapper .grid-container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } #mock-test-wrapper .q-btn { height: 42px; border: 1px solid #ccc; border-radius: 5px; font-weight: 600; cursor: pointer; background: #f0f0f0; transition: 0.2s; color: #333; } #mock-test-wrapper .q-btn.active { border: 2px solid var(--primary); transform: scale(1.05); } #mock-test-wrapper .status-answered { background: var(--success); color: white; border-color: var(--success); } #mock-test-wrapper .status-marked { background: var(--warning); color: #000; border-color: var(--warning); } /* --- Setup Screen --- */ #mock-test-wrapper #initial-setup { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 999999; display: flex; justify-content: center; align-items: center; padding: 15px; } #mock-test-wrapper #setup-box { background: white; padding: 30px; border-radius: 12px; text-align: center; width: 100%; max-width: 400px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); } #mock-test-wrapper #setup-box input { width: 100%; padding: 12px; margin: 15px 0; border: 1.5px solid #ccc; border-radius: 6px; font-size: 1em; outline: none; } #mock-test-wrapper #setup-box input:focus { border-color: var(--primary); } #mock-test-wrapper #start-btn { width: 100%; background: var(--success); color: white; padding: 12px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 1.1em; } /* --- Question Box --- */ #mock-test-wrapper .question-box { background: #fff; border: 1px solid var(--border-color); border-top: 4px solid var(--primary); padding: 25px 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); display: none; } #mock-test-wrapper .question-box.active { display: block; } #mock-test-wrapper .question-meta { color: #666; font-weight: 600; font-size: 0.9em; margin-bottom: 15px; display: flex; justify-content: space-between; } #mock-test-wrapper .question-text { font-size: 1.2em; font-weight: 600; margin-bottom: 20px; color: #111; line-height: 1.5; } #mock-test-wrapper .option-label { display: flex; align-items: flex-start; background: #fff; padding: 12px 15px; margin: 10px 0; border: 1.5px solid #ddd; border-radius: 6px; cursor: pointer; transition: 0.2s; font-size: 1.05em; } #mock-test-wrapper .option-label:hover { background: #f9f9f9; border-color: #bbb; } #mock-test-wrapper .option-label.selected { border-color: var(--primary); background: var(--secondary); font-weight: 600; } #mock-test-wrapper .option-label input { margin-top: 5px; margin-right: 15px; transform: scale(1.2); cursor: pointer; accent-color: var(--primary); } /* --- Control Panel --- */ #mock-test-wrapper .control-panel { background: #fff; padding: 15px 20px; position: fixed; bottom: 0; left: 0; width: calc(100% - 320px); border-top: 1.5px solid #ccc; display: flex; justify-content: space-between; align-items: center; z-index: 99999; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); } #mock-test-wrapper .btn-group { display: flex; gap: 10px; } #mock-test-wrapper .btn-action { padding: 10px 18px; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; font-size: 0.95em; transition: 0.2s; white-space: nowrap; } #mock-test-wrapper .btn-action:hover { opacity: 0.9; } #mock-test-wrapper .btn-prev { background: #6c757d; color: white; } #mock-test-wrapper .btn-next { background: var(--primary); color: white; } #mock-test-wrapper .btn-mark { background: var(--warning); color: #000; } #mock-test-wrapper .btn-clear { background: #e2e8f0; color: #333; border: 1px solid #ccc; } #mock-test-wrapper .btn-submit { background: var(--success); color: white; } /* --- Results Screen --- */ #mock-test-wrapper #result-display { display: none; padding: 25px; margin: 80px auto 40px auto; max-width: 800px; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); width: 95%; position: relative; z-index: 99999; } #mock-test-wrapper .score-card { text-align: center; background: var(--secondary); padding: 30px 20px; border-radius: 10px; margin-bottom: 30px; border: 2px solid var(--border-color); } #mock-test-wrapper .score-card h1 { font-size: 3.5em; color: var(--primary); margin: 10px 0; } #mock-test-wrapper .res-q { padding: 15px 0; border-bottom: 1px solid #eee; } #mock-test-wrapper .correct-text { color: var(--success); font-weight: 600; } #mock-test-wrapper .wrong-text { color: var(--danger); font-weight: 600; } /* ================= RESPONSIVE MEDIA QUERIES ================= */ @media (max-width: 992px) { #mock-test-wrapper .palette-toggle { display: block; } #mock-test-wrapper .sidebar { transform: translateX(100%); width: 300px; box-shadow: -5px 0 25px rgba(0,0,0,0.2); border-left: none; } #mock-test-wrapper .sidebar.open { transform: translateX(0); } #mock-test-wrapper .close-sidebar { display: block; } #mock-test-wrapper .question-area { margin-right: 0; max-width: 100%; padding: 15px; padding-bottom: 140px; } #mock-test-wrapper .control-panel { width: 100%; } } @media (max-width: 600px) { #mock-test-wrapper .header h3 { font-size: 1em; } #mock-test-wrapper .timer-display, #mock-test-wrapper .palette-toggle { font-size: 0.9em; padding: 4px 8px; } #mock-test-wrapper .question-box { padding: 15px; } #mock-test-wrapper .question-text { font-size: 1.1em; } #mock-test-wrapper .option-label { font-size: 0.95em; padding: 10px; } #mock-test-wrapper .question-area { padding-bottom: 180px; } #mock-test-wrapper .control-panel { flex-direction: column; gap: 10px; padding: 10px; } #mock-test-wrapper .btn-group { width: 100%; display: flex; justify-content: space-between; gap: 8px; } #mock-test-wrapper .btn-action { flex: 1; padding: 12px 5px; font-size: 0.85em; text-align: center; } #mock-test-wrapper .score-card h1 { font-size: 2.8em; } } const quizData = [ { id: 1, ans: 2, q: "Which of the following Indus Valley Civilization sites was known for its artificial brick dockyard?", options: ["Kalibangan", "Lothal", "Mohenjo-Daro", "Harappa"] }, { id: 2, ans: 1, q: "Which is the oldest Veda that contains the famous Gayatri Mantra?", options: ["Rigveda", "Samaveda", "Yajurveda", "Atharvaveda"] }, { id: 3, ans: 3, q: "Where did Gautama Buddha deliver his first sermon, an event known as Dharmachakra Pravartana?", options: ["Bodh Gaya", "Kushinagar", "Sarnath", "Lumbini"] }, { id: 4, ans: 2, q: "The Buddhist scriptures known as 'Tripitakas' were primarily written in which language?", options: ["Sanskrit", "Pali", "Prakrit", "Brahmi"] }, { id: 5, ans: 4, q: "Who was the founder of the Mauryan Empire?", options: ["Ashoka", "Bindusara", "Bimbisara", "Chandragupta Maurya"] }, { id: 6, ans: 1, q: "In which year did the famous Kalinga War take place during Ashoka's reign?", options: ["261 BC", "273 BC", "232 BC", "326 BC"] }, { id: 7, ans: 3, q: "Who was the Greek ambassador in the court of Chandragupta Maurya who wrote the book 'Indika'?", options: ["Deimachus", "Ptolemy", "Megasthenes", "Seleucus Nicator"] }, { id: 8, ans: 2, q: "The Shaka Era, which is the basis of the Indian National Calendar, was founded by whom in 78 AD?", options: ["Ashoka", "Kanishka", "Rudradaman", "Vikramaditya"] }, { id: 9, ans: 4, q: "Who is historically known as the 'Napoleon of India' for his extensive military conquests?", options: ["Chandragupta I", "Skandagupta", "Chandragupta II", "Samudragupta"] }, { id: 10, ans: 3, q: "The famous Iron Pillar located at the Qutb Complex in Delhi is attributed to which ruler?", options: ["Harshavardhana", "Ashoka", "Chandragupta II", "Samudragupta"] }, { id: 11, ans: 1, q: "King Harshavardhana shifted his capital from Thanesar to which city?", options: ["Kannauj", "Pataliputra", "Ujjain", "Valabhi"] }, { id: 12, ans: 2, q: "The Chinese pilgrim Hiuen Tsang (Xuanzang) visited India during the reign of which king?", options: ["Chandragupta Maurya", "Harshavardhana", "Kanishka", "Pulakeshin II"] }, { id: 13, ans: 4, q: "Who was the founder of the Imperial Chola dynasty in South India?", options: ["Rajendra Chola", "Raja Raja Chola", "Aditya I", "Vijayalaya"] }, { id: 14, ans: 1, q: "The famous rock-cut Rathas at Mahabalipuram were constructed by the?", options: ["Pallavas", "Cholas", "Chalukyas", "Rashtrakutas"] }, { id: 15, ans: 4, q: "The Kailashnath Temple at Ellora, carved out of a single rock, was built by which dynasty?", options: ["Chalukyas", "Pallavas", "Cholas", "Rashtrakutas"] }, { id: 16, ans: 3, q: "Who was the first scholar to successfully decipher the Ashokan edicts in 1837?", options: ["Alexander Cunningham", "John Marshall", "James Prinsep", "Max Muller"] }, { id: 17, ans: 2, q: "The earliest evidence of agriculture in the Indian subcontinent is found at which site?", options: ["Kalibangan", "Mehrgarh", "Lothal", "Dholavira"] }, { id: 18, ans: 1, q: "Who was the last ruler of the Mauryan dynasty, assassinated by Pushyamitra Shunga?", options: ["Brihadratha", "Kunala", "Dasharatha", "Devavarman"] }, { id: 19, ans: 3, q: "Who was the first Tirthankara of Jainism?", options: ["Mahavira", "Parshvanatha", "Rishabhanatha", "Ajitanatha"] }, { id: 20, ans: 2, q: "The ancient university of Nalanda was founded by which Gupta ruler?", options: ["Samudragupta", "Kumargupta I", "Skandagupta", "Chandragupta I"] } ]; let currentQ = 0; let answers = new Array(quizData.length).fill(null); let marked = new Array(quizData.length).fill(false); let timeLeft = 15 * 60; // 15 Minutes let timer; function toggleSidebar() { document.getElementById('sidebar').classList.toggle('open'); } function startExam() { const name = document.getElementById('candidate-name').value.trim(); if (!name) { alert("Please enter your name to start!"); return; } document.getElementById('display-name').innerText = name; document.getElementById('initial-setup').style.display = 'none'; document.getElementById('main-header').style.display = 'flex'; document.getElementById('main-area').style.display = 'flex'; buildQuiz(); buildPalette(); showQuestion(0); timer = setInterval(updateTime, 1000); } function buildQuiz() { const container = document.getElementById('quiz-container'); let html = ''; quizData.forEach((q, idx) => { html += ``; }); container.innerHTML = html; } function buildPalette() { const grid = document.getElementById('palette-grid'); grid.innerHTML = quizData.map((_, i) => `${i + 1}` ).join(''); } function showQuestion(idx) { if (idx = quizData.length) return; document.querySelectorAll('.question-box').forEach(b => b.classList.remove('active')); document.getElementById(`qbox-${idx}`).classList.add('active'); currentQ = idx; updatePalette(); } function navigate(step) { showQuestion(currentQ + step); } function jumpTo(idx) { showQuestion(idx); if (window.innerWidth lbl.classList.remove('selected')); document.getElementById(`lbl-${qIdx}-${optVal-1}`).classList.add('selected'); updatePalette(); } function clearSelection() { answers[currentQ] = null; document.querySelectorAll(`input[name="q${currentQ}"]`).forEach(el => el.checked = false); document.querySelectorAll(`#qbox-${currentQ} .option-label`).forEach(lbl => lbl.classList.remove('selected')); updatePalette(); } function markForReview() { marked[currentQ] = !marked[currentQ]; updatePalette(); } function updatePalette() { for (let i = 0; i < quizData.length; i++) { let btn = document.getElementById(`pal-${i}`); btn.className = 'q-btn'; if (i === currentQ) btn.classList.add('active'); if (marked[i]) btn.classList.add('status-marked'); else if (answers[i] !== null) btn.classList.add('status-answered'); } } function updateTime() { timeLeft--; let m = Math.floor(timeLeft / 60).toString().padStart(2, '0'); let s = (timeLeft % 60).toString().padStart(2, '0'); const timerDisplay = document.getElementById('timer-display'); timerDisplay.innerText = `${m}:${s}`; if(timeLeft <= 180) { timerDisplay.style.backgroundColor = 'var(--danger)'; timerDisplay.style.color = 'white'; } if (timeLeft a === null).length; if(timeLeft > 0) { if (!confirm(`You have ${unattempted} unattempted questions.\nSubmit Exam?`)) return; } clearInterval(timer); let score = 0; let resultHtml = `

Detailed Analysis

`; quizData.forEach((q, i) => { let userAns = answers[i]; let isCorrect = userAns === q.ans; if (isCorrect) score++; let optionsText = q.options.map((opt, idx) => `${idx + 1}. ${opt}`).join(' | '); let correctAnsText = q.options[q.ans-1]; let userAnsText = userAns ? q.options[userAns-1] : "Not Attempted"; resultHtml += ` `; }); let summaryHtml = ` `; document.getElementById('main-header').style.display = 'none'; document.getElementById('main-area').style.display = 'none'; let resDiv = document.getElementById('result-display'); resDiv.innerHTML = summaryHtml + resultHtml; resDiv.style.display = 'block'; window.scrollTo(0, 0); }