오류 찾기 · 수정한 자료

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>오류 찾기 활동 - 수정한 버전</title>
  <style>
    * { box-sizing:border-box; }
    body { margin:0; padding:20px 14px; background:#f2f7fb; color:#153457; font:18px/1.55 system-ui,-apple-system,sans-serif; }
    main { width:min(100%,720px); margin:auto; padding:clamp(20px,6vw,36px); background:white; border:2px solid #9db8d2; border-radius:22px; overflow-wrap:anywhere; }
    h1 { margin-top:0; line-height:1.2; }
    .answers { display:grid; gap:12px; margin:20px 0; }
    button { width:100%; min-height:54px; padding:12px; border:2px solid #145ca8; border-radius:12px; background:white; color:#153457; font:inherit; font-weight:800; cursor:pointer; }
    button:focus-visible { outline:4px solid #ffbd2e; outline-offset:3px; }
    button:disabled { opacity:.72; cursor:default; }
    .primary { background:#145ca8; color:white; }
    .feedback { min-height:60px; padding:12px; background:#eaf4ff; border-radius:12px; }
    .feedback.correct { border-left:7px solid #167443; }
    .feedback.incorrect { border-left:7px solid #a32c2c; }
    [hidden] { display:none !important; }
  </style>
</head>
<body>
<main>
  <h1>디지털 안전 선택 활동</h1>
  <p id="progress"></p>
  <section id="quiz">
    <h2 id="question"></h2>
    <div id="answers" class="answers"></div>
    <p id="feedback" class="feedback" role="status" aria-live="polite">답을 고르세요.</p>
    <button id="next" class="primary" type="button" hidden>다음</button>
  </section>
  <section id="result" hidden tabindex="-1">
    <h2>활동 완료</h2>
    <p id="score"></p>
    <p>모르는 링크는 확인하고, 공용 컴퓨터에서는 로그아웃하고, 비밀번호는 나만 알고 길게 만드세요.</p>
    <button id="restart" class="primary" type="button">다시 시작</button>
  </section>
</main>
<script>
  const questions = [
    { q:"모르는 링크를 받았을 때 먼저 할 일은?", a:["바로 열기","보낸 사람과 주소 확인","친구에게 전달"], correct:1, why:"보낸 사람과 실제 주소를 확인한 뒤 열어야 합니다." },
    { q:"공용 컴퓨터 사용 뒤 할 일은?", a:["로그아웃","화면만 끄기","그대로 두기"], correct:0, why:"계정이 남지 않도록 모든 서비스에서 로그아웃합니다." },
    { q:"비밀번호를 안전하게 다루는 방법은?", a:["친구와 공유","짧게 만들기","나만 알고 길게 만들기"], correct:2, why:"비밀번호는 공유하지 않고 추측하기 어렵게 길게 만듭니다." }
  ];
  let index = 0;
  let score = 0;
  let answered = false;
  function render() {
    answered = false;
    document.querySelector("#progress").textContent = `${index + 1} / ${questions.length}`;
    document.querySelector("#question").textContent = questions[index].q;
    const feedback = document.querySelector("#feedback");
    feedback.className = "feedback";
    feedback.textContent = "답을 고르세요.";
    document.querySelector("#next").hidden = true;
    document.querySelector("#answers").replaceChildren(...questions[index].a.map((label,answerIndex) => {
      const button = document.createElement("button");
      button.type = "button";
      button.textContent = label;
      button.addEventListener("click", () => answer(answerIndex));
      return button;
    }));
    document.querySelector("#answers button").focus();
  }
  function answer(answerIndex) {
    if (answered) return;
    answered = true;
    const correct = answerIndex === questions[index].correct;
    if (correct) score += 1;
    document.querySelectorAll("#answers button").forEach(button => { button.disabled = true; });
    const feedback = document.querySelector("#feedback");
    feedback.className = `feedback ${correct ? "correct" : "incorrect"}`;
    feedback.textContent = `${correct ? "정답입니다." : "다시 확인해 보세요."} ${questions[index].why}`;
    const next = document.querySelector("#next");
    next.textContent = index === questions.length - 1 ? "결과 보기" : "다음";
    next.hidden = false;
    next.focus();
  }
  document.querySelector("#next").addEventListener("click", () => {
    index += 1;
    if (index < questions.length) return render();
    document.querySelector("#quiz").hidden = true;
    document.querySelector("#result").hidden = false;
    document.querySelector("#score").textContent = `${questions.length}문항 중 ${score}점입니다.`;
    document.querySelector("#result").focus();
  });
  document.querySelector("#restart").addEventListener("click", () => {
    index = 0; score = 0;
    document.querySelector("#result").hidden = true;
    document.querySelector("#quiz").hidden = false;
    render();
  });
  render();
</script>
</body>
</html>