오류 찾기 · 고장 난 자료

<!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; background:#f2f7fb; color:#153457; font:18px/1.55 system-ui,-apple-system,sans-serif; }
    /* 수업용 결함 3: 390px보다 큰 고정 폭이라 작은 화면에서 가로로 넘칩니다. */
    main { width:720px; margin:auto; padding:36px; background:white; border:2px solid #9db8d2; border-radius:22px; }
    h1 { margin-top:0; }
    .answers { display:grid; gap:12px; margin:20px 0; }
    button { 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; }
    .primary { background:#145ca8; color:white; }
    .feedback { min-height:60px; padding:12px; background:#eaf4ff; border-radius:12px; }
    [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>
    <button id="restart" class="primary" type="button">다시 시작</button>
  </section>
</main>
<script>
  const questions = [
    { q:"모르는 링크를 받았을 때 먼저 할 일은?", a:["바로 열기","보낸 사람과 주소 확인","친구에게 전달"], correct:1 },
    { q:"공용 컴퓨터 사용 뒤 할 일은?", a:["로그아웃","화면만 끄기","그대로 두기"], correct:0 },
    { q:"비밀번호를 안전하게 다루는 방법은?", a:["친구와 공유","짧게 만들기","나만 알고 길게 만들기"], correct:2 }
  ];
  let index = 0;
  let score = 0;
  function render() {
    document.querySelector("#progress").textContent = `${index + 1} / ${questions.length}`;
    document.querySelector("#question").textContent = questions[index].q;
    document.querySelector("#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", () => {
        /* 수업용 결함 2: 답변 잠금이 없어 빠르게 같은 답을 누르면 점수가 계속 올라갑니다. */
        if (answerIndex === questions[index].correct) score += 1;
        document.querySelector("#feedback").textContent =
          answerIndex === questions[index].correct ? "정답입니다." : "다시 확인해 보세요.";
        document.querySelector("#next").hidden = false;
        document.querySelector("#next").focus();
      });
      return button;
    }));
    document.querySelector("#answers button").focus();
  }
  document.querySelector("#next").addEventListener("click", () => {
    /* 수업용 결함 1: 두 번째 문항에서는 다음 버튼이 아무 반응을 하지 않습니다. */
    if (index === 1) return;
    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>