<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCQ Canvas - Electricity Diagrams (100 PYQs)</title>
<link href="[Link]
family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap"
rel="stylesheet">
<style>
:root {
--primary: #2563EB; --primary-hover: #1D4ED8;
--bg-body: #F3F4F6; --bg-card: #FFFFFF; --bg-sidebar: #F9FAFB;
--text-main: #111827; --text-muted: #6B7280;
--border: #E5E7EB;
--success: #10B981; --warning: #F59E0B; --danger: #EF4444;
--font-ui: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
[data-theme="dark"] {
--primary: #60A5FA; --primary-hover: #3B82F6;
--bg-body: #111827; --bg-card: #1F2937; --bg-sidebar: #111827;
--text-main: #F9FAFB; --text-muted: #9CA3AF; --border: #374151;
}
* { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
body { font-family: var(--font-ui); background: var(--bg-body); color:
var(--text-main); height: 100vh; overflow: hidden; display: flex; flex-direction:
column; transition: 0.2s; }
/* SVG DIAGRAM STYLES */
.diagram-container {
display: flex; justify-content: center; align-items: center;
background: var(--bg-body); padding: 20px; border-radius: 8px;
margin-bottom: 20px; border: 1px solid var(--border);
min-height: 200px;
}
svg { max-width: 100%; height: auto; }
.svg-line { stroke: var(--text-main); stroke-width: 2; fill: none; }
.svg-text { fill: var(--text-main); font-family: var(--font-mono); font-
size: 14px; font-weight: bold; }
[data-theme="dark"] .svg-line { stroke: #E5E7EB; }
[data-theme="dark"] .svg-text { fill: #E5E7EB; }
/* START SCREEN */
#start-screen {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.9); backdrop-filter: blur(5px);
z-index: 100; display: flex; justify-content: center; align-items:
center;
}
.info-box {
background: var(--bg-card); width: 90%; max-width: 600px; padding:
40px;
border-radius: 16px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
text-align: center; border: 1px solid var(--border);
}
.info-title { font-size: 1.8rem; font-weight: 800; color: var(--primary);
margin-bottom: 10px; }
.info-stats { display: flex; justify-content: center; gap: 15px; margin-
bottom: 30px; margin-top: 20px; }
.i-stat { background: var(--bg-body); padding: 8px 16px; border-radius:
8px; border: 1px solid var(--border); font-weight: 600; font-size: 0.9rem; }
.btn-start {
background: var(--primary); color: white; border: none; padding: 12px
32px;
border-radius: 8px; font-size: 1.1rem; font-weight: 700; cursor:
pointer;
transition: 0.2s; box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}
.btn-start:hover { transform: translateY(-2px); }
/* HEADER */
header { height: 60px; background: var(--bg-card); border-bottom: 1px solid
var(--border); display: flex; align-items: center; justify-content: space-between;
padding: 0 20px; flex-shrink: 0; }
.logo { font-weight: 700; font-size: 1.1rem; display: flex; align-items:
center; gap: 8px; }
.logo span { background: var(--primary); color: white; padding: 2px 8px;
border-radius: 6px; font-size: 0.85rem; }
.controls { display: flex; gap: 8px; }
.icon-btn { width: 36px; height: 36px; border: 1px solid var(--border);
background: var(--bg-card); border-radius: 8px; color: var(--text-muted); cursor:
pointer; display: grid; place-items: center; font-size: 1rem; }
.icon-btn:hover { background: var(--bg-body); color: var(--primary);
border-color: var(--primary); }
/* LAYOUT */
.layout { display: flex; flex: 1; overflow: hidden; opacity: 0.3; pointer-
events: none; transition: 0.3s; }
.[Link] { opacity: 1; pointer-events: all; }
/* SIDEBAR */
.sidebar { width: 320px; background: var(--bg-sidebar); border-right: 1px
solid var(--border); display: flex; flex-direction: column; flex-shrink: 0;
transition: transform 0.3s; z-index: 40; }
.sb-header { padding: 15px; border-bottom: 1px solid var(--border);
background: var(--bg-card); }
.filter-row { display: flex; gap: 5px; margin-top: 10px; }
.filter-btn { flex: 1; font-size: 0.75rem; padding: 6px; border: 1px solid
var(--border); background: var(--bg-body); color: var(--text-muted); border-radius:
6px; cursor: pointer; }
.[Link] { background: var(--text-main); color: var(--bg-card);
border-color: var(--text-main); }
.palette { flex: 1; overflow-y: auto; padding: 15px; }
.section-label { font-size: 0.75rem; font-weight: 700; color: var(--text-
muted); margin: 15px 0 8px 0; border-bottom: 1px solid var(--border); padding-
bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cell { aspect-ratio: 1; display: grid; place-items: center; border: 1px
solid var(--border); border-radius: 6px; font-size: 0.8rem; color: var(--text-
muted); cursor: pointer; background: var(--bg-card); transition: 0.15s; font-
weight: 600; }
.cell:hover { border-color: var(--primary); color: var(--primary); }
.[Link] { border: 2px solid var(--primary); color: var(--primary);
background: rgba(37, 99, 235, 0.1); font-weight: 700; transform: scale(1.05); }
.[Link] { background: var(--primary); color: white; border-color: var(--
primary); }
.[Link] { border-color: var(--warning); color: var(--warning);
background: #FFFBEB; }
[data-theme="dark"] .[Link] { background: rgba(245, 158, 11, 0.1); }
/* CANVAS */
.canvas { flex: 1; background: var(--bg-body); padding: 30px; overflow-y:
auto; display: flex; flex-direction: column; align-items: center; position:
relative; }
.timer-float { position: sticky; top: 0; z-index: 30; background: var(--bg-
card); padding: 8px 20px; border-radius: 30px; border: 1px solid var(--border);
box-shadow: var(--shadow); font-weight: 700; color: var(--text-main); margin-
bottom: 25px; display: flex; gap: 10px; align-items: center; }
.card { background: var(--bg-card); width: 100%; max-width: 850px; border-
radius: 16px; box-shadow: var(--shadow); padding: 40px; border: 1px solid var(--
border); position: relative; }
.card-meta { display: flex; justify-content: space-between; margin-bottom:
20px; font-size: 0.85rem; font-weight: 700; color: var(--text-muted); text-
transform: uppercase; letter-spacing: 0.5px; }
.tag { background: #DBEAFE; color: var(--primary); padding: 4px 8px;
border-radius: 4px; }
[data-theme="dark"] .tag { background: rgba(37, 99, 235, 0.2); }
.q-text { font-size: 1.15rem; font-weight: 600; line-height: 1.6; margin-
bottom: 20px; color: var(--text-main); }
.options { display: flex; flex-direction: column; gap: 12px; }
.opt-label { display: flex; align-items: flex-start; padding: 14px 16px;
border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition:
0.2s; font-size: 1rem; position: relative; }
.opt-label:hover { background: var(--bg-body); }
.[Link] { background: #EFF6FF; border-color: var(--primary);
font-weight: 600; box-shadow: 0 0 0 1px var(--primary); }
[data-theme="dark"] .[Link] { background: rgba(37, 99, 235,
0.15); }
.[Link] { opacity: 0.5; text-decoration: line-through;
background: #FEF2F2; border-color: #FECACA; }
/* Study Mode */
.study-mode .[Link] { background: #DCFCE7; border-color: var(--
success); color: #065F46; }
.study-mode .[Link] { background: #FEE2E2; border-color: var(--
danger); color: #991B1B; }
.radio { width: 20px; height: 20px; border: 2px solid var(--border);
border-radius: 50%; margin-right: 15px; margin-top: 3px; display: grid; place-
items: center; flex-shrink: 0; }
.[Link] .radio { border-color: var(--primary); }
.[Link] .radio::after { content: ''; width: 10px; height: 10px;
background: var(--primary); border-radius: 50%; }
.explanation { display: none; margin-top: 20px; padding: 15px; background:
#F3F4F6; border-radius: 8px; font-size: 0.95rem; border-left: 4px solid var(--
primary); color: var(--text-main); font-family: var(--font-mono); }
[data-theme="dark"] .explanation { background: #374151; }
/* FOOTER */
.footer { margin-top: 30px; display: flex; justify-content: space-between;
align-items: center; border-top: 1px solid var(--border); padding-top: 20px; flex-
wrap: wrap; gap: 10px; }
.btn { padding: 10px 20px; border-radius: 6px; border: 1px solid var(--
border); background: var(--bg-card); color: var(--text-main); font-weight: 600;
cursor: pointer; font-size: 0.9rem; transition: 0.2s; display: flex; align-items:
center; gap: 6px; }
.btn:hover { background: var(--bg-body); }
.btn-primary { background: var(--primary); color: white; border: none; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-flag { color: var(--warning); border-color: var(--warning); }
.btn-danger { color: var(--danger); border-color: var(--danger); }
/* DASHBOARD */
#dashboard { display: none; padding: 40px; background: var(--bg-body);
height: 100%; overflow-y: auto; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap:
20px; max-width: 900px; margin: 0 auto 40px; }
.stat-card { background: var(--bg-card); padding: 20px; border-radius:
12px; text-align: center; border: 1px solid var(--border); box-shadow: var(--
shadow); }
.stat-val { font-size: 2rem; font-weight: 700; color: var(--primary);
margin-bottom: 5px; }
.review-item { background: var(--bg-card); padding: 20px; margin-bottom:
15px; border-radius: 8px; border: 1px solid var(--border); max-width: 900px;
margin: 0 auto; border-left: 4px solid transparent; }
.[Link] { border-left-color: var(--success); }
.[Link] { border-left-color: var(--danger); }
/* MODAL */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5);
display: none; align-items: center; justify-content: center; z-index: 100;
backdrop-filter: blur(2px); }
.modal { background: var(--bg-card); padding: 30px; border-radius: 12px;
width: 90%; max-width: 500px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
@media (max-width: 768px) {
.layout { flex-direction: column; }
.sidebar { width: 100%; height: auto; border-right: none; border-
bottom: 1px solid var(--border); display: none; }
.[Link] { display: flex; height: 300px; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.q-card { padding: 20px; }
.info-box { padding: 25px; }
}
@media print {
header, .sidebar, .footer, .timer-float { display: none !important; }
#dashboard { display: block !important; padding: 0; height: auto; }
.review-item { break-inside: avoid; border: 1px solid #ccc; }
}
</style>
</head>
<body data-theme="light">
<div id="start-screen">
<div class="info-box">
<div class="info-title">MCQ Test Canvas</div>
<div style="font-weight:600; color:var(--primary); margin-
bottom:10px;">Electricity: 100 Diagram PYQs</div>
<p class="info-text">
This test contains <b>100 Generated Diagram-Based Questions</b>
strictly following CBSE Board patterns.
Topics: Resistor Networks, V-I Graphs, Meters, and Power.
</p>
<div class="info-stats">
<div class="i-stat">⏱ 120 Mins</div>
<div class="i-stat">📝 100 Diagrams</div>
<div class="i-stat">🏆 Hard Mode</div>
</div>
<div style="font-size:0.9rem; color:var(--text-muted); margin-bottom:20px;
text-align:left; background:var(--bg-body); padding:10px; border-radius:8px;">
<b>Instructions:</b><br>
• Observe the generated SVG diagrams carefully.<br>
• Calculate Equivalent Resistance/Current/Voltage.<br>
• Use the 'Text Scratchpad' for rough work.<br>
• Auto-save is active.
</div>
<button class="btn-start" onclick="beginTest()">Start Test</button>
</div>
</div>
<header>
<div class="logo">MCQ Canvas <span>Physics</span></div>
<div class="controls">
<button class="icon-btn" onclick="toggleMode()" id="btn-mode" title="Study
Mode">🎓</button>
<button class="icon-btn" onclick="toggleTheme()" title="Theme">◑</button>
<button class="icon-btn" onclick="resizeFont()" title="Font
Size">Aa</button>
<button class="icon-btn" onclick="toggleFullscreen()"
title="Fullscreen">⛶</button>
<button class="icon-btn" onclick="toggleSidebar()" style="display:none;"
id="btn-menu">☰</button>
</div>
</header>
<div class="layout" id="test-view">
<aside class="sidebar" id="sidebar">
<div class="sb-header">
<div style="font-weight:700; color:var(--text-muted);">Question
Palette</div>
<div class="filter-row">
<button class="filter-btn active" onclick="setFilter('all',
this)">All</button>
<button class="filter-btn" onclick="setFilter('left',
this)">Left</button>
<button class="filter-btn" onclick="setFilter('flag',
this)">Flagged</button>
</div>
</div>
<div class="palette">
<div id="palette-container"></div>
</div>
<div style="padding:15px; border-top:1px solid var(--border);">
<button class="btn btn-danger" style="width:100%; justify-
content:center;" onclick="resetData()"> Reset Data</button>
</div>
</aside>
<main class="canvas">
<div class="timer-float">
<span id="timer">120:00</span>
<div style="width:1px; height:15px; background:var(--text-muted);
opacity:0.3;"></div>
<span id="progress-txt" style="font-size:0.85rem; font-weight:500;
color:var(--text-muted);">0/100</span>
</div>
<div class="card">
<div class="card-meta">
<span id="q-topic">Resistor Network</span>
<span class="tag" id="q-year">PYQ 2023</span>
</div>
<div class="q-text" id="q-text">Calculate the equivalent resistance
between A and B in the circuit below:</div>
<div class="diagram-container" id="svg-container"></div>
<div class="options" id="options"></div>
<div class="explanation" id="explanation"></div>
<div style="margin-top:20px; padding-top:15px; border-top:1px dashed
var(--border);">
<div style="font-size:0.75rem; font-weight:700; color:var(--text-
muted); margin-bottom:5px;">📝 CALCULATION PAD</div>
<textarea id="scratchpad" style="width:100%; height:80px;
padding:10px; border-radius:6px; border:1px solid var(--border); background:var(--
bg-body); color:var(--text-main); font-family:var(--font-mono); resize:none;"
placeholder="Type your calculations here..." oninput="saveNote()"></textarea>
</div>
<div class="footer">
<div style="display:flex; gap:10px;">
<button class="btn" onclick="nav(-1)">Prev</button>
<button class="btn" onclick="toggleFlag()" id="btn-flag">🚩
Flag</button>
</div>
<div style="display:flex; gap:10px;">
<button class="btn" onclick="askAI()" style="color:var(--
primary);">🤖 Hint</button>
<button class="btn btn-primary" onclick="nav(1)">Next</button>
<button class="btn btn-danger"
onclick="submitTest(false)">Submit</button>
</div>
</div>
</div>
</main>
</div>
<div id="dashboard">
<div style="max-width:900px; margin:0 auto;">
<h1 style="margin-bottom:30px;">Result Analysis 📊</h1>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-val" style="color:var(--primary)" id="score-
val">0</div>
<div style="font-size:0.8rem;
text-transform:uppercase;">Score</div>
</div>
<div class="stat-card">
<div class="stat-val" style="color:var(--success)" id="acc-
val">0%</div>
<div style="font-size:0.8rem; text-
transform:uppercase;">Accuracy</div>
</div>
<div class="stat-card">
<div class="stat-val" style="color:var(--danger)" id="wrong-
val">0</div>
<div style="font-size:0.8rem;
text-transform:uppercase;">Errors</div>
</div>
<div class="stat-card">
<div class="stat-val" style="color:var(--warning)" id="time-
val">0m</div>
<div style="font-size:0.8rem; text-transform:uppercase;">Time</div>
</div>
</div>
<div id="review-container"></div>
</div>
</div>
<div class="modal-overlay" id="ai-modal">
<div class="modal">
<h3 style="margin-bottom:10px;">🤖 AI Tutor Hint</h3>
<p id="ai-content" style="color:var(--text-muted); line-height:1.6; margin-
bottom:20px; font-family:var(--font-mono);"></p>
<button class="btn primary" style="width:100%" onclick="closeAI()">Got
it</button>
</div>
</div>
<script>
// --- 1. DYNAMIC SVG GENERATOR ENGINE ---
// This allows us to generate 100 UNIQUE diagram questions by rendering SVGs on
the fly with varied values.
function generateResistorSVG(type, v1, v2, v3) {
let svg = `<svg viewBox="0 0 400 150" xmlns="[Link]
<style>.txt { font: bold 14px monospace; fill: currentColor; } .line
{ stroke: currentColor; stroke-width: 2; fill: none; }</style>`;
if (type === 'series') {
svg += `<path class="line" d="M20,75 H50 L60,60 L80,90 L100,60 L120,90
L130,75 H180 L190,60 L210,90 L230,60 L250,90 L260,75 H380" />
<text x="75" y="45" class="txt">R1=${v1}Ω</text>
<text x="205" y="45" class="txt">R2=${v2}Ω</text>
<circle cx="20" cy="75" r="3" fill="currentColor"/><text x="10"
y="95" class="txt">A</text>
<circle cx="380" cy="75" r="3" fill="currentColor"/><text
x="375" y="95" class="txt">B</text>`;
} else if (type === 'parallel') {
svg += `<path class="line" d="M20,75 H100 V40 H130 L140,25 L160,55
L180,25 L200,55 L210,40 H240 V75 M100,75 V110 H130 L140,95 L160,125 L180,95
L200,125 L210,110 H240 V75 H380" />
<text x="150" y="20" class="txt">R1=${v1}Ω</text>
<text x="150" y="145" class="txt">R2=${v2}Ω</text>
<circle cx="20" cy="75" r="3" fill="currentColor"/><text x="10"
y="70" class="txt">A</text>
<circle cx="380" cy="75" r="3" fill="currentColor"/><text
x="385" y="70" class="txt">B</text>`;
} else if (type === 'triangle') {
svg += `<path class="line" d="M50,120 L180,120 L115,20 Z" />
<text x="100" y="140" class="txt">R3=${v3}Ω</text>
<text x="40" y="70" class="txt">R1=${v1}Ω</text>
<text x="185" y="70" class="txt">R2=${v2}Ω</text>
<text x="110" y="15" class="txt">A</text>
<text x="40" y="125" class="txt">B</text>
<text x="190" y="125" class="txt">C</text>`;
}
svg += `</svg>`;
return svg;
}
// --- 2. QUESTION GENERATION LOGIC ---
let questions = [];
// Generate 100 Questions
for(let i=0; i<100; i++) {
let q = { id: i+1 };
// Sectioning
if(i < 30) {
// SERIES & PARALLEL
let r1 = [Link]([Link]() * 9) + 2;
let r2 = [Link]([Link]() * 9) + 2;
let type = i % 2 === 0 ? 'series' : 'parallel';
[Link] = "Resistors";
[Link] = generateResistorSVG(type, r1, r2, 0);
q.q = `Identify the combination and calculate equivalent resistance
between A and B if R1=${r1}Ω and R2=${r2}Ω.`;
let ansVal = type === 'series' ? r1+r2 : ((r1*r2)/(r1+r2)).toFixed(2);
[Link] = [
`${(r1+r2).toFixed(2)} Ω`,
`${((r1*r2)/(r1+r2)).toFixed(2)} Ω`,
`${[Link](r1-r2).toFixed(2)} Ω`,
`${(r1*r2).toFixed(2)} Ω`
];
// Shuffle correct answer pos
let corrIdx = [Link](`${ansVal} Ω`);
q.a = corrIdx;
[Link] = type==='series' ? "R = R1 + R2" : "1/R = 1/R1 + 1/R2";
[Link] = type==='series' ? `Series Combination: R = ${r1} + ${r2} = $
{ansVal}Ω` : `Parallel Combination: Product/Sum = (${r1}*${r2})/(${r1}+${r2}) = $
{ansVal}Ω`;
} else if (i < 60) {
// TRIANGLE / MIXED
let r = [Link]([Link]() * 10) + 2; // All resistors equal for
ease of calc in MCQ
[Link] = "Mixed Circuits";
[Link] = generateResistorSVG('triangle', r, r, r);
q.q = `Three resistors of ${r}Ω each are connected in a triangle.
Equivalent resistance between any two vertices (e.g., B and C) is:`;
// Logic: 2 in series (2R) parallel with 1 (R)
let series = 2*r;
let ans = ((series * r) / (series + r)).toFixed(2);
[Link] = [`${(3*r).toFixed(2)} Ω`, `${(r/3).toFixed(2)} Ω`, `${ans} Ω`,
`${r} Ω`];
q.a = 2;
[Link] = "Two resistors are in series, and that combination is parallel
to the third.";
[Link] = `Between any two points, two resistors are in series (${r}+$
{r}=${2*r}Ω). This is parallel to the third (${r}Ω). Req = (2R*R)/(3R) = 2R/3 = $
{ans}Ω`;
} else if (i < 80) {
// V-I GRAPHS
[Link] = "Ohm's Law Graphs";
q.q = "In the V-I graph, two wires A and B are shown. Wire A has a
steeper slope (higher angle) than B. Which wire has higher resistance?";
// No SVG needed for simple graph desc, or use a placeholder generic
SVG
[Link] = `<svg viewBox="0 0 200 150"><line x1="20" y1="130" x2="180"
y2="130" stroke="currentColor"/><line x1="20" y1="130" x2="20" y2="20"
stroke="currentColor"/><line x1="20" y1="130" x2="100" y2="20"
stroke="currentColor"/><text x="110" y="30" class="txt">A</text><line x1="20"
y1="130" x2="160" y2="80" stroke="currentColor"/><text x="170" y="90"
class="txt">B</text><text x="10" y="10" class="txt">V</text><text x="190" y="140"
class="txt">I</text></svg>`;
[Link] = ["Wire A", "Wire B", "Both Equal", "Cannot determine"];
q.a = 0;
[Link] = "Slope of V-I graph = Resistance (R = V/I).";
[Link] = "Slope represents Resistance. Wire A has a higher slope, so
higher resistance.";
} else {
// POWER / ENERGY
let p = (i % 5 + 1) * 10; // 10W, 20W...
let v = 220;
[Link] = "Power & Energy";
[Link] = `<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="30"
fill="none" stroke="currentColor" stroke-width="2"/><path d="M50,50 L50,80"
stroke="currentColor"/><path d="M35,35 Q50,60 65,35" fill="none"
stroke="currentColor"/><text x="35" y="10" class="txt">${p}W</text></svg>`;
q.q = `An electric bulb is rated ${p}W, ${v}V. calculated the current
drawn.`;
let ans = (p/v).toFixed(2);
[Link] = [`${ans} A`, `${(v/p).toFixed(2)} A`, `${(p*v).toFixed(2)} A`,
"0.5 A"];
q.a = 0;
[Link] = "P = V x I";
[Link] = `I = P/V = ${p}/${v} = ${ans} A`;
}
[Link] = "CBSE " + (2015 + (i % 9));
[Link](q);
}
// --- 3. STATE ---
let state = {
idx: 0,
answers: [Link]([Link]('phy100_ans')) || new
Array(100).fill(null),
flags: [Link]([Link]('phy100_flags')) || [],
notes: [Link]([Link]('phy100_notes')) || {},
timeSpent: [Link]([Link]('phy100_timeSpent')) || new
Array(100).fill(0),
timeLeft: parseInt([Link]('phy100_time')) || 7200, // 120
Mins
timerId: null,
mode: 'exam',
filter: 'all'
};
// --- 4. LOGIC ---
const dom = {
qText: [Link]('q-text'),
meta: [Link]('q-topic'),
year: [Link]('q-year'),
opts: [Link]('options'),
exp: [Link]('explanation'),
note: [Link]('scratchpad'),
grid: [Link]('palette-container'),
svg: [Link]('svg-container')
};
function beginTest() {
[Link]('start-screen').[Link] = 'none';
[Link]('.layout').[Link]('active');
init();
}
function init() {
if([Link] < 768) [Link]('btn-
menu').[Link] = 'grid';
if([Link]('theme') === 'dark')
[Link]('data-theme', 'dark');
renderPalette();
loadQ([Link]);
startTimer();
[Link]('keydown', (e) => {
if([Link]('dashboard').[Link] === 'block')
return;
if([Link] === 'ArrowRight') nav(1);
if([Link] === 'ArrowLeft') nav(-1);
if(['1','2','3','4'].includes([Link])) {
[Link][[Link]] = parseInt([Link])-1;
loadQ([Link]); renderPalette();
}
});
}
function startTimer() {
if([Link]) clearInterval([Link]);
[Link] = setInterval(() => {
[Link]--;
[Link][[Link]]++;
let m = [Link]([Link] / 60);
let s = [Link] % 60;
[Link]('timer').innerText = `${m}:$
{[Link]().padStart(2,'0')}`;
[Link]('phy100_time', [Link]);
if([Link] <= 0) submitTest();
}, 1000);
}
function saveState() {
[Link]('phy100_ans', [Link]([Link]));
[Link]('phy100_flags', [Link]([Link]));
[Link]('phy100_notes', [Link]([Link]));
[Link]('phy100_timeSpent', [Link]([Link]));
}
function loadQ(i) {
[Link] = i;
const q = questions[i];
[Link] = [Link];
[Link] = `${[Link]} | Q${i+1}`;
[Link] = q.q;
[Link] = [Link][i] || "";
[Link] = [Link]; // Inject SVG
[Link] = 'none';
[Link] = '';
[Link]((opt, idx) => {
let div = [Link]('div');
[Link] = `opt-label ${[Link][i] === idx ? 'selected' :
''}`;
if([Link] === 'study' && [Link][i] !== null) {
if(idx === q.a) [Link]('correct');
else if(idx === [Link][i]) [Link]('wrong');
if([Link][i] !== null) {
[Link] = `<b>Explanation:</b> ${[Link]}`;
[Link] = 'block';
}
}
[Link] = `<div class="radio"></div> ${opt}`;
[Link] = () => {
if([Link]('eliminated')) return;
[Link][i] = idx;
saveState();
loadQ(i);
renderPalette();
};
[Link] = (e) => {
[Link]();
[Link]('eliminated');
};
[Link](div);
});
[Link]('btn-flag').[Link] = [Link](i) ?
'var(--warning)' : 'var(--text-muted)';
[Link]('progress-txt').innerText = `$
{[Link](x=>x!==null).length}/100`;
renderPalette();
}
function renderPalette() {
[Link] = '';
const sections = [
{ title: "Resistors (1-30)", start: 0, end: 30 },
{ title: "Mixed Circuits (31-60)", start: 30, end: 60 },
{ title: "Graphs (61-80)", start: 60, end: 80 },
{ title: "Power & Energy (81-100)", start: 80, end: 100 }
];
[Link](sec => {
let title = [Link]('div');
[Link] = 'section-label';
[Link] = [Link];
[Link](title);
let grid = [Link]('div');
[Link] = 'grid';
for(let i=[Link]; i<[Link]; i++) {
if([Link] === 'left' && [Link][i] !== null) continue;
if([Link] === 'flag' && ) continue;
let cell = [Link]('div');
[Link] = `cell ${[Link] === i ? 'current' : ''}`;
if([Link][i] !== null) [Link]('done');
if([Link](i)) [Link]('flag');
[Link] = i+1;
[Link] = () => {
if([Link] < 768) toggleSidebar();
loadQ(i);
};
[Link](cell);
}
[Link](grid);
});
}
function nav(step) {
let n = [Link] + step;
if(n >= 0 && n < 100) loadQ(n);
}
function toggleFlag() {
let i = [Link];
if([Link](i)) [Link] = [Link](x => x !== i);
else [Link](i);
loadQ(i);
}
function toggleMode() {
[Link] = [Link] === 'exam' ? 'study' : 'exam';
[Link]('btn-mode').innerText = [Link] === 'exam' ? '🎓'
: '📖';
[Link]('study-mode');
loadQ([Link]);
}
function toggleTheme() {
let t = [Link]('data-theme') === 'light' ? 'dark' :
'light';
[Link]('data-theme', t);
}
function toggleFullscreen() {
if(![Link])
[Link]();
else if([Link]) [Link]();
}
let fontSize = 16;
function resizeFont() {
fontSize = fontSize === 16 ? 18 : (fontSize === 18 ? 20 : 16);
[Link] = fontSize + 'px';
[Link] = (fontSize * 1.25) + 'px';
}
function setFilter(type, el) {
[Link] = type;
[Link]('.filter-btn').forEach(b =>
[Link]('active'));
[Link]('active');
renderPalette();
}
function saveNote() { [Link][[Link]] = [Link]; saveState(); }
function askAI() { alert("Hint: " + questions[[Link]].hint); }
function toggleSidebar() {
[Link]('sidebar').[Link] =
[Link]('sidebar').[Link] ===
'translateX(0px)' ? 'translateX(-100%)' : 'translateX(0px)';
}
function resetData() {
if(confirm("Reset all progress?")) {
[Link]();
[Link]();
}
}
function submitTest(force) {
if(!force && !confirm("Submit Test?")) return;
clearInterval([Link]);
let score = 0, attempted = 0;
[Link]((q, i) => {
if([Link][i] !== null) {
attempted++;
if([Link][i] === q.a) score++;
}
});
[Link]('test-view').[Link] = 'none';
[Link]('dashboard').[Link] = 'block';
[Link]('header').[Link] = 'none';
[Link]('score-val').innerText = score;
[Link]('acc-val').innerText = attempted ?
[Link]((score/attempted)*100)+'%' : '0%';
[Link]('wrong-val').innerText = attempted - score;
let tUsed = 7200 - [Link];
[Link]('time-val').innerText = [Link](tUsed/60) + 'm';
const list = [Link]('review-container');
[Link]((q, i) => {
const my = [Link][i];
if(my === null) return;
let div = [Link]('div');
let isCorrect = my === q.a;
[Link] = `review-item ${isCorrect ? 'correct' : 'wrong'}`;
[Link] = `
<div style="font-weight:700; margin-bottom:5px;">Q${i+1}. ${q.q}
<span style="font-size:0.7rem; background:#eee; padding:2px 6px; border-
radius:4px;">${[Link]}</span></div>
${[Link] ? `<div style="margin:10px 0; border:1px solid #eee;
padding:5px; border-radius:4px; max-width:200px;">${[Link]}</div>` : ''}
<div style="font-size:0.9rem; margin-bottom:10px; color:var(--text-
muted);">
Your Answer: <b>${[Link][my]}</b> <br>
Correct Answer: <b>${[Link][q.a]}</b> <br>
<small>Time: ${[Link][i]}s</small>
</div>
<div style="background:var(--bg-body); padding:10px; border-
radius:6px; font-size:0.85rem; font-family:var(--font-mono);">
💡 <b>Explanation:</b> ${[Link]}
</div>
`;
[Link](div);
});
[Link]('phy100_ans');
[Link]('phy100_time');
}
</script>
</body>
</html>