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>
CODE TITTLE ADD
TITTLE
ADD CODE NOT HTML CODE TITTLE ADD
TITTLE
ADD CODE NOT HTML