Генератор тренажёров

Генератор

Генератор тренажёров

Заполните тему и список слов. Заглавные подряд идущие группы превращаются в поля ввода, а английская X означает пустое место.

Тема тренажёра

Проверяемые строки (каждая с новой строки)

Формат: группы заглавных букв = пропуск, английская X = пустой пропуск.

Пример строк: вОрОнА · кОрОвА · гектарОВ · бахилX

Ограничить длину полей

Если включено, длина поля равна длине пропуска и фокус переходит к следующему полю при заполнении.

Хэш: —

Слов: 0

<!DOCTYPE html>
<html lang="ru">
<head>

const STRESSED_WORDS = 
`
{{{{__STRESSED__WORDS__}}}}
`.trim().split('\n').map(line => line.trim())
  </script>

:root {
      --bg-1: #f7efe5;
      --bg-2: #e4f2ee;
      --ink: #1f1f1f;
      --muted: #5f6368;
      --accent: #0f766e;
      --accent-2: #f59e0b;
      --ok: #15803d;
      --bad: #b91c1c;
      --panel: rgba(255, 255, 255, 1);
      --stroke: rgba(31, 31, 31, 0.08);
      --shadow: 0 18px 50px rgba(15, 118, 110, 0.14);
      --radius: 18px;
    }

* {
      box-sizing: border-box;
    }

body {
      margin: 0;
      font-family: "Space Grotesk", "Segoe UI", sans-serif;
      background:
        radial-gradient(900px 520px at 8% -10%, rgba(245, 158, 11, 0.2), transparent 60%),
        radial-gradient(900px 520px at 92% -16%, rgba(15, 118, 110, 0.2), transparent 60%),
        linear-gradient(120deg, var(--bg-1), var(--bg-2));
      color: var(--ink);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      padding: 28px 16px 120px;
    }

main {
      width: 100%;
      max-width: 780px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

.hero {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

.tag {
      align-self: flex-start;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(15, 118, 110, 0.12);
      color: var(--accent);
      font-weight: 600;
      font-size: 13px;
      letter-spacing: 0.4px;
      text-transform: uppercase;
    }

.hero h1 {
      margin: 0;
      font-family: "Literata", serif;
      font-size: clamp(26px, 4vw, 40px);
      letter-spacing: 0.2px;
    }

.hero p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.5;
      max-width: 600px;
    }

.panel {
      background: var(--panel);
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      padding: clamp(18px, 3vw, 28px);
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px);
    }

.panel.flash-ok {
      animation: panelFlashOk 140ms ease;
    }

.panel.flash-bad {
      animation: panelFlashBad 140ms ease;
    }

@keyframes panelFlashOk {
      0% {
        background: rgba(34, 197, 94, 0.35);
      }
      100% {
        background: var(--panel);
      }
    }

@keyframes panelFlashBad {
      0% {
        background: rgba(239, 68, 68, 0.32);
      }
      100% {
        background: var(--panel);
      }
    }

.quiz-area {
      width: 100%;
      min-height: clamp(240px, 46vh, 520px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

.word {
      font-family: "Literata", serif;
      font-size: clamp(30px, 6vw, 46px);
      font-weight: 600;
      text-align: center;
      line-height: 1.2;
      letter-spacing: 0.6px;
      animation: wordIn 0.35s ease;
    }

@keyframes wordIn {
      from {
        opacity: 0;
        transform: translateY(6px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

.chunk {
      display: inline;
    }

.letter-input {
      display: inline-block;
      margin: 0 2px;
      padding: 4px 6px;
      min-width: 1.6ch;
      border-radius: 10px;
      border: 2px dashed rgba(15, 118, 110, 0.35);
      background: rgba(255, 255, 255, 0.8);
      color: var(--ink);
      font: inherit;
      text-align: center;
      transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
    }

.letter-input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.14);
    }

.letter-input.correct {
      border-color: var(--ok);
      background: rgba(21, 128, 61, 0.12);
    }

.letter-input.wrong {
      border-color: var(--bad);
      background: rgba(185, 28, 28, 0.12);
    }

.result {
      font-size: 18px;
      font-weight: 600;
      min-height: 24px;
    }

.result.ok {
      color: var(--ok);
    }

.result.bad {
      color: var(--bad);
    }

.stats {
      font-size: 14px;
      color: var(--muted);
      text-align: center;
    }

.hint {
      font-size: 13px;
      color: var(--muted);
      text-align: center;
      max-width: 520px;
      line-height: 1.4;
    }

.controls {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 6px;
    }

.check-btn {
      padding: 14px 20px;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      background: linear-gradient(135deg, var(--accent), #0b9288);
      border: none;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(15, 118, 110, 0.3);
      transition: transform 0.08s ease, box-shadow 0.15s ease;
    }

.check-btn:hover {
      box-shadow: 0 12px 28px rgba(15, 118, 110, 0.36);
    }

.check-btn:active {
      transform: translateY(1px);
    }

.check-btn:disabled {
      background: #cfd8d7;
      cursor: not-allowed;
      box-shadow: none;
    }

.restart-wrap {
      width: 100%;
      display: flex;
      justify-content: center;
    }

.restart-btn {
      width: 100%;
      max-width: 420px;
      padding: 16px 18px;
      font-size: clamp(18px, 2.8vw, 24px);
      font-weight: 700;
      color: #fff;
      background: linear-gradient(135deg, var(--accent), #0b9288);
      border: none;
      border-radius: 14px;
      cursor: pointer;
      box-shadow: 0 8px 22px rgba(15, 118, 110, 0.28);
      transition: transform 0.08s ease, box-shadow 0.15s ease;
    }

.restart-btn:hover {
      box-shadow: 0 10px 26px rgba(15, 118, 110, 0.34);
    }

.restart-btn:active {
      transform: translateY(1px);
    }

.reset-btn {
      padding: 8px 12px;
      border: 1px solid rgba(31, 31, 31, 0.2);
      border-radius: 10px;
      background: #fff;
      color: #374151;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
    }

.list-btn {
      background: #fff;
    }

.settings-btn {
      border: none;
      background: transparent;
      color: var(--accent);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      padding: 4px 2px;
    }

.dialog-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

.dialog-label {
      font-size: 14px;
      font-weight: 600;
    }

.settings-input {
      width: 100%;
      border-radius: 10px;
      border: 1px solid rgba(31, 31, 31, 0.2);
      padding: 10px 12px;
      font: inherit;
    }

.word-dialog {
      border: none;
      border-radius: var(--radius);
      width: min(640px, 92vw);
      padding: 18px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

.word-dialog::backdrop {
      background: rgba(15, 118, 110, 0.24);
      backdrop-filter: blur(2px);
    }

.dialog-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

.dialog-head h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
    }

.word-list {
      margin: 0;
      white-space: pre-wrap;
      font-family: "Literata", serif;
      font-size: 15px;
      line-height: 1.55;
      max-height: 60vh;
      overflow: auto;
    }

.wrong-list {
      width: 100%;
      background: var(--panel);
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      padding: 14px;
      font-size: 14px;
      box-shadow: 0 10px 26px rgba(31, 31, 31, 0.08);
    }

.wrong-list h3 {
      margin: 0 0 8px;
      font-size: 16px;
      font-weight: 700;
    }

.wrong-list p {
      margin: 0;
      color: var(--muted);
    }

.wrong-list ul {
      margin: 8px 0 0;
      padding-left: 18px;
    }

.wrong-list li {
      margin: 8px 0;
      line-height: 1.4;
    }

.hidden {
      display: none;
    }

footer {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      background: rgba(255, 255, 255, 0.92);
      border-top: 1px solid var(--stroke);
      backdrop-filter: blur(6px);
      z-index: 20;
    }

.footer-inner {
      width: 100%;
      max-width: 780px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      color: var(--muted);
      padding: 12px 16px;
    }

footer a {
      color: var(--accent);
      text-decoration: none;
    }

footer a:hover {
      text-decoration: underline;
    }

@media (max-width: 540px) {
      .footer-inner {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
      }
    }
  </style>

</head>
<body>

<main>
    <header class="hero">
      <span class="tag">Орфография</span>
      <h2>Тренажёр {{{__TRAIN__TOPIC__}}}</h2>
      
    </header>

<section class="panel" id="panel">
      <div class="quiz-area">
        <div class="word" id="word"></div>
        <div class="result" id="result"></div>
        <div class="stats" id="stats"></div>
        <div class="hint" id="hint"></div>
        <div class="controls">
          <button class="check-btn" id="checkBtn" type="button">Проверить</button>
        </div>
      </div>
    </section>

<div class="restart-wrap hidden" id="restartWrap">
      <button class="restart-btn" id="restartBtn" type="button">Пройти заново</button>
    </div>

<footer>
    <div class="footer-inner">
      <div id="progress"></div>
      <button class="reset-btn" id="resetTestBtn" type="button">Сбросить тест</button>
      <button class="reset-btn list-btn" id="openListBtn" type="button">Список слов</button>
      <button class="settings-btn" id="openSettingsBtn" type="button">Настройки</button>
    </div>
  </footer>

<dialog class="word-dialog" id="wordListDialog">
    <div class="dialog-head">
      <h3>Список слов</h3>
      <button class="reset-btn" id="closeListBtn" type="button">Закрыть</button>
    </div>
    <pre class="word-list" id="wordListOutput"></pre>
  </dialog>

<dialog class="word-dialog" id="settingsDialog">
    <div class="dialog-head">
      <h3>Настройки</h3>
      <button class="reset-btn" id="closeSettingsBtn" type="button">Закрыть</button>
    </div>
    <div class="dialog-field">
      <label class="dialog-label" for="delayInput">Задержка перед сменой слова (мс)</label>
      <input class="settings-input" id="delayInput" type="number" min="0" step="100" />
      <div class="hint">Например: 800 или 1200. Значение сохраняется.</div>
      <button class="reset-btn" id="resetSettingsBtn" type="button">Сбросить настройки</button>
    </div>
  </dialog>

function normalizeValue(text) {
      return text.toLowerCase();
    }

function tokenize(word) {
      const tokens = [];
      const re = /([A-ZА-ЯЁ]+|[Xx]+)/g;
      let lastIndex = 0;
      let match;

while ((match = re.exec(word)) !== null) {
        if (match.index > lastIndex) {
          tokens.push({
            type: "text",
            value: word.slice(lastIndex, match.index),
          });
        }

lastIndex = match.index + raw.length;
      }

if (lastIndex < word.length) {
        tokens.push({
          type: "text",
          value: word.slice(lastIndex),
        });
      }

return tokens;
    }

const DATA = STRESSED_WORDS.map(original => {
      const tokens = tokenize(original);
      const correct = tokens
        .map(token => (token.type === "text" ? normalizeValue(token.value) : normalizeValue(token.answer)))
        .join("");

return {
        original,
        tokens,
        correct,
      };
    });

function buildInitialState() {
      return {
        version: 3,
        order: shuffleOrder(DATA.length),
        index: 0,
        correct: 0,
        total: 0,
        finished: false,
        wrong: [],
      };
    }

function normalizeState(raw) {
      const next = buildInitialState();
      if (!raw || typeof raw !== "object") return next;

if (
        Array.isArray(raw.order) &&
        raw.order.length === DATA.length &&
        raw.order.every(i => Number.isInteger(i) && i >= 0 && i < DATA.length)
      ) {
        next.order = raw.order.slice();
      }

next.index = Number.isInteger(raw.index) ? raw.index : 0;
      next.correct = Number.isInteger(raw.correct) ? raw.correct : 0;
      next.total = Number.isInteger(raw.total) ? raw.total : 0;
      next.finished = Boolean(raw.finished);
      next.wrong = Array.isArray(raw.wrong)
        ? raw.wrong.filter(item => item && typeof item === "object")
        : [];

if (next.index >= DATA.length && DATA.length > 0) next.finished = true;
      return next;
    }

function normalizeDelay(value) {
      if (value === undefined || value === null || value === "") return DEFAULT_DELAY_MS;
      const num = Number(value);
      if (!Number.isFinite(num) || num < 0) return DEFAULT_DELAY_MS;
      return Math.round(num);
    }

function saveSettings() {
      localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
    }

let settings = loadSettings();
    let state = normalizeState(JSON.parse(localStorage.getItem(STORAGE_KEY)));
    let locked = false;
    let currentItem = null;
    let currentInputs = [];

const wordEl = document.getElementById("word");
    const panelEl = document.getElementById("panel");
    const resultEl = document.getElementById("result");
    const statsEl = document.getElementById("stats");
    const hintEl = document.getElementById("hint");
    const progressEl = document.getElementById("progress");
    const wrongListEl = document.getElementById("wrongList");
    const restartWrapEl = document.getElementById("restartWrap");
    const restartBtnEl = document.getElementById("restartBtn");
    const resetTestBtnEl = document.getElementById("resetTestBtn");
    const checkBtnEl = document.getElementById("checkBtn");
    const listBtnEl = document.getElementById("openListBtn");
    const listDialogEl = document.getElementById("wordListDialog");
    const closeListBtnEl = document.getElementById("closeListBtn");
    const wordListOutputEl = document.getElementById("wordListOutput");
    const settingsBtnEl = document.getElementById("openSettingsBtn");
    const settingsDialogEl = document.getElementById("settingsDialog");
    const closeSettingsBtnEl = document.getElementById("closeSettingsBtn");
    const delayInputEl = document.getElementById("delayInput");
    const resetSettingsBtnEl = document.getElementById("resetSettingsBtn");

function save() {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
    }

function resetProgress() {
      localStorage.removeItem(STORAGE_KEY);
      state = buildInitialState();
      locked = false;
      render();
    }

function sanitizeInput(value) {
      return value.replace(/[^a-zа-яё]/gi, "");
    }

function buildWordList(words) {
      return words
        .map(word => word.toLowerCase().replace(/x/g, "").trim())
        .filter(Boolean)
        .join("\n");
    }

function updateDelay(value) {
      const num = Number(value);
      if (!Number.isFinite(num) || num < 0) return;
      settings.delayMs = Math.round(num);
      saveSettings();
    }

function flashPanel(isOk) {
      if (!panelEl) return;
      panelEl.classList.remove("flash-ok", "flash-bad");
      void panelEl.offsetWidth;
      panelEl.classList.add(isOk ? "flash-ok" : "flash-bad");
      setTimeout(() => {
        panelEl.classList.remove("flash-ok", "flash-bad");
      }, 180);
    }

function mergeAnswer(tokens, parts) {
      let index = 0;
      return tokens
        .map(token => {
          if (token.type === "text") return normalizeValue(token.value);
          const part = parts[index] ?? "";
          index += 1;
          return part;
        })
        .join("");
    }

function renderWrongList() {
      if (!state.wrong.length) {
        wrongListEl.innerHTML = "<h3>Ошибки</h3><p>Пока ошибок нет.</p>";
        return;
      }

const items = state.wrong
        .map(item => `
          <li>
            Ваш ответ: <b>${item.userAnswer}</b><br>
            Правильный: <b>${item.correctAnswer}</b>
          </li>
        `)
        .join("");

wrongListEl.innerHTML = `<h3>Ошибки (${state.wrong.length})</h3><ul>${items}</ul>`;
    }

function render() {
      if (!DATA.length) {
        wordEl.textContent = "Что-то пошло не так";
        return;
      }

renderWrongList();

if (state.finished || state.index >= DATA.length) {
        state.finished = true;
        save();
        wordEl.textContent = "Все слова пройдены";
        resultEl.textContent = "Тест завершен.";
        resultEl.className = "result";
        statsEl.textContent = `Итог: ${state.correct} / ${DATA.length}`;
        hintEl.textContent = "";
        progressEl.textContent = `Пройдено: ${DATA.length} / ${DATA.length}`;
        restartWrapEl.classList.remove("hidden");
        resetTestBtnEl.classList.add("hidden");
        checkBtnEl.disabled = true;
        return;
      }

const item = DATA[state.order[state.index]];
      currentItem = item;
      currentInputs = [];

wordEl.innerHTML = "";
      resultEl.textContent = "";
      resultEl.className = "result";
      restartWrapEl.classList.add("hidden");
      resetTestBtnEl.classList.remove("hidden");
      locked = false;

item.tokens.forEach(token => {
        if (token.type === "text") {
          const span = document.createElement("span");
          span.className = "chunk";
          span.textContent = normalizeValue(token.value);
          wordEl.appendChild(span);
          return;
        }

input.addEventListener("input", () => {
          input.value = sanitizeInput(input.value);
          if (LIMIT_INPUT_LENGTH && input.value.length >= maxLen) {
            const next = currentInputs[currentInputs.indexOf(input) + 1];
            if (next) next.focus();
          }
        });

input.addEventListener("keydown", event => {
          if (event.key === "Enter") {
            event.preventDefault();
            checkAnswer();
          }
        });

currentInputs.push(input);
        wordEl.appendChild(input);
      });

statsEl.textContent = `Правильных ответов: ${state.correct} / ${state.total}`;
      progressEl.textContent = `Пройдено: ${state.index} / ${DATA.length}`;
      // hintEl.textContent = "Заглавные буквы и X превращаются в поля. Если X означает пустое место, оставьте поле пустым.";
      checkBtnEl.disabled = currentInputs.length === 0;

if (currentInputs[0]) {
        setTimeout(() => currentInputs[0].focus(), 0);
      }
    }

function checkAnswer() {
      if (locked || !currentItem) return;
      if (!currentInputs.length) return;

locked = true;
      const userParts = currentInputs.map(input => normalizeValue(sanitizeInput(input.value)));
      const correctParts = currentInputs.map(input => input.dataset.answer || "");

const userAnswer = mergeAnswer(currentItem.tokens, userParts);
      const correctAnswer = mergeAnswer(currentItem.tokens, correctParts);

state.total += 1;
      if (allCorrect) {
        state.correct += 1;
      } else {
        flashPanel(false);
        state.wrong.push({
          word: currentItem.original,
          userAnswer,
          correctAnswer,
          answeredAt: Date.now(),
        });
      }

state.index += 1;
      if (state.index >= DATA.length) state.finished = true;
      save();
      renderWrongList();

setTimeout(render, settings.delayMs);
    }

restartBtnEl.addEventListener("click", resetProgress);
    resetTestBtnEl.addEventListener("click", resetProgress);
    checkBtnEl.addEventListener("click", checkAnswer);

if (wordListOutputEl) {
      wordListOutputEl.textContent = buildWordList(STRESSED_WORDS);
    }

if (listBtnEl && listDialogEl) {
      listBtnEl.addEventListener("click", () => {
        if (typeof listDialogEl.showModal === "function") {
          listDialogEl.showModal();
        } else {
          listDialogEl.setAttribute("open", "open");
        }
      });
    }

if (closeListBtnEl && listDialogEl) {
      closeListBtnEl.addEventListener("click", () => {
        if (typeof listDialogEl.close === "function") {
          listDialogEl.close();
        } else {
          listDialogEl.removeAttribute("open");
        }
      });
    }

if (listDialogEl) {
      listDialogEl.addEventListener("click", event => {
        if (event.target === listDialogEl) {
          if (typeof listDialogEl.close === "function") {
            listDialogEl.close();
          } else {
            listDialogEl.removeAttribute("open");
          }
        }
      });
    }

if (delayInputEl) {
      delayInputEl.value = settings.delayMs;
      delayInputEl.addEventListener("input", () => {
        if (delayInputEl.value.trim() === "") return;
        updateDelay(delayInputEl.value);
      });
      delayInputEl.addEventListener("blur", () => {
        if (delayInputEl.value.trim() === "") {
          delayInputEl.value = settings.delayMs;
          return;
        }
        const num = Number(delayInputEl.value);
        if (!Number.isFinite(num) || num < 0) {
          delayInputEl.value = settings.delayMs;
        }
      });
    }

if (settingsBtnEl && settingsDialogEl) {
      settingsBtnEl.addEventListener("click", () => {
        if (delayInputEl) delayInputEl.value = settings.delayMs;
        if (typeof settingsDialogEl.showModal === "function") {
          settingsDialogEl.showModal();
        } else {
          settingsDialogEl.setAttribute("open", "open");
        }
      });
    }

if (closeSettingsBtnEl && settingsDialogEl) {
      closeSettingsBtnEl.addEventListener("click", () => {
        if (typeof settingsDialogEl.close === "function") {
          settingsDialogEl.close();
        } else {
          settingsDialogEl.removeAttribute("open");
        }
      });
    }

if (settingsDialogEl) {
      settingsDialogEl.addEventListener("click", event => {
        if (event.target === settingsDialogEl) {
          if (typeof settingsDialogEl.close === "function") {
            settingsDialogEl.close();
          } else {
            settingsDialogEl.removeAttribute("open");
          }
        }
      });
    }

if (resetSettingsBtnEl && delayInputEl) {
      resetSettingsBtnEl.addEventListener("click", () => {
        settings.delayMs = DEFAULT_DELAY_MS;
        saveSettings();
        delayInputEl.value = settings.delayMs;
      });
    }

render();
  </script>
</body>
</html>