feat(exam-prep F5): тренажёр случайных задач + /practice/next API (random|unsolved)
This commit is contained in:
Maxim Dolgolyov
@@ -69,6 +69,38 @@ const SQL = {
|
||||
ORDER BY task_idx
|
||||
`),
|
||||
|
||||
/* Practice batch — RANDOM strategy.
|
||||
Excludes long tasks (no auto-check) by default to keep UX consistent. */
|
||||
practiceRandom: db.prepare(`
|
||||
SELECT
|
||||
id, task_idx, variant, task_type, text_html, figure_html, opts_json,
|
||||
answer, solution_html, topic
|
||||
FROM exam_tasks
|
||||
WHERE exam_key = ?
|
||||
AND task_type IN ('mc','open')
|
||||
ORDER BY RANDOM()
|
||||
LIMIT ?
|
||||
`),
|
||||
|
||||
/* Practice batch — UNSOLVED strategy.
|
||||
Excludes tasks the user has already solved correctly at least once. */
|
||||
practiceUnsolved: db.prepare(`
|
||||
SELECT
|
||||
t.id, t.task_idx, t.variant, t.task_type, t.text_html, t.figure_html,
|
||||
t.opts_json, t.answer, t.solution_html, t.topic
|
||||
FROM exam_tasks t
|
||||
WHERE t.exam_key = ?
|
||||
AND t.task_type IN ('mc','open')
|
||||
AND NOT EXISTS (
|
||||
SELECT 1 FROM exam_attempts a
|
||||
WHERE a.exam_task_id = t.id
|
||||
AND a.user_id = ?
|
||||
AND a.is_correct = 1
|
||||
)
|
||||
ORDER BY RANDOM()
|
||||
LIMIT ?
|
||||
`),
|
||||
|
||||
/* For attempt save: confirm the task belongs to a known track + user */
|
||||
getTaskExamKey: db.prepare(`SELECT exam_key FROM exam_tasks WHERE id = ?`),
|
||||
|
||||
@@ -168,6 +200,51 @@ router.get('/:examKey/variants/:n/tasks', (req, res) => {
|
||||
|
||||
function safeJson(s) { try { return JSON.parse(s); } catch { return null; } }
|
||||
|
||||
function shapeTask(r) {
|
||||
return {
|
||||
id: r.id,
|
||||
idx: r.task_idx,
|
||||
variant: r.variant ?? null,
|
||||
type: r.task_type,
|
||||
text: r.text_html,
|
||||
figure: r.figure_html,
|
||||
opts: r.opts_json ? safeJson(r.opts_json) : null,
|
||||
answer: r.answer,
|
||||
solution: r.solution_html,
|
||||
topic: r.topic ?? null,
|
||||
};
|
||||
}
|
||||
|
||||
/* ── GET /api/exam-prep/:examKey/practice/next ──
|
||||
Returns up to ?count=N tasks for the practice trainer.
|
||||
?strategy=random — any mc/open task, fresh random sample
|
||||
=unsolved — only tasks the user has not yet solved correctly
|
||||
Long tasks are excluded (no auto-check available). */
|
||||
// @public-by-design: router-level authMiddleware (line 6) covers this route
|
||||
router.get('/:examKey/practice/next', (req, res) => {
|
||||
const { examKey } = req.params;
|
||||
if (!SQL.getTrack.get(examKey)) return res.status(404).json({ error: 'Unknown exam track' });
|
||||
|
||||
let count = Number(req.query.count) || 10;
|
||||
count = Math.max(1, Math.min(count, 30));
|
||||
|
||||
const strategy = req.query.strategy === 'unsolved' ? 'unsolved' : 'random';
|
||||
let rows;
|
||||
if (strategy === 'unsolved') {
|
||||
rows = SQL.practiceUnsolved.all(examKey, req.user.id, count);
|
||||
// Fallback: if user has solved everything, supply random anyway so UX isn't a dead-end.
|
||||
if (!rows.length) rows = SQL.practiceRandom.all(examKey, count);
|
||||
} else {
|
||||
rows = SQL.practiceRandom.all(examKey, count);
|
||||
}
|
||||
|
||||
res.json({
|
||||
strategy,
|
||||
session_id: Date.now(), // ephemeral grouping key for these N attempts
|
||||
tasks: rows.map(shapeTask),
|
||||
});
|
||||
});
|
||||
|
||||
/* ── POST /api/exam-prep/attempts ──
|
||||
Save a single attempt. Used by the variants view (F2) for "solution viewed"
|
||||
markers, and by the practice / mock views (F3+) for actual answer checking.
|
||||
|
||||
@@ -507,6 +507,111 @@
|
||||
font-family: 'Unbounded', sans-serif; font-weight: 800; color: #06D6A0;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
Practice view (`pr-*`) — used by exam-prep-practice.html
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
|
||||
.pr-controls {
|
||||
background: var(--surface);
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 14px 18px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.pr-controls-row {
|
||||
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
|
||||
}
|
||||
.pr-strategy {
|
||||
display: flex; gap: 6px; flex-wrap: wrap;
|
||||
}
|
||||
.pr-strategy-btn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 7px 14px;
|
||||
border: 1.5px solid var(--border-h);
|
||||
border-radius: 9px;
|
||||
background: transparent; color: var(--text-2);
|
||||
font-family: 'Manrope', sans-serif; font-size: .85rem; font-weight: 700;
|
||||
cursor: pointer; transition: all .12s;
|
||||
}
|
||||
.pr-strategy-btn:hover:not(:disabled):not(.disabled) {
|
||||
border-color: var(--violet); color: var(--violet);
|
||||
}
|
||||
.pr-strategy-btn.active {
|
||||
background: var(--violet); border-color: var(--violet); color: #fff;
|
||||
}
|
||||
.pr-strategy-btn.disabled, .pr-strategy-btn:disabled {
|
||||
opacity: .42; cursor: not-allowed;
|
||||
}
|
||||
.pr-strategy-btn svg { width: 14px; height: 14px; }
|
||||
|
||||
.pr-count-pick {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
margin-left: auto;
|
||||
}
|
||||
.pr-count-pick label {
|
||||
font-size: .78rem; color: var(--text-3); font-weight: 700;
|
||||
text-transform: uppercase; letter-spacing: .04em;
|
||||
}
|
||||
.pr-count-select {
|
||||
padding: 7px 10px;
|
||||
border: 1.5px solid var(--border-h);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
font-family: 'Manrope', sans-serif; font-size: .85rem; font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pr-count-select:focus { outline: none; border-color: var(--violet); }
|
||||
|
||||
.pr-restart { white-space: nowrap; }
|
||||
.pr-restart svg { width: 14px; height: 14px; }
|
||||
|
||||
.pr-progress {
|
||||
margin-top: 12px; padding-top: 12px;
|
||||
border-top: 1px dashed var(--border);
|
||||
}
|
||||
.pr-progress-meta {
|
||||
display: flex; justify-content: space-between;
|
||||
font-size: .78rem; color: var(--text-3);
|
||||
text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.pr-progress-counts {
|
||||
color: var(--violet);
|
||||
text-transform: none; letter-spacing: 0;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.pr-tasks { margin-top: 6px; }
|
||||
|
||||
.pr-finish-row {
|
||||
display: flex; justify-content: center;
|
||||
margin: 22px 0 0;
|
||||
}
|
||||
.pr-finish-btn {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 9px 18px;
|
||||
border: 1.5px solid var(--border-h); border-radius: 10px;
|
||||
background: var(--surface); color: var(--text-2);
|
||||
font-family: 'Manrope', sans-serif; font-size: .85rem; font-weight: 700;
|
||||
cursor: pointer; transition: all .15s;
|
||||
}
|
||||
.pr-finish-btn:hover { border-color: var(--violet); color: var(--violet); }
|
||||
.pr-finish-btn svg { width: 14px; height: 14px; }
|
||||
|
||||
.pr-summary { margin-top: 22px; }
|
||||
.pr-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.pr-summary-stat {
|
||||
padding: 12px 14px;
|
||||
background: rgba(155,93,229,.05);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* ── Mobile tweaks ─────────────────────────────────────────────── */
|
||||
@media (max-width: 640px) {
|
||||
.ep-wrap { padding: 20px 16px 60px; }
|
||||
|
||||
@@ -8,6 +8,9 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="/css/ls.css" />
|
||||
<link rel="stylesheet" href="/css/exam-prep.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" />
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" onload="onKatexLoad()"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-layout">
|
||||
@@ -24,9 +27,9 @@
|
||||
<path d="m9 14 2 2 4-4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div style="flex:1">
|
||||
<div class="ep-title" id="ep-title"><span class="ep-skel" style="width:280px;height:1.2em"> </span></div>
|
||||
<div class="ep-sub" id="ep-sub"><span class="ep-skel" style="width:200px;height:.8em"> </span></div>
|
||||
<div class="ep-sub" id="ep-sub"><span class="ep-skel" style="width:200px;height:.8em"> </span></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -34,9 +37,8 @@
|
||||
|
||||
<main id="ep-main">
|
||||
<div class="ep-empty">
|
||||
<i data-lucide="dumbbell"></i>
|
||||
<h4>Тренажёр случайных задач</h4>
|
||||
<p>В F3 здесь появится поле ввода ответа с автопроверкой, а в F5 — выборка случайных задач из банка с фильтром «нерешённые / слабые».</p>
|
||||
<i data-lucide="loader-circle"></i>
|
||||
<h4>Загрузка…</h4>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -52,6 +54,9 @@
|
||||
<script src="/js/mobile.js"></script>
|
||||
<script src="/js/exam-prep/common.js"></script>
|
||||
<script src="/js/exam-prep/api.js"></script>
|
||||
<script>(async () => { await EP.boot(); if (window.lucide) lucide.createIcons(); })();</script>
|
||||
<script src="/js/exam-prep/katex.js"></script>
|
||||
<script src="/js/exam-prep/answer-check.js"></script>
|
||||
<script src="/js/exam-prep/task-card.js"></script>
|
||||
<script src="/js/exam-prep/practice.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,236 @@
|
||||
'use strict';
|
||||
/* ──────────────────────────────────────────────────────────────────
|
||||
Practice view — random / unsolved tasks trainer.
|
||||
Renders a batch of N TaskCards; once all are answered (or user
|
||||
clicks "Завершить"), shows a summary card with score + restart.
|
||||
────────────────────────────────────────────────────────────────── */
|
||||
|
||||
(async function () {
|
||||
await EP.boot();
|
||||
const examKey = EP.examKey;
|
||||
|
||||
const main = document.getElementById('ep-main');
|
||||
|
||||
// Per-session state
|
||||
let batch = null; // { strategy, session_id, tasks: [...] }
|
||||
let strategy = readPersistedStrategy() || 'random';
|
||||
let count = readPersistedCount();
|
||||
let finalized = false;
|
||||
const results = new Map(); // taskId -> { isCorrect: 0|1|null, attempts: number }
|
||||
|
||||
/* ── Strategy persistence (local pref) ──────────────────────── */
|
||||
function readPersistedStrategy() {
|
||||
try { return localStorage.getItem(`exam_prep_${examKey}_practice_strategy`); } catch { return null; }
|
||||
}
|
||||
function persistStrategy(s) {
|
||||
try { localStorage.setItem(`exam_prep_${examKey}_practice_strategy`, s); } catch {}
|
||||
}
|
||||
function readPersistedCount() {
|
||||
try {
|
||||
const n = Number(localStorage.getItem(`exam_prep_${examKey}_practice_count`));
|
||||
return (n >= 5 && n <= 30) ? n : 10;
|
||||
} catch { return 10; }
|
||||
}
|
||||
function persistCount(n) {
|
||||
try { localStorage.setItem(`exam_prep_${examKey}_practice_count`, String(n)); } catch {}
|
||||
}
|
||||
|
||||
/* ── Boot: show controls and load first batch ───────────────── */
|
||||
await loadBatch();
|
||||
|
||||
/* ── Controls bar ───────────────────────────────────────────── */
|
||||
function controlsHTML() {
|
||||
const opts = [5, 10, 15, 20].map(n => `
|
||||
<option value="${n}" ${n === count ? 'selected' : ''}>${n} задач</option>`).join('');
|
||||
return `
|
||||
<div class="pr-controls">
|
||||
<div class="pr-controls-row">
|
||||
<div class="pr-strategy">
|
||||
<button class="pr-strategy-btn ${strategy === 'random' ? 'active' : ''}" data-strat="random">
|
||||
<i data-lucide="shuffle"></i> Случайные
|
||||
</button>
|
||||
<button class="pr-strategy-btn ${strategy === 'unsolved' ? 'active' : ''}" data-strat="unsolved">
|
||||
<i data-lucide="circle-dashed"></i> Только нерешённые
|
||||
</button>
|
||||
<button class="pr-strategy-btn disabled" disabled title="Появится в F8 после тегирования тем">
|
||||
<i data-lucide="target"></i> Слабые темы
|
||||
</button>
|
||||
</div>
|
||||
<div class="pr-count-pick">
|
||||
<label>Размер сессии:</label>
|
||||
<select class="pr-count-select">${opts}</select>
|
||||
</div>
|
||||
<button class="ep-btn ep-btn-primary pr-restart">
|
||||
<i data-lucide="rotate-cw"></i> Новая сессия
|
||||
</button>
|
||||
</div>
|
||||
<div class="pr-progress" id="pr-progress"></div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function renderProgress() {
|
||||
const el = document.getElementById('pr-progress');
|
||||
if (!el || !batch) return;
|
||||
const total = batch.tasks.length;
|
||||
const answered = Array.from(results.values()).filter(r => r.isCorrect != null).length;
|
||||
const correct = Array.from(results.values()).filter(r => r.isCorrect === 1).length;
|
||||
const pct = total ? Math.round((answered / total) * 100) : 0;
|
||||
el.innerHTML = `
|
||||
<div class="pr-progress-meta">
|
||||
<span>Прогресс сессии</span>
|
||||
<span class="pr-progress-counts">${answered}/${total} · ${correct} верно</span>
|
||||
</div>
|
||||
<div class="ep-bar"><div class="ep-bar-fill" style="width:${pct}%"></div></div>`;
|
||||
}
|
||||
|
||||
/* ── Batch loading + render ─────────────────────────────────── */
|
||||
async function loadBatch() {
|
||||
finalized = false;
|
||||
results.clear();
|
||||
main.innerHTML = controlsHTML() + `
|
||||
<div class="ep-empty">
|
||||
<i data-lucide="loader-circle"></i>
|
||||
<h4>Загрузка задач…</h4>
|
||||
</div>`;
|
||||
if (window.lucide) lucide.createIcons();
|
||||
wireControls();
|
||||
|
||||
try {
|
||||
batch = await EP.api.getPracticeNext(examKey, { count, strategy });
|
||||
} catch (e) {
|
||||
main.querySelector('.ep-empty').outerHTML = `
|
||||
<div class="ep-empty">
|
||||
<i data-lucide="alert-triangle"></i>
|
||||
<h4>Не удалось загрузить задачи</h4>
|
||||
<p>${escapeHtml(e.message || String(e))}</p>
|
||||
</div>`;
|
||||
if (window.lucide) lucide.createIcons();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!batch.tasks.length) {
|
||||
main.querySelector('.ep-empty').outerHTML = `
|
||||
<div class="ep-empty">
|
||||
<i data-lucide="party-popper"></i>
|
||||
<h4>Не нашлось задач по этой стратегии</h4>
|
||||
<p>Попробуйте другую — или это знак, что вы уже всё решили.</p>
|
||||
</div>`;
|
||||
if (window.lucide) lucide.createIcons();
|
||||
return;
|
||||
}
|
||||
|
||||
renderBatch();
|
||||
}
|
||||
|
||||
function renderBatch() {
|
||||
// Replace empty placeholder with task list
|
||||
const empty = main.querySelector('.ep-empty');
|
||||
const taskContainer = document.createElement('div');
|
||||
taskContainer.className = 'pr-tasks';
|
||||
if (empty) empty.replaceWith(taskContainer);
|
||||
|
||||
batch.tasks.forEach((task, i) => {
|
||||
results.set(task.id, { isCorrect: null, attempts: 0 });
|
||||
EP.TaskCard.render(taskContainer, task, {
|
||||
mode: 'practice',
|
||||
sessionId: batch.session_id,
|
||||
numbering: i + 1,
|
||||
onAttempt: ({ taskId, isCorrect, attempt }) => {
|
||||
if (isCorrect == null) return; // ignore solution-only events
|
||||
const r = results.get(taskId);
|
||||
if (!r) return;
|
||||
// We record only the FIRST attempt result toward batch score.
|
||||
if (r.isCorrect == null) r.isCorrect = isCorrect;
|
||||
r.attempts = attempt || r.attempts + 1;
|
||||
renderProgress();
|
||||
maybeFinalize();
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// Bottom: "Завершить" button (allow finalizing early)
|
||||
const finish = document.createElement('div');
|
||||
finish.className = 'pr-finish-row';
|
||||
finish.innerHTML = `
|
||||
<button class="ep-btn pr-finish-btn">
|
||||
<i data-lucide="flag"></i> Завершить и показать итог
|
||||
</button>`;
|
||||
main.appendChild(finish);
|
||||
finish.querySelector('.pr-finish-btn').onclick = () => finalize();
|
||||
|
||||
renderProgress();
|
||||
if (window.lucide) lucide.createIcons();
|
||||
}
|
||||
|
||||
function maybeFinalize() {
|
||||
const answered = Array.from(results.values()).filter(r => r.isCorrect != null).length;
|
||||
if (answered === batch.tasks.length && !finalized) {
|
||||
finalize();
|
||||
}
|
||||
}
|
||||
|
||||
function finalize() {
|
||||
if (finalized) return;
|
||||
finalized = true;
|
||||
const total = batch.tasks.length;
|
||||
const answered = Array.from(results.values()).filter(r => r.isCorrect != null).length;
|
||||
const correct = Array.from(results.values()).filter(r => r.isCorrect === 1).length;
|
||||
const acc = answered ? Math.round((correct / answered) * 100) : 0;
|
||||
|
||||
const summary = document.createElement('div');
|
||||
summary.className = 'pr-summary ep-card';
|
||||
summary.innerHTML = `
|
||||
<div class="pr-summary-grid">
|
||||
<div class="pr-summary-stat">
|
||||
<div class="ep-stat-label">Решено</div>
|
||||
<div class="ep-stat-value ep-violet">${answered} / ${total}</div>
|
||||
</div>
|
||||
<div class="pr-summary-stat">
|
||||
<div class="ep-stat-label">Верно</div>
|
||||
<div class="ep-stat-value ${acc >= 70 ? 'ep-good' : 'ep-warn'}">${correct}</div>
|
||||
<div class="ep-stat-sub">${acc}% точности</div>
|
||||
</div>
|
||||
<div class="pr-summary-stat">
|
||||
<div class="ep-stat-label">Стратегия</div>
|
||||
<div class="ep-stat-value" style="font-size:1.1rem">${strategy === 'unsolved' ? 'Нерешённые' : 'Случайные'}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ep-cta-row">
|
||||
<button class="ep-btn ep-btn-primary" id="pr-summary-restart">
|
||||
<i data-lucide="rotate-cw"></i> Ещё ${count} задач
|
||||
</button>
|
||||
<a class="ep-btn" href="/exam-prep/${examKey}">
|
||||
<i data-lucide="gauge"></i> На дашборд
|
||||
</a>
|
||||
</div>`;
|
||||
main.appendChild(summary);
|
||||
summary.querySelector('#pr-summary-restart').onclick = () => loadBatch();
|
||||
if (window.lucide) lucide.createIcons();
|
||||
summary.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
|
||||
/* ── Wire controls (strategy toggle, count select, restart) ── */
|
||||
function wireControls() {
|
||||
main.querySelectorAll('[data-strat]').forEach(btn => {
|
||||
btn.onclick = () => {
|
||||
if (btn.disabled) return;
|
||||
strategy = btn.dataset.strat;
|
||||
persistStrategy(strategy);
|
||||
loadBatch();
|
||||
};
|
||||
});
|
||||
const sel = main.querySelector('.pr-count-select');
|
||||
if (sel) {
|
||||
sel.onchange = () => {
|
||||
count = Number(sel.value) || 10;
|
||||
persistCount(count);
|
||||
};
|
||||
}
|
||||
const restart = main.querySelector('.pr-restart');
|
||||
if (restart) restart.onclick = () => loadBatch();
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s || '').replace(/[&<>"']/g, c => ({ '&':'&', '<':'<', '>':'>', '"':'"', "'":''' }[c]));
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user