Прохождение теста: один вопрос на экран, прогресс сверху, мобильная вёрстка
Made-with: Cursor
This commit is contained in:
Константин Лебединский
@@ -2,254 +2,58 @@
|
||||
{% block title %}Прохождение теста{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="test-detail-page" id="attempt-root" data-test-id="{{ test_id }}" data-attempt-id="{{ attempt_id }}">
|
||||
<p class="link-back"><a href="/tests">← к списку тестов</a></p>
|
||||
<h1 class="font-headline" style="font-size:1.35rem;margin-top:0;" id="attempt-title">Загрузка…</h1>
|
||||
<p class="text-muted" style="margin-top:0;" id="attempt-subtitle"></p>
|
||||
<p class="text-muted" id="attempt-timer" style="margin-top:0;display:none;font-weight:600;"></p>
|
||||
<p class="error-text" id="attempt-error" style="display:none;"></p>
|
||||
<div class="attempt-root test-detail-page" id="attempt-root" data-test-id="{{ test_id }}" data-attempt-id="{{ attempt_id }}">
|
||||
|
||||
<ol id="questions-list" style="padding-left:1.25rem;"></ol>
|
||||
<a href="{{ url_for('tests.tests_list_page') }}" class="link-back attempt-back-link">← К тестам</a>
|
||||
|
||||
<div class="inline-actions" style="margin-top:1rem;">
|
||||
<button type="button" class="btn btn-primary" id="submit-attempt-btn">Завершить тест</button>
|
||||
<div id="attempt-flow" class="attempt-flow">
|
||||
<header class="attempt-progress-head">
|
||||
<div class="attempt-progress-row">
|
||||
<span id="attempt-progress-label" class="attempt-progress-label" aria-live="polite">—</span>
|
||||
<span id="attempt-timer" class="attempt-timer" style="display:none;" aria-live="polite"></span>
|
||||
</div>
|
||||
<div class="attempt-progress-track"
|
||||
role="progressbar"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
aria-valuemax="1"
|
||||
aria-label="Прогресс прохождения">
|
||||
<div id="attempt-progress-fill" class="attempt-progress-fill"></div>
|
||||
</div>
|
||||
<h1 class="attempt-title font-headline" id="attempt-title">Загрузка…</h1>
|
||||
<p class="attempt-subtitle muted text-sm" id="attempt-subtitle"></p>
|
||||
</header>
|
||||
|
||||
<div id="attempt-stage" class="attempt-stage"></div>
|
||||
|
||||
<footer class="attempt-footer-bar" aria-label="Навигация по вопросам">
|
||||
<div class="attempt-footer-inner">
|
||||
<button type="button" class="btn btn-ghost attempt-footer-btn" id="attempt-prev" hidden>Назад</button>
|
||||
<div class="attempt-footer-spacer"></div>
|
||||
<button type="button" class="btn btn-primary attempt-footer-btn" id="attempt-next">Далее</button>
|
||||
<button type="button" class="btn btn-primary attempt-footer-btn" id="attempt-finish" style="display:none;">Завершить тест</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div id="attempt-result" class="surface-card" style="display:none;margin-top:1rem;padding:1rem;"></div>
|
||||
<p id="attempt-error" class="callout callout--error attempt-error-box" style="display:none;"></p>
|
||||
|
||||
<dialog id="hint-modal" style="border:none;border-radius:14px;padding:0;max-width:480px;width:90%;box-shadow:0 12px 40px rgba(0,0,0,0.18);">
|
||||
<div style="padding:1rem 1.25rem;">
|
||||
<h3 id="hint-title" style="margin:0 0 0.5rem 0;font-size:1.05rem;">Подсказка</h3>
|
||||
<p id="hint-verdict" style="margin:0 0 0.5rem 0;font-weight:600;"></p>
|
||||
<p id="hint-correct" style="margin:0 0 0.5rem 0;font-size:0.9rem;color:#506965;"></p>
|
||||
<p id="hint-explanation" style="margin:0;font-size:0.95rem;line-height:1.4;"></p>
|
||||
<div class="inline-actions" style="margin-top:0.85rem;justify-content:flex-end;">
|
||||
<div id="attempt-result" class="surface-card attempt-result-card" style="display:none;"></div>
|
||||
|
||||
<dialog id="hint-modal" class="save-modal attempt-hint-dialog">
|
||||
<div class="save-modal__inner attempt-hint-inner">
|
||||
<h3 class="font-headline text-base font-semibold mb-2" id="hint-title">Подсказка</h3>
|
||||
<p id="hint-verdict" class="attempt-hint-verdict"></p>
|
||||
<p id="hint-correct" class="text-sm text-ink-600 mb-2"></p>
|
||||
<p id="hint-explanation" class="text-sm text-ink-800 leading-relaxed"></p>
|
||||
<div class="mt-4 flex justify-end">
|
||||
<button type="button" class="btn btn-primary btn--sm" id="hint-close-btn">Понятно</button>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const root = document.getElementById('attempt-root');
|
||||
const testId = root.dataset.testId;
|
||||
const attemptId = root.dataset.attemptId;
|
||||
const titleEl = document.getElementById('attempt-title');
|
||||
const subEl = document.getElementById('attempt-subtitle');
|
||||
const timerEl = document.getElementById('attempt-timer');
|
||||
const errEl = document.getElementById('attempt-error');
|
||||
const listEl = document.getElementById('questions-list');
|
||||
const resultEl = document.getElementById('attempt-result');
|
||||
const submitBtn = document.getElementById('submit-attempt-btn');
|
||||
const hintModal = document.getElementById('hint-modal');
|
||||
const hintTitle = document.getElementById('hint-title');
|
||||
const hintVerdict = document.getElementById('hint-verdict');
|
||||
const hintCorrect = document.getElementById('hint-correct');
|
||||
const hintExplanation = document.getElementById('hint-explanation');
|
||||
const hintCloseBtn = document.getElementById('hint-close-btn');
|
||||
|
||||
let playData = null;
|
||||
const selections = {};
|
||||
const checked = {};
|
||||
let timerHandle = null;
|
||||
let deadlineMs = null;
|
||||
|
||||
function esc(s) {
|
||||
return String(s ?? '').replace(/[&<>"']/g, (m) => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[m]));
|
||||
}
|
||||
function setErr(msg) {
|
||||
errEl.textContent = msg || 'Ошибка.';
|
||||
errEl.style.display = '';
|
||||
}
|
||||
function isSelected(qid, oid) {
|
||||
return (selections[String(qid)] || []).includes(String(oid));
|
||||
}
|
||||
function toggle(qid, oid, multi) {
|
||||
const k = String(qid);
|
||||
const cur = selections[k] || [];
|
||||
const id = String(oid);
|
||||
if (multi) {
|
||||
selections[k] = cur.includes(id) ? cur.filter(x => x !== id) : [...cur, id];
|
||||
return;
|
||||
}
|
||||
selections[k] = [id];
|
||||
}
|
||||
function isImmediate() {
|
||||
return playData && playData.resultMode === 'immediate';
|
||||
}
|
||||
|
||||
function renderQuestions() {
|
||||
listEl.innerHTML = '';
|
||||
for (const q of (playData.questions || [])) {
|
||||
const qid = String(q.id);
|
||||
const isChecked = !!checked[qid];
|
||||
const li = document.createElement('li');
|
||||
li.style.marginBottom = '1.5rem';
|
||||
li.dataset.qid = qid;
|
||||
let badge = '';
|
||||
if (isChecked) {
|
||||
const ok = checked[qid].isCorrect;
|
||||
badge = '<span style="margin-left:8px;font-size:0.8rem;font-weight:600;color:' +
|
||||
(ok ? '#1a7a4a' : '#b32d2d') + ';">' + (ok ? '✓ верно' : '✗ неверно') + '</span>';
|
||||
}
|
||||
li.innerHTML = '<p style="margin-top:0;margin-bottom:0.5rem;">' + esc(q.text) + badge + '</p>';
|
||||
const ul = document.createElement('ul');
|
||||
ul.style.listStyle = 'none';
|
||||
ul.style.padding = '0';
|
||||
ul.style.margin = '0';
|
||||
const correctSet = new Set((checked[qid] && checked[qid].correctOptionIds) || []);
|
||||
for (const o of (q.options || [])) {
|
||||
const oid = String(o.id);
|
||||
const row = document.createElement('li');
|
||||
row.style.marginBottom = '6px';
|
||||
const type = q.hasMultipleAnswers ? 'checkbox' : 'radio';
|
||||
const name = 'q-' + q.id;
|
||||
let mark = '';
|
||||
if (isChecked) {
|
||||
if (correctSet.has(oid)) mark = ' <span style="color:#1a7a4a;font-weight:600;">(верно)</span>';
|
||||
else if (isSelected(q.id, o.id)) mark = ' <span style="color:#b32d2d;">(ваш ответ)</span>';
|
||||
}
|
||||
row.innerHTML =
|
||||
'<label style="display:flex;align-items:flex-start;gap:8px;cursor:' + (isChecked ? 'default' : 'pointer') + ';' +
|
||||
(isChecked ? 'opacity:0.85;' : '') + '">' +
|
||||
'<input type="' + type + '" ' + (q.hasMultipleAnswers ? '' : ('name="' + name + '"')) + ' ' +
|
||||
(isSelected(q.id, o.id) ? 'checked' : '') + ' ' + (isChecked ? 'disabled' : '') + ' />' +
|
||||
'<span>' + esc(o.text) + mark + '</span>' +
|
||||
'</label>';
|
||||
const input = row.querySelector('input');
|
||||
input.addEventListener('change', () => {
|
||||
if (checked[qid]) return;
|
||||
toggle(q.id, o.id, q.hasMultipleAnswers);
|
||||
renderQuestions();
|
||||
});
|
||||
ul.appendChild(row);
|
||||
}
|
||||
li.appendChild(ul);
|
||||
|
||||
if (isImmediate() && !isChecked) {
|
||||
const btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'btn btn-ghost btn--sm';
|
||||
btn.textContent = 'Ответить';
|
||||
btn.style.marginTop = '0.4rem';
|
||||
const sel = selections[qid] || [];
|
||||
btn.disabled = sel.length === 0;
|
||||
btn.addEventListener('click', () => checkOne(q.id));
|
||||
li.appendChild(btn);
|
||||
}
|
||||
listEl.appendChild(li);
|
||||
}
|
||||
}
|
||||
|
||||
async function checkOne(qid) {
|
||||
const k = String(qid);
|
||||
const sel = selections[k] || [];
|
||||
if (!sel.length) return;
|
||||
try {
|
||||
const r = await fetch('/api/tests/' + testId + '/attempts/' + attemptId + '/check', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ questionId: qid, selectedOptionIds: sel }),
|
||||
});
|
||||
const data = await r.json().catch(() => ({}));
|
||||
if (!r.ok) throw new Error(data.error || 'Не удалось проверить ответ.');
|
||||
checked[k] = data;
|
||||
renderQuestions();
|
||||
if (playData.hintsEnabled) {
|
||||
showHint(data);
|
||||
}
|
||||
} catch (e) {
|
||||
setErr(e.message);
|
||||
}
|
||||
}
|
||||
|
||||
function showHint(data) {
|
||||
hintVerdict.textContent = data.isCorrect ? 'Верно!' : 'Неверно.';
|
||||
hintVerdict.style.color = data.isCorrect ? '#1a7a4a' : '#b32d2d';
|
||||
const correct = (data.correctOptionTexts || []).join('; ');
|
||||
hintCorrect.textContent = correct ? ('Правильный ответ: ' + correct) : '';
|
||||
hintExplanation.textContent = data.explanation || 'Объяснение недоступно.';
|
||||
if (typeof hintModal.showModal === 'function') hintModal.showModal();
|
||||
else hintModal.setAttribute('open', '');
|
||||
}
|
||||
hintCloseBtn.addEventListener('click', () => {
|
||||
if (typeof hintModal.close === 'function') hintModal.close();
|
||||
else hintModal.removeAttribute('open');
|
||||
});
|
||||
|
||||
function startTimer(minutes) {
|
||||
if (!minutes || minutes <= 0) return;
|
||||
deadlineMs = Date.now() + minutes * 60 * 1000;
|
||||
timerEl.style.display = '';
|
||||
const tick = () => {
|
||||
const left = Math.max(0, deadlineMs - Date.now());
|
||||
const m = Math.floor(left / 60000);
|
||||
const s = Math.floor((left % 60000) / 1000);
|
||||
timerEl.textContent = 'Осталось: ' + m + ':' + String(s).padStart(2, '0');
|
||||
if (left <= 0) {
|
||||
clearInterval(timerHandle);
|
||||
submit(true);
|
||||
}
|
||||
};
|
||||
tick();
|
||||
timerHandle = setInterval(tick, 500);
|
||||
}
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const r = await fetch('/api/tests/' + testId + '/attempts/' + attemptId + '/play');
|
||||
const data = await r.json().catch(() => ({}));
|
||||
if (!r.ok) throw new Error(data.error || 'Не удалось открыть попытку.');
|
||||
playData = data;
|
||||
titleEl.textContent = data.testTitle || 'Прохождение теста';
|
||||
const parts = ['Порог зачёта: ' + (data.passingThreshold ?? 0) + '%'];
|
||||
if (data.resultMode === 'immediate') parts.push('Результат сразу после ответа');
|
||||
if (data.hintsEnabled) parts.push('С ИИ-подсказками');
|
||||
subEl.textContent = parts.join(' · ') + '.';
|
||||
if (!Array.isArray(data.questions) || !data.questions.length) {
|
||||
setErr('В активной версии нет вопросов.');
|
||||
submitBtn.disabled = true;
|
||||
return;
|
||||
}
|
||||
renderQuestions();
|
||||
if (data.timeLimit) startTimer(Number(data.timeLimit));
|
||||
} catch (e) {
|
||||
setErr(e.message);
|
||||
submitBtn.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
async function submit(auto) {
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.textContent = auto ? 'Время вышло, отправка…' : 'Отправка…';
|
||||
try {
|
||||
const r = await fetch('/api/tests/' + testId + '/attempts/' + attemptId + '/submit', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ answers: selections }),
|
||||
});
|
||||
const data = await r.json().catch(() => ({}));
|
||||
if (!r.ok) throw new Error(data.error || 'Не удалось завершить попытку.');
|
||||
if (timerHandle) clearInterval(timerHandle);
|
||||
timerEl.style.display = 'none';
|
||||
resultEl.style.display = '';
|
||||
resultEl.innerHTML =
|
||||
'<h3 style="margin-top:0;">Результат</h3>' +
|
||||
'<p>Правильно: <strong>' + data.correctCount + '</strong> из ' + data.totalQuestions +
|
||||
' (' + data.percent + '%). Порог: ' + data.passingThreshold + '%.</p>' +
|
||||
'<p class="' + (data.passed ? 'text-muted' : 'error-text') + '">' + (data.passed ? 'Зачёт.' : 'Незачёт.') + '</p>' +
|
||||
'<p><a href="/tests/' + testId + '/attempts/' + data.attemptId + '/review">Разбор попытки</a></p>';
|
||||
submitBtn.style.display = 'none';
|
||||
} catch (e) {
|
||||
setErr(e.message);
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = 'Завершить тест';
|
||||
}
|
||||
}
|
||||
|
||||
submitBtn.addEventListener('click', () => submit(false));
|
||||
load();
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="{{ url_for('static', filename='js/attempt.js') }}" defer></script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user