блоки 2 и 3 доработки интерфейса системы тестирования
This commit is contained in:
Константин Лебединский
@@ -264,6 +264,20 @@ body.ui-legacy .btn-ghost:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body.ui-legacy .btn-primary {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
body.ui-legacy .btn-primary:hover {
|
||||
background: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
body.ui-legacy .btn-primary:active {
|
||||
transform: translateY(0.5px);
|
||||
}
|
||||
|
||||
body.ui-legacy .text-muted {
|
||||
color: var(--on-surface-variant);
|
||||
font-size: 0.875rem;
|
||||
@@ -365,6 +379,52 @@ body.ui-legacy .callout--warning {
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
body.ui-legacy .callout--error {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
/* Страница входа (legacy) */
|
||||
body.ui-legacy .login-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
body.ui-legacy .login-shell {
|
||||
width: 100%;
|
||||
max-width: 22rem;
|
||||
}
|
||||
body.ui-legacy .login-logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
body.ui-legacy .login-logo .font-headline {
|
||||
margin: 0.5rem 0 0;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
body.ui-legacy .login-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid color-mix(in srgb, var(--outline-variant) 38%, transparent);
|
||||
border-radius: 1rem;
|
||||
padding: 1.35rem 1.25rem 1.5rem;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
body.ui-legacy .form-field + .form-field {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
body.ui-legacy .login-card .btn-primary {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
min-height: 2.65rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body.ui-legacy .muted,
|
||||
body.ui-legacy .text-muted,
|
||||
body.ui-legacy .text-secondary {
|
||||
@@ -402,6 +462,16 @@ body.ui-legacy .form-input:focus {
|
||||
box-shadow: 0 0 0 3px rgba(0, 113, 104, 0.12);
|
||||
background: #fff;
|
||||
}
|
||||
body.ui-legacy select.form-input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
padding-right: 2.5rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
background-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body.ui-legacy .surface-card {
|
||||
background: var(--surface);
|
||||
@@ -421,23 +491,53 @@ body.ui-legacy .cabinet-brick--hero {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.hero-brick__nav {
|
||||
.hero-brick__meta-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
align-items: baseline;
|
||||
gap: 0.35rem;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--ink-500, #6b7280);
|
||||
}
|
||||
.hero-brick__meta {
|
||||
.hero-brick__sep { opacity: 0.45; }
|
||||
|
||||
.hero-brick__divider {
|
||||
margin-top: 0.75rem;
|
||||
border-top: 1px solid color-mix(in srgb, var(--outline-variant, #e5e7eb) 60%, transparent);
|
||||
}
|
||||
|
||||
.hero-brick__tags {
|
||||
margin-top: 0.6rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
}
|
||||
.hero-brick__tag {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
align-items: baseline;
|
||||
color: var(--ink-500, #6b7280);
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--ink-600, #4b5563);
|
||||
padding: 0.18rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--outline-variant, #e5e7eb) 35%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--outline-variant, #e5e7eb) 65%, transparent);
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.hero-brick__sep { opacity: 0.55; }
|
||||
.hero-brick__tag--toggle { cursor: pointer; }
|
||||
.hero-brick__tag--toggle:hover {
|
||||
background: color-mix(in srgb, var(--primary, #0d9488) 10%, transparent);
|
||||
border-color: color-mix(in srgb, var(--primary, #0d9488) 40%, transparent);
|
||||
}
|
||||
.hero-brick__tag input[type="checkbox"] {
|
||||
accent-color: var(--primary, #0d9488);
|
||||
cursor: pointer;
|
||||
}
|
||||
/* keep old chip classes for any stale references */
|
||||
.hero-brick__chips { display: none; }
|
||||
|
||||
.hero-brick__title {
|
||||
display: block;
|
||||
@@ -510,6 +610,41 @@ body.ui-legacy .cabinet-brick--hero {
|
||||
}
|
||||
.hero-brick__chip input[type="checkbox"] { accent-color: var(--primary, #0d9488); }
|
||||
|
||||
.q-item { transition: box-shadow .15s ease, transform .12s ease; }
|
||||
.q-item.q-dragging { opacity: 0.55; box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
|
||||
.q-item.q-drop-before { box-shadow: 0 -2px 0 0 var(--primary, #0d9488) inset; }
|
||||
.q-item.q-drop-after { box-shadow: 0 2px 0 0 var(--primary, #0d9488) inset; }
|
||||
.q-drag { cursor: grab; color: var(--ink-500, #6b7280); }
|
||||
.q-drag:active { cursor: grabbing; }
|
||||
|
||||
.q-item.q-removed > *:not(.q-removed-banner) { opacity: 0.45; }
|
||||
.q-item.q-removed .q-text,
|
||||
.q-item.q-removed .q-multi,
|
||||
.q-item.q-removed .q-options,
|
||||
.q-item.q-removed .q-add-option,
|
||||
.q-item.q-removed .q-ai,
|
||||
.q-item.q-removed .q-up,
|
||||
.q-item.q-removed .q-down,
|
||||
.q-item.q-removed .q-delete,
|
||||
.q-item.q-removed .q-drag {
|
||||
pointer-events: none;
|
||||
}
|
||||
.q-item.q-removed .q-text { text-decoration: line-through; }
|
||||
.q-removed-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
padding: .35rem .6rem;
|
||||
background: color-mix(in srgb, #fff7ed 65%, transparent);
|
||||
border: 1px solid color-mix(in srgb, #fbbf24 50%, transparent);
|
||||
border-radius: .5rem;
|
||||
color: #92400e;
|
||||
font-size: .85rem;
|
||||
}
|
||||
.q-removed-banner .q-restore { pointer-events: auto; }
|
||||
|
||||
body.ui-legacy .cabinet-disclosure {
|
||||
border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
|
||||
border-radius: 1rem;
|
||||
@@ -567,10 +702,167 @@ body.ui-legacy .cabinet-disclosure__summary-sub {
|
||||
}
|
||||
|
||||
body.ui-legacy .cabinet-disclosure__body {
|
||||
padding: 0.7rem 1rem 1.05rem;
|
||||
padding: 1rem 1rem 1.25rem;
|
||||
border-top: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent);
|
||||
}
|
||||
|
||||
/* ─── Question textarea + char counter ──────────────────────────── */
|
||||
.q-text {
|
||||
padding-bottom: 1.6rem; /* space for counter */
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.q-text-counter {
|
||||
font-size: 0.68rem;
|
||||
line-height: 1;
|
||||
bottom: 6px !important;
|
||||
right: 10px !important;
|
||||
}
|
||||
|
||||
/* ─── Question editor blocks (AI panel sections) ─────────────────── */
|
||||
body.ui-legacy .question-editor-block {
|
||||
padding-top: 1rem;
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid color-mix(in srgb, var(--outline-variant) 28%, transparent);
|
||||
}
|
||||
body.ui-legacy .question-editor-block--first {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
body.ui-legacy .test-detail-subsection__title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.6rem;
|
||||
color: var(--ink-900, #111827);
|
||||
}
|
||||
body.ui-legacy .test-detail-ai-panel {
|
||||
padding: 1rem 1.1rem 1.1rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
/* ─── Option row alignment ───────────────────────────────────────── */
|
||||
.question-option-row {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.question-option-row__mark-wrap {
|
||||
padding-top: 0.45rem; /* align checkbox with first line of textarea */
|
||||
}
|
||||
.opt-text {
|
||||
line-height: 1.55;
|
||||
}
|
||||
.opt-delete {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
/* ─── Question AI overlay ────────────────────────────────────────── */
|
||||
.q-ai-overlay {
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.q-item[style*="pointer-events: none"] .q-text,
|
||||
.q-item[style*="pointer-events: none"] .opt-text {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
/* ─── Drag-and-drop import dropzone ─────────────────────────────── */
|
||||
.import-dropzone {
|
||||
transition: border-color 0.15s, background-color 0.15s;
|
||||
}
|
||||
.import-dropzone--over {
|
||||
border-color: var(--brand-500, #6366f1) !important;
|
||||
background-color: color-mix(in srgb, var(--brand-100, #e0e7ff) 40%, transparent) !important;
|
||||
}
|
||||
.import-dropzone--loading {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
.import-dropzone--loading .material-symbols-outlined {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
.import-dropzone--done {
|
||||
border-style: solid;
|
||||
border-color: var(--primary, #007168) !important;
|
||||
background-color: color-mix(in srgb, var(--primary, #007168) 6%, transparent) !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* ─── Import modal (compact, like save-modal) ───────────────────── */
|
||||
.save-modal {
|
||||
padding: 0;
|
||||
margin: 3rem auto auto;
|
||||
border: none;
|
||||
border-radius: 1rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,.18);
|
||||
max-width: 26rem;
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
.save-modal::backdrop {
|
||||
background: rgba(0,0,0,.4);
|
||||
}
|
||||
.save-modal__inner {
|
||||
padding: 1.25rem 1.25rem 1rem;
|
||||
}
|
||||
|
||||
.settings-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
.settings-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.4rem 0.25rem;
|
||||
border-bottom: 1px dashed color-mix(in srgb, var(--outline-variant) 30%, transparent);
|
||||
}
|
||||
.settings-row:last-child { border-bottom: none; }
|
||||
.settings-row--block {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.4rem;
|
||||
border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
}
|
||||
.settings-row__label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.92rem;
|
||||
color: var(--ink-700, #2c3a37);
|
||||
gap: 0.1rem;
|
||||
}
|
||||
.settings-row__hint {
|
||||
font-size: 0.78rem;
|
||||
color: #6b7d79;
|
||||
font-weight: 400;
|
||||
}
|
||||
.settings-row__input {
|
||||
width: 6.5rem;
|
||||
text-align: right;
|
||||
border-radius: 0.6rem;
|
||||
border: 1px solid var(--ink-300, #c8d2cf);
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: white;
|
||||
}
|
||||
.settings-row__input:focus {
|
||||
outline: none;
|
||||
border-color: var(--brand-500, #2bb39a);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500, #2bb39a) 18%, transparent);
|
||||
}
|
||||
.settings-radio {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.55rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.92rem;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
.settings-radio input { margin-top: 0.2rem; }
|
||||
|
||||
body.ui-legacy .test-detail-subsection {
|
||||
margin-top: 1.25rem;
|
||||
padding-top: 1.15rem;
|
||||
@@ -584,8 +876,8 @@ body.ui-legacy .test-detail-subsection--tight {
|
||||
}
|
||||
|
||||
body.ui-legacy .test-detail-subsection__title {
|
||||
margin: 0 0 0.35rem;
|
||||
font-size: 0.95rem;
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -597,8 +889,8 @@ body.ui-legacy .test-detail-hint {
|
||||
}
|
||||
|
||||
body.ui-legacy .test-detail-ai-panel {
|
||||
padding: 0.9rem 1rem;
|
||||
margin-bottom: 1.15rem;
|
||||
padding: 1rem 1.1rem 1.1rem;
|
||||
margin-bottom: 1.25rem;
|
||||
background: var(--surface-container-low);
|
||||
border: 1px solid color-mix(in srgb, var(--outline-variant) 32%, transparent);
|
||||
border-radius: 0.85rem;
|
||||
@@ -666,3 +958,69 @@ body.ui-legacy .attempts-card-list {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* ─── Version items (compact row in top section) ─────────────────── */
|
||||
body.ui-legacy .version-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.6rem;
|
||||
background: var(--surface-container-low, #f5f5f5);
|
||||
border: 1px solid var(--outline-variant, #e0e0e0);
|
||||
}
|
||||
body.ui-legacy .version-item[data-active="1"] {
|
||||
background: color-mix(in srgb, var(--primary, #007168) 8%, white);
|
||||
border-color: color-mix(in srgb, var(--primary, #007168) 25%, transparent);
|
||||
}
|
||||
body.ui-legacy .version-item__label {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
body.ui-legacy .version-item__badge {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 500;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 999px;
|
||||
background: var(--primary, #007168);
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
body.ui-legacy .version-item__date {
|
||||
font-size: 0.78rem;
|
||||
flex: 1;
|
||||
}
|
||||
body.ui-legacy .version-item__spacer {
|
||||
width: 1px;
|
||||
}
|
||||
body.ui-legacy #versions-section {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
body.ui-legacy .attempts-card-list__item {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
body.ui-legacy .attempts-card-list__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
body.ui-legacy .attempts-card-list__main {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
body.ui-legacy .attempts-card-list__main p {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
body.ui-legacy .attempts-card-list__main p + p {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
body.ui-legacy .attempts-card-list__action {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -17,6 +17,8 @@
|
||||
const $ = (sel, parent = document) => parent.querySelector(sel);
|
||||
const $$ = (sel, parent = document) => Array.from(parent.querySelectorAll(sel));
|
||||
|
||||
const MAX_OPTIONS = 8;
|
||||
|
||||
const titleEl = $('#test-title');
|
||||
const descEl = $('#test-description');
|
||||
const thresholdEl = $('#test-threshold');
|
||||
@@ -24,7 +26,8 @@
|
||||
const qCountEl = $('#q-count');
|
||||
const saveStatusEl = $('#save-status');
|
||||
const aiStatusEl = $('#ai-status');
|
||||
const chainActiveEl = $('#chain-active');
|
||||
const chainActiveEl = { checked: true, _val: true }; // display-only — реальный toggle в блоке «Показ в каталоге»
|
||||
const chainActiveDisplay = $('#chain-active-display');
|
||||
const aiTopicEl = $('#ai-topic');
|
||||
const aiQCountEl = $('#ai-q-count');
|
||||
const aiOCountEl = $('#ai-o-count');
|
||||
@@ -100,30 +103,78 @@
|
||||
$('.q-multi', node).checked = !!q.hasMultipleAnswers;
|
||||
|
||||
const optsEl = $('.q-options', node);
|
||||
(q.options || []).forEach((o) => optsEl.appendChild(renderOption(o)));
|
||||
(q.options || []).forEach((o) => optsEl.appendChild(renderOption(o, node)));
|
||||
|
||||
bindQuestionEvents(node);
|
||||
syncOptionInputTypes(node);
|
||||
updateOptionsCounter(node);
|
||||
updateAiButtonLabel(node);
|
||||
return node;
|
||||
}
|
||||
|
||||
function renderOption(o) {
|
||||
function renderOption(o, qNode) {
|
||||
const node = tplO.content.firstElementChild.cloneNode(true);
|
||||
$('.opt-text', node).value = o.text || '';
|
||||
const textEl = $('.opt-text', node);
|
||||
textEl.value = o.text || '';
|
||||
$('.opt-correct', node).checked = !!o.isCorrect;
|
||||
if (textEl && textEl.tagName === 'TEXTAREA') {
|
||||
const resize = () => autoResize(textEl);
|
||||
textEl.addEventListener('input', resize);
|
||||
requestAnimationFrame(resize);
|
||||
}
|
||||
$('.opt-delete', node).addEventListener('click', () => {
|
||||
node.remove();
|
||||
if (qNode) updateOptionsCounter(qNode);
|
||||
scheduleDirtyCheck();
|
||||
});
|
||||
return node;
|
||||
}
|
||||
|
||||
function bindQuestionEvents(node) {
|
||||
$('.q-delete', node).addEventListener('click', () => {
|
||||
if (!confirm('Удалить вопрос?')) return;
|
||||
node.remove();
|
||||
let dragSrc = null;
|
||||
function bindDragEvents(node) {
|
||||
const handle = $('.q-drag', node);
|
||||
if (handle) {
|
||||
handle.addEventListener('mousedown', () => { node.draggable = true; });
|
||||
handle.addEventListener('mouseup', () => { node.draggable = true; });
|
||||
}
|
||||
node.addEventListener('dragstart', (e) => {
|
||||
dragSrc = node;
|
||||
node.classList.add('q-dragging');
|
||||
try { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', ''); } catch {}
|
||||
});
|
||||
node.addEventListener('dragend', () => {
|
||||
node.classList.remove('q-dragging');
|
||||
$$('#questions .q-item').forEach((li) => li.classList.remove('q-drop-before', 'q-drop-after'));
|
||||
dragSrc = null;
|
||||
renumber();
|
||||
scheduleDirtyCheck();
|
||||
});
|
||||
node.addEventListener('dragover', (e) => {
|
||||
if (!dragSrc || dragSrc === node) return;
|
||||
e.preventDefault();
|
||||
const rect = node.getBoundingClientRect();
|
||||
const before = (e.clientY - rect.top) < rect.height / 2;
|
||||
node.classList.toggle('q-drop-before', before);
|
||||
node.classList.toggle('q-drop-after', !before);
|
||||
});
|
||||
node.addEventListener('dragleave', () => {
|
||||
node.classList.remove('q-drop-before', 'q-drop-after');
|
||||
});
|
||||
node.addEventListener('drop', (e) => {
|
||||
if (!dragSrc || dragSrc === node) return;
|
||||
e.preventDefault();
|
||||
const rect = node.getBoundingClientRect();
|
||||
const before = (e.clientY - rect.top) < rect.height / 2;
|
||||
node.classList.remove('q-drop-before', 'q-drop-after');
|
||||
node.parentNode.insertBefore(dragSrc, before ? node : node.nextSibling);
|
||||
});
|
||||
}
|
||||
|
||||
function bindQuestionEvents(node) {
|
||||
bindDragEvents(node);
|
||||
$('.q-delete', node).addEventListener('click', () => {
|
||||
markQuestionRemoved(node);
|
||||
});
|
||||
$('.q-up', node).addEventListener('click', () => {
|
||||
if (node.previousElementSibling) {
|
||||
node.parentNode.insertBefore(node, node.previousElementSibling);
|
||||
@@ -138,26 +189,122 @@
|
||||
scheduleDirtyCheck();
|
||||
}
|
||||
});
|
||||
$('.q-add-option', node).addEventListener('click', () => {
|
||||
$('.q-options', node).appendChild(renderOption({ text: '', isCorrect: false }));
|
||||
const addOptBtn = $('.q-add-option', node);
|
||||
addOptBtn.addEventListener('click', () => {
|
||||
const optsEl = $('.q-options', node);
|
||||
const count = $$('.opt-item', node).length;
|
||||
if (count >= MAX_OPTIONS) return;
|
||||
optsEl.appendChild(renderOption({ text: '', isCorrect: false }, node));
|
||||
syncOptionInputTypes(node);
|
||||
updateOptionsCounter(node);
|
||||
scheduleDirtyCheck();
|
||||
});
|
||||
|
||||
// Кнопка очистки вопроса
|
||||
const clearBtn = $('.q-clear', node);
|
||||
if (clearBtn) {
|
||||
clearBtn.addEventListener('click', () => {
|
||||
const qTextEl = $('.q-text', node);
|
||||
qTextEl.value = '';
|
||||
autoResize(qTextEl);
|
||||
$$('.opt-text', node).forEach((t) => { t.value = ''; autoResize(t); });
|
||||
$$('.opt-correct', node).forEach((c) => { c.checked = false; });
|
||||
updateAiButtonLabel(node);
|
||||
scheduleDirtyCheck();
|
||||
});
|
||||
}
|
||||
|
||||
// Умная кнопка AI — label зависит от наличия текста
|
||||
const qTextEl2 = $('.q-text', node);
|
||||
if (qTextEl2) {
|
||||
qTextEl2.addEventListener('input', () => updateAiButtonLabel(node));
|
||||
}
|
||||
|
||||
$('.q-ai', node).addEventListener('click', () => aiGenerateQuestion(node));
|
||||
$('.q-multi', node).addEventListener('change', () => {
|
||||
syncOptionInputTypes(node);
|
||||
scheduleDirtyCheck();
|
||||
});
|
||||
|
||||
// Счётчик символов у textarea вопроса
|
||||
const qTextEl = $('.q-text', node);
|
||||
const qCounter = $('.q-text-counter', node);
|
||||
if (qTextEl && qCounter) {
|
||||
const updateCounter = () => {
|
||||
const len = qTextEl.value.length;
|
||||
const max = parseInt(qTextEl.getAttribute('maxlength') || '500', 10);
|
||||
qCounter.textContent = len > 200 ? `${len}/${max}` : '';
|
||||
qCounter.style.color = len > 450 ? '#ef4444' : len > 350 ? '#f59e0b' : '';
|
||||
autoResize(qTextEl);
|
||||
};
|
||||
qTextEl.addEventListener('input', () => { updateCounter(); scheduleDirtyCheck(); });
|
||||
requestAnimationFrame(updateCounter);
|
||||
}
|
||||
}
|
||||
|
||||
function updateAiButtonLabel(node) {
|
||||
const qText = $('.q-text', node);
|
||||
const label = $('.q-ai-label', node);
|
||||
if (!qText || !label) return;
|
||||
const hasText = qText.value.trim().length > 0;
|
||||
label.textContent = hasText ? 'Улучшить' : 'Сгенерировать';
|
||||
}
|
||||
|
||||
function updateOptionsCounter(node) {
|
||||
const count = $$('.opt-item', node).length;
|
||||
const countEl = $('.q-options-count', node);
|
||||
const addBtn = $('.q-add-option', node);
|
||||
const labelEl = $('.q-add-option-label', node);
|
||||
if (countEl) countEl.textContent = count > 0 ? `${count}/${MAX_OPTIONS}` : '';
|
||||
if (addBtn) {
|
||||
const atMax = count >= MAX_OPTIONS;
|
||||
addBtn.disabled = atMax;
|
||||
addBtn.style.opacity = atMax ? '0.4' : '';
|
||||
if (labelEl) labelEl.textContent = atMax ? 'Лимит вариантов' : 'Добавить вариант';
|
||||
}
|
||||
}
|
||||
|
||||
function renumber() {
|
||||
$$('#questions .q-item').forEach((li, i) => {
|
||||
$('.q-num', li).textContent = `Вопрос #${i + 1}`;
|
||||
let i = 0;
|
||||
$$('#questions .q-item').forEach((li) => {
|
||||
const removed = li.classList.contains('q-removed');
|
||||
if (removed) {
|
||||
$$('.q-num', li).forEach((el) => { el.textContent = 'Удалён'; });
|
||||
return;
|
||||
}
|
||||
i += 1;
|
||||
$$('.q-num', li).forEach((el) => { el.textContent = `Вопрос #${i}`; });
|
||||
});
|
||||
const n = $$('#questions .q-item').length;
|
||||
if (qCountEl) qCountEl.textContent = n;
|
||||
if (qCountEl) qCountEl.textContent = i;
|
||||
const mirror = document.getElementById('q-count-mirror');
|
||||
if (mirror) mirror.textContent = n;
|
||||
if (mirror) mirror.textContent = i;
|
||||
}
|
||||
|
||||
function markQuestionRemoved(node) {
|
||||
if (node.classList.contains('q-removed')) return;
|
||||
node.classList.add('q-removed');
|
||||
node.draggable = false;
|
||||
let banner = $('.q-removed-banner', node);
|
||||
if (!banner) {
|
||||
banner = document.createElement('div');
|
||||
banner.className = 'q-removed-banner';
|
||||
banner.innerHTML =
|
||||
'<span>Вопрос будет удалён при сохранении</span>' +
|
||||
'<button type="button" class="q-restore btn btn-ghost btn--sm">Отменить</button>';
|
||||
node.prepend(banner);
|
||||
$('.q-restore', banner).addEventListener('click', () => restoreQuestion(node));
|
||||
}
|
||||
renumber();
|
||||
scheduleDirtyCheck();
|
||||
}
|
||||
|
||||
function restoreQuestion(node) {
|
||||
node.classList.remove('q-removed');
|
||||
node.draggable = true;
|
||||
const banner = $('.q-removed-banner', node);
|
||||
if (banner) banner.remove();
|
||||
renumber();
|
||||
scheduleDirtyCheck();
|
||||
}
|
||||
|
||||
function autoResize(el) {
|
||||
@@ -166,20 +313,71 @@
|
||||
el.style.height = el.scrollHeight + 'px';
|
||||
}
|
||||
|
||||
function syncThresholdMirror() {
|
||||
const m = document.getElementById('threshold-mirror');
|
||||
if (!m) return;
|
||||
const v = (thresholdEl && thresholdEl.value !== '') ? thresholdEl.value : '—';
|
||||
m.textContent = v;
|
||||
}
|
||||
|
||||
function loadInitial() {
|
||||
titleEl.value = initial.test.title || '';
|
||||
descEl.value = initial.test.description || '';
|
||||
autoResize(titleEl);
|
||||
autoResize(descEl);
|
||||
if (thresholdEl) {
|
||||
thresholdEl.addEventListener('input', syncThresholdMirror);
|
||||
thresholdEl.addEventListener('change', syncThresholdMirror);
|
||||
}
|
||||
if (titleEl && titleEl.tagName === 'TEXTAREA') {
|
||||
titleEl.addEventListener('input', () => autoResize(titleEl));
|
||||
titleEl.addEventListener('input', () => {
|
||||
autoResize(titleEl);
|
||||
// Синхронизируем поле темы, только если оно не было изменено вручную
|
||||
if (aiTopicEl && aiTopicEl.dataset.userEdited !== '1') {
|
||||
aiTopicEl.value = titleEl.value;
|
||||
}
|
||||
});
|
||||
titleEl.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') e.preventDefault();
|
||||
});
|
||||
}
|
||||
if (aiTopicEl) {
|
||||
aiTopicEl.addEventListener('input', () => {
|
||||
aiTopicEl.dataset.userEdited = '1';
|
||||
autoResize(aiTopicEl);
|
||||
});
|
||||
}
|
||||
if (descEl) descEl.addEventListener('input', () => autoResize(descEl));
|
||||
if (docUserHint) docUserHint.addEventListener('input', () => autoResize(docUserHint));
|
||||
thresholdEl.value =
|
||||
initial.test.passingThreshold == null ? '' : Number(initial.test.passingThreshold);
|
||||
syncThresholdMirror();
|
||||
|
||||
const timeLimitEl = document.getElementById('test-time-limit');
|
||||
const hintsEl = document.getElementById('test-hints-enabled');
|
||||
const hintsRow = document.getElementById('test-hints-row');
|
||||
const resultModeRadios = document.querySelectorAll('input[name="result-mode"]');
|
||||
|
||||
if (timeLimitEl) {
|
||||
timeLimitEl.value = initial.test.timeLimit == null ? '' : Number(initial.test.timeLimit);
|
||||
timeLimitEl.addEventListener('input', scheduleDirtyCheck);
|
||||
}
|
||||
const initMode = (initial.test.resultMode === 'immediate') ? 'immediate' : 'end';
|
||||
resultModeRadios.forEach((r) => {
|
||||
r.checked = (r.value === initMode);
|
||||
r.addEventListener('change', () => {
|
||||
const mode = document.querySelector('input[name="result-mode"]:checked');
|
||||
const isImmediate = mode && mode.value === 'immediate';
|
||||
if (hintsRow) hintsRow.style.display = isImmediate ? '' : 'none';
|
||||
if (hintsEl && !isImmediate) hintsEl.checked = false;
|
||||
scheduleDirtyCheck();
|
||||
});
|
||||
});
|
||||
if (hintsEl) {
|
||||
hintsEl.checked = !!initial.test.hintsEnabled;
|
||||
hintsEl.addEventListener('change', scheduleDirtyCheck);
|
||||
}
|
||||
if (hintsRow) hintsRow.style.display = (initMode === 'immediate') ? '' : 'none';
|
||||
|
||||
questionsEl.innerHTML = '';
|
||||
(initial.questions || []).forEach((q) => questionsEl.appendChild(renderQuestion(q)));
|
||||
@@ -187,6 +385,7 @@
|
||||
if (aiTopicEl && !aiTopicEl.value.trim()) {
|
||||
aiTopicEl.value = initial.test.title || '';
|
||||
}
|
||||
if (aiTopicEl) requestAnimationFrame(() => autoResize(aiTopicEl));
|
||||
}
|
||||
|
||||
function fmtDt(iso) {
|
||||
@@ -207,7 +406,7 @@
|
||||
// ─── collect ───────────────────────────────────────────────────────
|
||||
|
||||
function collectPayload() {
|
||||
const questions = $$('#questions .q-item').map((li, i) => ({
|
||||
const questions = $$('#questions .q-item:not(.q-removed)').map((li, i) => ({
|
||||
text: $('.q-text', li).value.trim(),
|
||||
question_order: i + 1,
|
||||
hasMultipleAnswers: $('.q-multi', li).checked,
|
||||
@@ -224,6 +423,17 @@
|
||||
};
|
||||
const t = thresholdEl.value;
|
||||
if (t !== '' && Number.isFinite(Number(t))) payload.passingThreshold = Number(t);
|
||||
|
||||
const timeLimitEl = document.getElementById('test-time-limit');
|
||||
if (timeLimitEl) {
|
||||
const tl = timeLimitEl.value;
|
||||
payload.timeLimit = (tl === '' ? null : Math.max(0, Number(tl) || 0));
|
||||
}
|
||||
const modeEl = document.querySelector('input[name="result-mode"]:checked');
|
||||
payload.resultMode = (modeEl && modeEl.value === 'immediate') ? 'immediate' : 'end';
|
||||
const hintsEl = document.getElementById('test-hints-enabled');
|
||||
payload.hintsEnabled = !!(hintsEl && hintsEl.checked && payload.resultMode === 'immediate');
|
||||
|
||||
return payload;
|
||||
}
|
||||
|
||||
@@ -271,11 +481,48 @@
|
||||
});
|
||||
if (r2.ok) chainActive = chainActiveEl.checked;
|
||||
}
|
||||
saveStatusEl.textContent = data.forked
|
||||
? 'Сохранено (создана новая версия — есть попытки прохождения).'
|
||||
: 'Сохранено.';
|
||||
resetBaselineDraft();
|
||||
setTimeout(() => (saveStatusEl.textContent = ''), 4000);
|
||||
const msg = data.forked
|
||||
? 'Сохранено. Создана новая версия — у теста есть попытки прохождения.'
|
||||
: 'Изменения сохранены.';
|
||||
const saveModal = document.getElementById('save-modal');
|
||||
const saveMsg = document.getElementById('save-modal-msg');
|
||||
|
||||
const hintsEl = document.getElementById('test-hints-enabled');
|
||||
const modeEl = document.querySelector('input[name="result-mode"]:checked');
|
||||
const wantsHints = !!(hintsEl && hintsEl.checked) && modeEl && modeEl.value === 'immediate';
|
||||
if (wantsHints) {
|
||||
try {
|
||||
const sr = await fetch(`/api/tests/${TEST_ID}/ai/hints/status`);
|
||||
const st = await sr.json().catch(() => ({}));
|
||||
if (sr.ok && Number(st.missing) > 0) {
|
||||
saveStatusEl.textContent = `Создаём ИИ-подсказки (${st.missing} из ${st.total})…`;
|
||||
const gr = await fetch(`/api/tests/${TEST_ID}/ai/hints/generate`, { method: 'POST' });
|
||||
const gd = await gr.json().catch(() => ({}));
|
||||
if (!gr.ok) {
|
||||
saveStatusEl.textContent = '';
|
||||
alert(gd.error || 'Не удалось сгенерировать подсказки.');
|
||||
if (saveMsg) saveMsg.textContent = msg + ' (часть подсказок не создана)';
|
||||
if (saveModal) saveModal.showModal();
|
||||
return;
|
||||
}
|
||||
const tail = gd.failed
|
||||
? ` Подсказки: ${gd.generated} создано, ${gd.failed} не удалось.`
|
||||
: ` Подсказки созданы (${gd.generated}).`;
|
||||
if (saveMsg) saveMsg.textContent = msg + tail;
|
||||
} else {
|
||||
if (saveMsg) saveMsg.textContent = msg;
|
||||
}
|
||||
} catch (err) {
|
||||
if (saveMsg) saveMsg.textContent = msg + ' (ИИ-подсказки не созданы)';
|
||||
}
|
||||
} else {
|
||||
if (saveMsg) saveMsg.textContent = msg;
|
||||
}
|
||||
saveStatusEl.textContent = '';
|
||||
if (saveModal) {
|
||||
saveModal.showModal();
|
||||
}
|
||||
} catch (e) {
|
||||
saveStatusEl.textContent = '';
|
||||
alert(e.message || 'Не удалось сохранить.');
|
||||
@@ -288,6 +535,16 @@
|
||||
alert('Укажите тему.');
|
||||
return;
|
||||
}
|
||||
// Предупреждение, если в тесте уже есть вопросы или заполненное название/описание
|
||||
const hasContent = questionsEl.children.length > 0
|
||||
|| titleEl.value.trim()
|
||||
|| descEl.value.trim();
|
||||
if (hasContent) {
|
||||
const ok = confirm(
|
||||
'Полная генерация заменит текущее название, описание и все вопросы.\n\nПродолжить?'
|
||||
);
|
||||
if (!ok) return;
|
||||
}
|
||||
const nQ = Math.min(30, Math.max(1, Number(aiQCountEl?.value || 7) || 7));
|
||||
const nO = Math.min(8, Math.max(2, Number(aiOCountEl?.value || 3) || 3));
|
||||
const shape = Array.from({ length: nQ }, () => ({
|
||||
@@ -325,48 +582,225 @@
|
||||
}
|
||||
});
|
||||
|
||||
// ─── импорт документа (E1.3) ───────────────────────────────────
|
||||
// ─── импорт документа с drag-and-drop (E1.3) ──────────────────
|
||||
|
||||
$('#ai-import-file').addEventListener('change', async (ev) => {
|
||||
const file = ev.target.files && ev.target.files[0];
|
||||
ev.target.value = '';
|
||||
const importDropzone = $('#ai-import-dropzone');
|
||||
const importDropzoneLabel = $('#ai-import-dropzone-label');
|
||||
const docUserHint = $('#doc-user-hint');
|
||||
const docGenerateBtn = $('#doc-generate-btn');
|
||||
const importModal = $('#import-modal');
|
||||
const importModalTitle = $('#import-modal-title');
|
||||
const importModalBody = $('#import-modal-body');
|
||||
const importModalActions = $('#import-modal-actions');
|
||||
|
||||
let _extractedText = '';
|
||||
let _extractedFileName = '';
|
||||
|
||||
function openImportModal(title, bodyHtml, actions) {
|
||||
importModalTitle.textContent = title;
|
||||
importModalBody.innerHTML = bodyHtml;
|
||||
importModalActions.innerHTML = '';
|
||||
actions.forEach(({ label, onClick, primary }) => {
|
||||
const btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.textContent = label;
|
||||
btn.className = primary
|
||||
? 'px-4 py-2 rounded-lg bg-brand-600 hover:bg-brand-700 text-white text-sm font-medium'
|
||||
: 'px-4 py-2 rounded-lg bg-white border border-ink-300 hover:bg-ink-50 text-ink-700 text-sm';
|
||||
btn.addEventListener('click', onClick);
|
||||
importModalActions.appendChild(btn);
|
||||
});
|
||||
importModal.showModal();
|
||||
}
|
||||
|
||||
// Фаза 1: выбрать файл → извлечь текст, обновить метку дропзоны
|
||||
async function handleImportFile(file) {
|
||||
if (!file) return;
|
||||
aiStatusEl.textContent = `Загружаем «${file.name}»…`;
|
||||
importDropzone.classList.add('import-dropzone--loading');
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append('file', file);
|
||||
const r = await fetch('/api/tests/import/document', { method: 'POST', body: fd });
|
||||
const data = await r.json();
|
||||
if (!r.ok) throw new Error(data.error || 'Не удалось импортировать.');
|
||||
const g = data.generation || {};
|
||||
if (!g.available) {
|
||||
aiStatusEl.textContent = '';
|
||||
const msg = g.message || 'AI недоступен.';
|
||||
const preview = (g.textPreview || data.extractedText || '').slice(0, 600);
|
||||
alert(msg + (preview ? '\n\nПервые 600 символов:\n' + preview : ''));
|
||||
return;
|
||||
}
|
||||
const ok = confirm(
|
||||
`${g.message}\n\nПрименить как новый черновик?\n` +
|
||||
`Текущие вопросы будут заменены.`,
|
||||
);
|
||||
if (!ok) {
|
||||
aiStatusEl.textContent = '';
|
||||
return;
|
||||
}
|
||||
const draft = g.draft;
|
||||
if (draft.title) titleEl.value = draft.title;
|
||||
if (draft.description) descEl.value = draft.description;
|
||||
questionsEl.innerHTML = '';
|
||||
(draft.questions || []).forEach((q) => questionsEl.appendChild(renderQuestion(q)));
|
||||
renumber();
|
||||
scheduleDirtyCheck();
|
||||
aiStatusEl.textContent = `Применено: ${draft.questions?.length || 0} вопросов.`;
|
||||
setTimeout(() => (aiStatusEl.textContent = ''), 4000);
|
||||
if (!r.ok) throw new Error(data.error || 'Не удалось загрузить файл.');
|
||||
_extractedText = data.extractedText || '';
|
||||
_extractedFileName = file.name;
|
||||
aiStatusEl.textContent = `Файл загружен: «${file.name}» · ${data.textLength ?? 0} символов`;
|
||||
if (importDropzoneLabel) importDropzoneLabel.textContent = `✓ ${file.name}`;
|
||||
importDropzone.classList.add('import-dropzone--done');
|
||||
} catch (e) {
|
||||
aiStatusEl.textContent = '';
|
||||
alert(e.message || 'Не удалось импортировать.');
|
||||
openImportModal(
|
||||
'Ошибка загрузки',
|
||||
`<p class="text-red-700">${escHtml(e.message || 'Не удалось загрузить файл.')}</p>`,
|
||||
[{ label: 'Закрыть', onClick: () => importModal.close() }],
|
||||
);
|
||||
} finally {
|
||||
importDropzone.classList.remove('import-dropzone--loading');
|
||||
}
|
||||
}
|
||||
|
||||
// Фаза 2: сгенерировать тест из извлечённого текста + подсказки
|
||||
async function handleGenerateFromDoc() {
|
||||
if (!_extractedText) return;
|
||||
const userHint = docUserHint ? docUserHint.value.trim() : '';
|
||||
docGenerateBtn.disabled = true;
|
||||
docGenerateBtn.textContent = 'Генерируем…';
|
||||
aiStatusEl.textContent = 'Генерируем тест из документа…';
|
||||
try {
|
||||
const r = await fetch('/api/tests/generate-from-extracted', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ extractedText: _extractedText, userHint }),
|
||||
});
|
||||
const data = await r.json();
|
||||
if (!r.ok) throw new Error(data.error || 'Ошибка генерации.');
|
||||
const g = data.generation || {};
|
||||
aiStatusEl.textContent = '';
|
||||
|
||||
if (!g.available) {
|
||||
openImportModal(
|
||||
'AI недоступен',
|
||||
`<p class="mb-2 text-amber-700 bg-amber-50 border border-amber-200 rounded px-3 py-2 text-xs">
|
||||
${escHtml(g.message || 'AI недоступен — ключ не настроен.')}
|
||||
</p>`,
|
||||
[{ label: 'Закрыть', onClick: () => importModal.close() }],
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const draft = g.draft || {};
|
||||
const qs = draft.questions || [];
|
||||
const qPreview = qs.slice(0, 4).map((q, i) =>
|
||||
`<li class="text-xs text-ink-600">${i + 1}. ${escHtml((q.text || '').slice(0, 80))}${(q.text || '').length > 80 ? '…' : ''}</li>`
|
||||
).join('');
|
||||
const moreCount = qs.length > 4 ? qs.length - 4 : 0;
|
||||
const bodyHtml = `
|
||||
${draft.title ? `<p class="font-medium text-ink-800 mb-1">${escHtml(draft.title)}</p>` : ''}
|
||||
${draft.description ? `<p class="text-xs text-ink-500 mb-2">${escHtml(draft.description)}</p>` : ''}
|
||||
<p class="text-xs text-ink-500 mb-1">Вопросов: <b>${qs.length}</b></p>
|
||||
${qs.length ? `<ul class="space-y-0.5 mb-1">${qPreview}</ul>
|
||||
${moreCount ? `<p class="text-xs text-ink-400">…и ещё ${moreCount}</p>` : ''}` : ''}
|
||||
<p class="mt-3 text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded px-3 py-2">
|
||||
Текущие вопросы теста будут <b>заменены</b>.
|
||||
</p>`;
|
||||
|
||||
openImportModal(
|
||||
`Черновик из «${escHtml(_extractedFileName)}»`,
|
||||
bodyHtml,
|
||||
[
|
||||
{
|
||||
label: 'Применить',
|
||||
primary: true,
|
||||
onClick: () => {
|
||||
importModal.close();
|
||||
if (draft.title) { titleEl.value = draft.title; autoResize(titleEl); }
|
||||
if (draft.description) { descEl.value = draft.description; autoResize(descEl); }
|
||||
questionsEl.innerHTML = '';
|
||||
qs.forEach((q) => questionsEl.appendChild(renderQuestion(q)));
|
||||
renumber();
|
||||
scheduleDirtyCheck();
|
||||
aiStatusEl.textContent = `Применено: ${qs.length} вопросов.`;
|
||||
setTimeout(() => (aiStatusEl.textContent = ''), 4000);
|
||||
// Сброс зоны загрузки
|
||||
_extractedText = '';
|
||||
_extractedFileName = '';
|
||||
if (importDropzoneLabel) importDropzoneLabel.textContent = 'Перетащите файл сюда или нажмите';
|
||||
importDropzone.classList.remove('import-dropzone--done');
|
||||
if (docUserHint) docUserHint.value = '';
|
||||
aiStatusEl.textContent = '';
|
||||
},
|
||||
},
|
||||
{ label: 'Отмена', onClick: () => importModal.close() },
|
||||
],
|
||||
);
|
||||
} catch (e) {
|
||||
aiStatusEl.textContent = '';
|
||||
openImportModal(
|
||||
'Ошибка генерации',
|
||||
`<p class="text-red-700">${escHtml(e.message || 'Не удалось сгенерировать тест.')}</p>`,
|
||||
[{ label: 'Закрыть', onClick: () => importModal.close() }],
|
||||
);
|
||||
} finally {
|
||||
if (docGenerateBtn) {
|
||||
docGenerateBtn.disabled = false;
|
||||
docGenerateBtn.innerHTML = '<span class="material-symbols-outlined text-base" style="vertical-align:-3px;">auto_awesome</span> Сгенерировать из документа';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (docGenerateBtn) docGenerateBtn.addEventListener('click', () => {
|
||||
if (!_extractedText) {
|
||||
// Файл ещё не выбран — открываем picker, генерация запустится после загрузки
|
||||
const fileInput = $('#ai-import-file');
|
||||
if (fileInput) {
|
||||
const onchange = async (ev) => {
|
||||
fileInput.removeEventListener('change', onchange);
|
||||
const f = ev.target.files && ev.target.files[0];
|
||||
ev.target.value = '';
|
||||
await handleImportFile(f);
|
||||
if (_extractedText) handleGenerateFromDoc();
|
||||
};
|
||||
fileInput.addEventListener('change', onchange);
|
||||
fileInput.click();
|
||||
}
|
||||
} else {
|
||||
handleGenerateFromDoc();
|
||||
}
|
||||
});
|
||||
|
||||
$('#ai-import-file').addEventListener('change', (ev) => {
|
||||
const file = ev.target.files && ev.target.files[0];
|
||||
ev.target.value = '';
|
||||
handleImportFile(file);
|
||||
});
|
||||
|
||||
// Drag-and-drop на зону загрузки
|
||||
if (importDropzone) {
|
||||
importDropzone.addEventListener('dragenter', (e) => {
|
||||
e.preventDefault();
|
||||
importDropzone.classList.add('import-dropzone--over');
|
||||
});
|
||||
importDropzone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
importDropzone.classList.add('import-dropzone--over');
|
||||
});
|
||||
importDropzone.addEventListener('dragleave', (e) => {
|
||||
if (!importDropzone.contains(e.relatedTarget)) {
|
||||
importDropzone.classList.remove('import-dropzone--over');
|
||||
}
|
||||
});
|
||||
importDropzone.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
importDropzone.classList.remove('import-dropzone--over');
|
||||
const file = e.dataTransfer?.files?.[0];
|
||||
if (!file) return;
|
||||
const allowed = ['.pdf', '.docx', '.txt', '.md'];
|
||||
const ext = ('.' + file.name.split('.').pop()).toLowerCase();
|
||||
if (!allowed.includes(ext)) {
|
||||
aiStatusEl.textContent = `Формат «${ext}» не поддерживается.`;
|
||||
setTimeout(() => (aiStatusEl.textContent = ''), 3000);
|
||||
return;
|
||||
}
|
||||
handleImportFile(file);
|
||||
});
|
||||
}
|
||||
|
||||
// Drag-and-drop на всю страницу (когда перетаскивают извне браузера)
|
||||
document.addEventListener('dragover', (e) => { e.preventDefault(); });
|
||||
document.addEventListener('drop', (e) => {
|
||||
if (importDropzone && importDropzone.contains(e.target)) return; // уже обработано
|
||||
e.preventDefault();
|
||||
const file = e.dataTransfer?.files?.[0];
|
||||
if (!file) return;
|
||||
const allowed = ['.pdf', '.docx', '.txt', '.md'];
|
||||
const ext = ('.' + file.name.split('.').pop()).toLowerCase();
|
||||
if (!allowed.includes(ext)) return;
|
||||
// Подсвечиваем зону и обрабатываем
|
||||
importDropzone?.classList.add('import-dropzone--over');
|
||||
setTimeout(() => importDropzone?.classList.remove('import-dropzone--over'), 600);
|
||||
handleImportFile(file);
|
||||
});
|
||||
|
||||
// ─── AI v2 (E1.8): generate-by-title / check / improve ─────────
|
||||
@@ -388,6 +822,34 @@
|
||||
const modalActions = $('#ai-modal-actions');
|
||||
$('#ai-modal-close').addEventListener('click', () => modal.close());
|
||||
|
||||
const saveModalEl = document.getElementById('save-modal');
|
||||
const saveStayBtn = document.getElementById('save-modal-stay');
|
||||
const saveGoBtn = document.getElementById('save-modal-go');
|
||||
if (saveStayBtn) saveStayBtn.addEventListener('click', () => saveModalEl.close());
|
||||
if (saveGoBtn) saveGoBtn.addEventListener('click', () => { window.location.href = '/tests'; });
|
||||
|
||||
function doCancel() {
|
||||
if (isDirty()) {
|
||||
if (!confirm('Есть несохранённые изменения. Уйти без сохранения?')) return;
|
||||
}
|
||||
window.location.href = '/tests';
|
||||
}
|
||||
|
||||
const cancelBtn = document.getElementById('btn-cancel');
|
||||
if (cancelBtn) cancelBtn.addEventListener('click', doCancel);
|
||||
|
||||
const cancelBtnInline = document.getElementById('btn-cancel-inline');
|
||||
if (cancelBtnInline) cancelBtnInline.addEventListener('click', doCancel);
|
||||
|
||||
// Кнопка «Сохранить» под вопросами — дублирует основную
|
||||
const saveDraftInlineBtn = document.getElementById('save-draft-inline');
|
||||
const saveStatusInlineEl = document.getElementById('save-status-inline');
|
||||
if (saveDraftInlineBtn) {
|
||||
saveDraftInlineBtn.addEventListener('click', () => {
|
||||
document.getElementById('save-draft')?.click();
|
||||
});
|
||||
}
|
||||
|
||||
function openModal(title, bodyHtml, actions) {
|
||||
modalTitle.textContent = title;
|
||||
modalBody.innerHTML = bodyHtml;
|
||||
@@ -610,11 +1072,39 @@
|
||||
});
|
||||
|
||||
async function aiGenerateQuestion(node) {
|
||||
const qText = $('.q-text', node).value.trim();
|
||||
const optsCount = Math.max(2, $$('.opt-item', node).length || 4);
|
||||
const qTextEl = $('.q-text', node);
|
||||
const qText = qTextEl.value.trim();
|
||||
const existingOpts = $$('.opt-item', node);
|
||||
const optsCount = Math.max(2, existingOpts.length || 4);
|
||||
const multi = $('.q-multi', node).checked;
|
||||
aiStatusEl.textContent = 'AI: один вопрос…';
|
||||
const overlay = $('.q-ai-overlay', node);
|
||||
|
||||
// Показываем оверлей
|
||||
overlay?.classList.remove('hidden');
|
||||
node.style.pointerEvents = 'none';
|
||||
|
||||
try {
|
||||
// Собираем варианты с их состоянием
|
||||
const existingOptions = existingOpts.map((op) => ({
|
||||
text: $('.opt-text', op).value.trim(),
|
||||
isCorrect: $('.opt-correct', op).checked,
|
||||
}));
|
||||
const emptySlots = existingOptions.filter((o) => !o.text).length;
|
||||
const filledSlots = existingOptions.filter((o) => o.text).length;
|
||||
|
||||
// Выбираем режим:
|
||||
// - нет текста вопроса → full
|
||||
// - есть вопрос + есть пустые варианты (и хоть один заполнен) → distractors
|
||||
// - есть вопрос, все варианты заполнены или вариантов нет → rephrase
|
||||
let requestMode;
|
||||
if (!qText) {
|
||||
requestMode = 'full';
|
||||
} else if (emptySlots > 0 && filledSlots > 0) {
|
||||
requestMode = 'distractors';
|
||||
} else {
|
||||
requestMode = 'rephrase';
|
||||
}
|
||||
|
||||
const r = await fetch(`/api/tests/${TEST_ID}/ai/generate-question`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
@@ -624,86 +1114,154 @@
|
||||
questionText: qText,
|
||||
optionsCount: optsCount,
|
||||
hasMultipleAnswers: multi,
|
||||
mode: requestMode,
|
||||
existingOptions: qText ? existingOptions : undefined,
|
||||
}),
|
||||
});
|
||||
const data = await r.json();
|
||||
if (!r.ok) throw new Error(data.error || 'AI: ошибка.');
|
||||
$('.q-text', node).value = data.text || '';
|
||||
if (data.mode === 'full' && Array.isArray(data.options)) {
|
||||
const optsEl = $('.q-options', node);
|
||||
optsEl.innerHTML = '';
|
||||
data.options.forEach((o) => optsEl.appendChild(renderOption(o)));
|
||||
$('.q-multi', node).checked = !!data.hasMultipleAnswers;
|
||||
|
||||
// Обновляем текст вопроса (кроме режима дистракторов — текст не меняем)
|
||||
if (data.mode !== 'distractors') {
|
||||
qTextEl.value = data.text || qText;
|
||||
autoResize(qTextEl);
|
||||
}
|
||||
|
||||
const optsEl = $('.q-options', node);
|
||||
if (data.mode === 'full' && Array.isArray(data.options) && data.options.length) {
|
||||
// Полная замена вариантов
|
||||
optsEl.innerHTML = '';
|
||||
data.options.forEach((o) => optsEl.appendChild(renderOption(o, node)));
|
||||
$('.q-multi', node).checked = !!data.hasMultipleAnswers;
|
||||
} else if (data.mode === 'distractors' && Array.isArray(data.options) && data.options.length) {
|
||||
// Заполняем только пустые слоты
|
||||
let dIdx = 0;
|
||||
existingOpts.forEach((op) => {
|
||||
const t = $('.opt-text', op);
|
||||
if (!t.value.trim() && dIdx < data.options.length) {
|
||||
t.value = data.options[dIdx].text || '';
|
||||
autoResize(t);
|
||||
dIdx++;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
syncOptionInputTypes(node);
|
||||
updateOptionsCounter(node);
|
||||
updateAiButtonLabel(node);
|
||||
scheduleDirtyCheck();
|
||||
aiStatusEl.textContent = data.mode === 'full' ? 'AI: вопрос сгенерирован.' : 'AI: формулировка обновлена.';
|
||||
setTimeout(() => (aiStatusEl.textContent = ''), 4000);
|
||||
} catch (e) {
|
||||
aiStatusEl.textContent = '';
|
||||
alert(e.message || 'AI: ошибка.');
|
||||
} finally {
|
||||
overlay?.classList.add('hidden');
|
||||
node.style.pointerEvents = '';
|
||||
}
|
||||
}
|
||||
|
||||
// ─── chain active state (грузим summary, чтобы знать стартовое значение) ───
|
||||
|
||||
function updateChainActiveDisplay(active) {
|
||||
chainActive = !!active;
|
||||
chainActiveEl.checked = chainActive;
|
||||
if (chainActiveDisplay) {
|
||||
chainActiveDisplay.textContent = chainActive ? '✓ Активна в каталоге' : 'Скрыта из каталога';
|
||||
chainActiveDisplay.style.color = chainActive ? '' : 'var(--ink-500, #6b7280)';
|
||||
}
|
||||
}
|
||||
|
||||
fetch(`/api/tests/${TEST_ID}/summary`)
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
if (data && data.test && typeof data.test.chainActive === 'boolean') {
|
||||
chainActive = data.test.chainActive;
|
||||
chainActiveEl.checked = chainActive;
|
||||
updateChainActiveDisplay(data.test.chainActive);
|
||||
} else {
|
||||
chainActiveEl.checked = true;
|
||||
chainActive = true;
|
||||
updateChainActiveDisplay(true);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
chainActiveEl.checked = true;
|
||||
});
|
||||
.catch(() => { updateChainActiveDisplay(true); });
|
||||
|
||||
function renderVersions(rows) {
|
||||
if (!versionsListEl) return;
|
||||
versionsListEl.innerHTML = '';
|
||||
if (!(rows || []).length) {
|
||||
versionsListEl.innerHTML = '<li class="muted" style="font-size:.85rem;">Нет версий.</li>';
|
||||
return;
|
||||
}
|
||||
(rows || []).forEach((r) => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'surface-card version-card-list__item';
|
||||
li.className = 'version-item';
|
||||
li.dataset.versionId = r.id;
|
||||
li.dataset.active = r.is_active ? '1' : '0';
|
||||
li.innerHTML = `
|
||||
<div class="version-card-list__row">
|
||||
<div class="version-card-list__main">
|
||||
<div class="version-card-list__title-line">
|
||||
<span class="font-headline" style="font-size:1rem;">v${r.version}</span>
|
||||
${r.is_active ? '<span class="code-inline" style="font-size:0.7rem;">текущая</span>' : ''}
|
||||
</div>
|
||||
<p class="muted mono" style="margin:.4rem 0 0; font-size:.8rem;">${fmtDt(r.created_at)}</p>
|
||||
<p class="muted" style="margin:.2rem 0 0; font-size:.8rem;">Активна: ${r.is_active ? 'да' : 'нет'}</p>
|
||||
</div>
|
||||
</div>`;
|
||||
<span class="version-item__label">
|
||||
Версия ${r.version}
|
||||
${r.is_active ? '<span class="version-item__badge">активная</span>' : ''}
|
||||
</span>
|
||||
<span class="version-item__date muted">${fmtDt(r.created_at)}</span>
|
||||
${!r.is_active
|
||||
? `<button class="btn btn-ghost btn--sm version-item__activate" type="button"
|
||||
data-version-id="${escHtml(r.id)}">Сделать активной</button>`
|
||||
: '<span class="version-item__spacer"></span>'}`;
|
||||
versionsListEl.appendChild(li);
|
||||
});
|
||||
versionsListEl.querySelectorAll('.version-item__activate').forEach((btn) => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const vid = btn.dataset.versionId;
|
||||
btn.disabled = true;
|
||||
btn.textContent = '…';
|
||||
try {
|
||||
const r = await fetch(`/api/tests/${TEST_ID}/versions/${vid}/activate`, { method: 'POST' });
|
||||
if (!r.ok) throw new Error('Не удалось активировать');
|
||||
// обновить список
|
||||
const v = await fetch(`/api/tests/${TEST_ID}/versions`).then((x) => x.json()).catch(() => null);
|
||||
if (v && Array.isArray(v.versions)) renderVersions(v.versions);
|
||||
} catch (e) {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Сделать активной';
|
||||
alert(e.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderAttempts(rows) {
|
||||
if (!attemptsListEl) return;
|
||||
attemptsListEl.innerHTML = '';
|
||||
if (!(rows || []).length) {
|
||||
attemptsListEl.innerHTML = '<li class="muted" style="padding:.5rem 0; font-size:.85rem;">Прохождений ещё нет.</li>';
|
||||
return;
|
||||
}
|
||||
const statusLabel = {
|
||||
completed: null, // handled by score
|
||||
in_progress: 'Идёт',
|
||||
expired: 'Истекло',
|
||||
};
|
||||
(rows || []).forEach((a) => {
|
||||
const when = a.completedAt ? fmtDt(a.completedAt) : (a.startedAt ? fmtDt(a.startedAt) : '—');
|
||||
const result = a.status === 'completed' && a.totalQuestions != null
|
||||
? `${a.correctCount}/${a.totalQuestions}${a.passed ? ' · зачёт' : ' · незачёт'}`
|
||||
: a.status;
|
||||
let result;
|
||||
if (a.status === 'completed' && a.totalQuestions != null) {
|
||||
const verdict = a.passed ? '✓ Сдано' : '✗ Не сдано';
|
||||
const score = `${a.correctCount} из ${a.totalQuestions}`;
|
||||
result = `${verdict} · ${score}`;
|
||||
} else {
|
||||
result = statusLabel[a.status] || a.status;
|
||||
}
|
||||
const passedCls = a.status === 'completed'
|
||||
? (a.passed ? 'color:#166534;' : 'color:#991b1b;')
|
||||
: 'color:#6b7280;';
|
||||
const li = document.createElement('li');
|
||||
li.className = 'surface-card attempts-card-list__item';
|
||||
li.innerHTML = `
|
||||
<div class="attempts-card-list__row">
|
||||
<div class="attempts-card-list__main">
|
||||
<p class="muted mono" style="margin:0; font-size:.8rem;">${when}</p>
|
||||
<p style="margin:.35rem 0 0; font-weight:600;">${escHtml(a.attempterName || '—')}
|
||||
${a.attempterLogin ? `<span class="code-inline" style="font-size:11px; margin-left:6px;">${escHtml(a.attempterLogin)}</span>` : ''}
|
||||
</p>
|
||||
<p class="muted" style="margin:.25rem 0 0; font-size:.85rem;">v${a.testVersion} · ${escHtml(result)}</p>
|
||||
<p class="muted" style="margin:0; font-size:.8rem;">${when}</p>
|
||||
<p style="margin:.3rem 0 0; font-weight:600;">${escHtml(a.attempterName || a.attempterLogin || '—')}</p>
|
||||
<p style="margin:.2rem 0 0; font-size:.85rem; ${passedCls}">${escHtml(result)}</p>
|
||||
</div>
|
||||
${a.status === 'completed'
|
||||
? `<a class="btn btn-ghost btn--sm attempts-card-list__action" href="/tests/${TEST_ID}/attempts/${a.id}/review">Разбор</a>`
|
||||
: ''}
|
||||
: `<span class="muted" style="font-size:.8rem;">${statusLabel[a.status] || ''}</span>`}
|
||||
</div>`;
|
||||
attemptsListEl.appendChild(li);
|
||||
});
|
||||
@@ -720,7 +1278,7 @@
|
||||
<span class="assign-row__text">
|
||||
<span class="assign-row__fio">${escHtml(p.fio || '—')}</span>
|
||||
${p.webLogin ? `<span class="assign-row__login">${escHtml(p.webLogin)}</span>` : ''}
|
||||
<span class="assign-row__meta">${escHtml(p.department || '—')}${p.clinicUserId ? ' · есть учётка' : ' · нет учётки (создадим при назначении)'}</span>
|
||||
<span class="assign-row__meta">${escHtml(p.department || '—')}</span>
|
||||
</span>`;
|
||||
const cb = row.querySelector('input');
|
||||
cb.addEventListener('change', () => {
|
||||
@@ -798,7 +1356,7 @@
|
||||
|
||||
if (visibilityBtn) {
|
||||
visibilityBtn.addEventListener('click', async () => {
|
||||
const next = !chainActiveEl.checked;
|
||||
const next = !chainActive;
|
||||
try {
|
||||
const r = await fetch(`/api/tests/${TEST_ID}`, {
|
||||
method: 'PATCH',
|
||||
@@ -807,8 +1365,7 @@
|
||||
});
|
||||
const data = await r.json();
|
||||
if (!r.ok) throw new Error(data.error || 'Ошибка изменения видимости');
|
||||
chainActiveEl.checked = !!next;
|
||||
chainActive = !!next;
|
||||
updateChainActiveDisplay(next);
|
||||
visibilityBtn.textContent = chainActive ? 'Скрыть из списка' : 'Снова показать в списке';
|
||||
} catch (e) {
|
||||
alert(e.message || 'Ошибка изменения видимости');
|
||||
@@ -816,6 +1373,35 @@
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Создать шаблон ────────────────────────────────────────────
|
||||
const createTemplateBtn = $('#create-template');
|
||||
if (createTemplateBtn) {
|
||||
createTemplateBtn.addEventListener('click', () => {
|
||||
const qCount = Math.min(30, Math.max(1, parseInt($('#ai-q-count').value || '7', 10)));
|
||||
const oCount = Math.min(MAX_OPTIONS, Math.max(2, parseInt($('#ai-o-count').value || '3', 10)));
|
||||
const existing = $$('#questions .q-item').length;
|
||||
if (existing > 0) {
|
||||
const ok = confirm(
|
||||
`Создать шаблон: ${qCount} вопросов × ${oCount} вариантов?\n` +
|
||||
'Текущие вопросы будут заменены.'
|
||||
);
|
||||
if (!ok) return;
|
||||
}
|
||||
questionsEl.innerHTML = '';
|
||||
for (let qi = 0; qi < qCount; qi++) {
|
||||
const opts = [];
|
||||
for (let oi = 0; oi < oCount; oi++) {
|
||||
opts.push({ text: '', isCorrect: oi === 0 });
|
||||
}
|
||||
questionsEl.appendChild(renderQuestion({ text: '', hasMultipleAnswers: false, options: opts }));
|
||||
}
|
||||
renumber();
|
||||
scheduleDirtyCheck();
|
||||
// Прокручиваем к первому вопросу
|
||||
questionsEl.firstElementChild?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
});
|
||||
}
|
||||
|
||||
Promise.all([
|
||||
fetch(`/api/tests/${TEST_ID}/versions`).then((r) => r.json()).catch(() => null),
|
||||
fetch(`/api/tests/${TEST_ID}/attempts`).then((r) => r.json()).catch(() => null),
|
||||
|
||||
Reference in New Issue
Block a user