tabliczka egzamin tikedupl

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Egzamin Online - Tabliczka Mnożenia</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #ffffff;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #1e293b;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: 40px 16px;
    }

    .app-card {
      width: 100%;
      max-width: 680px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    h1.title {
      font-size: 42px;
      font-weight: 800;
      color: #0b1f3a;
      margin-bottom: 24px;
      letter-spacing: -0.5px;
    }

    .subtitle-msg {
      font-size: 18px;
      color: #1e293b;
      margin-bottom: 12px;
      font-weight: 400;
      line-height: 1.4;
    }

    .subtitle-time {
      font-size: 18px;
      color: #1e293b;
      margin-bottom: 26px;
      font-weight: 400;
    }

    /* Karta podsumowania (niebieskie akcenty) */
    .summary-card {
      width: 100%;
      background: #fbfcfd;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      padding: 22px 24px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      margin-bottom: 28px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }

    .stat-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 19px;
      color: #334155;
      font-weight: 500;
    }

    .dot {
      width: 9px;
      height: 9px;
      background-color: #0ea5e9;
      border-radius: 50%;
      display: inline-block;
    }

    .stat-val {
      color: #0284c7;
      font-weight: 800;
      font-size: 24px;
      margin-left: 4px;
    }

    .divider-vertical {
      width: 1px;
      height: 38px;
      background-color: #cbd5e1;
    }

    /* Tabela wyników */
    .table-container {
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid #e2e8f0;
      margin-bottom: 30px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
      background: #ffffff;
    }

    thead th {
      background-color: #0b3967;
      color: #ffffff;
      padding: 16px 14px;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }

    tbody tr {
      border-bottom: 1px solid #edf2f7;
      transition: background-color 0.15s;
    }

    tbody tr:last-child {
      border-bottom: none;
    }

    tbody td {
      padding: 18px 12px;
      font-size: 18px;
      color: #1e293b;
      vertical-align: middle;
    }

    .task-cell {
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 0.5px;
    }

    .ans-cell {
      font-size: 20px;
      font-weight: 500;
    }

    /* Numer zadania w kwadracie z zaokrąglonymi rogami */
    .badge-nr {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 38px;
      height: 38px;
      background-color: #3b4b5e;
      color: #ffffff;
      font-size: 18px;
      font-weight: 700;
      border-radius: 8px;
    }

    /* Statusy (poprawna / błędna) */
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 500;
    }

    .status-badge.ok {
      color: #43a047;
    }

    .status-badge.err {
      color: #e53935;
    }

    .icon-circle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      color: #ffffff;
      font-size: 13px;
      font-weight: bold;
    }

    .icon-circle.ok {
      background-color: #8bc34a;
    }

    .icon-circle.err {
      background-color: #e53935;
    }

    /* Przycisk akcji */
    .action-btn {
      width: 100%;
      background-color: #0b3967;
      color: #ffffff;
      font-size: 18px;
      font-weight: 600;
      padding: 16px 20px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.2s, transform 0.05s;
    }

    .action-btn:hover {
      background-color: #072747;
    }

    .action-btn:active {
      transform: scale(0.99);
    }

    /* Ekran aktywnego testu */
    .quiz-card {
      width: 100%;
      background: #fbfcfd;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      padding: 40px 24px;
      margin-bottom: 24px;
    }

    .quiz-progress {
      font-size: 16px;
      color: #64748b;
      margin-bottom: 12px;
      font-weight: 500;
    }

    .quiz-question {
      font-size: 38px;
      font-weight: 700;
      color: #0f172a;
      margin: 20px 0 28px 0;
    }

    .quiz-input {
      font-size: 26px;
      text-align: center;
      padding: 12px 18px;
      width: 180px;
      border: 2px solid #cbd5e1;
      border-radius: 10px;
      outline: none;
      transition: border-color 0.2s;
    }

    .quiz-input:focus {
      border-color: #0284c7;
    }

    .hidden {
      display: none;
    }
  </style>
</head>
<body>

  <div class="app-card">
    <h1 class="title">Egzamin Online</h1>

    <!-- WIDOK TRWAJĄCEGO EGZAMINU -->
    <div id="view-exam" class="quiz-card">
      <div id="exam-progress" class="quiz-progress">Zadanie 1 z 10</div>
      <div id="exam-question" class="quiz-question">7 × 3 = ?</div>
      <form id="quiz-form">
        <input
          type="number"
          id="quiz-input"
          class="quiz-input"
          placeholder="?"
          required
          autocomplete="off"
          autofocus
        />
        <div style="margin-top: 25px;">
          <button type="submit" class="action-btn" style="max-width: 240px;">Dalej</button>
        </div>
      </form>
    </div>

    <!-- WIDOK PODSUMOWANIA I WYNIKÓW -->
    <div id="view-results" class="hidden" style="width: 100%;">
      <div id="result-feedback" class="subtitle-msg"></div>
      <div id="result-time" class="subtitle-time"></div>

      <!-- Karta punktów -->
      <div class="summary-card">
        <div class="stat-item">
          <span class="dot"></span>
          <span>Poprawne odpowiedzi</span>
          <span id="correct-count" class="stat-val">10/10</span>
        </div>
        <div class="divider-vertical"></div>
        <div class="stat-item">
          <span class="dot"></span>
          <span>Wynik</span>
          <span id="percentage-score" class="stat-val">100%</span>
        </div>
      </div>

      <!-- Tabela -->
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th style="width: 12%;">Nr</th>
              <th style="width: 38%;">Zadanie</th>
              <th style="width: 25%;">Twoje odpowiedzi</th>
              <th style="width: 25%;">Status</th>
            </tr>
          </thead>
          <tbody id="results-body"></tbody>
        </table>
      </div>

      <button id="btn-restart" class="action-btn">Rozpocznij jeszcze raz</button>
    </div>
  </div>

  <script>
    const TOTAL_QUESTIONS = 10;
    const TIME_LIMIT = 60;

    let questions = [];
    let currentIndex = 0;
    let startTime = null;

    // Losowanie liczb całkowitych w przedziale [min, max]
    function randRange(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // Generator 10 zadań bez mnożenia przez 1, 2 oraz 10 (zakres czynników 3-9)
    function generateExamQuestions() {
      const list = [];
      for (let i = 0; i < TOTAL_QUESTIONS; i++) {
        const a = randRange(3, 9);
        const b = randRange(3, 9);
        const product = a * b;
        const pattern = randRange(1, 5);

        let taskStr = "";
        let expected = 0;

        switch (pattern) {
          case 1: // 7 × 3 = ?
            taskStr = `${a} × ${b} = ?`;
            expected = product;
            break;
          case 2: // ? = 8 × 9
            taskStr = `? = ${a} × ${b}`;
            expected = product;
            break;
          case 3: // 7 = 49 ÷ ?
            taskStr = `${a} = ${product} ÷ ?`;
            expected = b;
            break;
          case 4: // ? ÷ 7 = 4
            taskStr = `? ÷ ${a} = ${b}`;
            expected = product;
            break;
          case 5: // 9 × ? = 63
            taskStr = `${a} × ? = ${product}`;
            expected = b;
            break;
        }

        list.push({
          task: taskStr,
          expected: expected,
          userAnswer: null
        });
      }
      return list;
    }

    function renderQuestion() {
      const item = questions[currentIndex];
      document.getElementById("exam-progress").textContent = `Zadanie ${currentIndex + 1} z ${TOTAL_QUESTIONS}`;
      document.getElementById("exam-question").textContent = item.task;
      const inp = document.getElementById("quiz-input");
      inp.value = "";
      inp.focus();
    }

    function showResults() {
      const totalSeconds = Math.round((new Date() - startTime) / 1000);
      const correctCount = questions.filter(q => Number(q.userAnswer) === q.expected).length;
      const percentage = Math.round((correctCount / TOTAL_QUESTIONS) * 100);

      document.getElementById("view-exam").classList.add("hidden");
      document.getElementById("view-results").classList.remove("hidden");

      // Logika komentarzy zależna od czasu i trafień
      let msg = "";
      if (correctCount === TOTAL_QUESTIONS && totalSeconds <= TIME_LIMIT) {
        if (totalSeconds <= 20) {
          msg = "Błyskawiczny refleks! Niewiarygodne tempo – otrzymujesz tytuł Arcymistrza Tabliczki Mnożenia!";
        } else if (totalSeconds <= 30) {
          msg = "Rewelacyjny wynik! Otrzymujesz tytuł Mistrza Tabliczki Mnożenia.";
        } else if (totalSeconds <= 40) {
          msg = "Gratulacje, zdałeś egzamin – otrzymujesz tytuł Experta Tabliczki Mnożenia!";
        } else if (totalSeconds <= 50) {
          msg = "Gratulacje, egzamin zaliczony! Bardzo dobra znajomość tabliczki mnożenia.";
        } else {
          msg = "Egzamin zdany rzutem na taśmę! Wszystkie odpowiedzi bezbłędne.";
        }
      } else if (correctCount === TOTAL_QUESTIONS && totalSeconds > TIME_LIMIT) {
        msg = `Wszystkie odpowiedzi poprawne, lecz limit czasu (${TIME_LIMIT} s) został przekroczony. Poćwicz tempo liczenia!`;
      } else {
        if (correctCount >= 8) {
          msg = "Egzamin niezdany – było bardzo blisko! Przeanalizuj błędy i spróbuj ponownie.";
        } else {
          msg = "Egzamin niezdany. Aby zdobyć tytuł Experta, wymagane jest 100% poprawnych odpowiedzi.";
        }
      }

      document.getElementById("result-feedback").textContent = msg;
      document.getElementById("result-time").textContent = `Twój czas to ${totalSeconds} sekund`;
      document.getElementById("correct-count").textContent = `${correctCount}/${TOTAL_QUESTIONS}`;
      document.getElementById("percentage-score").textContent = `${percentage}%`;

      // Wypełnienie tabeli
      const tbody = document.getElementById("results-body");
      tbody.innerHTML = "";

      questions.forEach((q, idx) => {
        const isCorrect = Number(q.userAnswer) === q.expected;
        const row = document.createElement("tr");

        const statusHTML = isCorrect
          ? `<span class="status-badge ok"><span class="icon-circle ok">&#10003;</span> Poprawna</span>`
          : `<span class="status-badge err"><span class="icon-circle err">&#10005;</span> Błędna (${q.expected})</span>`;

        row.innerHTML = `
          <td><span class="badge-nr">${idx + 1}</span></td>
          <td class="task-cell">${q.task}</td>
          <td class="ans-cell">${q.userAnswer !== null ? q.userAnswer : "-"}</td>
          <td>${statusHTML}</td>
        `;
        tbody.appendChild(row);
      });
    }

    document.getElementById("quiz-form").addEventListener("submit", function(e) {
      e.preventDefault();
      const val = document.getElementById("quiz-input").value.trim();
      questions[currentIndex].userAnswer = val;

      currentIndex++;
      if (currentIndex < TOTAL_QUESTIONS) {
        renderQuestion();
      } else {
        showResults();
      }
    });

    document.getElementById("btn-restart").addEventListener("click", function() {
      initExam();
    });

    function initExam() {
      questions = generateExamQuestions();
      currentIndex = 0;
      startTime = new Date();
      document.getElementById("view-results").classList.add("hidden");
      document.getElementById("view-exam").classList.remove("hidden");
      renderQuestion();
    }

    // Start od razu po otwarciu strony
    initExam();
  </script>
</body>
</html>