feat(exam9): link tasks to textbook + difficulty-ordered random + topic exclusion
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>
This commit is contained in:
@@ -1054,3 +1054,84 @@
|
||||
.tc-input-row { gap: 8px; }
|
||||
.tc-ans-input { max-width: 100%; }
|
||||
}
|
||||
|
||||
/* ── "Учить тему" link inside a task card ───────────────────────── */
|
||||
.tc-sol-row {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tc-ref-btn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
margin-left: auto;
|
||||
padding: 6px 12px;
|
||||
border: 1.5px solid var(--violet, #7c3aed);
|
||||
border-radius: 9px;
|
||||
background: rgba(124, 58, 237, 0.08);
|
||||
color: var(--violet, #7c3aed);
|
||||
font-family: 'Manrope', sans-serif; font-size: .82rem; font-weight: 700;
|
||||
text-decoration: none;
|
||||
transition: background .15s, color .15s;
|
||||
}
|
||||
.tc-ref-btn:hover {
|
||||
background: var(--violet, #7c3aed); color: #fff;
|
||||
}
|
||||
.tc-ref-btn svg { width: 14px; height: 14px; }
|
||||
|
||||
/* ── Difficulty-progression note above the task list ─────────────── */
|
||||
.pr-difficulty-note {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
margin-top: 10px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(6, 214, 160, 0.08);
|
||||
border-left: 3px solid #06D6A0;
|
||||
border-radius: 6px;
|
||||
font-size: .82rem;
|
||||
color: var(--text-2);
|
||||
}
|
||||
.pr-difficulty-note i, .pr-difficulty-note svg { width: 14px; height: 14px; flex-shrink: 0; }
|
||||
|
||||
/* ── Exclude-topics button + count badge ─────────────────────────── */
|
||||
.pr-exclude-btn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
position: relative;
|
||||
}
|
||||
.pr-exclude-count {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
min-width: 18px; height: 18px;
|
||||
padding: 0 5px;
|
||||
border-radius: 9px;
|
||||
background: var(--violet, #7c3aed); color: #fff;
|
||||
font-size: .7rem; font-weight: 800; line-height: 1;
|
||||
}
|
||||
|
||||
/* ── Exclude-topics modal ────────────────────────────────────────── */
|
||||
.pr-ex-form { display: flex; flex-direction: column; gap: 16px; max-height: 60vh; overflow-y: auto; }
|
||||
.pr-ex-hint { font-size: .82rem; color: var(--text-3); margin: 0; }
|
||||
.pr-ex-section { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
|
||||
.pr-ex-section-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-family: 'Unbounded', sans-serif; font-size: .82rem; font-weight: 800;
|
||||
letter-spacing: .02em; color: var(--text);
|
||||
}
|
||||
.pr-ex-toggle-all {
|
||||
border: 1px solid var(--border-h); background: transparent; color: var(--text-2);
|
||||
padding: 3px 10px; border-radius: 6px;
|
||||
font-family: 'Manrope', sans-serif; font-size: .72rem; font-weight: 700;
|
||||
cursor: pointer; transition: all .12s;
|
||||
}
|
||||
.pr-ex-toggle-all:hover { border-color: var(--violet); color: var(--violet); }
|
||||
.pr-ex-items { display: flex; flex-direction: column; gap: 4px; }
|
||||
.pr-ex-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: .9rem;
|
||||
transition: background .12s;
|
||||
}
|
||||
.pr-ex-item:hover { background: var(--border); }
|
||||
.pr-ex-item input { accent-color: var(--violet); flex-shrink: 0; }
|
||||
.pr-ex-title { flex: 1; }
|
||||
.pr-ex-meta { font-size: .76rem; color: var(--text-3); }
|
||||
.pr-ex-empty { padding: 16px; text-align: center; color: var(--text-3); font-size: .85rem; }
|
||||
|
||||
@@ -15,6 +15,8 @@
|
||||
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 }
|
||||
|
||||
@@ -39,6 +41,17 @@
|
||||
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();
|
||||
@@ -47,6 +60,11 @@
|
||||
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">
|
||||
@@ -66,10 +84,19 @@
|
||||
<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>`;
|
||||
}
|
||||
@@ -102,7 +129,11 @@
|
||||
wireControls();
|
||||
|
||||
try {
|
||||
batch = await EP.api.getPracticeNext(examKey, { count, strategy });
|
||||
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">
|
||||
@@ -234,6 +265,77 @@
|
||||
}
|
||||
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) {
|
||||
|
||||
@@ -34,6 +34,24 @@
|
||||
return String(s || '').replace(/[&<>"']/g, c => ({ '&':'&', '<':'<', '>':'>', '"':'"', "'":''' }[c]));
|
||||
}
|
||||
|
||||
/* topic_ref → "Учить тему" deep-link to the textbook chapter/paragraph.
|
||||
ref = { slug, paragraph, title }. Paragraph is null for hub links. */
|
||||
function buildRefLink(ref) {
|
||||
if (!ref || !ref.slug) return '';
|
||||
const href = ref.paragraph
|
||||
? `/textbook/${encodeURIComponent(ref.slug)}#sec-p${ref.paragraph}`
|
||||
: `/textbook/${encodeURIComponent(ref.slug)}`;
|
||||
const label = ref.paragraph ? `§${ref.paragraph}` : 'учебник';
|
||||
const title = ref.title ? `Учить тему: ${escapeHtml(ref.title)}` : 'Перейти к материалу';
|
||||
return `<a class="tc-ref-btn" href="${href}" target="_blank" rel="noopener" title="${title}">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
|
||||
</svg>
|
||||
<span>Учить тему · ${escapeHtml(label)}</span>
|
||||
</a>`;
|
||||
}
|
||||
|
||||
function buildOptsBlock(taskId, opts) {
|
||||
const isLong = opts.some(([, t]) => t.length > 40 && !t.startsWith('$'));
|
||||
const cls = isLong ? 'tc-opts tc-opts-vertical' : 'tc-opts';
|
||||
@@ -101,11 +119,15 @@
|
||||
</div>` + verdictSlot;
|
||||
}
|
||||
|
||||
const refLink = buildRefLink(task.topic_ref);
|
||||
const solBlock = (showSol && task.solution) ? `
|
||||
<div class="tc-sol-wrap">
|
||||
<button class="tc-sol-btn" data-tc-sol>${ICONS.chev}<span>Показать решение</span></button>
|
||||
<div class="tc-sol-row">
|
||||
<button class="tc-sol-btn" data-tc-sol>${ICONS.chev}<span>Показать решение</span></button>
|
||||
${refLink}
|
||||
</div>
|
||||
<div class="tc-sol-panel" data-tc-sol-panel>${task.solution}</div>
|
||||
</div>` : '';
|
||||
</div>` : (refLink ? `<div class="tc-sol-wrap"><div class="tc-sol-row">${refLink}</div></div>` : '');
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="tc-head">
|
||||
|
||||
Reference in New Issue
Block a user