This platform provides a secure, streamlined environment for conducting online assessments with native support for two languages. Designed for versatility, it allows users to seamlessly switch languages, ensuring accessibility and ease of use.
Two Languge - Online Test Code
Two Languge - Online Test Code
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"></meta>
<title>Online Quiz Test | Parakh Path</title>
<link href="https://fonts.googleapis.com" rel="preconnect"></link>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"></link>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"></link>
<style>
/* Isolated CSS Component Sandbox */
.pp-cbt-container, .pp-cbt-container * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
line-height: 1.5;
text-align: left;
}
body {
background: #f8fafc;
color: #334155;
unicode-bidi: plaintext;
}
.pp-cbt-container {
max-width: 1200px;
margin: 30px auto;
padding: 0 20px;
position: relative;
}
/* Fix Fullscreen Black Spaces by rendering background canvas to pure white */
#quizSection:fullscreen {
background: #ffffff !important;
padding: 30px !important;
overflow-y: auto;
}
#quizSection:-webkit-full-screen {
background: #ffffff !important;
padding: 30px !important;
overflow-y: auto;
}
#quizSection:-moz-full-screen {
background: #ffffff !important;
padding: 30px !important;
overflow-y: auto;
}
/* =========================================================================
🆕 FRONT PAGE DESIGN
========================================================================= */
.pp-front-page-hero {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.04);
margin-bottom: 30px;
}
/* Modern Compact Box Design with Left Accent Line */
.pp-front-header-badge {
background: #ffffff;
border: 1px solid #e2e8f0;
border-left: 5px solid #e07c03;
border-radius: 8px;
padding: 15px 20px;
margin-bottom: 25px;
display: flex;
align-items: center;
}
.pp-front-title-container {
font-size: 20px;
font-weight: 700;
line-height: 1.2;
display: flex;
gap: 10px;
}
.pp-front-title-topic { color: #64748b; } /* Grey for topic */
.pp-front-title-main { color: #e07c03; } /* Orange for title */
/* Banner Image Module engineered to match explicit 2:1 layout configurations */
.pp-cbt-banner-section {
width: 100%;
margin-bottom: 30px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
aspect-ratio: 2 / 1; /* Strict 2:1 Geometric Aspect Constraints Layout */
}
.pp-cbt-banner-section img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* Clean Simplified Instruction List Items */
.pp-cbt-instructions-card {
background: #ffffff;
border-top: 3px solid #e07c03;
padding: 25px 5px;
margin-bottom: 30px;
}
.pp-cbt-instructions-card h3 {
font-size: 18px;
font-weight: 700;
color: #0f172a;
margin-bottom: 20px;
}
.pp-cbt-instructions-card ul {
list-style-type: none !important;
padding: 0 !important;
margin: 0 !important;
}
.pp-cbt-instructions-card ul li {
margin-bottom: 16px !important;
font-size: 15px;
font-weight: 500;
display: flex;
align-items: center;
gap: 15px;
color: #334155;
}
/* Bullet counters completely engineered to bypass formatting error */
.pp-cbt-instructions-card ul li::before {
content: "" !important;
background: #e07c03;
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.pp-cbt-instructions-card ul li span {
font-weight: 700;
color: #e07c03;
}
/* NEW: auto-update question count inside instructions (live) */
.pp-cbt-btn-primary {
background: linear-gradient(135deg, #f39200 0%, #e07c03 100%);
color: #fff !important;
border: none;
padding: 10px 30px;
border-radius: 12px;
cursor: pointer;
font-size: 16px;
font-weight: 700;
width: 100%;
text-transform: uppercase;
transition: all 0.25s ease;
box-shadow: 0 4px 12px rgba(243, 146, 0, 0.3);
letter-spacing: 0.5px;
text-align: center;
display: block;
}
.pp-cbt-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(243, 146, 0, 0.4);
}
/* =========================================================================
💻 CORE EXAMINATION DASHBOARD VIEW
========================================================================= */
.pp-cbt-outer-frame-box {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.03);
margin-bottom: 40px;
position: relative;
}
.pp-cbt-split-desktop-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 35px;
}
.pp-cbt-desktop-left-workspace {
display: flex;
flex-direction: column;
}
.pp-cbt-desktop-right-workspace {
display: flex;
flex-direction: column;
justify-content: space-between;
border-left: 1px solid #f1f5f9;
padding-left: 30px;
}
/* Header Strip Components */
.pp-cbt-top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 18px;
border-bottom: 2px solid #f1f5f9;
gap: 15px;
}
.pp-cbt-progress-text {
color: #475569;
font-weight: 700;
font-size: 14px;
background: #f1f5f9;
padding: 8px 16px;
border-radius: 30px;
}
.pp-cbt-inline-creative-title {
font-size: 15px;
font-weight: 700;
color: #e07c03;
background: #fff7ed;
border: 1px dashed #ffedd5;
padding: 8px 20px;
border-radius: 8px;
flex-grow: 1;
max-width: 65%;
}
.pp-cbt-inline-creative-title span { color: #334155; font-weight: 500; }
.pp-cbt-timer {
color: #ffffff;
background: #e07c03;
font-weight: 700;
font-size: 14px;
padding: 8px 16px;
border-radius: 30px;
box-shadow: 0 4px 10px rgba(224, 124, 3, 0.2);
}
.pp-cbt-floating-fs-trigger {
position: absolute;
top: 15px;
right: 15px;
z-index: 999;
width: 42px;
height: 42px;
background: #ffffff;
border: 2px solid #e07c03;
color: #e07c03;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
font-weight: bold;
}
.pp-cbt-question-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.pp-cbt-question-label { font-size: 16px; font-weight: 700; color: #e07c03; }
/* Language Switcher Design */
.pp-cbt-lang-toggle-container {
display: inline-flex;
border: 1px solid #e2e8f0;
background: #f1f5f9;
border-radius: 8px;
padding: 3px;
cursor: pointer;
font-size: 12px;
font-weight: bold;
}
.pp-cbt-lang-toggle-btn { padding: 5px 14px; border-radius: 6px; color: #64748b; }
.pp-cbt-lang-toggle-btn.active { background: #ffffff; color: #e07c03; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
/* Content Cards */
.pp-cbt-question { font-size: 17px; font-weight: 600; color: #1e293b; margin-bottom: 25px; line-height: 1.6; }
.pp-cbt-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.pp-cbt-option {
padding: 15px 20px;
border: 1px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
background: #ffffff;
font-size: 15px;
color: #475569;
transition: all 0.2s;
}
.pp-cbt-option.selected {
background: #fff7ed;
color: #1e293b;
border-color: #e07c03;
font-weight: 600;
box-shadow: inset 4px 0 0 #e07c03;
}
/* =========================================================================
🎛️ NAVIGATION LINKS
========================================================================= */
.pp-cbt-left-navigation-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
border-top: 1px solid #f1f5f9;
padding-top: 25px;
}
.pp-cbt-btn-prev, .pp-cbt-btn-next {
flex: 2;
padding: 15px 25px;
border-radius: 10px;
font-weight: 700;
font-size: 14px;
cursor: pointer;
border: none;
text-transform: uppercase;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: space-between;
}
.pp-cbt-btn-prev { background: #64748b; color: white; }
.pp-cbt-btn-next { background: #e07c03; color: white; }
.pp-cbt-btn-clear {
flex: 1;
padding: 15px 15px;
border-radius: 10px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
background: #e2e8f0;
color: #475569;
border: none;
text-transform: uppercase;
text-align: center;
}
/* =========================================================================
🔢 DESKTOP ONLY: 3-ROW MAXIMUM SCROLLING PALETTE UNIT
========================================================================= */
.pp-cbt-palette-block-wrap { margin-bottom: 25px; }
.pp-cbt-palette-title { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.8px; }
/* 🆕 3 rows calculated cleanly via explicit height cap on desktop viewports */
.pp-cbt-question-nav-scroll-window {
max-height: 345px; /* Restricts window area to exactly 3 layout button rows maximum */
overflow-y: auto;
padding-right: 4px;
}
/* Customized clean minimalist scrollbar trail design */
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar { width: 5px; }
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.pp-cbt-question-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.pp-cbt-question-nav button {
width: 46px;
height: 46px;
border-radius: 50%;
font-weight: 700;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
transition: all 0.2s ease;
padding: 0;
}
/* Palette Status Colors Rule Engine */
.pp-cbt-question-nav button.not-visited {
background: #e2e8f0;
border: 1px solid #cbd5e1;
color: #64748b;
}
.pp-cbt-question-nav button.visited-unanswered {
background: #ffffff;
border: 2px solid #e07c03;
color: #e07c03;
}
.pp-cbt-question-nav button.answered {
background: #e07c03;
border: 1px solid #e07c03;
color: #ffffff;
}
.pp-cbt-question-nav button.active-focus {
border: 3.5px solid #10b981 !important;
}
.pp-cbt-btn-submit-test {
background: #10b981; color: white; width: 100%; padding: 15px 20px;
border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; border: none;
text-transform: uppercase; letter-spacing: 0.5px; text-align: center;
}
/* Performance Assessment Card Metrics */
.pp-cbt-result-box-container { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 35px; max-width: 850px; margin: 0 auto; }
.pp-cbt-result-header-title { text-align: center; font-size: 22px; font-weight: 700; color: #0f172a; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #f1f5f9; }
.pp-cbt-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.pp-cbt-result-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px 15px; text-align: center; }
.pp-cbt-result-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 8px; }
.pp-cbt-result-value { font-size: 22px; font-weight: 800; color: #0f172a; }
.pp-cbt-result-card.wrong .pp-cbt-result-value { color: #ef4444; }
.pp-cbt-result-card.correct .pp-cbt-result-value { color: #10b981; }
/* Creative Results Inline Action Footprint Styling */
.pp-cbt-result-actions-inline-row {
display: flex;
gap: 15px;
margin-top: 10px;
border-top: 1px solid #f1f5f9;
padding-top: 25px;
}
.pp-cbt-result-actions-inline-row .pp-cbt-btn-link-home {
flex: 1;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white !important;
text-align: center;
padding: 16px 24px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
transition: all 0.2s;
}
.pp-cbt-result-actions-inline-row .pp-cbt-btn-action-retry {
flex: 1;
background: linear-gradient(135deg, #64748b 0%, #475569 100%);
color: white !important;
text-align: center;
padding: 16px 24px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(71, 85, 105, 0.25);
transition: all 0.2s;
}
.pp-cbt-result-actions-inline-row .pp-cbt-btn-link-home:hover,
.pp-cbt-result-actions-inline-row .pp-cbt-btn-action-retry:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
.pp-cbt-solution-box { margin-top: 30px; border-top: 2px dashed #cbd5e1; padding-top: 25px; max-width: 850px; margin-left: auto; margin-right: auto; }
.pp-cbt-solution { background: #f8fafc; border-left: 4px solid #cbd5e1; padding: 16px; border-radius: 8px; margin-bottom: 15px; font-size: 14px; }
.pp-cbt-solution.user-correct { border-left-color: #10b981; background: #f0fdf4; }
.pp-cbt-solution.user-wrong { border-left-color: #ef4444; background: #fef2f2; }
.pp-cbt-explanation-alert-card { margin-top: 12px; padding: 12px 16px; background: #fffbeb; border: 1px solid #fef3c7; border-radius: 6px; color: #92400e; }
.pp-cbt-correct-text { color: #10b981; font-weight: bold; }
.pp-cbt-wrong-text { color: #ef4444; font-weight: bold; }
.pp-cbt-hidden { display: none !important; }
/* =========================================================================
📱 CRITICAL 100% MOBILE SCREEN FULL-WIDTH OVERRIDES
✅ MODIFIED: Added horizontal-scroll palette (mobile) + auto-update instruction count
========================================================================= */
@media (max-width: 767px) {
.pp-cbt-container {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.pp-front-page-hero {
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
padding: 20px 15px !important;
}
.pp-front-header-badge {
padding: 10px 14px !important;
margin-bottom: 15px !important;
}
.pp-front-title-container {
font-size: 16px !important;
}
.pp-front-desc {
font-size: 13px !important;
margin-bottom: 15px !important;
}
.pp-cbt-instructions-card {
padding: 15px 5px !important;
margin-bottom: 20px !important;
}
.pp-cbt-instructions-card h3 {
font-size: 16px !important;
margin-bottom: 12px !important;
}
.pp-cbt-instructions-card ul li {
font-size: 13px !important;
margin-bottom: 10px !important;
}
.pp-cbt-outer-frame-box {
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
padding: 20px 15px !important;
}
#quizSection:fullscreen, #quizSection:-webkit-full-screen {
padding: 15px 10px !important;
}
.pp-cbt-top-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 0; }
.pp-cbt-inline-creative-title { grid-column: span 2; max-width: 100%; width: 100%; font-size: 13px; text-align: center; }
.pp-cbt-split-desktop-grid { display: flex; flex-direction: column; gap: 0; }
.pp-cbt-desktop-left-workspace { order: 1; }
.pp-cbt-left-navigation-row { gap: 8px; padding-top: 20px; margin-bottom: 25px; }
.pp-cbt-btn-prev, .pp-cbt-btn-next { padding: 14px 15px; font-size: 12px; }
.pp-cbt-btn-clear { padding: 14px 10px; font-size: 11px; }
.pp-cbt-desktop-right-workspace { order: 2; border-left: none; padding-left: 0; }
.pp-cbt-submit-block-wrap { order: 1; margin-bottom: 25px; }
/* 🆕 MOBILE: Horizontal Scrollable Palette (line format, no grid fixed wrapping, scroll all questions) */
.pp-cbt-palette-block-wrap { order: 2; border-top: 1px dashed #e2e8f0; padding-top: 20px; width: 100%; overflow-x: auto; }
.pp-cbt-question-nav-scroll-window {
max-height: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding-right: 0 !important;
white-space: nowrap;
display: block;
width: 100%;
}
/* Horizontal inline flex navigation */
.pp-cbt-question-nav {
display: inline-flex !important;
flex-direction: row !important;
gap: 12px !important;
white-space: nowrap;
flex-wrap: nowrap;
padding-bottom: 8px;
width: auto;
}
.pp-cbt-question-nav button {
width: 48px;
height: 48px;
font-size: 15px;
flex-shrink: 0;
margin: 0;
}
/* Ensure scrollbar is visible for touch */
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar {
height: 4px;
}
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.pp-cbt-result-box-container {
padding: 20px 15px !important;
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
}
.pp-cbt-result-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.pp-cbt-result-header-title {
font-size: 18px !important;
margin-bottom: 15px !important;
}
.pp-cbt-result-actions-inline-row {
flex-direction: column !important;
gap: 12px !important;
}
.pp-cbt-result-actions-inline-row .pp-cbt-btn-link-home,
.pp-cbt-result-actions-inline-row .pp-cbt-btn-action-retry {
width: 100% !important;
padding: 14px 20px !important;
}
}
</style>
</head>
<body>
<div class="pp-cbt-container">
<!-- =========================================================================
🆕 COMPACT FRONT PAGE MARKUP (with auto-update total questions)
========================================================================= -->
<div id="instructionSection">
<div class="pp-front-page-hero">
<div class="pp-front-header-badge">
<div class="pp-front-title-container">
<span class="pp-front-title-topic">Tittle</span>
<span class="pp-front-title-main">Chapter</span>
</div>
</div>
<p class="pp-front-desc">Welcome to the formal interactive practice exam interface. This module features core curriculum assessments designed to calculate precise conceptual understanding and track time metrics in real time.</p>
<div class="pp-cbt-banner-section">
<img alt="Parakh Path Evaluation Banner" src="https://blogger.googleusercontent.com/img/a/AVvXsEhzHghwW8b1fRC75HmViUMGG1X1RjJ-PfKpDU8QG0NyiLVolUDGCCjDIIjIgb36fu7K0AAOdeUe6VlhaPCkBNHoH9mkPKwUO0yVgBDlzlC2P6nJpo01_rQ0xvoFOxXLuDNLSe96GaLItwCZSQVgw6r0bodnIaxDnE_ivLDzbVguZEn8_qmsZ2Npojp5_IKo" />
</div>
<div class="pp-cbt-instructions-card">
<h3>General Examination Instructions</h3>
<ul>
<li>Total Questions Available <span id="dynamicTotalQ">0</span> Questions</li>
<li>Timer tracks total continuous duration automatically upon full launch.</li>
<li>Single-choice objective computer-based testing schema formatting criteria.</li>
<li>Immediate question-wise answers palette map validations updated live.</li>
</ul>
</div>
<button class="pp-cbt-btn-primary" onclick="startQuiz()">
Start Examination Now
</button>
</div>
</div>
<div class="pp-cbt-floating-fs-trigger pp-cbt-hidden" id="floatingFullscreenBtn" onclick="manualToggleFullscreen()" title="Toggle Fullscreen">⛶</div>
<!-- Core Dynamic Testing Board Section -->
<div class="pp-cbt-hidden" id="quizSection">
<div class="pp-cbt-outer-frame-box">
<div class="pp-cbt-top-bar">
<div class="pp-cbt-inline-creative-title">
Parakh Path - <span>Chapter</span>
</div>
<div class="pp-cbt-progress-text">
Q: <span id="progressIndex">0</span> / <span id="progressTotal">5</span>
</div>
<div class="pp-cbt-timer">⏱️ <span id="time">00:00</span></div>
</div>
<div class="pp-cbt-split-desktop-grid">
<div class="pp-cbt-desktop-left-workspace">
<div class="pp-cbt-question-header-row">
<div class="pp-cbt-question-label" id="questionLabelIndex">Question 1:</div>
<div class="pp-cbt-lang-toggle-container" onclick="toggleLanguage()">
<div class="pp-cbt-lang-toggle-btn active" id="langEng">English</div>
<div class="pp-cbt-lang-toggle-btn" id="langHin">हिंदी</div>
</div>
</div>
<div class="pp-cbt-question" id="questionText"></div>
<div class="pp-cbt-options" id="optionsContainer"></div>
<div class="pp-cbt-left-navigation-row">
<button class="pp-cbt-btn-prev" onclick="prevQuestion()"><span>←</span> Previous</button>
<button class="pp-cbt-btn-clear" onclick="clearSelection()">Clear</button>
<button class="pp-cbt-btn-next" onclick="nextQuestion()">Next <span>→</span></button>
</div>
</div>
<div class="pp-cbt-desktop-right-workspace">
<div class="pp-cbt-palette-block-wrap">
<div class="pp-cbt-palette-title">Question Palette Map</div>
<!-- 🆕 Scroll-Window Wrapper with horizontal flexibility (mobile-friendly line scroll) -->
<div class="pp-cbt-question-nav-scroll-window">
<div class="pp-cbt-question-nav" id="questionNav"></div>
</div>
</div>
<div class="pp-cbt-submit-block-wrap">
<button class="pp-cbt-btn-submit-test" onclick="submitQuiz()">Submit Test</button>
</div>
</div>
</div>
</div>
</div>
<!-- Result View Display Dashboard -->
<div class="pp-cbt-hidden" id="resultBox">
<div class="pp-cbt-result-box-container">
<div class="pp-cbt-result-header-title">Performance Analytics Dashboard</div>
<div class="pp-cbt-result-grid">
<div class="pp-cbt-result-card"><div class="pp-cbt-result-label">Attempted</div><div class="pp-cbt-result-value" id="attempted">0</div></div>
<div class="pp-cbt-result-card correct"><div class="pp-cbt-result-label">Correct</div><div class="pp-cbt-result-value" id="correct">0</div></div>
<div class="pp-cbt-result-card wrong"><div class="pp-cbt-result-label">Wrong</div><div class="pp-cbt-result-value" id="incorrect">0</div></div>
<div class="pp-cbt-result-card"><div class="pp-cbt-result-label">Score</div><div class="pp-cbt-result-value" id="percent">0%</div></div>
<div class="pp-cbt-result-card"><div class="pp-cbt-result-label">Accuracy </div><div class="pp-cbt-result-value" id="accuracy">0%</div></div>
<div class="pp-cbt-result-card"><div class="pp-cbt-result-label">Timeline</div><div class="pp-cbt-result-value" id="timeSpent">0m 0s</div></div>
</div>
<div class="pp-cbt-result-actions-inline-row">
<a class="pp-cbt-btn-link-home" href="https://www.parakhpath.com"><span>🏠</span> Return To Home</a>
<button class="pp-cbt-btn-action-retry" onclick="location.reload()"><span>🔄</span> Reattempt Test</button>
</div>
</div>
<div class="pp-cbt-solution-box">
<div style="margin-bottom: 15px; text-align: right;">
<div class="pp-cbt-lang-toggle-container" onclick="toggleSolutionLanguage()">
<div class="pp-cbt-lang-toggle-btn active" id="solLangEng">English Solutions</div>
<div class="pp-cbt-lang-toggle-btn" id="solLangHin">हिंदी समाधान </div>
</div>
</div>
<div id="solutions"></div>
</div>
</div>
</div>
<script>
// All existing functions and data variables remain 100% exactly the same (only added dynamic total update on frontpage)
const questions = [
{
"english": {
"question": "The rules that govern the way words are combined to form sentences is called:<br><strong>(CTET Paper I - 2020)</strong>",
"options": ["Morphology", "Syntax", "Phonology", "Semantics"],
"answer": 1,
"explanation": "Syntax is the set of rules, principles, and processes that govern the structure of sentences in a given language."
},
"hindi": {
"question": "वाक्यों को बनाने के लिए शब्दों के संयोजित होने के नियमों को क्या कहा जाता है?<br><strong>(CTET Paper I - 2020)</strong>",
"options": ["रूपविज्ञान", "वाक्य विन्यास", "ध्वनि विज्ञान", "अर्थ विज्ञान"],
"answer": 1,
"explanation": "वाक्य विन्यास (Syntax) उन नियमों का समूह है जो भाषा में वाक्यों की संरचना को निर्धारित करते हैं।"
}
},
{
"english": {
"question": "Which of the following is an example of a 'Bound Morpheme'?<br><strong>(UPTET Paper II - 2017)</strong>",
"options": ["Cat", "-ed", "Table", "Run"],
"answer": 1,
"explanation": "'-ed' is a bound morpheme because it cannot stand alone; it must be attached to a root word."
},
"hindi": {
"question": "निम्नलिखित में से कौन सा 'बद्ध रूपिम' (Bound Morpheme) का उदाहरण है?<br><strong>(UPTET Paper II - 2017)</strong>",
"options": ["Cat", "-ed", "Table", "Run"],
"answer": 1,
"explanation": "'-ed' एक बद्ध रूपिम है क्योंकि यह स्वतंत्र रूप से उपयोग नहीं किया जा सकता; यह हमेशा मूल शब्द के साथ जुड़ता है।"
}
},
{
"english": {
"question": "The study of the meaning of words and sentences is called:<br><strong>(CTET Paper II - 2014)</strong>",
"options": ["Syntax", "Semantics", "Phonology", "Morphology"],
"answer": 1,
"explanation": "Semantics is the branch of linguistics that studies the meaning of words, phrases, and sentences."
},
"hindi": {
"question": "शब्दों और वाक्यों के अर्थ के अध्ययन को कहा जाता है?<br><strong>(CTET Paper II - 2014)</strong>",
"options": ["वाक्य विन्यास", "अर्थ विज्ञान", "ध्वनि विज्ञान", "रूपविज्ञान"],
"answer": 1,
"explanation": "अर्थ विज्ञान (Semantics) भाषा विज्ञान की वह शाखा है जो शब्दों और वाक्यों के अर्थ का अध्ययन करती है।"
}
},
{
"english": {
"question": "What is the primary goal of the 'Communicative Approach' in language teaching?<br><strong>(CTET Paper I - 2021)</strong>",
"options": ["Grammar mastery", "Communicative competence", "Translation skills", "Literal reading"],
"answer": 1,
"explanation": "The Communicative Approach aims to develop communicative competence—the ability to use language effectively in social contexts."
},
"hindi": {
"question": "भाषा शिक्षण में 'संप्रेषणात्मक दृष्टिकोण' (Communicative Approach) का प्राथमिक लक्ष्य क्या है?<br><strong>(CTET Paper I - 2021)</strong>",
"options": ["व्याकरण पर महारत", "संप्रेषणात्मक क्षमता", "अनुवाद कौशल", "शाब्दिक पठन"],
"answer": 1,
"explanation": "संप्रेषणात्मक दृष्टिकोण का लक्ष्य छात्रों में भाषा के व्यावहारिक उपयोग की क्षमता (communicative competence) विकसित करना है।"
}
},
{
"english": {
"question": "A child says 'I goed to the park'. This is an example of:<br><strong>(REET Level I - 2021)</strong>",
"options": ["Overgeneralization of rules", "Vocabulary deficiency", "Poor hearing", "Syntax error"],
"answer": 0,
"explanation": "The child is applying the regular past tense rule '-ed' to an irregular verb, a process called overgeneralization."
},
"hindi": {
"question": "एक बच्चा कहता है 'I goed to the park'। यह किसका उदाहरण है?<br><strong>(REET Level I - 2021)</strong>",
"options": ["नियमों का अति-सामान्यीकरण", "शब्दों की कमी", "खराब श्रवण क्षमता", "वाक्य विन्यास की त्रुटि"],
"answer": 0,
"explanation": "बच्चा अनियमित क्रिया पर भी नियमित भूतकाल नियम '-ed' लगा रहा है, जिसे नियमों का अति-सामान्यीकरण कहते हैं।"
}
}
];
// Ensure total is set in frontpage instruction auto-update
document.addEventListener("DOMContentLoaded", function() {
const totalLen = questions.length;
const dynamicSpan = document.getElementById("dynamicTotalQ");
if(dynamicSpan) dynamicSpan.innerText = totalLen;
document.getElementById("progressTotal").innerText = totalLen;
});
let currentQuestion = 0;
let currentLanguage = "english";
let solutionLanguage = "english";
let answers = [];
let visitedQuestions = [0];
let startTime;
let timerInterval;
document.getElementById("progressTotal").innerText = questions.length;
function launchFullscreen(element) {
if(element.requestFullscreen) { element.requestFullscreen(); }
else if(element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); }
else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); }
}
function exitFullscreen() {
if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) {
if(document.exitFullscreen) { document.exitFullscreen(); }
}
}
function manualToggleFullscreen() {
let targetNode = document.getElementById("quizSection");
if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement) {
launchFullscreen(targetNode);
} else {
exitFullscreen();
}
}
function startQuiz() {
document.getElementById("instructionSection").classList.add("pp-cbt-hidden");
document.getElementById("floatingFullscreenBtn").classList.remove("pp-cbt-hidden");
const mainQuizSection = document.getElementById("quizSection");
mainQuizSection.classList.remove("pp-cbt-hidden");
try { launchFullscreen(mainQuizSection); } catch(e) {}
startTime = new Date();
timerInterval = setInterval(updateTimer, 1000);
createQuestionNav();
loadQuestion();
}
function updateTimer(){
let now = new Date();
let diff = Math.floor((now-startTime)/1000);
let minutes = String(Math.floor(diff/60)).padStart(2,'0');
let seconds = String(diff%60).padStart(2,'0');
document.getElementById("time").innerText = minutes + ":" + seconds;
}
function loadQuestion(){
const q = questions[currentQuestion][currentLanguage];
document.getElementById("questionText").innerHTML = q.question;
document.getElementById("progressIndex").innerText = currentQuestion + 1;
document.getElementById("questionLabelIndex").innerText = "Question " + (currentQuestion + 1) + ":";
if(!visitedQuestions.includes(currentQuestion)){ visitedQuestions.push(currentQuestion); }
const optionsContainer = document.getElementById("optionsContainer");
optionsContainer.innerHTML = "";
q.options.forEach((option,index)=>{
const div = document.createElement("div");
div.classList.add("pp-cbt-option");
if(answers[currentQuestion]===index){ div.classList.add("selected"); }
div.innerHTML = option;
div.onclick = ()=>selectOption(index);
optionsContainer.appendChild(div);
});
updateQuestionNav();
}
function selectOption(index){
answers[currentQuestion] = index;
loadQuestion();
}
function clearSelection() {
answers[currentQuestion] = undefined;
loadQuestion();
}
function nextQuestion(){ if(currentQuestion < questions.length-1){ currentQuestion++; loadQuestion(); } }
function prevQuestion(){ if(currentQuestion > 0){ currentQuestion--; loadQuestion(); } }
function toggleLanguage(){
currentLanguage = currentLanguage === "english" ? "hindi" : "english";
document.getElementById("langEng").classList.toggle("active", currentLanguage === "english");
document.getElementById("langHin").classList.toggle("active", currentLanguage === "hindi");
loadQuestion();
}
function createQuestionNav(){
const nav = document.getElementById("questionNav");
nav.innerHTML = "";
questions.forEach((q,index)=>{
const btn = document.createElement("button");
btn.innerText = index+1;
btn.onclick = ()=>{ currentQuestion = index; loadQuestion(); };
nav.appendChild(btn);
});
updateQuestionNav();
}
function updateQuestionNav(){
const buttons = document.querySelectorAll("#questionNav button");
buttons.forEach((btn,index)=>{
btn.className = "";
if(answers[index] !== undefined){
btn.classList.add("answered");
} else if(visitedQuestions.includes(index)){
btn.classList.add("visited-unanswered");
} else {
btn.classList.add("not-visited");
}
if(index === currentQuestion){ btn.classList.add("active-focus"); }
});
}
function submitQuiz(){
clearInterval(timerInterval);
try { exitFullscreen(); } catch(e){}
document.getElementById("floatingFullscreenBtn").classList.add("pp-cbt-hidden");
document.getElementById("quizSection").classList.add("pp-cbt-hidden");
document.getElementById("resultBox").classList.remove("pp-cbt-hidden");
let attempted = 0, correct = 0;
questions.forEach((q,index)=>{
if(answers[index]!==undefined){
attempted++;
if(answers[index]===q.english.answer){ correct++; }
}
});
let incorrect = attempted - correct;
let accuracyVal = attempted === 0 ? 0 : Math.round((correct / attempted) * 100);
let scorePercent = Math.round((correct / questions.length) * 100);
document.getElementById("attempted").innerText = attempted;
document.getElementById("correct").innerText = correct;
document.getElementById("incorrect").innerText = incorrect;
document.getElementById("percent").innerText = scorePercent + "%";
document.getElementById("accuracy").innerText = accuracyVal + "%";
document.getElementById("timeSpent").innerText = document.getElementById("time").innerText;
generateSolutions();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
function generateSolutions(){
const container = document.getElementById("solutions");
container.innerHTML = "";
questions.forEach((q,index)=>{
const data = q[solutionLanguage];
const hasAttempted = answers[index] !== undefined;
const isCorrect = hasAttempted && answers[index] === q.english.answer;
const userAnswerText = hasAttempted ? data.options[answers[index]] : "Not Attempted";
const correctAnswerText = data.options[data.answer];
const div = document.createElement("div");
div.classList.add("pp-cbt-solution");
if(hasAttempted){ div.classList.add(isCorrect ? "user-correct" : "user-wrong"); }
div.innerHTML = `
<h4>Question ${index+1} ${hasAttempted ? (isCorrect ? '✅' : '❌') : ''}</h4>
<p><b>Question:</b> ${data.question}</p>
<p><b>Attempt:</b> <span class="${hasAttempted ? (isCorrect ? 'pp-cbt-correct-text' : 'pp-cbt-wrong-text') : ''}">${userAnswerText}</span></p>
<p class="pp-cbt-correct-text">Correct ✅: ${correctAnswerText}</p>
<div class="pp-cbt-explanation-alert-card"><b>Explanation:</b> ${data.explanation}</div>
`;
container.appendChild(div);
});
}
function toggleSolutionLanguage(){
solutionLanguage = solutionLanguage === "english" ? "hindi" : "english";
document.getElementById("solLangEng").classList.toggle("active", solutionLanguage === "english");
document.getElementById("solLangHin").classList.toggle("active", solutionLanguage === "hindi");
generateSolutions();
}
</script>
</body>
</html> One Language - Online Test Code
One Language - Online Test Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Online Quiz Test | Parakh Path</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* Isolated CSS Component Sandbox */
.pp-cbt-container, .pp-cbt-container * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
line-height: 1.5;
text-align: left;
}
body {
background: #f8fafc;
color: #334155;
unicode-bidi: plaintext;
}
.pp-cbt-container {
max-width: 1200px;
margin: 30px auto;
padding: 0 20px;
position: relative;
}
/* Fix Fullscreen Black Spaces by rendering background canvas to pure white */
#quizSection:fullscreen {
background: #ffffff !important;
padding: 30px !important;
overflow-y: auto;
}
#quizSection:-webkit-full-screen {
background: #ffffff !important;
padding: 30px !important;
overflow-y: auto;
}
#quizSection:-moz-full-screen {
background: #ffffff !important;
padding: 30px !important;
overflow-y: auto;
}
/* =========================================================================
🆕 FRONT PAGE DESIGN
========================================================================= */
.pp-front-page-hero {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.04);
margin-bottom: 30px;
}
/* Modern Compact Box Design with Left Accent Line */
.pp-front-header-badge {
background: #ffffff;
border: 1px solid #e2e8f0;
border-left: 5px solid #e07c03;
border-radius: 8px;
padding: 15px 20px;
margin-bottom: 25px;
display: flex;
align-items: center;
}
.pp-front-title-container {
font-size: 20px;
font-weight: 700;
line-height: 1.2;
display: flex;
gap: 10px;
}
.pp-front-title-topic { color: #64748b; } /* Grey for topic */
.pp-front-title-main { color: #e07c03; } /* Orange for title */
/* Banner Image Module engineered to match explicit 2:1 layout configurations */
.pp-cbt-banner-section {
width: 100%;
margin-bottom: 30px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
aspect-ratio: 2 / 1; /* Strict 2:1 Geometric Aspect Constraints Layout */
}
.pp-cbt-banner-section img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* Clean Simplified Instruction List Items */
.pp-cbt-instructions-card {
background: #ffffff;
border-top: 3px solid #e07c03;
padding: 25px 5px;
margin-bottom: 30px;
}
.pp-cbt-instructions-card h3 {
font-size: 18px;
font-weight: 700;
color: #0f172a;
margin-bottom: 20px;
}
.pp-cbt-instructions-card ul {
list-style-type: none !important;
padding: 0 !important;
margin: 0 !important;
}
.pp-cbt-instructions-card ul li {
margin-bottom: 16px !important;
font-size: 15px;
font-weight: 500;
display: flex;
align-items: center;
gap: 15px;
color: #334155;
}
/* Bullet counters completely engineered to bypass formatting error */
.pp-cbt-instructions-card ul li::before {
content: "" !important;
background: #e07c03;
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.pp-cbt-instructions-card ul li span {
font-weight: 700;
color: #e07c03;
}
/* NEW: auto-update question count inside instructions (live) */
#dynamicTotalQ {
font-weight: 800;
background: #fff2e5;
padding: 2px 8px;
border-radius: 30px;
display: inline-block;
margin-left: 4px;
}
.pp-cbt-btn-primary {
background: linear-gradient(135deg, #f39200 0%, #e07c03 100%);
color: #fff !important;
border: none;
padding: 16px 32px;
border-radius: 12px;
cursor: pointer;
font-size: 16px;
font-weight: 700;
width: 100%;
text-transform: uppercase;
transition: all 0.25s ease;
box-shadow: 0 4px 12px rgba(243, 146, 0, 0.3);
letter-spacing: 0.5px;
text-align: center;
display: block;
}
.pp-cbt-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(243, 146, 0, 0.4);
}
/* =========================================================================
💻 CORE EXAMINATION DASHBOARD VIEW
========================================================================= */
.pp-cbt-outer-frame-box {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.03);
margin-bottom: 40px;
position: relative;
}
.pp-cbt-split-desktop-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 35px;
}
.pp-cbt-desktop-left-workspace {
display: flex;
flex-direction: column;
}
.pp-cbt-desktop-right-workspace {
display: flex;
flex-direction: column;
justify-content: space-between;
border-left: 1px solid #f1f5f9;
padding-left: 30px;
}
/* Header Strip Components */
.pp-cbt-top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 18px;
border-bottom: 2px solid #f1f5f9;
gap: 15px;
}
.pp-cbt-progress-text {
color: #475569;
font-weight: 700;
font-size: 14px;
background: #f1f5f9;
padding: 8px 16px;
border-radius: 30px;
}
.pp-cbt-inline-creative-title {
font-size: 15px;
font-weight: 700;
color: #e07c03;
background: #fff7ed;
border: 1px dashed #ffedd5;
padding: 8px 20px;
border-radius: 8px;
flex-grow: 1;
max-width: 65%;
}
.pp-cbt-inline-creative-title span { color: #334155; font-weight: 500; }
.pp-cbt-timer {
color: #ffffff;
background: #e07c03;
font-weight: 700;
font-size: 14px;
padding: 8px 16px;
border-radius: 30px;
box-shadow: 0 4px 10px rgba(224, 124, 3, 0.2);
}
.pp-cbt-floating-fs-trigger {
position: absolute;
top: 15px;
right: 15px;
z-index: 999;
width: 42px;
height: 42px;
background: #ffffff;
border: 2px solid #e07c03;
color: #e07c03;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
font-weight: bold;
}
.pp-cbt-question-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.pp-cbt-question-label { font-size: 16px; font-weight: 700; color: #e07c03; }
/* Language Switcher Design - HIDDEN since single language mode */
.pp-cbt-lang-toggle-container {
display: none;
}
/* Content Cards */
.pp-cbt-question { font-size: 17px; font-weight: 600; color: #1e293b; margin-bottom: 25px; line-height: 1.6; }
.pp-cbt-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.pp-cbt-option {
padding: 15px 20px;
border: 1px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
background: #ffffff;
font-size: 15px;
color: #475569;
transition: all 0.2s;
}
.pp-cbt-option.selected {
background: #fff7ed;
color: #1e293b;
border-color: #e07c03;
font-weight: 600;
box-shadow: inset 4px 0 0 #e07c03;
}
/* =========================================================================
🎛️ NAVIGATION LINKS
========================================================================= */
.pp-cbt-left-navigation-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
border-top: 1px solid #f1f5f9;
padding-top: 25px;
}
.pp-cbt-btn-prev, .pp-cbt-btn-next {
flex: 2;
padding: 15px 25px;
border-radius: 10px;
font-weight: 700;
font-size: 14px;
cursor: pointer;
border: none;
text-transform: uppercase;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: space-between;
}
.pp-cbt-btn-prev { background: #64748b; color: white; }
.pp-cbt-btn-next { background: #e07c03; color: white; }
.pp-cbt-btn-clear {
flex: 1;
padding: 15px 15px;
border-radius: 10px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
background: #e2e8f0;
color: #475569;
border: none;
text-transform: uppercase;
text-align: center;
}
/* =========================================================================
🔢 DESKTOP ONLY: 3-ROW MAXIMUM SCROLLING PALETTE UNIT
========================================================================= */
.pp-cbt-palette-block-wrap { margin-bottom: 25px; }
.pp-cbt-palette-title { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.8px; }
/* 🆕 3 rows calculated cleanly via explicit height cap on desktop viewports */
.pp-cbt-question-nav-scroll-window {
max-height: 345px; /* Restricts window area to exactly 3 layout button rows maximum */
overflow-y: auto;
padding-right: 4px;
}
/* Customized clean minimalist scrollbar trail design */
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar { width: 5px; }
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.pp-cbt-question-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.pp-cbt-question-nav button {
width: 46px;
height: 46px;
border-radius: 50%;
font-weight: 700;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
transition: all 0.2s ease;
padding: 0;
}
/* Palette Status Colors Rule Engine */
.pp-cbt-question-nav button.not-visited {
background: #e2e8f0;
border: 1px solid #cbd5e1;
color: #64748b;
}
.pp-cbt-question-nav button.visited-unanswered {
background: #ffffff;
border: 2px solid #e07c03;
color: #e07c03;
}
.pp-cbt-question-nav button.answered {
background: #e07c03;
border: 1px solid #e07c03;
color: #ffffff;
}
.pp-cbt-question-nav button.active-focus {
border: 3.5px solid #10b981 !important;
}
.pp-cbt-btn-submit-test {
background: #10b981; color: white; width: 100%; padding: 15px 20px;
border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; border: none;
text-transform: uppercase; letter-spacing: 0.5px; text-align: center;
}
/* Performance Assessment Card Metrics */
.pp-cbt-result-box-container { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 35px; max-width: 850px; margin: 0 auto; }
.pp-cbt-result-header-title { text-align: center; font-size: 22px; font-weight: 700; color: #0f172a; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #f1f5f9; }
.pp-cbt-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.pp-cbt-result-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px 15px; text-align: center; }
.pp-cbt-result-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 8px; }
.pp-cbt-result-value { font-size: 22px; font-weight: 800; color: #0f172a; }
.pp-cbt-result-card.wrong .pp-cbt-result-value { color: #ef4444; }
.pp-cbt-result-card.correct .pp-cbt-result-value { color: #10b981; }
/* Creative Results Inline Action Footprint Styling */
.pp-cbt-result-actions-inline-row {
display: flex;
gap: 15px;
margin-top: 10px;
border-top: 1px solid #f1f5f9;
padding-top: 25px;
}
.pp-cbt-result-actions-inline-row .pp-cbt-btn-link-home {
flex: 1;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white !important;
text-align: center;
padding: 16px 24px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
transition: all 0.2s;
}
.pp-cbt-result-actions-inline-row .pp-cbt-btn-action-retry {
flex: 1;
background: linear-gradient(135deg, #64748b 0%, #475569 100%);
color: white !important;
text-align: center;
padding: 16px 24px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(71, 85, 105, 0.25);
transition: all 0.2s;
}
.pp-cbt-result-actions-inline-row .pp-cbt-btn-link-home:hover,
.pp-cbt-result-actions-inline-row .pp-cbt-btn-action-retry:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
.pp-cbt-solution-box { margin-top: 30px; border-top: 2px dashed #cbd5e1; padding-top: 25px; max-width: 850px; margin-left: auto; margin-right: auto; }
.pp-cbt-solution { background: #f8fafc; border-left: 4px solid #cbd5e1; padding: 16px; border-radius: 8px; margin-bottom: 15px; font-size: 14px; }
.pp-cbt-solution.user-correct { border-left-color: #10b981; background: #f0fdf4; }
.pp-cbt-solution.user-wrong { border-left-color: #ef4444; background: #fef2f2; }
.pp-cbt-explanation-alert-card { margin-top: 12px; padding: 12px 16px; background: #fffbeb; border: 1px solid #fef3c7; border-radius: 6px; color: #92400e; }
.pp-cbt-correct-text { color: #10b981; font-weight: bold; }
.pp-cbt-wrong-text { color: #ef4444; font-weight: bold; }
.pp-cbt-hidden { display: none !important; }
/* =========================================================================
📱 CRITICAL 100% MOBILE SCREEN FULL-WIDTH OVERRIDES
========================================================================= */
@media (max-width: 767px) {
.pp-cbt-container {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.pp-front-page-hero {
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
padding: 20px 15px !important;
}
.pp-front-header-badge {
padding: 10px 14px !important;
margin-bottom: 15px !important;
}
.pp-front-title-container {
font-size: 16px !important;
}
.pp-front-desc {
font-size: 13px !important;
margin-bottom: 15px !important;
}
.pp-cbt-instructions-card {
padding: 15px 5px !important;
margin-bottom: 20px !important;
}
.pp-cbt-instructions-card h3 {
font-size: 16px !important;
margin-bottom: 12px !important;
}
.pp-cbt-instructions-card ul li {
font-size: 13px !important;
margin-bottom: 10px !important;
}
.pp-cbt-outer-frame-box {
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
padding: 20px 15px !important;
}
#quizSection:fullscreen, #quizSection:-webkit-full-screen {
padding: 15px 10px !important;
}
.pp-cbt-top-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 0; }
.pp-cbt-inline-creative-title { grid-column: span 2; max-width: 100%; width: 100%; font-size: 13px; text-align: center; }
.pp-cbt-split-desktop-grid { display: flex; flex-direction: column; gap: 0; }
.pp-cbt-desktop-left-workspace { order: 1; }
.pp-cbt-left-navigation-row { gap: 8px; padding-top: 20px; margin-bottom: 25px; }
.pp-cbt-btn-prev, .pp-cbt-btn-next { padding: 14px 15px; font-size: 12px; }
.pp-cbt-btn-clear { padding: 14px 10px; font-size: 11px; }
.pp-cbt-desktop-right-workspace { order: 2; border-left: none; padding-left: 0; }
.pp-cbt-submit-block-wrap { order: 1; margin-bottom: 25px; }
/* Mobile: Horizontal Scrollable Palette */
.pp-cbt-palette-block-wrap { order: 2; border-top: 1px dashed #e2e8f0; padding-top: 20px; width: 100%; overflow-x: auto; }
.pp-cbt-question-nav-scroll-window {
max-height: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding-right: 0 !important;
white-space: nowrap;
display: block;
width: 100%;
}
.pp-cbt-question-nav {
display: inline-flex !important;
flex-direction: row !important;
gap: 12px !important;
white-space: nowrap;
flex-wrap: nowrap;
padding-bottom: 8px;
width: auto;
}
.pp-cbt-question-nav button {
width: 48px;
height: 48px;
font-size: 15px;
flex-shrink: 0;
margin: 0;
}
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar {
height: 4px;
}
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.pp-cbt-result-box-container {
padding: 20px 15px !important;
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
}
.pp-cbt-result-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.pp-cbt-result-header-title {
font-size: 18px !important;
margin-bottom: 15px !important;
}
.pp-cbt-result-actions-inline-row {
flex-direction: column !important;
gap: 12px !important;
}
.pp-cbt-result-actions-inline-row .pp-cbt-btn-link-home,
.pp-cbt-result-actions-inline-row .pp-cbt-btn-action-retry {
width: 100% !important;
padding: 14px 20px !important;
}
}
</style>
</head>
<body>
<div class="pp-cbt-container">
<!-- Front Page Markup (single language - English) -->
<div id="instructionSection">
<div class="pp-front-page-hero">
<div class="pp-front-header-badge">
<div class="pp-front-title-container">
<span class="pp-front-title-topic">Class 6 Science</span>
<span class="pp-front-title-main">Live Evaluation Challenge</span>
</div>
</div>
<p class="pp-front-desc">Welcome to the formal interactive practice exam interface. This module features core curriculum assessments designed to calculate precise conceptual understanding and track time metrics in real time.</p>
<div class="pp-cbt-banner-section">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhzHghwW8b1fRC75HmViUMGG1X1RjJ-PfKpDU8QG0NyiLVolUDGCCjDIIjIgb36fu7K0AAOdeUe6VlhaPCkBNHoH9mkPKwUO0yVgBDlzlC2P6nJpo01_rQ0xvoFOxXLuDNLSe96GaLItwCZSQVgw6r0bodnIaxDnE_ivLDzbVguZEn8_qmsZ2Npojp5_IKo" alt="Parakh Path Evaluation Banner">
</div>
<div class="pp-cbt-instructions-card">
<h3>General Examination Instructions</h3>
<ul>
<li>Total Questions Available <span id="dynamicTotalQ">0</span> Questions</li>
<li>Timer tracks total continuous duration automatically upon full launch.</li>
<li>Single-choice objective computer-based testing schema formatting criteria.</li>
<li>Immediate question-wise answers palette map validations updated live.</li>
</ul>
</div>
<button class="pp-cbt-btn-primary" onclick="startQuiz()">
Start Examination Now
</button>
</div>
</div>
<div id="floatingFullscreenBtn" class="pp-cbt-floating-fs-trigger pp-cbt-hidden" title="Toggle Fullscreen" onclick="manualToggleFullscreen()">⛶</div>
<!-- Core Dynamic Testing Board Section (language switcher removed) -->
<div id="quizSection" class="pp-cbt-hidden">
<div class="pp-cbt-outer-frame-box">
<div class="pp-cbt-top-bar">
<div class="pp-cbt-inline-creative-title">
Class 6 Science - <span>Food: Where Does It Come From</span>
</div>
<div class="pp-cbt-progress-text">
Q: <span id="progressIndex">0</span> / <span id="progressTotal">5</span>
</div>
<div class="pp-cbt-timer">⏱️ <span id="time">00:00</span></div>
</div>
<div class="pp-cbt-split-desktop-grid">
<div class="pp-cbt-desktop-left-workspace">
<div class="pp-cbt-question-header-row">
<div class="pp-cbt-question-label" id="questionLabelIndex">Question 1:</div>
<!-- Language toggle removed as per requirement -->
</div>
<div class="pp-cbt-question" id="questionText"></div>
<div class="pp-cbt-options" id="optionsContainer"></div>
<div class="pp-cbt-left-navigation-row">
<button class="pp-cbt-btn-prev" onclick="prevQuestion()"><span>←</span> Previous</button>
<button class="pp-cbt-btn-clear" onclick="clearSelection()">Clear</button>
<button class="pp-cbt-btn-next" onclick="nextQuestion()">Next <span>→</span></button>
</div>
</div>
<div class="pp-cbt-desktop-right-workspace">
<div class="pp-cbt-palette-block-wrap">
<div class="pp-cbt-palette-title">Question Palette Map</div>
<div class="pp-cbt-question-nav-scroll-window">
<div class="pp-cbt-question-nav" id="questionNav"></div>
</div>
</div>
<div class="pp-cbt-submit-block-wrap">
<button class="pp-cbt-btn-submit-test" onclick="submitQuiz()">Submit Test</button>
</div>
</div>
</div>
</div>
</div>
<!-- Result View Display Dashboard (solution language toggle removed) -->
<div id="resultBox" class="pp-cbt-hidden">
<div class="pp-cbt-result-box-container">
<div class="pp-cbt-result-header-title">Performance Analytics Dashboard</div>
<div class="pp-cbt-result-grid">
<div class="pp-cbt-result-card"><div class="pp-cbt-result-label">Attempted</div><div class="pp-cbt-result-value" id="attempted">0</div></div>
<div class="pp-cbt-result-card correct"><div class="pp-cbt-result-label">Correct</div><div class="pp-cbt-result-value" id="correct">0</div></div>
<div class="pp-cbt-result-card wrong"><div class="pp-cbt-result-label">Wrong</div><div class="pp-cbt-result-value" id="incorrect">0</div></div>
<div class="pp-cbt-result-card"><div class="pp-cbt-result-label">Score</div><div class="pp-cbt-result-value" id="percent">0%</div></div>
<div class="pp-cbt-result-card"><div class="pp-cbt-result-label">Accuracy </div><div class="pp-cbt-result-value" id="accuracy">0%</div></div>
<div class="pp-cbt-result-card"><div class="pp-cbt-result-label">Timeline</div><div class="pp-cbt-result-value" id="timeSpent">0m 0s</div></div>
</div>
<div class="pp-cbt-result-actions-inline-row">
<a href="https://www.parakhpath.com" class="pp-cbt-btn-link-home"><span>🏠</span> Return To Home</a>
<button class="pp-cbt-btn-action-retry" onclick="location.reload()"><span>🔄</span> Reattempt Test</button>
</div>
</div>
<div class="pp-cbt-solution-box">
<!-- Language toggle removed for solutions, only English displayed -->
<div id="solutions"></div>
</div>
</div>
</div>
<script>
// All questions now defined with only English content (single language)
const questions = [
{
"question": "The rules that govern the way words are combined to form sentences is called:<br><strong>(CTET Paper I - 2020)</strong>",
"options": ["Morphology", "Syntax", "Phonology", "Semantics"],
"answer": 1,
"explanation": "Syntax is the set of rules, principles, and processes that govern the structure of sentences in a given language."
},
{
"question": "Which of the following is an example of a 'Bound Morpheme'?<br><strong>(UPTET Paper II - 2017)</strong>",
"options": ["Cat", "-ed", "Table", "Run"],
"answer": 1,
"explanation": "'-ed' is a bound morpheme because it cannot stand alone; it must be attached to a root word."
},
{
"question": "The study of the meaning of words and sentences is called:<br><strong>(CTET Paper II - 2014)</strong>",
"options": ["Syntax", "Semantics", "Phonology", "Morphology"],
"answer": 1,
"explanation": "Semantics is the branch of linguistics that studies the meaning of words, phrases, and sentences."
},
{
"question": "What is the primary goal of the 'Communicative Approach' in language teaching?<br><strong>(CTET Paper I - 2021)</strong>",
"options": ["Grammar mastery", "Communicative competence", "Translation skills", "Literal reading"],
"answer": 1,
"explanation": "The Communicative Approach aims to develop communicative competence—the ability to use language effectively in social contexts."
},
{
"question": "A child says 'I goed to the park'. This is an example of:<br><strong>(REET Level I - 2021)</strong>",
"options": ["Overgeneralization of rules", "Vocabulary deficiency", "Poor hearing", "Syntax error"],
"answer": 0,
"explanation": "The child is applying the regular past tense rule '-ed' to an irregular verb, a process called overgeneralization."
}
];
document.addEventListener("DOMContentLoaded", function() {
const totalLen = questions.length;
const dynamicSpan = document.getElementById("dynamicTotalQ");
if(dynamicSpan) dynamicSpan.innerText = totalLen;
document.getElementById("progressTotal").innerText = totalLen;
});
let currentQuestion = 0;
let answers = [];
let visitedQuestions = [0];
let startTime;
let timerInterval;
document.getElementById("progressTotal").innerText = questions.length;
function launchFullscreen(element) {
if(element.requestFullscreen) { element.requestFullscreen(); }
else if(element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); }
else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); }
}
function exitFullscreen() {
if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) {
if(document.exitFullscreen) { document.exitFullscreen(); }
}
}
function manualToggleFullscreen() {
let targetNode = document.getElementById("quizSection");
if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement) {
launchFullscreen(targetNode);
} else {
exitFullscreen();
}
}
function startQuiz() {
document.getElementById("instructionSection").classList.add("pp-cbt-hidden");
document.getElementById("floatingFullscreenBtn").classList.remove("pp-cbt-hidden");
const mainQuizSection = document.getElementById("quizSection");
mainQuizSection.classList.remove("pp-cbt-hidden");
try { launchFullscreen(mainQuizSection); } catch(e) {}
startTime = new Date();
timerInterval = setInterval(updateTimer, 1000);
createQuestionNav();
loadQuestion();
}
function updateTimer(){
let now = new Date();
let diff = Math.floor((now-startTime)/1000);
let minutes = String(Math.floor(diff/60)).padStart(2,'0');
let seconds = String(diff%60).padStart(2,'0');
document.getElementById("time").innerText = minutes + ":" + seconds;
}
function loadQuestion(){
const q = questions[currentQuestion];
document.getElementById("questionText").innerHTML = q.question;
document.getElementById("progressIndex").innerText = currentQuestion + 1;
document.getElementById("questionLabelIndex").innerText = "Question " + (currentQuestion + 1) + ":";
if(!visitedQuestions.includes(currentQuestion)){ visitedQuestions.push(currentQuestion); }
const optionsContainer = document.getElementById("optionsContainer");
optionsContainer.innerHTML = "";
q.options.forEach((option,index)=>{
const div = document.createElement("div");
div.classList.add("pp-cbt-option");
if(answers[currentQuestion]===index){ div.classList.add("selected"); }
div.innerHTML = option;
div.onclick = ()=>selectOption(index);
optionsContainer.appendChild(div);
});
updateQuestionNav();
}
function selectOption(index){
answers[currentQuestion] = index;
loadQuestion();
}
function clearSelection() {
answers[currentQuestion] = undefined;
loadQuestion();
}
function nextQuestion(){ if(currentQuestion < questions.length-1){ currentQuestion++; loadQuestion(); } }
function prevQuestion(){ if(currentQuestion > 0){ currentQuestion--; loadQuestion(); } }
function createQuestionNav(){
const nav = document.getElementById("questionNav");
nav.innerHTML = "";
questions.forEach((q,index)=>{
const btn = document.createElement("button");
btn.innerText = index+1;
btn.onclick = ()=>{ currentQuestion = index; loadQuestion(); };
nav.appendChild(btn);
});
updateQuestionNav();
}
function updateQuestionNav(){
const buttons = document.querySelectorAll("#questionNav button");
buttons.forEach((btn,index)=>{
btn.className = "";
if(answers[index] !== undefined){
btn.classList.add("answered");
} else if(visitedQuestions.includes(index)){
btn.classList.add("visited-unanswered");
} else {
btn.classList.add("not-visited");
}
if(index === currentQuestion){ btn.classList.add("active-focus"); }
});
}
function submitQuiz(){
clearInterval(timerInterval);
try { exitFullscreen(); } catch(e){}
document.getElementById("floatingFullscreenBtn").classList.add("pp-cbt-hidden");
document.getElementById("quizSection").classList.add("pp-cbt-hidden");
document.getElementById("resultBox").classList.remove("pp-cbt-hidden");
let attempted = 0, correct = 0;
questions.forEach((q,index)=>{
if(answers[index]!==undefined){
attempted++;
if(answers[index]===q.answer){ correct++; }
}
});
let incorrect = attempted - correct;
let accuracyVal = attempted === 0 ? 0 : Math.round((correct / attempted) * 100);
let scorePercent = Math.round((correct / questions.length) * 100);
document.getElementById("attempted").innerText = attempted;
document.getElementById("correct").innerText = correct;
document.getElementById("incorrect").innerText = incorrect;
document.getElementById("percent").innerText = scorePercent + "%";
document.getElementById("accuracy").innerText = accuracyVal + "%";
document.getElementById("timeSpent").innerText = document.getElementById("time").innerText;
generateSolutions();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
function generateSolutions(){
const container = document.getElementById("solutions");
container.innerHTML = "";
questions.forEach((q,index)=>{
const hasAttempted = answers[index] !== undefined;
const isCorrect = hasAttempted && answers[index] === q.answer;
const userAnswerText = hasAttempted ? q.options[answers[index]] : "Not Attempted";
const correctAnswerText = q.options[q.answer];
const div = document.createElement("div");
div.classList.add("pp-cbt-solution");
if(hasAttempted){ div.classList.add(isCorrect ? "user-correct" : "user-wrong"); }
div.innerHTML = `
<h4>Question ${index+1} ${hasAttempted ? (isCorrect ? '✅' : '❌') : ''}</h4>
<p><b>Question:</b> ${q.question}</p>
<p><b>Attempt:</b> <span class="${hasAttempted ? (isCorrect ? 'pp-cbt-correct-text' : 'pp-cbt-wrong-text') : ''}">${userAnswerText}</span></p>
<p class="pp-cbt-correct-text">Correct ✅: ${correctAnswerText}</p>
<div class="pp-cbt-explanation-alert-card"><b>Explanation:</b> ${q.explanation}</div>
`;
container.appendChild(div);
});
}
</script>
</body>
</html> CSS CODE for Blog
<h1> class="h1-heading-box"
class="blogger-banner"
class="blogger-banner"
<h2> class="h2-subheading-box"
<h3> class="h3-minor-heading"
<table> class="overview-table"
class="simple-table"
class="link-table-container"
<style>
.meri-button-hai-sample {
padding: 10px 24px; font: 600 16px 'Poppins', sans-serif; color: #fff;
background: #D98E04; border: none; border-radius: 6px; cursor: pointer;
transition: background 0.2s ease;
}
.meri-button-hai-sample:hover { background: #b87803; }
.blogger-banner {
/* Compact Layout */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
max-width: 800px;
margin: 12px auto;
font-size: 24px !important;
padding: 10px 15px !important; /* Reduced vertical padding for a super compact look */
box-sizing: border-box;
position: relative;
overflow: hidden;
/* Background and Frame */
background-color: #FFFDF7;
border: 1.5px solid #D98E04;
/* Diagonal Corner Curves */
border-top-left-radius: 12px; /* Slightly smaller radius to match compact scale */
border-bottom-right-radius: 12px;
border-top-right-radius: 2px;
border-bottom-left-radius: 2px;
/* Side Accent Borders */
border-left: 5px solid #D98E04;
border-right: 5px solid #D98E04;
/* Main Text Typography */
font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
color: #2F3E46;
font-size: 22px; /* Tighter font size for sleekness */
font-weight: 700;
line-height: 1.2;
}
/* Compact Full-Box Background Watermark */
.blogger-banner::before {
content: "PARAKH PATH";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
/* Adjusted Watermark Scale */
font-family: 'Arial Black', Gadget, sans-serif;
font-size: 24px; /* Reduced size so it stays within the compact box */
font-weight: 900;
letter-spacing: 3px;
white-space: nowrap;
color: #D98E04;
opacity: 0.07;
/* Structural Rules */
z-index: 0;
pointer-events: none;
user-select: none;
}
.h1-heading-box {
position: relative;
overflow: hidden;
margin: 15px auto;
padding: 7px 10px;
font-size: 24px !important;
max-width: 800px;
text-align: center;
/* Background and Borders */
background-color: #fffaf4; /* Light tint of the theme color */
border-top: 1px solid #cdb202;
border-bottom: 1px solid #cdb202;
border-left: 5px solid #e07c03; /* Thick left border */
border-right: 5px solid #e07c03; /* Thick right border */
/* Diagonal Rounded Corners (Top-Left and Bottom-Right) */
border-radius: 15px 0 15px 0;
/* Subtle shadow for a creative lift */
box-shadow: 0 4px 15px rgba(244, 150, 30, 0.1);
}
/* Heading Styling inside the box */
.h1-heading-box h2 {
font-family: 'Poppins', sans-serif;
font-size: 1.3rem; /* Medium font size */
font-weight: 600;
color: #e07c03;
margin: 0;
padding: 0;
position: relative;
z-index: 2; /* Keeps text above the watermark */
letter-spacing: 0.5px;
}
/* Center Background Watermark Text */
.h1-heading-box::before {
content: "PARAKH PATH";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Poppins', sans-serif;
font-size: 2.2rem;
font-weight: 800;
text-transform: uppercase;
color: rgba(205, 178, 2, 0.12); /* Ultra-light #cdb202 for watermark effect */
white-space: nowrap;
pointer-events: none;
z-index: 1;
}
/* Compact Subheading Box styling */
.h2-subheading-box {
font-family: 'Poppins', sans-serif;
background: #ffffff;
border-bottom: 3px solid #f4961e; /* Crisp bottom line */
padding: 10px 10px 5px 10px; /* Minimal padding for a tight, compact look */
margin: 10px 0 !important;
font-size: 18px !important;
position: relative;
overflow: hidden;
/* Creative Touches */
box-shadow: 0 2px 8px rgba(224, 124, 3, 0.06);
background-image: radial-gradient(#cdb202 0.5px, transparent 0.5px), radial-gradient(#cdb202 0.5px, #ffffff 0.5px);
background-size: 20px 20px !important;
background-position: 0 0, 10px 10px;
background-blend-mode: overlay;
}
/* Light "Parakh Path" Background Text Sticker */
.h2-subheading-box::before {
content: "PARAKH PATH"; /* Your custom background branding text */
position: absolute;
right: 10px;
bottom: -2px; /* Aligned tight to the bottom right */
font-family: 'Poppins', sans-serif;
font-size: 1.4rem; /* Fits beautifully in the compact space */
font-weight: 900;
letter-spacing: 1px;
color: #cdb202; /* Theme gold color */
opacity: 0.22; /* Ultra-light so it remains a subtle watermark */
white-space: nowrap;
pointer-events: none;
z-index: 0;
}
/* Heading Typography */
.h2-subheading-box h2 {
font-size: 1.15rem !important; /* Medium size for compact layout */
font-weight: 600;
color: #1a1a1a;
margin: 0 !important;
padding: 0 !important;
position: relative;
z-index: 1; /* Keeps your title text sitting cleanly above the background watermark */
}
.h3-minor-heading {
display: inline-block; /* Keeps the background only as wide as the text */
background-color: rgba(244, 150, 30, 0.08);
border-left: 4px solid #f4961e;
padding: 4px 8px 4px 12px; /* Minimal padding just to separate text from the border */
margin: 10px 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 20px; /* Slightly smaller font for a more compact look */
font-weight: 700;
color: #1e2229;
line-height: 1.2;
}
/* Apply this single class directly to your <table> tag */
.overview-table {
width: 100%; /* 100% Width */
border-collapse: collapse;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
font-size: 0.95rem; /* Medium font size */
background-color: #ffffff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden; /* Ensures the rounded corners wrap perfectly */
border: 1px solid #f0f0f0;
}
/* Header: Clean & professional using your deep orange tone */
.overview-table th {
background-color: #e07c03;
color: #ffffff;
font-weight: 600;
text-align: left;
letter-spacing: 0.5px;
padding: 10px 16px; /* Minimum padding */
border: none;
}
/* Data Cells: Minimalist and spacious without being "too colorful" */
.overview-table td {
padding: 10px 16px; /* Minimum padding */
color: #333333;
border-bottom: 1px solid #f5f5f5;
}
/* Subtle Alternate Row: Uses a micro-tint of your orange just for readability */
.overview-table tbody tr:nth-child(even) {
background-color: rgba(244, 150, 30, 0.04);
}
/* Elegant Accent: Subtle left border on the first column to give it structure */
.overview-table td:first-child {
border-left: 4px solid #cdb202; /* Uses the gold tone as a minor accent line */
font-weight: 500;
}
/* Bold Dates: Makes the actual dates stand out naturally */
.overview-table td:last-child {
color: #e07c03;
font-weight: 600;
}
/* Clean finish for the last row */
.overview-table tr:last-child td {
border-bottom: none;
}
/* मुख्य टेबल क्लास - 100% चौड़ाई और सिंपल लुक */
.simple-table {
width: 100%;
border-collapse: collapse;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 15px; /* मध्यम फ़ॉन्ट आकार */
color: #333333;
margin: 15px 0;
}
/* टेबल हेडर - हल्का रंग (Light Colour) */
.simple-table thead {
background-color: rgba(244, 150, 30, 0.1); /* #f4961e का बहुत हल्का रूप */
color: #e07c03; /* टेक्स्ट के लिए गहरा रंग */
}
/* हेडर और डेटा सेल्स के लिए न्यूनतम पैडिंग (Minimum Padding) */
.simple-table th,
.simple-table td {
padding: 6px 10px; /* न्यूनतम पैडिंग */
text-align: left;
}
/* हेडर रो के नीचे एक स्पष्ट लाइन (Bottom Line) */
.simple-table th {
font-weight: 600;
border-bottom: 2px solid #e07c03; /* नीचे की मजबूत लाइन */
}
/* डेटा रोज़ (Rows) के नीचे हल्की लाइन */
.simple-table tbody tr td {
border-bottom: 1px solid #f0f0f0;
}
/* वैकल्पिक रो (Rows) के लिए हल्का बैकग्राउंड शेड */
.simple-table tbody tr:nth-child(even) {
background-color: rgba(205, 178, 2, 0.05); /* #cdb202 का हल्का शेड */
}
/* तिथि वाले कॉलम का टेक्स्ट कलर */
.simple-table td:last-child {
font-weight: 500;
}
/* मुख्य कंटेनर - 100% फुल विड्थ */
.link-table-container {
width: 100%;
margin: 20px 0;
padding: 8px; /* मिनिमम पैडिंग */
box-sizing: border-box;
/* बॉर्डर डिज़ाइन: ऊपर-नीचे पतला, बाएं-दाएं मोटा */
border-top: 1px solid #cdb202;
border-bottom: 1px solid #cdb202;
border-left: 6px solid #e07c03;
border-right: 6px solid #e07c03;
/* मुख्य बॉक्स के डायगोनल (कोने) राउंड शेप */
border-top-left-radius: 24px;
border-bottom-right-radius: 24px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
/* लाइट बैकग्राउंड थीम और पोजीशन */
background: #fffbf5;
position: relative;
overflow: hidden;
box-shadow: 0 5px 20px rgba(224, 124, 3, 0.1);
font-family: 'Poppins', sans-serif;
}
/* सेंटर में "parakh path" बैकग्राउंड वॉटरमार्क टेक्स्ट */
.link-table-container::before {
content: "PARAKH PATH";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-12deg);
font-size: 3rem;
font-weight: 800;
color: rgba(205, 178, 2, 0.09); /* लाइट वॉटरमार्क */
white-space: nowrap;
pointer-events: none;
z-index: 1;
}
/* टेबल सेटिंग */
.link-table-container table {
width: 100%;
border-collapse: separate; /* राउंड कोनों के लिए सेपरेट आवश्यक है */
border-spacing: 0;
position: relative;
z-index: 2;
font-size: 15px; /* मीडियम साइज */
}
/* टॉप रो (Header) को कर्व और राउंड करने के लिए स्टाइल */
.link-table-container th {
background: linear-gradient(135deg, #f4961e, #e07c03);
color: #ffffff;
font-weight: bold;
padding: 14px 12px;
text-align: left;
border-bottom: 3px solid #cdb202;
}
/* टॉप रो का बायाँ कोना राउंड */
.link-table-container th:first-child {
border-top-left-radius: 16px;
}
/* टॉप रो का दायाँ कोना राउंड */
.link-table-container th:last-child {
border-top-right-radius: 16px;
text-align: right;
}
/* डेटा सेल्स (Cells) डिज़ाइन */
.link-table-container td {
padding: 12px;
border-bottom: 1px solid rgba(205, 178, 2, 0.25);
color: #333333;
vertical-align: middle;
}
/* बाएँ कॉलम की क्रिएटिव स्टाइलिंग */
.link-table-container td:first-child {
font-weight: 600;
color: #e07c03;
position: relative;
}
/* दाएँ कॉलम का बॉटम डिज़ाइन */
.link-table-container td:last-child {
text-align: right;
vertical-align: bottom; /* टेक्स्ट नीचे रहेगा */
font-weight: bold;
color: #cdb202;
padding-bottom: 14px;
}
/* राइट कॉलम के नीचे का अतिरिक्त छोटा क्रिएटिव टेक्स्ट */
.link-table-container .bottom-note {
display: block;
font-size: 11px;
color: #f4961e;
font-weight: normal;
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* आखरी रो (Row) का स्पेशल डिज़ाइन */
.link-table-container tr:last-child td {
border-bottom: none;
}
.link-table-container tr:last-child td:last-child {
border-bottom-right-radius: 16px; /* आखिरी सेल को भी कर्व लुक देने के लिए */
}
/* माउस ले जाने पर रो का चमकना (Hover Effect) - मॉडर्न टच */
.link-table-container tbody tr:hover {
background-color: rgba(244, 150, 30, 0.04);
transition: background 0.3s ease;
}
</style>
Two Languge - Online Test Code - with Box Solution
with Box Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport">
<title>Online Quiz Test | Parakh Path</title>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* ===== YOUR EXISTING STYLES (unchanged) ===== */
.pp-cbt-container, .pp-cbt-container * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
line-height: 1.5;
text-align: left;
}
body {
background: #f8fafc;
color: #334155;
unicode-bidi: plaintext;
}
.pp-cbt-container {
max-width: 1200px;
margin: 30px auto;
padding: 0 20px;
position: relative;
}
#quizSection:fullscreen {
background: #ffffff !important;
padding: 30px !important;
overflow-y: auto;
}
#quizSection:-webkit-full-screen {
background: #ffffff !important;
padding: 30px !important;
overflow-y: auto;
}
#quizSection:-moz-full-screen {
background: #ffffff !important;
padding: 30px !important;
overflow-y: auto;
}
.pp-front-page-hero {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.04);
margin-bottom: 30px;
}
.pp-front-header-badge {
background: #ffffff;
border: 1px solid #e2e8f0;
border-left: 5px solid #e07c03;
border-radius: 8px;
padding: 15px 20px;
margin-bottom: 25px;
display: flex;
align-items: center;
}
.pp-front-title-container {
font-size: 20px;
font-weight: 700;
line-height: 1.2;
display: flex;
gap: 10px;
}
.pp-front-title-topic { color: #64748b; }
.pp-front-title-main { color: #e07c03; }
.pp-cbt-banner-section {
width: 100%;
margin-bottom: 30px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
aspect-ratio: 2 / 1;
}
.pp-cbt-banner-section img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.pp-cbt-instructions-card {
background: #ffffff;
border-top: 3px solid #e07c03;
padding: 25px 5px;
margin-bottom: 30px;
}
.pp-cbt-instructions-card h3 {
font-size: 18px;
font-weight: 700;
color: #0f172a;
margin-bottom: 20px;
}
.pp-cbt-instructions-card ul {
list-style-type: none !important;
padding: 0 !important;
margin: 0 !important;
}
.pp-cbt-instructions-card ul li {
margin-bottom: 16px !important;
font-size: 15px;
font-weight: 500;
display: flex;
align-items: center;
gap: 15px;
color: #334155;
}
.pp-cbt-instructions-card ul li::before {
content: "" !important;
background: #e07c03;
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.pp-cbt-instructions-card ul li span {
font-weight: 700;
color: #e07c03;
}
.pp-cbt-btn-primary {
background: linear-gradient(135deg, #f39200 0%, #e07c03 100%);
color: #fff !important;
border: none;
padding: 10px 30px;
border-radius: 12px;
cursor: pointer;
font-size: 16px;
font-weight: 700;
width: 100%;
text-transform: uppercase;
transition: all 0.25s ease;
box-shadow: 0 4px 12px rgba(243, 146, 0, 0.3);
letter-spacing: 0.5px;
text-align: center;
display: block;
}
.pp-cbt-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(243, 146, 0, 0.4);
}
.pp-cbt-outer-frame-box {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.03);
margin-bottom: 40px;
position: relative;
}
.pp-cbt-split-desktop-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 35px;
}
.pp-cbt-desktop-left-workspace {
display: flex;
flex-direction: column;
}
.pp-cbt-desktop-right-workspace {
display: flex;
flex-direction: column;
justify-content: space-between;
border-left: 1px solid #f1f5f9;
padding-left: 30px;
}
.pp-cbt-top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 18px;
border-bottom: 2px solid #f1f5f9;
gap: 15px;
}
.pp-cbt-progress-text {
color: #475569;
font-weight: 700;
font-size: 14px;
background: #f1f5f9;
padding: 8px 16px;
border-radius: 30px;
}
.pp-cbt-inline-creative-title {
font-size: 15px;
font-weight: 700;
color: #e07c03;
background: #fff7ed;
border: 1px dashed #ffedd5;
padding: 8px 20px;
border-radius: 8px;
flex-grow: 1;
max-width: 65%;
}
.pp-cbt-inline-creative-title span { color: #334155; font-weight: 500; }
.pp-cbt-timer {
color: #ffffff;
background: #e07c03;
font-weight: 700;
font-size: 14px;
padding: 8px 16px;
border-radius: 30px;
box-shadow: 0 4px 10px rgba(224, 124, 3, 0.2);
}
.pp-cbt-floating-fs-trigger {
position: absolute;
top: 15px;
right: 15px;
z-index: 999;
width: 42px;
height: 42px;
background: #ffffff;
border: 2px solid #e07c03;
color: #e07c03;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
font-weight: bold;
}
.pp-cbt-question-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.pp-cbt-question-label { font-size: 16px; font-weight: 700; color: #e07c03; }
.pp-cbt-lang-toggle-container {
display: inline-flex;
border: 1px solid #e2e8f0;
background: #f1f5f9;
border-radius: 8px;
padding: 3px;
cursor: pointer;
font-size: 12px;
font-weight: bold;
}
.pp-cbt-lang-toggle-btn { padding: 5px 14px; border-radius: 6px; color: #64748b; }
.pp-cbt-lang-toggle-btn.active { background: #ffffff; color: #e07c03; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.pp-cbt-question { font-size: 17px; font-weight: 600; color: #1e293b; margin-bottom: 25px; line-height: 1.6; }
.pp-cbt-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.pp-cbt-option {
padding: 15px 20px;
border: 1px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
background: #ffffff;
font-size: 15px;
color: #475569;
transition: all 0.2s;
}
.pp-cbt-option.selected {
background: #fff7ed;
color: #1e293b;
border-color: #e07c03;
font-weight: 600;
box-shadow: inset 4px 0 0 #e07c03;
}
.pp-cbt-left-navigation-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
border-top: 1px solid #f1f5f9;
padding-top: 25px;
}
.pp-cbt-btn-prev, .pp-cbt-btn-next {
flex: 2;
padding: 15px 25px;
border-radius: 10px;
font-weight: 700;
font-size: 14px;
cursor: pointer;
border: none;
text-transform: uppercase;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: space-between;
}
.pp-cbt-btn-prev { background: #64748b; color: white; }
.pp-cbt-btn-next { background: #e07c03; color: white; }
.pp-cbt-btn-clear {
flex: 1;
padding: 15px 15px;
border-radius: 10px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
background: #e2e8f0;
color: #475569;
border: none;
text-transform: uppercase;
text-align: center;
}
.pp-cbt-palette-block-wrap { margin-bottom: 25px; }
.pp-cbt-palette-title { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.8px; }
.pp-cbt-question-nav-scroll-window {
max-height: 345px;
overflow-y: auto;
padding-right: 4px;
}
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar { width: 5px; }
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.pp-cbt-question-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.pp-cbt-question-nav button {
width: 46px;
height: 46px;
border-radius: 50%;
font-weight: 700;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
transition: all 0.2s ease;
padding: 0;
}
.pp-cbt-question-nav button.not-visited {
background: #e2e8f0;
border: 1px solid #cbd5e1;
color: #64748b;
}
.pp-cbt-question-nav button.visited-unanswered {
background: #ffffff;
border: 2px solid #e07c03;
color: #e07c03;
}
.pp-cbt-question-nav button.answered {
background: #e07c03;
border: 1px solid #e07c03;
color: #ffffff;
}
.pp-cbt-question-nav button.active-focus {
border: 3.5px solid #10b981 !important;
}
.pp-cbt-btn-submit-test {
background: #10b981; color: white; width: 100%; padding: 15px 20px;
border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; border: none;
text-transform: uppercase; letter-spacing: 0.5px; text-align: center;
}
.pp-cbt-result-box-container { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 35px; max-width: 850px; margin: 0 auto; }
.pp-cbt-result-header-title { text-align: center; font-size: 22px; font-weight: 700; color: #0f172a; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #f1f5f9; }
.pp-cbt-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.pp-cbt-result-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px 15px; text-align: center; }
.pp-cbt-result-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 8px; }
.pp-cbt-result-value { font-size: 22px; font-weight: 800; color: #0f172a; }
.pp-cbt-result-card.wrong .pp-cbt-result-value { color: #ef4444; }
.pp-cbt-result-card.correct .pp-cbt-result-value { color: #10b981; }
.pp-cbt-result-actions-inline-row {
display: flex;
gap: 15px;
margin-top: 10px;
border-top: 1px solid #f1f5f9;
padding-top: 25px;
}
.pp-cbt-result-actions-inline-row .pp-cbt-btn-link-home {
flex: 1;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white !important;
text-align: center;
padding: 16px 24px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
transition: all 0.2s;
}
.pp-cbt-result-actions-inline-row .pp-cbt-btn-action-retry {
flex: 1;
background: linear-gradient(135deg, #64748b 0%, #475569 100%);
color: white !important;
text-align: center;
padding: 16px 24px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(71, 85, 105, 0.25);
transition: all 0.2s;
}
.pp-cbt-result-actions-inline-row .pp-cbt-btn-link-home:hover,
.pp-cbt-result-actions-inline-row .pp-cbt-btn-action-retry:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
.pp-cbt-solution-box { margin-top: 30px; border-top: 2px dashed #cbd5e1; padding-top: 25px; max-width: 850px; margin-left: auto; margin-right: auto; }
.pp-cbt-solution { background: #f8fafc; border-left: 4px solid #cbd5e1; padding: 16px; border-radius: 8px; margin-bottom: 15px; font-size: 14px; }
.pp-cbt-solution.user-correct { border-left-color: #10b981; background: #f0fdf4; }
.pp-cbt-solution.user-wrong { border-left-color: #ef4444; background: #fef2f2; }
.pp-cbt-explanation-alert-card { margin-top: 12px; padding: 12px 16px; background: #fffbeb; border: 1px solid #fef3c7; border-radius: 6px; color: #92400e; }
.pp-cbt-correct-text { color: #10b981; font-weight: bold; }
.pp-cbt-wrong-text { color: #ef4444; font-weight: bold; }
.pp-cbt-hidden { display: none !important; }
/* ===== SOLUTION‑PANEL SPECIFIC STYLES (unchanged layout) ===== */
.sol-panel {
background: #fff;
border-radius: 16px;
padding: 20px 20px 30px;
box-shadow: 0 6px 20px rgba(0,0,0,0.04);
margin: 0 auto 30px;
max-width: 860px;
border: 1px solid #e2e8f0;
position: relative;
}
.sol-panel-topbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 10px;
}
.sol-panel-topbar .sol-nav-indicator {
font-weight: 600;
font-size: 14px;
color: #1e293b;
background: #f1f5f9;
padding: 6px 14px;
border-radius: 30px;
}
.sol-panel-topbar .sol-actions {
display: flex;
align-items: center;
gap: 8px;
}
.sol-panel-topbar .sol-actions .sol-lang-toggle {
display: inline-flex;
border: 1px solid #e2e8f0;
background: #f1f5f9;
border-radius: 8px;
padding: 3px;
cursor: pointer;
font-size: 11px;
font-weight: 600;
}
.sol-panel-topbar .sol-actions .sol-lang-toggle span {
padding: 4px 12px;
border-radius: 6px;
color: #64748b;
}
.sol-panel-topbar .sol-actions .sol-lang-toggle span.active {
background: #ffffff;
color: #e07c03;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.sol-panel-topbar .sol-actions .sol-fs-btn {
background: transparent;
border: 2px solid #e07c03;
color: #e07c03;
border-radius: 50%;
width: 36px;
height: 36px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 0.2s;
line-height: 1;
}
.sol-panel-topbar .sol-actions .sol-fs-btn:hover {
background: #e07c03;
color: #fff;
}
/* horizontal scroller for question numbers — UPDATED styling */
.sol-nav-scroll {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding: 8px 0 14px;
margin-bottom: 18px;
border-bottom: 1px solid #f1f5f9;
display: flex;
flex-wrap: nowrap;
gap: 8px;
-webkit-overflow-scrolling: touch;
}
.sol-nav-scroll::-webkit-scrollbar { height: 4px; }
.sol-nav-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.sol-nav-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.sol-nav-scroll .sol-q-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
border-radius: 50%;
font-weight: 700;
font-size: 13px;
cursor: pointer;
background: #e2e8f0;
color: #64748b;
border: 1px solid #cbd5e1;
flex-shrink: 0;
transition: 0.2s;
}
/* statuses: correct (green), wrong (red), not attempted (grey) */
.sol-nav-scroll .sol-q-badge.sol-answered {
background: #10b981; /* green */
border-color: #10b981;
color: #fff;
}
.sol-nav-scroll .sol-q-badge.sol-wrong {
background: #ef4444; /* red */
border-color: #ef4444;
color: #fff;
}
.sol-nav-scroll .sol-q-badge.sol-not-attempted {
background: #e2e8f0;
border-color: #cbd5e1;
color: #64748b;
}
.sol-nav-scroll .sol-q-badge.sol-active {
border: 3px solid #0f172a !important;
transform: scale(1.05);
}
.sol-content-card {
background: #fafcff;
border-radius: 12px;
padding: 20px 16px;
border: 1px solid #eef2f6;
}
.sol-content-card .sol-q-text {
font-weight: 600;
font-size: 16px;
color: #0f172a;
margin-bottom: 14px;
}
.sol-content-card .sol-answer-row {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
margin-bottom: 8px;
}
.sol-content-card .sol-answer-row .sol-label {
font-weight: 500;
color: #475569;
min-width: 70px;
}
.sol-content-card .sol-explain {
background: #fffbeb;
border-left: 4px solid #f59e0b;
padding: 14px 16px;
border-radius: 6px;
margin-top: 16px;
color: #78350f;
font-size: 14px;
}
.sol-content-card .sol-status-badge {
display: inline-block;
padding: 4px 14px;
border-radius: 30px;
font-size: 13px;
font-weight: 600;
}
.sol-content-card .sol-status-badge.correct { background: #dcfce7; color: #166534; }
.sol-content-card .sol-status-badge.wrong { background: #fee2e2; color: #991b1b; }
.sol-content-card .sol-status-badge.not-att { background: #f1f5f9; color: #475569; }
.sol-nav-buttons {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 25px;
}
.sol-nav-buttons button {
padding: 12px 24px;
border-radius: 10px;
font-weight: 600;
border: none;
cursor: pointer;
background: #e07c03;
color: white;
font-size: 13px;
text-transform: uppercase;
flex: 1;
transition: 0.2s;
}
.sol-nav-buttons button:first-child { background: #64748b; }
.sol-nav-buttons button:hover { opacity: 0.85; transform: translateY(-1px); }
.sol-panel:fullscreen {
background: #ffffff !important;
padding: 30px !important;
overflow-y: auto;
max-width: 100%;
}
.sol-panel:-webkit-full-screen {
background: #ffffff !important;
padding: 30px !important;
overflow-y: auto;
}
.sol-panel:-moz-full-screen {
background: #ffffff !important;
padding: 30px !important;
overflow-y: auto;
}
@media (max-width: 767px) {
.pp-cbt-container { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; }
.pp-front-page-hero { border-radius: 0 !important; border-left: none !important; border-right: none !important; padding: 20px 15px !important; }
.pp-front-header-badge { padding: 10px 14px !important; margin-bottom: 15px !important; }
.pp-front-title-container { font-size: 16px !important; }
.pp-front-desc { font-size: 13px !important; margin-bottom: 15px !important; }
.pp-cbt-instructions-card { padding: 15px 5px !important; margin-bottom: 20px !important; }
.pp-cbt-instructions-card h3 { font-size: 16px !important; margin-bottom: 12px !important; }
.pp-cbt-instructions-card ul li { font-size: 13px !important; margin-bottom: 10px !important; }
.pp-cbt-outer-frame-box { border-radius: 0 !important; border-left: none !important; border-right: none !important; padding: 20px 15px !important; }
#quizSection:fullscreen, #quizSection:-webkit-full-screen { padding: 15px 10px !important; }
.pp-cbt-top-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 0; }
.pp-cbt-inline-creative-title { grid-column: span 2; max-width: 100%; width: 100%; font-size: 13px; text-align: center; }
.pp-cbt-split-desktop-grid { display: flex; flex-direction: column; gap: 0; }
.pp-cbt-desktop-left-workspace { order: 1; }
.pp-cbt-left-navigation-row { gap: 8px; padding-top: 20px; margin-bottom: 25px; }
.pp-cbt-btn-prev, .pp-cbt-btn-next { padding: 14px 15px; font-size: 12px; }
.pp-cbt-btn-clear { padding: 14px 10px; font-size: 11px; }
.pp-cbt-desktop-right-workspace { order: 2; border-left: none; padding-left: 0; }
.pp-cbt-submit-block-wrap { order: 1; margin-bottom: 25px; }
.pp-cbt-palette-block-wrap { order: 2; border-top: 1px dashed #e2e8f0; padding-top: 20px; width: 100%; overflow-x: auto; }
.pp-cbt-question-nav-scroll-window { max-height: none !important; overflow-x: auto !important; overflow-y: hidden !important; padding-right: 0 !important; white-space: nowrap; display: block; width: 100%; }
.pp-cbt-question-nav { display: inline-flex !important; flex-direction: row !important; gap: 12px !important; white-space: nowrap; flex-wrap: nowrap; padding-bottom: 8px; width: auto; }
.pp-cbt-question-nav button { width: 48px; height: 48px; font-size: 15px; flex-shrink: 0; margin: 0; }
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar { height: 4px; }
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.pp-cbt-question-nav-scroll-window::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.pp-cbt-result-box-container { padding: 20px 15px !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; }
.pp-cbt-result-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
.pp-cbt-result-header-title { font-size: 18px !important; margin-bottom: 15px !important; }
.pp-cbt-result-actions-inline-row { flex-direction: column !important; gap: 12px !important; }
.pp-cbt-result-actions-inline-row .pp-cbt-btn-link-home,
.pp-cbt-result-actions-inline-row .pp-cbt-btn-action-retry { width: 100% !important; padding: 14px 20px !important; }
.sol-panel { border-radius: 0 !important; padding: 16px 12px !important; }
}
</style>
</head>
<body>
<div class="pp-cbt-container">
<!-- ===== FRONT PAGE ===== -->
<div id="instructionSection">
<div class="pp-front-page-hero">
<div class="pp-front-header-badge">
<div class="pp-front-title-container">
<span class="pp-front-title-topic">Tittle</span>
<span class="pp-front-title-main">Chapter</span>
</div>
</div>
<p class="pp-front-desc">Welcome to the formal interactive practice exam interface. This module features core curriculum assessments designed to calculate precise conceptual understanding and track time metrics in real time.</p>
<div class="pp-cbt-banner-section">
<img alt="Parakh Path Evaluation Banner" src="https://blogger.googleusercontent.com/img/a/AVvXsEhzHghwW8b1fRC75HmViUMGG1X1RjJ-PfKpDU8QG0NyiLVolUDGCCjDIIjIgb36fu7K0AAOdeUe6VlhaPCkBNHoH9mkPKwUO0yVgBDlzlC2P6nJpo01_rQ0xvoFOxXLuDNLSe96GaLItwCZSQVgw6r0bodnIaxDnE_ivLDzbVguZEn8_qmsZ2Npojp5_IKo" />
</div>
<div class="pp-cbt-instructions-card">
<h3>General Examination Instructions</h3>
<ul>
<li>Total Questions Available <span id="dynamicTotalQ">0</span> Questions</li>
<li>Timer tracks total continuous duration automatically upon full launch.</li>
<li>Single-choice objective computer-based testing schema formatting criteria.</li>
<li>Immediate question-wise answers palette map validations updated live.</li>
</ul>
</div>
<button class="pp-cbt-btn-primary" onclick="startQuiz()">Start Examination Now</button>
</div>
</div>
<div class="pp-cbt-floating-fs-trigger pp-cbt-hidden" id="floatingFullscreenBtn" onclick="manualToggleFullscreen()" title="Toggle Fullscreen">⛶</div>
<!-- ===== QUIZ SECTION ===== -->
<div class="pp-cbt-hidden" id="quizSection">
<div class="pp-cbt-outer-frame-box">
<div class="pp-cbt-top-bar">
<div class="pp-cbt-inline-creative-title">Parakh Path - <span>Chapter</span></div>
<div class="pp-cbt-progress-text">Q: <span id="progressIndex">0</span> / <span id="progressTotal">5</span></div>
<div class="pp-cbt-timer">⏱️ <span id="time">00:00</span></div>
</div>
<div class="pp-cbt-split-desktop-grid">
<div class="pp-cbt-desktop-left-workspace">
<div class="pp-cbt-question-header-row">
<div class="pp-cbt-question-label" id="questionLabelIndex">Question 1:</div>
<div class="pp-cbt-lang-toggle-container" onclick="toggleLanguage()">
<div class="pp-cbt-lang-toggle-btn active" id="langEng">English</div>
<div class="pp-cbt-lang-toggle-btn" id="langHin">हिंदी</div>
</div>
</div>
<div class="pp-cbt-question" id="questionText"></div>
<div class="pp-cbt-options" id="optionsContainer"></div>
<div class="pp-cbt-left-navigation-row">
<button class="pp-cbt-btn-prev" onclick="prevQuestion()"><span>←</span> Previous</button>
<button class="pp-cbt-btn-clear" onclick="clearSelection()">Clear</button>
<button class="pp-cbt-btn-next" onclick="nextQuestion()">Next <span>→</span></button>
</div>
</div>
<div class="pp-cbt-desktop-right-workspace">
<div class="pp-cbt-palette-block-wrap">
<div class="pp-cbt-palette-title">Question Palette Map</div>
<div class="pp-cbt-question-nav-scroll-window">
<div class="pp-cbt-question-nav" id="questionNav"></div>
</div>
</div>
<div class="pp-cbt-submit-block-wrap">
<button class="pp-cbt-btn-submit-test" onclick="submitQuiz()">Submit Test</button>
</div>
</div>
</div>
</div>
</div>
<!-- ===== RESULT + SOLUTION PANEL ===== -->
<div class="pp-cbt-hidden" id="resultBox">
<div class="pp-cbt-result-box-container">
<div class="pp-cbt-result-header-title">Performance Analytics Dashboard</div>
<div class="pp-cbt-result-grid">
<div class="pp-cbt-result-card"><div class="pp-cbt-result-label">Attempted</div><div class="pp-cbt-result-value" id="attempted">0</div></div>
<div class="pp-cbt-result-card correct"><div class="pp-cbt-result-label">Correct</div><div class="pp-cbt-result-value" id="correct">0</div></div>
<div class="pp-cbt-result-card wrong"><div class="pp-cbt-result-label">Wrong</div><div class="pp-cbt-result-value" id="incorrect">0</div></div>
<div class="pp-cbt-result-card"><div class="pp-cbt-result-label">Score</div><div class="pp-cbt-result-value" id="percent">0%</div></div>
<div class="pp-cbt-result-card"><div class="pp-cbt-result-label">Accuracy </div><div class="pp-cbt-result-value" id="accuracy">0%</div></div>
<div class="pp-cbt-result-card"><div class="pp-cbt-result-label">Timeline</div><div class="pp-cbt-result-value" id="timeSpent">0m 0s</div></div>
</div>
<div class="pp-cbt-result-actions-inline-row">
<a class="pp-cbt-btn-link-home" href="https://www.parakhpath.com"><span>🏠</span> Return To Home</a>
<button class="pp-cbt-btn-action-retry" onclick="location.reload()"><span>🔄</span> Reattempt Test</button>
</div>
</div>
<!-- ===== SOLUTION PANEL with horizontal scroller ===== -->
<div class="sol-panel" id="solutionPanel">
<!-- top bar -->
<div class="sol-panel-topbar">
<div class="sol-nav-indicator" id="solProgress">Question 1 of <span id="solTotal">0</span></div>
<div class="sol-actions">
<div class="sol-lang-toggle" id="solLangToggle">
<span class="active" data-lang="english" onclick="setSolLang('english')">English</span>
<span data-lang="hindi" onclick="setSolLang('hindi')">हिंदी</span>
</div>
<button class="sol-fs-btn" id="solFullscreenBtn" onclick="toggleSolFullscreen()">⛶</button>
</div>
</div>
<!-- horizontal scroller: question numbers (status: green/red/grey) -->
<div class="sol-nav-scroll" id="solNavScroll"></div>
<!-- content card -->
<div class="sol-content-card" id="solContent">
<div class="sol-q-text" id="solQuestionText">Question</div>
<div class="sol-answer-row"><span class="sol-label">Correct answer:</span> <span id="solCorrectAnswer" class="pp-cbt-correct-text">—</span></div>
<div class="sol-answer-row"><span class="sol-label">Your answer:</span> <span id="solUserAnswer">—</span></div>
<div><span class="sol-status-badge" id="solStatusBadge">Not attempted</span></div>
<div class="sol-explain" id="solExplanation">Explanation will appear here.</div>
</div>
<!-- prev / next buttons -->
<div class="sol-nav-buttons">
<button id="solPrevBtn" onclick="solPrev()">← Previous</button>
<button id="solNextBtn" onclick="solNext()">Next →</button>
</div>
</div>
</div>
</div>
<script>
// ===== EXISTING DATA =====
const questions = [
{
"english": {
"question": "The rules that govern the way words are combined to form sentences is called:<br><strong>(CTET Paper I - 2020)</strong>",
"options": ["Morphology", "Syntax", "Phonology", "Semantics"],
"answer": 1,
"explanation": "Syntax is the set of rules, principles, and processes that govern the structure of sentences in a given language."
},
"hindi": {
"question": "वाक्यों को बनाने के लिए शब्दों के संयोजित होने के नियमों को क्या कहा जाता है?<br><strong>(CTET Paper I - 2020)</strong>",
"options": ["रूपविज्ञान", "वाक्य विन्यास", "ध्वनि विज्ञान", "अर्थ विज्ञान"],
"answer": 1,
"explanation": "वाक्य विन्यास (Syntax) उन नियमों का समूह है जो भाषा में वाक्यों की संरचना को निर्धारित करते हैं।"
}
},
{
"english": {
"question": "Which of the following is an example of a 'Bound Morpheme'?<br><strong>(UPTET Paper II - 2017)</strong>",
"options": ["Cat", "-ed", "Table", "Run"],
"answer": 1,
"explanation": "'-ed' is a bound morpheme because it cannot stand alone; it must be attached to a root word."
},
"hindi": {
"question": "निम्नलिखित में से कौन सा 'बद्ध रूपिम' (Bound Morpheme) का उदाहरण है?<br><strong>(UPTET Paper II - 2017)</strong>",
"options": ["Cat", "-ed", "Table", "Run"],
"answer": 1,
"explanation": "'-ed' एक बद्ध रूपिम है क्योंकि यह स्वतंत्र रूप से उपयोग नहीं किया जा सकता; यह हमेशा मूल शब्द के साथ जुड़ता है।"
}
},
{
"english": {
"question": "The study of the meaning of words and sentences is called:<br><strong>(CTET Paper II - 2014)</strong>",
"options": ["Syntax", "Semantics", "Phonology", "Morphology"],
"answer": 1,
"explanation": "Semantics is the branch of linguistics that studies the meaning of words, phrases, and sentences."
},
"hindi": {
"question": "शब्दों और वाक्यों के अर्थ के अध्ययन को कहा जाता है?<br><strong>(CTET Paper II - 2014)</strong>",
"options": ["वाक्य विन्यास", "अर्थ विज्ञान", "ध्वनि विज्ञान", "रूपविज्ञान"],
"answer": 1,
"explanation": "अर्थ विज्ञान (Semantics) भाषा विज्ञान की वह शाखा है जो शब्दों और वाक्यों के अर्थ का अध्ययन करती है।"
}
},
{
"english": {
"question": "What is the primary goal of the 'Communicative Approach' in language teaching?<br><strong>(CTET Paper I - 2021)</strong>",
"options": ["Grammar mastery", "Communicative competence", "Translation skills", "Literal reading"],
"answer": 1,
"explanation": "The Communicative Approach aims to develop communicative competence—the ability to use language effectively in social contexts."
},
"hindi": {
"question": "भाषा शिक्षण में 'संप्रेषणात्मक दृष्टिकोण' (Communicative Approach) का प्राथमिक लक्ष्य क्या है?<br><strong>(CTET Paper I - 2021)</strong>",
"options": ["व्याकरण पर महारत", "संप्रेषणात्मक क्षमता", "अनुवाद कौशल", "शाब्दिक पठन"],
"answer": 1,
"explanation": "संप्रेषणात्मक दृष्टिकोण का लक्ष्य छात्रों में भाषा के व्यावहारिक उपयोग की क्षमता (communicative competence) विकसित करना है।"
}
},
{
"english": {
"question": "A child says 'I goed to the park'. This is an example of:<br><strong>(REET Level I - 2021)</strong>",
"options": ["Overgeneralization of rules", "Vocabulary deficiency", "Poor hearing", "Syntax error"],
"answer": 0,
"explanation": "The child is applying the regular past tense rule '-ed' to an irregular verb, a process called overgeneralization."
},
"hindi": {
"question": "एक बच्चा कहता है 'I goed to the park'। यह किसका उदाहरण है?<br><strong>(REET Level I - 2021)</strong>",
"options": ["नियमों का अति-सामान्यीकरण", "शब्दों की कमी", "खराब श्रवण क्षमता", "वाक्य विन्यास की त्रुटि"],
"answer": 0,
"explanation": "बच्चा अनियमित क्रिया पर भी नियमित भूतकाल नियम '-ed' लगा रहा है, जिसे नियमों का अति-सामान्यीकरण कहते हैं।"
}
}
];
// ===== EXISTING GLOBALS =====
let currentQuestion = 0;
let currentLanguage = "english";
let solutionLanguage = "english";
let answers = [];
let visitedQuestions = [0];
let startTime;
let timerInterval;
// ===== EXISTING FUNCTIONS =====
document.addEventListener("DOMContentLoaded", function() {
const totalLen = questions.length;
const dynamicSpan = document.getElementById("dynamicTotalQ");
if(dynamicSpan) dynamicSpan.innerText = totalLen;
document.getElementById("progressTotal").innerText = totalLen;
document.getElementById("solTotal").innerText = totalLen;
});
function launchFullscreen(element) {
if(element.requestFullscreen) { element.requestFullscreen(); }
else if(element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); }
else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); }
}
function exitFullscreen() {
if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) {
if(document.exitFullscreen) { document.exitFullscreen(); }
}
}
function manualToggleFullscreen() {
let targetNode = document.getElementById("quizSection");
if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement) {
launchFullscreen(targetNode);
} else { exitFullscreen(); }
}
function startQuiz() {
document.getElementById("instructionSection").classList.add("pp-cbt-hidden");
document.getElementById("floatingFullscreenBtn").classList.remove("pp-cbt-hidden");
const mainQuizSection = document.getElementById("quizSection");
mainQuizSection.classList.remove("pp-cbt-hidden");
try { launchFullscreen(mainQuizSection); } catch(e) {}
startTime = new Date();
timerInterval = setInterval(updateTimer, 1000);
createQuestionNav();
loadQuestion();
}
function updateTimer(){
let now = new Date();
let diff = Math.floor((now-startTime)/1000);
let minutes = String(Math.floor(diff/60)).padStart(2,'0');
let seconds = String(diff%60).padStart(2,'0');
document.getElementById("time").innerText = minutes + ":" + seconds;
}
function loadQuestion(){
const q = questions[currentQuestion][currentLanguage];
document.getElementById("questionText").innerHTML = q.question;
document.getElementById("progressIndex").innerText = currentQuestion + 1;
document.getElementById("questionLabelIndex").innerText = "Question " + (currentQuestion + 1) + ":";
if(!visitedQuestions.includes(currentQuestion)){ visitedQuestions.push(currentQuestion); }
const optionsContainer = document.getElementById("optionsContainer");
optionsContainer.innerHTML = "";
q.options.forEach((option,index)=>{
const div = document.createElement("div");
div.classList.add("pp-cbt-option");
if(answers[currentQuestion]===index){ div.classList.add("selected"); }
div.innerHTML = option;
div.onclick = ()=>selectOption(index);
optionsContainer.appendChild(div);
});
updateQuestionNav();
}
function selectOption(index){
answers[currentQuestion] = index;
loadQuestion();
}
function clearSelection() {
answers[currentQuestion] = undefined;
loadQuestion();
}
function nextQuestion(){ if(currentQuestion < questions.length-1){ currentQuestion++; loadQuestion(); } }
function prevQuestion(){ if(currentQuestion > 0){ currentQuestion--; loadQuestion(); } }
function toggleLanguage(){
currentLanguage = currentLanguage === "english" ? "hindi" : "english";
document.getElementById("langEng").classList.toggle("active", currentLanguage === "english");
document.getElementById("langHin").classList.toggle("active", currentLanguage === "hindi");
loadQuestion();
}
function createQuestionNav(){
const nav = document.getElementById("questionNav");
nav.innerHTML = "";
questions.forEach((q,index)=>{
const btn = document.createElement("button");
btn.innerText = index+1;
btn.onclick = ()=>{ currentQuestion = index; loadQuestion(); };
nav.appendChild(btn);
});
updateQuestionNav();
}
function updateQuestionNav(){
const buttons = document.querySelectorAll("#questionNav button");
buttons.forEach((btn,index)=>{
btn.className = "";
if(answers[index] !== undefined){ btn.classList.add("answered"); }
else if(visitedQuestions.includes(index)){ btn.classList.add("visited-unanswered"); }
else { btn.classList.add("not-visited"); }
if(index === currentQuestion){ btn.classList.add("active-focus"); }
});
}
// ===== SUBMIT QUIZ =====
function submitQuiz(){
clearInterval(timerInterval);
try { exitFullscreen(); } catch(e){}
document.getElementById("floatingFullscreenBtn").classList.add("pp-cbt-hidden");
document.getElementById("quizSection").classList.add("pp-cbt-hidden");
document.getElementById("resultBox").classList.remove("pp-cbt-hidden");
let attempted = 0, correct = 0;
questions.forEach((q,index)=>{
if(answers[index]!==undefined){
attempted++;
if(answers[index]===q.english.answer){ correct++; }
}
});
let incorrect = attempted - correct;
let accuracyVal = attempted === 0 ? 0 : Math.round((correct / attempted) * 100);
let scorePercent = Math.round((correct / questions.length) * 100);
document.getElementById("attempted").innerText = attempted;
document.getElementById("correct").innerText = correct;
document.getElementById("incorrect").innerText = incorrect;
document.getElementById("percent").innerText = scorePercent + "%";
document.getElementById("accuracy").innerText = accuracyVal + "%";
document.getElementById("timeSpent").innerText = document.getElementById("time").innerText;
buildSolutionPanel();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// ===== SOLUTION PANEL LOGIC (only scroller styling changed) =====
let solCurrentIndex = 0;
let solLang = "english";
function buildSolutionPanel() {
solCurrentIndex = 0;
solLang = solutionLanguage;
renderSolNav();
renderSolContent();
document.querySelectorAll('#solLangToggle span').forEach(el => {
el.classList.toggle('active', el.dataset.lang === solLang);
});
document.getElementById("solTotal").innerText = questions.length;
}
function renderSolNav() {
const container = document.getElementById("solNavScroll");
container.innerHTML = "";
questions.forEach((q, idx) => {
const badge = document.createElement("span");
badge.className = "sol-q-badge";
badge.textContent = idx + 1;
const ans = answers[idx];
if (ans === undefined) {
badge.classList.add("sol-not-attempted");
} else {
const correctAns = q.english.answer;
if (ans === correctAns) badge.classList.add("sol-answered");
else badge.classList.add("sol-wrong");
}
if (idx === solCurrentIndex) badge.classList.add("sol-active");
badge.onclick = () => { solCurrentIndex = idx; renderSolContent(); renderSolNav(); };
container.appendChild(badge);
});
document.getElementById("solProgress").innerHTML = `Question ${solCurrentIndex+1} of <span id="solTotal">${questions.length}</span>`;
}
function renderSolContent() {
const q = questions[solCurrentIndex];
const data = q[solLang];
const engData = q.english;
const userAns = answers[solCurrentIndex];
const correctIdx = engData.answer;
document.getElementById("solQuestionText").innerHTML = data.question;
let userAnsText = "Not attempted";
let statusClass = "not-att";
if (userAns !== undefined) {
userAnsText = data.options[userAns] || "—";
statusClass = (userAns === correctIdx) ? "correct" : "wrong";
}
document.getElementById("solUserAnswer").innerHTML = userAnsText;
document.getElementById("solCorrectAnswer").innerHTML = data.options[correctIdx] || "—";
const badge = document.getElementById("solStatusBadge");
badge.className = "sol-status-badge " + statusClass;
if (userAns === undefined) badge.textContent = "Not attempted";
else if (userAns === correctIdx) badge.textContent = "Correct Attempt";
else badge.textContent = "Wrong Attempt";
document.getElementById("solExplanation").innerHTML = `<strong>Explanation:</strong> ${data.explanation || '—'}`;
renderSolNav();
}
function solPrev() {
if (solCurrentIndex > 0) { solCurrentIndex--; renderSolContent(); }
}
function solNext() {
if (solCurrentIndex < questions.length - 1) { solCurrentIndex++; renderSolContent(); }
}
function setSolLang(lang) {
solLang = lang;
solutionLanguage = lang;
document.querySelectorAll('#solLangToggle span').forEach(el => {
el.classList.toggle('active', el.dataset.lang === lang);
});
renderSolContent();
}
function toggleSolFullscreen() {
const panel = document.getElementById("solutionPanel");
if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement) {
launchFullscreen(panel);
} else {
exitFullscreen();
}
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('#solLangToggle span').forEach(el => {
el.addEventListener('click', function(e) {
const lang = this.dataset.lang;
setSolLang(lang);
});
});
document.getElementById("solTotal").innerText = questions.length;
});
</script>
</body>
</html> CODE TITTLE ADD
TITTLE
ADD CODE NOT HTML CODE TITTLE ADD
TITTLE
ADD CODE NOT HTML CODE TITTLE ADD
TITTLE
ADD CODE NOT HTML CODE TITTLE ADD
TITTLE
ADD CODE NOT HTML CODE TITTLE ADD
TITTLE
ADD CODE NOT HTML CODE TITTLE ADD
TITTLE
ADD CODE NOT HTML