ced4568/rootnode-academy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(exam): flat sidebar list, weight badges, UI cleanup

Browse Source 
Signed-off-by: Abhinav Sinha <[email protected]>
This commit is contained in:
Abhinav Sinha
2026-06-18 01:11:19 +05:30
parent 7e75c8ae02
commit 09bd1b20da
9 changed files with 273 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/server.js
+73 -21
View File
@@ -64,10 +64,21 @@ function getDb() {
status TEXT NOT NULL DEFAULT 'active',
exam_minutes INTEGER NOT NULL DEFAULT 120,
duration_secs INTEGER,
snapshot TEXT
snapshot TEXT,
scenario_ids TEXT
)
`);
// Migrate: add scenario_ids column if missing
try {
const cols = _db.prepare("PRAGMA table_info(sessions)").all().map(c => c.name);
if (!cols.includes('scenario_ids')) {
_db.exec(`ALTER TABLE sessions ADD COLUMN scenario_ids TEXT`);
}
} catch (e) {
console.error('Failed to migrate sessions table:', e.message);
}
// Separate exam-session progress table — tracks completions per session
_db.exec(`
CREATE TABLE IF NOT EXISTS exam_progress (
@@ -249,20 +260,35 @@ app.post('/api/progress/reset', (req, res) => {
// ── Exam sessions ─────────────────────────────────────────────────────────────
// Fisher-Yates shuffle (returns a new array)
function shuffle(arr) {
const a = [...arr];
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
// POST /api/sessions — start a new exam session
app.post('/api/sessions', (req, res) => {
const { bundleId, examMinutes } = req.body;
const { bundleId, examMinutes, scenarioCount } = req.body;
const bundle = loadBundles().find(b => b.id === bundleId);
if (!bundle) return res.status(404).json({ error: 'Bundle not found' });
const db = getDb();
const mins = Math.max(5, Math.min(300, Number(examMinutes) || bundle.exam_minutes || 120));
// Shuffle and optionally slice scenario IDs
const allIds = bundle.scenario_ids || [];
const count = Math.max(1, Math.min(allIds.length, Number(scenarioCount) || allIds.length));
const sessionScenarioIds = shuffle(allIds).slice(0, count);
// Abandon any existing active session
db.prepare(`UPDATE sessions SET status='abandoned', submitted_at=datetime('now')
WHERE status='active'`).run();
const id = `sess_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
db.prepare(`INSERT INTO sessions (id, bundle_id, started_at, status, exam_minutes)
VALUES (?, ?, datetime('now'), 'active', ?)`).run(id, bundleId, mins);
res.json({ id, bundleId, status: 'active', exam_minutes: mins });
db.prepare(`INSERT INTO sessions (id, bundle_id, started_at, status, exam_minutes, scenario_ids)
VALUES (?, ?, datetime('now'), 'active', ?, ?)`)
.run(id, bundleId, mins, JSON.stringify(sessionScenarioIds));
res.json({ id, bundleId, status: 'active', exam_minutes: mins, scenario_ids: sessionScenarioIds });
});
// GET /api/sessions/active — get the current active session
@@ -270,13 +296,18 @@ app.get('/api/sessions/active', (req, res) => {
const db = getDb();
const session = db.prepare(`SELECT * FROM sessions WHERE status='active' ORDER BY started_at DESC LIMIT 1`).get();
if (!session) return res.json(null);
const bundle = loadBundles().find(b => b.id === session.bundle_id);
const scenarioIds = bundle?.scenario_ids || [];
// Count completions from exam_progress (exam-specific), not global progress
// Use session-specific scenario_ids (shuffled/sliced at start time)
let scenarioIds = [];
try { scenarioIds = session.scenario_ids ? JSON.parse(session.scenario_ids) : []; } catch (_) {}
if (!scenarioIds.length) {
// Fallback for sessions created before this feature
const bundle = loadBundles().find(b => b.id === session.bundle_id);
scenarioIds = bundle?.scenario_ids || [];
}
const completed = db.prepare(
`SELECT COUNT(*) as cnt FROM exam_progress WHERE session_id=? AND status='completed'`
).get(session.id)?.cnt || 0;
res.json({ ...session, scenarioCount: scenarioIds.length, completedCount: completed });
res.json({ ...session, scenario_ids: scenarioIds, scenarioCount: scenarioIds.length, completedCount: completed });
});
// GET /api/sessions/:id/exam-progress — return per-scenario progress for an exam session
@@ -337,7 +368,11 @@ app.post('/api/sessions/:id/submit', (req, res) => {
if (!session) return res.status(404).json({ error: 'Session not found' });
const bundle = loadBundles().find(b => b.id === session.bundle_id);
const scenarios = loadScenarios();
const bundleScenarios = scenarios.filter(s => bundle?.scenario_ids?.includes(s.id));
// Use session-specific scenario IDs (preserves shuffle order)
let sessionIds = [];
try { sessionIds = session.scenario_ids ? JSON.parse(session.scenario_ids) : []; } catch (_) {}
if (!sessionIds.length) sessionIds = bundle?.scenario_ids || [];
const bundleScenarios = sessionIds.map(id => scenarios.find(s => s.id === id)).filter(Boolean);
// Build snapshot from exam_progress (exam-specific), falling back to 'not_started'
const examProgressRows = db.prepare(`SELECT * FROM exam_progress WHERE session_id=?`).all(req.params.id);
@@ -449,17 +484,34 @@ app.get('/api/bundles', (req, res) => {
res.json(result);
});
// GET /api/scenarios — list scenarios; optional ?bundle=<id> filter
// GET /api/scenarios — list scenarios; optional ?bundle=<id> and ?session=<id> filter
app.get('/api/scenarios', (req, res) => {
const scenarios = loadScenarios();
const progress = loadProgress();
const { bundle } = req.query;
const scenarios = loadScenarios()
const progress = loadProgress()
const { bundle, session: sessionId } = req.query
let filtered = scenarios;
// Session-scoped: return only session scenario_ids in their shuffled order
if (sessionId) {
const db = getDb()
const session = db.prepare(`SELECT scenario_ids FROM sessions WHERE id=?`).get(sessionId)
let sessionIds = []
try { sessionIds = session?.scenario_ids ? JSON.parse(session.scenario_ids) : [] } catch (_) {}
const list = sessionIds
.map(id => scenarios.find(s => s.id === id))
.filter(Boolean)
.map(s => ({
id: s.id, title: s.title, category: s.category,
difficulty: s.difficulty, type: s.type, weight: s.weight,
progress: progress[s.id] || { status: 'not_started', attempts: 0 }
}))
return res.json(list)
}
let filtered = scenarios
if (bundle) {
const bundles = loadBundles();
const b = bundles.find(x => x.id === bundle);
if (b) filtered = scenarios.filter(s => b.scenario_ids.includes(s.id));
const bundles = loadBundles()
const b = bundles.find(x => x.id === bundle)
if (b) filtered = scenarios.filter(s => b.scenario_ids.includes(s.id))
}
const list = filtered.map(s => ({
@@ -470,9 +522,9 @@ app.get('/api/scenarios', (req, res) => {
type: s.type,
weight: s.weight,
progress: progress[s.id] || { status: 'not_started', attempts: 0 }
}));
res.json(list);
});
}))
res.json(list)
})
// GET /api/scenarios/:id — full scenario detail
app.get('/api/scenarios/:id', (req, res) => {
frontend/src/App.jsx
+24 -9
View File
@@ -103,7 +103,10 @@ export default function App() {
setLoading(true)
setActiveId(null)
setScenario(null)
const url = `/api/scenarios?bundle=${activeBundleId}`
// If an exam session is active, fetch only that session's scenarios (pre-shuffled)
const url = examSession?.id
? `/api/scenarios?session=${examSession.id}`
: `/api/scenarios?bundle=${activeBundleId}`
fetch(url)
.then(r => r.json())
.then(data => {
@@ -112,7 +115,7 @@ export default function App() {
})
.catch(console.error)
.finally(() => setLoading(false))
}, [activeBundleId])
}, [activeBundleId, examSession?.id])
// ── Load full scenario when selected — teardown previous, load new ─────────
useEffect(() => {
@@ -137,9 +140,12 @@ export default function App() {
}, [activeId])
const refreshProgress = useCallback(async () => {
const scenarioUrl = examSession?.id
? `/api/scenarios?session=${examSession.id}`
: `/api/scenarios?bundle=${activeBundleId}`
const [bundleData, scenarioData] = await Promise.all([
fetch('/api/bundles').then(r => r.json()),
fetch(`/api/scenarios?bundle=${activeBundleId}`).then(r => r.json()),
fetch(scenarioUrl).then(r => r.json()),
])
setBundles(bundleData)
setScenarios(scenarioData)
@@ -160,13 +166,13 @@ export default function App() {
}, [activeBundleId, activeId, examSession])
// ── Exam actions ──────────────────────────────────────────────────────────
const startExam = useCallback(async (bundleId, customMinutes) => {
const startExam = useCallback(async (bundleId, customMinutes, customScenarioCount) => {
const res = await fetch('/api/sessions', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ bundleId, examMinutes: customMinutes }),
body: JSON.stringify({ bundleId, examMinutes: customMinutes, scenarioCount: customScenarioCount }),
}).then(r => r.json())
// refresh to get scenarioCount
// refresh to get scenario_ids, scenarioCount
const active = await fetch('/api/sessions/active').then(r => r.json())
setExamSession(active)
setActiveBundleId(bundleId)
@@ -257,6 +263,13 @@ export default function App() {
const activeBundle = bundles.find(b => b.id === activeBundleId) || null
const isMcq = scenario?.type === 'mcq'
// In exam mode: scenarios are already pre-filtered and ordered by the session API
const examScenarios = scenarios
// Total weight of the exam's selected scenarios (for % display in ScenarioPanel)
const totalExamWeight = (!!examSession ? examScenarios : scenarios)
.reduce((sum, s) => sum + (s.weight || 0), 0)
return (
<div className={styles.app}>
<Header clusterReady={clusterReady} onShowHistory={() => setShowHistory(true)} />
@@ -290,7 +303,7 @@ export default function App() {
<div className={styles.body}>
{/* Sidebar */}
<Sidebar
scenarios={scenarios}
scenarios={!!examSession ? examScenarios : scenarios}
activeId={activeId}
onSelect={setActiveId}
loading={loading}
@@ -301,6 +314,7 @@ export default function App() {
onProgressUpdate={refreshProgress}
isExamMode={!!examSession}
examProgress={examProgress}
totalExamWeight={totalExamWeight}
/>
{/* Sidebar resize handle */}
@@ -315,6 +329,7 @@ export default function App() {
onScenarioStart={handleScenarioStart}
isExamMode={!!examSession}
examProgress={examProgress}
totalExamWeight={totalExamWeight}
/>
</div>
@@ -350,9 +365,9 @@ export default function App() {
{examModalBundle && (
<ExamStartModal
bundle={examModalBundle}
onStart={mins => {
onStart={(mins, count) => {
setExamModalBundle(null)
startExam(examModalBundle.id, mins)
startExam(examModalBundle.id, mins, count)
}}
onCancel={() => setExamModalBundle(null)}
/>
frontend/src/components/ExamStartModal.jsx
+49 -5
View File
@@ -2,11 +2,18 @@ import { useState, useEffect, useRef } from 'react'
import styles from './ExamStartModal.module.css'
export default function ExamStartModal({ bundle, onStart, onCancel }) {
const totalScenarios = bundle?.scenario_ids?.length || 0
const [minutes, setMinutes] = useState(bundle?.exam_minutes || 120)
const [scenarioCount, setScenarioCount] = useState(totalScenarios)
const inputRef = useRef(null)
// Keep scenarioCount in sync if bundle changes
useEffect(() => {
// Focus input on open
setScenarioCount(bundle?.scenario_ids?.length || 0)
}, [bundle])
useEffect(() => {
// Focus duration input on open
const t = setTimeout(() => inputRef.current?.select(), 60)
return () => clearTimeout(t)
}, [])
@@ -14,11 +21,14 @@ export default function ExamStartModal({ bundle, onStart, onCancel }) {
if (!bundle) return null
const numMinutes = Number(minutes)
const isValid = numMinutes >= 5 && numMinutes <= 300
const numScenarios = Number(scenarioCount)
const isMinutesValid = numMinutes >= 5 && numMinutes <= 300
const isScenariosValid = numScenarios >= 1 && numScenarios <= totalScenarios
const isValid = isMinutesValid && isScenariosValid
const handleStart = () => {
if (!isValid) return
onStart(numMinutes)
onStart(numMinutes, numScenarios)
}
const presets = [
@@ -42,9 +52,10 @@ export default function ExamStartModal({ bundle, onStart, onCancel }) {
<div className={styles.body}>
<div className={styles.info}>
<span>📋</span>
<span>{bundle.scenario_ids?.length || '?'} scenarios · Recommended: <strong>{bundle.exam_minutes} min</strong></span>
<span>{totalScenarios} scenarios · Recommended: <strong>{bundle.exam_minutes} min</strong></span>
</div>
{/* Duration field */}
<div className={styles.field}>
<label className={styles.label}>Exam Duration</label>
<div className={styles.presets}>
@@ -73,13 +84,46 @@ export default function ExamStartModal({ bundle, onStart, onCancel }) {
<span className={styles.unit}>minutes</span>
</div>
<div className={styles.hint}>
{!isValid ? (
{!isMinutesValid ? (
<span style={{ color: 'var(--red)' }}>⚠ Duration must be between 5 and 300 minutes</span>
) : numMinutes < 60 ? '⚡ Speed run mode' :
numMinutes <= 120 ? '🎯 Realistic exam timing' :
'🧘 Relaxed practice pace'}
</div>
</div>
{/* Scenario count field */}
<div className={styles.field}>
<label className={styles.label}>Number of Scenarios</label>
<div className={styles.scenarioRow}>
<input
type="range"
className={styles.slider}
value={numScenarios}
min={1}
max={totalScenarios}
step={1}
onChange={e => setScenarioCount(Number(e.target.value))}
style={{ '--bcolor': bundle.color }}
/>
<input
type="number"
className={styles.input}
value={scenarioCount}
min={1}
max={totalScenarios}
onChange={e => setScenarioCount(e.target.value)}
onKeyDown={e => e.key === 'Enter' && handleStart()}
/>
</div>
<div className={styles.hint}>
{!isScenariosValid ? (
<span style={{ color: 'var(--red)' }}>⚠ Must be between 1 and {totalScenarios}</span>
) : numScenarios === totalScenarios
? `📚 Full exam — all ${totalScenarios} scenarios`
: `🎯 ${numScenarios} randomly selected scenario${numScenarios > 1 ? 's' : ''}`}
</div>
</div>
</div>
<div className={styles.actions}>
frontend/src/components/ExamStartModal.module.css
+18
View File
@@ -116,6 +116,24 @@
gap: 8px;
}
.scenarioRow {
display: flex;
align-items: center;
gap: 10px;
}
.slider {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 4px;
border-radius: 2px;
background: var(--border2);
outline: none;
cursor: pointer;
accent-color: var(--bcolor, var(--blue));
}
.input {
width: 90px;
padding: 8px 12px;
frontend/src/components/ScenarioPanel.jsx
+6 -1
View File
@@ -24,7 +24,7 @@ async function resetProgress(scope, opts) {
})
}
export default function ScenarioPanel({ scenario, onProgressUpdate, onScenarioStart, isExamMode, examProgress }) {
export default function ScenarioPanel({ scenario, onProgressUpdate, onScenarioStart, isExamMode, examProgress, totalExamWeight }) {
const [tab, setTab] = useState('problem')
const [setupState, setSetupState] = useState('idle') // idle | running | done | error
const [validating, setValidating] = useState(false)
@@ -208,6 +208,11 @@ export default function ScenarioPanel({ scenario, onProgressUpdate, onScenarioSt
)}
<span className={styles.typeTag}>{scenario.type === 'mcq' ? 'Multiple Choice' : 'Hands-on Task'}</span>
{!isExamMode && <span className={styles.weight}>{scenario.weight} pts</span>}
{isExamMode && totalExamWeight > 0 && (
<span className={styles.examWeight}>
{Math.round((scenario.weight / totalExamWeight) * 100)}% weight
</span>
)}
</div>
<div className={styles.titleRow}>
<div className={styles.scenarioTitle}>{scenario.title}</div>
frontend/src/components/ScenarioPanel.module.css
+13
View File
@@ -76,6 +76,19 @@
margin-left: auto;
}
.examWeight {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
color: var(--teal);
background: var(--teal-dim);
padding: 2px 7px;
border-radius: 3px;
border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
margin-left: auto;
}
.scenarioTitle {
font-size: 19px;
font-weight: 800;
frontend/src/components/Sidebar.jsx
+58 -36
View File
@@ -16,7 +16,7 @@ export default function Sidebar({
scenarios, activeId, onSelect, loading,
collapsed, onToggleCollapse, width,
activeBundleId, onProgressUpdate,
isExamMode, examProgress,
isExamMode, examProgress, totalExamWeight,
}) {
const [filterDiff, setFilterDiff] = useState('All')
const [filterType, setFilterType] = useState('All')
@@ -106,21 +106,19 @@ export default function Sidebar({
</button>
</div>
{/* Filter bar */}
{!collapsed && (
{/* Filter bar — hidden in exam mode */}
{!collapsed && !isExamMode && (
<div className={styles.filterBar}>
{!isExamMode && (
<select
value={filterDiff}
onChange={e => setFilterDiff(e.target.value)}
className={`${styles.selectFilter} ${filterDiff !== 'All' ? styles[DIFF_COLOR[filterDiff]] : ''}`}
>
<option value="All">All Difficulties</option>
<option value="Easy">Easy</option>
<option value="Medium">Medium</option>
<option value="Hard">Hard</option>
</select>
)}
<select
value={filterDiff}
onChange={e => setFilterDiff(e.target.value)}
className={`${styles.selectFilter} ${filterDiff !== 'All' ? styles[DIFF_COLOR[filterDiff]] : ''}`}
>
<option value="All">All Difficulties</option>
<option value="Easy">Easy</option>
<option value="Medium">Medium</option>
<option value="Hard">Hard</option>
</select>
<select
value={filterType}
onChange={e => setFilterType(e.target.value)}
@@ -144,7 +142,42 @@ export default function Sidebar({
</div>
)}
{!loading && Object.entries(groups).map(([cat, items]) => {
{!loading && isExamMode && (
/* ── Exam mode: flat numbered list ─────────────────── */
<div className={styles.flatList}>
{scenarios.map((s, idx) => {
const examDone = examProgress?.[s.id]?.status === 'completed'
const active = s.id === activeId
const hasAttempts = (examProgress?.[s.id]?.attempts || 0) > 0
return (
<button
key={s.id}
className={`${styles.item} ${active ? styles.active : ''} ${examDone ? styles.done : ''}`}
onClick={() => onSelect(s.id)}
>
<div className={styles.itemTop}>
<span className={styles.itemNum}>{idx + 1}</span>
<span className={styles.typeIcon}>{TYPE_ICON[s.type] || '•'}</span>
<span className={styles.itemTitle}>{s.title}</span>
</div>
<div className={styles.itemMeta}>
<span className={`${styles.type} ${styles[s.type]}`}>{s.type.toUpperCase()}</span>
{totalExamWeight > 0 && (
<span className={styles.examWeightBadge}>
{Math.round((s.weight / totalExamWeight) * 100)}% wt
</span>
)}
{examDone && (
<span className={styles.examCompletedTag}>✓ Completed</span>
)}
</div>
</button>
)
})}
</div>
)}
{!loading && !isExamMode && Object.entries(groups).map(([cat, items]) => {
const catDone = items.filter(s => s.progress?.status === 'completed').length
const isOpen = open[cat] !== false
const hasCatProgress = items.some(s => s.progress?.attempts > 0)
@@ -158,9 +191,7 @@ export default function Sidebar({
</div>
<div className={styles.accordionRight}>
<span className={styles.catCount}>
{isExamMode
? `${items.filter(s => examProgress?.[s.id]?.status === 'completed').length}/${items.length}`
: `${catDone}/${items.length}`}
{`${catDone}/${items.length}`}
</span>
{hasCatProgress && (
<button
@@ -180,24 +211,20 @@ export default function Sidebar({
{isOpen && (
<div className={styles.itemsBox}>
{items.map(s => {
const examDone = isExamMode && examProgress?.[s.id]?.status === 'completed'
const done = !isExamMode && s.progress?.status === 'completed'
const done = s.progress?.status === 'completed'
const active = s.id === activeId
const hasAttempts = isExamMode
? (examProgress?.[s.id]?.attempts || 0) > 0
: s.progress?.attempts > 0
const hasAttempts = s.progress?.attempts > 0
return (
<button
key={s.id}
className={`${styles.item} ${active ? styles.active : ''} ${(done || examDone) ? styles.done : ''}`}
className={`${styles.item} ${active ? styles.active : ''} ${done ? styles.done : ''}`}
onClick={() => onSelect(s.id)}
>
<div className={styles.itemTop}>
<span className={styles.itemNum}>{scenarioIndex[s.id]}</span>
<span className={styles.typeIcon}>{TYPE_ICON[s.type] || '•'}</span>
<span className={styles.itemTitle}>{s.title}</span>
{(done || examDone) && <span className={styles.checkmark}>✓</span>}
{/* Per-scenario reset — shown when item has attempts */}
{done && <span className={styles.checkmark}>✓</span>}
{hasAttempts && (
<button
className={styles.itemResetBtn}
@@ -212,16 +239,11 @@ export default function Sidebar({
)}
</div>
<div className={styles.itemMeta}>
{!isExamMode && (
<span className={`${styles.diff} ${styles[DIFF_COLOR[s.difficulty]]}`}>
{s.difficulty}
</span>
)}
<span className={`${styles.diff} ${styles[DIFF_COLOR[s.difficulty]]}`}>
{s.difficulty}
</span>
<span className={`${styles.type} ${styles[s.type]}`}>{s.type.toUpperCase()}</span>
{!isExamMode && <span className={styles.weight}>{s.weight}pt</span>}
{isExamMode && examDone && (
<span className={styles.examCompletedTag}>✓ Completed</span>
)}
<span className={styles.weight}>{s.weight}pt</span>
</div>
</button>
)
frontend/src/components/Sidebar.module.css
+28
View File
@@ -70,6 +70,22 @@
padding: 8px 0;
}
.flatList {
overflow-y: auto;
flex: 1;
padding: 6px 6px;
display: flex;
flex-direction: column;
gap: 2px;
}
.flatList .item {
border: 1px solid var(--border);
border-radius: var(--radius);
border-bottom: 1px solid var(--border);
}
/* Filters */
.filterBar {
display: flex;
@@ -338,6 +354,18 @@
@keyframes slideIn { from{opacity:0;transform:translateX(-4px)} to{opacity:1;transform:translateX(0)} }
.examWeightBadge {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: 3px;
background: var(--teal-dim);
color: var(--teal);
border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
letter-spacing: 0.3px;
}
.examCompletedTag {
font-family: var(--mono);
font-size: 10px;
frontend/src/index.css
+4
View File
@@ -19,6 +19,8 @@
--red-dim: rgba(255,107,107,0.10);
--purple: #9775fa;
--purple-dim: rgba(151,117,250,0.10);
--teal: #2dd4bf;
--teal-dim: rgba(45,212,191,0.11);
--text: #e2e8f4;
--text-2: #8899b8;
@@ -52,6 +54,8 @@
--red-dim: rgba(220,38,38,0.10);
--purple: #7c3aed;
--purple-dim: rgba(124,58,237,0.10);
--teal: #0d9488;
--teal-dim: rgba(13,148,136,0.11);
--text: #111827;
--text-2: #374151;