build_random_html_test.mjs - master - eup/khsm

build_random_html_test.mjs
403 строки10 KB
eup
Create: build_random_html_test.mjs, build_test.mjs, inspect_questions.mjs, verify_html_test.mjs, verify_test.mjs, Тест_КХСМ_рандом.html
07 июн 2026, 12:06
Верифицирован
07 июн 2026, 12:06d2942e3
import fs from "node:fs/promises";
import { FileBlob, SpreadsheetFile } from "@oai/artifact-tool";

const inputPath = "C:/Users/egoru/Downloads/База КХСМ.xlsx";
const outputPath = "C:/Users/egoru/Documents/Codex/2026-05-02/files-mentioned-by-the-user-xlsx/Тест_КХСМ_рандом.html";

const sourceWorkbook = await SpreadsheetFile.importXlsx(await FileBlob.load(inputPath));

const table = [];
for (let start = 1; start <= 10000; start += 100) {
  const end = start + 99;
  const raw = await sourceWorkbook.inspect({
    kind: "table",
    range: `База_1!A${start}:G${end}`,
    include: "values",
    tableMaxRows: 100,
    tableMaxCols: 7,
  });
  const values = JSON.parse(raw.ndjson).values;
  table.push(...values);
  const meaningfulRows = values.filter((row) => row.some((cell) => cell !== null && cell !== ""));
  if (start > 1 && meaningfulRows.length === 0) break;
}

const questions = table
  .slice(5)
  .map((row) => ({
    level: Number(row[0]),
    question: String(row[1] ?? "").trim(),
    options: [
      String(row[2] ?? "").trim(),
      String(row[3] ?? "").trim(),
      String(row[4] ?? "").trim(),
      String(row[5] ?? "").trim(),
    ],
    answer: String(row[6] ?? "").trim().toUpperCase(),
  }))
  .filter((row) =>
    Number.isFinite(row.level) &&
    row.question &&
    row.options.every(Boolean) &&
    ["A", "B", "C", "D"].includes(row.answer)
  );

const html = `<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Тест КХСМ: 15 случайных вопросов</title>
  <style>
    :root {
      color-scheme: light;
      --bg: #f4f7fb;
      --panel: #ffffff;
      --ink: #18212f;
      --muted: #627084;
      --line: #d8e0ea;
      --brand: #1f5f8f;
      --brand-strong: #16486e;
      --ok: #14804a;
      --bad: #b42318;
      --soft: #eaf2f8;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.45;
    }

    .app {
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto;
      padding: 28px 0 44px;
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 22px 0;
    }

    h1 {
      margin: 0 0 6px;
      font-size: 28px;
      line-height: 1.15;
    }

    .subtitle {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    button {
      border: 0;
      border-radius: 7px;
      background: var(--brand);
      color: #fff;
      min-height: 40px;
      padding: 0 14px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background: var(--brand-strong);
    }

    form {
      display: grid;
      gap: 12px;
    }

    .question {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 16px;
    }

    .question-head {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: start;
      margin-bottom: 12px;
    }

    .number,
    .level {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      height: 26px;
      border-radius: 6px;
      background: var(--soft);
      color: var(--brand-strong);
      font-weight: 700;
      font-size: 13px;
      white-space: nowrap;
    }

    .level {
      padding: 0 8px;
      min-width: 74px;
    }

    .question-text {
      margin: 1px 0 0;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    label {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 8px;
      align-items: start;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 10px;
      cursor: pointer;
      background: #fff;
    }

    label:hover {
      border-color: #9ab7d1;
    }

    input[type="radio"] {
      margin: 3px 0 0;
      accent-color: var(--brand);
    }

    .option-text {
      overflow-wrap: anywhere;
    }

    .letter {
      font-weight: 700;
      color: var(--brand-strong);
      margin-right: 4px;
    }

    .checked .correct {
      border-color: #8bd3aa;
      background: #effaf4;
    }

    .checked .wrong.selected {
      border-color: #f0a8a2;
      background: #fff1f0;
    }

    .answer-note {
      display: none;
      margin-top: 10px;
      font-weight: 700;
      color: var(--ok);
    }

    .checked .answer-note {
      display: block;
    }

    .result {
      position: sticky;
      bottom: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 18px;
      padding: 14px 16px;
      background: #ffffffee;
      border: 1px solid var(--line);
      border-radius: 8px;
      backdrop-filter: blur(8px);
    }

    .result strong {
      font-size: 18px;
    }

    @media (max-width: 760px) {
      .app {
        width: min(100% - 20px, 1120px);
        padding-top: 14px;
      }

      header,
      .result {
        align-items: stretch;
        flex-direction: column;
      }

      .toolbar {
        justify-content: stretch;
      }

      .toolbar button,
      .result button {
        width: 100%;
      }

      .options {
        grid-template-columns: 1fr;
      }

      .question-head {
        grid-template-columns: auto 1fr;
      }

      .level {
        grid-column: 1 / -1;
        justify-content: flex-start;
        width: fit-content;
      }
    }
  </style>
</head>
<body>
  <main class="app">
    <header>
      <div>
        <h1>Тест КХСМ: 15 случайных вопросов</h1>
        <p class="subtitle">При каждом открытии или обновлении набора вопросы берутся из базы в случайном порядке.</p>
      </div>
      <div class="toolbar">
        <button type="button" id="new-test">Новый вариант</button>
      </div>
    </header>

    <form id="quiz"></form>

    <section class="result" aria-live="polite">
      <strong id="score">Результат появится после проверки</strong>
      <button type="button" id="check">Проверить ответы</button>
    </section>
  </main>

  <script>
    const QUESTION_BANK = ${JSON.stringify(questions)};
    const LETTERS = ["A", "B", "C", "D"];
    const quiz = document.querySelector("#quiz");
    const score = document.querySelector("#score");
    const checkButton = document.querySelector("#check");
    const newTestButton = document.querySelector("#new-test");
    let currentQuestions = [];
    let checked = false;

    function shuffle(items) {
      const copy = [...items];
      for (let i = copy.length - 1; i > 0; i -= 1) {
        const j = Math.floor(Math.random() * (i + 1));
        [copy[i], copy[j]] = [copy[j], copy[i]];
      }
      return copy;
    }

    function escapeHtml(value) {
      return String(value)
        .replaceAll("&", "&amp;")
        .replaceAll("<", "&lt;")
        .replaceAll(">", "&gt;")
        .replaceAll('"', "&quot;")
        .replaceAll("'", "&#039;");
    }

    function renderQuiz() {
      checked = false;
      currentQuestions = shuffle(QUESTION_BANK).slice(0, 15);
      quiz.classList.remove("checked");
      score.textContent = "Результат появится после проверки";
      quiz.innerHTML = currentQuestions.map((item, index) => {
        const options = item.options.map((option, optionIndex) => {
          const letter = LETTERS[optionIndex];
          return \`
            <label data-letter="\${letter}">
              <input type="radio" name="q\${index}" value="\${letter}">
              <span class="option-text"><span class="letter">\${letter}.</span>\${escapeHtml(option)}</span>
            </label>
          \`;
        }).join("");

        return \`
          <article class="question" data-answer="\${item.answer}">
            <div class="question-head">
              <span class="number">\${index + 1}</span>
              <p class="question-text">\${escapeHtml(item.question)}</p>
              <span class="level">Уровень \${item.level}</span>
            </div>
            <div class="options">\${options}</div>
            <div class="answer-note">Правильный ответ: \${item.answer}</div>
          </article>
        \`;
      }).join("");
    }

    function checkAnswers() {
      let correct = 0;
      currentQuestions.forEach((item, index) => {
        const selected = quiz.querySelector(\`input[name="q\${index}"]:checked\`);
        const question = quiz.querySelectorAll(".question")[index];
        question.classList.add("checked");

        question.querySelectorAll("label").forEach((label) => {
          const letter = label.dataset.letter;
          label.classList.toggle("correct", letter === item.answer);
          label.classList.toggle("selected", selected?.value === letter);
          label.classList.toggle("wrong", selected?.value === letter && selected.value !== item.answer);
        });

        if (selected?.value === item.answer) correct += 1;
      });

      checked = true;
      quiz.classList.add("checked");
      score.textContent = \`Правильных ответов: \${correct} из 15\`;
    }

    quiz.addEventListener("change", () => {
      if (checked) {
        checkAnswers();
      }
    });
    checkButton.addEventListener("click", checkAnswers);
    newTestButton.addEventListener("click", renderQuiz);
    renderQuiz();
  </script>
</body>
</html>
`;

await fs.writeFile(outputPath, html, "utf8");
console.log(JSON.stringify({ outputPath, questionCount: questions.length }, null, 2));