<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VerIQ — test</title>
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
<link rel="stylesheet" href="/assets/style.css">
</head>
<body>
<div class="wrap">
  <header class="top">
    <a class="logo" href="/">Ver<span>IQ</span></a>
    <span class="tagline" id="sessionInfo"></span>
  </header>

  <div id="loading"><div class="spin"></div><p style="text-align:center;color:var(--muted)">Preparing your test…</p></div>

  <div id="testArea" style="display:none">
    <div class="testbar">
      <span id="qCounter">Task 1 / 40</span>
      <span>time left: <span class="timer" id="timer">--:--</span></span>
    </div>
    <div class="progress"><div id="progressBar"></div></div>

    <div class="qcard">
      <div class="qnum" id="qCategory"></div>
      <div class="qtext" id="qText"></div>
      <div class="qsvg" id="qSvg"></div>
      <div class="choices" id="choices"></div>
      <div class="testnav">
        <button class="btn ghost small" id="prevBtn">← Back</button>
        <button class="btn small" id="nextBtn">Next →</button>
      </div>
    </div>
    <p style="color:var(--muted);font-size:12px;margin-top:10px">
      Answered <span id="answeredCount">0</span> of 40. Unanswered tasks count as wrong.
    </p>
  </div>

  <div id="submitArea" style="display:none">
    <div class="panel">
      <h2>Finish the test</h2>
      <p id="finishSummary"></p>
      <div style="margin-top:16px">
        <button class="btn" id="finishBtn">Submit &amp; get my signed result</button>
        <button class="btn ghost small" id="reviewBtn" style="margin-left:8px">Review answers</button>
      </div>
    </div>
  </div>

  <div id="errorArea" class="err" style="display:none"></div>
</div>
<script src="/assets/test.js"></script>
</body>
</html>