Maxim Dolgolyov
3cc52e21b0
Practice (random) now picks tasks by ascending difficulty so the first slot is always level 1 and the session ramps up. Adds ?exclude= to drop specific subtopics from the random pool, with a per-section checkbox modal in the UI. Each task carries a topic_ref (textbook chapter + paragraph) shown as a 'Учить тему · §N' button next to the solution, deep-linking to the right section of /textbook/<slug>. Mapping seeded for all 15 math9 subtopics in migration 028. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
352 lines
14 KiB
JavaScript
352 lines
14 KiB
JavaScript
'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 = readStrategyFromUrl() || readPersistedStrategy() || 'random';
|
|
let count = readPersistedCount();
|
|
let excludeSlugs = readPersistedExclude(); // Set<slug>
|
|
let topicSections = null; // { sections: [...] } — lazy-loaded
|
|
let finalized = false;
|
|
const results = new Map(); // taskId -> { isCorrect: 0|1|null, attempts: number }
|
|
|
|
function readStrategyFromUrl() {
|
|
const m = location.search.match(/[?&]strategy=(random|unsolved|weak)/);
|
|
return m ? m[1] : null;
|
|
}
|
|
|
|
/* ── 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 {}
|
|
}
|
|
function readPersistedExclude() {
|
|
try {
|
|
const raw = localStorage.getItem(`exam_prep_${examKey}_practice_exclude`) || '';
|
|
return new Set(raw.split(',').filter(Boolean));
|
|
} catch { return new Set(); }
|
|
}
|
|
function persistExclude(set) {
|
|
try {
|
|
localStorage.setItem(`exam_prep_${examKey}_practice_exclude`, Array.from(set).join(','));
|
|
} 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('');
|
|
const excludeBadge = excludeSlugs.size
|
|
? `<span class="pr-exclude-count">${excludeSlugs.size}</span>` : '';
|
|
// Exclude only applies to the difficulty-ordered random pool. Hide
|
|
// for other strategies so users don't think it filters them too.
|
|
const showExclude = strategy === 'random';
|
|
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 ${strategy === 'weak' ? 'active' : ''}" data-strat="weak"
|
|
title="Топ-3 темы с худшей точностью (нужно ≥3 попыток в теме)">
|
|
<i data-lucide="target"></i> Слабые темы
|
|
</button>
|
|
</div>
|
|
<div class="pr-count-pick">
|
|
<label>Размер сессии:</label>
|
|
<select class="pr-count-select">${opts}</select>
|
|
</div>
|
|
${showExclude ? `
|
|
<button class="ep-btn pr-exclude-btn" title="Исключить темы из пула случайных задач">
|
|
<i data-lucide="filter-x"></i> Исключить темы ${excludeBadge}
|
|
</button>` : ''}
|
|
<button class="ep-btn ep-btn-primary pr-restart">
|
|
<i data-lucide="rotate-cw"></i> Новая сессия
|
|
</button>
|
|
</div>
|
|
${strategy === 'random' ? `
|
|
<div class="pr-difficulty-note">
|
|
<i data-lucide="bar-chart-2"></i>
|
|
Задачи идут по возрастанию сложности: 1-я всегда лёгкая, к концу — сложнее.
|
|
</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 {
|
|
const query = { count, strategy };
|
|
if (strategy === 'random' && excludeSlugs.size) {
|
|
query.exclude = Array.from(excludeSlugs).join(',');
|
|
}
|
|
batch = await EP.api.getPracticeNext(examKey, query);
|
|
} 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">${strategyLabel(strategy)}</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();
|
|
|
|
const excludeBtn = main.querySelector('.pr-exclude-btn');
|
|
if (excludeBtn) excludeBtn.onclick = () => openExcludeModal();
|
|
}
|
|
|
|
/* ── Exclude-topics modal ───────────────────────────────────── */
|
|
async function openExcludeModal() {
|
|
if (!topicSections) {
|
|
try {
|
|
topicSections = await EP.api.listTopics(examKey);
|
|
} catch (e) {
|
|
LS.toast?.('Не удалось загрузить темы', 'error');
|
|
return;
|
|
}
|
|
}
|
|
const sections = topicSections.sections || [];
|
|
const sectionsHtml = sections.map(sec => {
|
|
const items = (sec.subtopics || []).map(st => {
|
|
const checked = excludeSlugs.has(st.slug) ? 'checked' : '';
|
|
return `
|
|
<label class="pr-ex-item">
|
|
<input type="checkbox" value="${st.slug}" ${checked} />
|
|
<span class="pr-ex-title">${escapeHtml(st.title)}</span>
|
|
<span class="pr-ex-meta">${st.total || 0} задач</span>
|
|
</label>`;
|
|
}).join('');
|
|
return `
|
|
<div class="pr-ex-section">
|
|
<div class="pr-ex-section-head">
|
|
<span>${escapeHtml(sec.title)}</span>
|
|
<button type="button" class="pr-ex-toggle-all" data-section="${sec.slug}">Все</button>
|
|
</div>
|
|
<div class="pr-ex-items" data-section-items="${sec.slug}">${items}</div>
|
|
</div>`;
|
|
}).join('');
|
|
|
|
const body = `
|
|
<div class="pr-ex-form">
|
|
<p class="pr-ex-hint">Отмеченные темы не попадут в случайный пул. Сложность распределения сохраняется.</p>
|
|
${sectionsHtml || '<div class="pr-ex-empty">Темы не настроены</div>'}
|
|
</div>`;
|
|
|
|
const m = LS.modal({
|
|
title: 'Исключить темы из пула',
|
|
content: body,
|
|
size: 'md',
|
|
actions: [
|
|
{ label: 'Сбросить', onClick: () => {
|
|
m.body.querySelectorAll('input[type="checkbox"]').forEach(c => c.checked = false);
|
|
} },
|
|
{ label: 'Отмена', onClick: () => m.close() },
|
|
{ label: 'Применить', primary: true, onClick: () => {
|
|
const checked = Array.from(m.body.querySelectorAll('input[type="checkbox"]:checked')).map(c => c.value);
|
|
excludeSlugs = new Set(checked);
|
|
persistExclude(excludeSlugs);
|
|
m.close();
|
|
loadBatch();
|
|
} },
|
|
],
|
|
});
|
|
|
|
// "Все" toggle per section
|
|
m.body.querySelectorAll('.pr-ex-toggle-all').forEach(btn => {
|
|
btn.onclick = () => {
|
|
const items = m.body.querySelector(`[data-section-items="${btn.dataset.section}"]`);
|
|
if (!items) return;
|
|
const boxes = items.querySelectorAll('input[type="checkbox"]');
|
|
const allChecked = Array.from(boxes).every(b => b.checked);
|
|
boxes.forEach(b => b.checked = !allChecked);
|
|
};
|
|
});
|
|
}
|
|
|
|
function escapeHtml(s) {
|
|
return String(s || '').replace(/[&<>"']/g, c => ({ '&':'&', '<':'<', '>':'>', '"':'"', "'":''' }[c]));
|
|
}
|
|
|
|
function strategyLabel(s) {
|
|
if (s === 'unsolved') return 'Нерешённые';
|
|
if (s === 'weak') return 'Слабые темы';
|
|
if (s === 'unsolved-fallback') return 'Нерешённые (fallback)';
|
|
return 'Случайные';
|
|
}
|
|
})();
|