사실과 의견 분류하기

<!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:#eef6fb; color:#162d4e; font:18px/1.55 system-ui,-apple-system,sans-serif; }
    main { width:min(100%,760px); margin:auto; background:white; padding:clamp(20px,5vw,42px); border:1px solid #b6cbe0; border-radius:24px; }
    h1 { margin-top:0; line-height:1.2; }
    .status { font-weight:800; color:#1c5d96; }
    .card { margin:24px 0; padding:clamp(22px,6vw,42px); border:3px solid #173b68; border-radius:20px; background:#f9fcff; text-align:center; font-size:1.3rem; font-weight:800; }
    .choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    button { min-height:56px; padding:12px; border:2px solid #145ca8; border-radius:14px; background:white; color:#163457; font:inherit; font-weight:800; cursor:pointer; }
    button:hover { background:#e6f3ff; }
    button:focus-visible { outline:4px solid #ffbd2e; outline-offset:3px; }
    .primary { width:100%; margin-top:14px; background:#145ca8; color:white; }
    .feedback { min-height:64px; padding:14px; background:#edf5fc; border-radius:14px; }
    .correct { border-left:7px solid #18723e; }
    .incorrect { border-left:7px solid #a22d2d; }
    [hidden] { display:none !important; }
    @media (max-width:420px) { .choices { grid-template-columns:1fr; } }
  </style>
</head>
<body>
<main>
  <h1>사실일까요, 의견일까요?</h1>
  <p>문장을 읽고 <strong>사실</strong> 또는 <strong>의견</strong> 버튼을 누르세요. 마우스 없이 Tab과 Enter로도 할 수 있습니다.</p>
  <p id="status" class="status"></p>
  <section id="activity" aria-labelledby="card">
    <p id="card" class="card" tabindex="-1"></p>
    <div class="choices">
      <button type="button" data-choice="fact">사실</button>
      <button type="button" data-choice="opinion">의견</button>
    </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="summary"></p>
    <button id="restart" class="primary" type="button">다시 시작</button>
  </section>
</main>
<script>
  const cards = [
    { text:"한글날은 10월 9일이다.", type:"fact", reason:"달력과 공식 기록으로 확인할 수 있는 사실입니다." },
    { text:"가을이 가장 아름다운 계절이다.", type:"opinion", reason:"사람마다 생각이 달라질 수 있는 의견입니다." },
    { text:"물은 섭씨 0도에서 얼 수 있다.", type:"fact", reason:"조건을 갖추어 관찰하고 확인할 수 있는 사실입니다." },
    { text:"학교 급식은 집밥보다 맛있다.", type:"opinion", reason:"맛에 대한 평가는 사람마다 달라지는 의견입니다." },
    { text:"대한민국의 수도는 서울이다.", type:"fact", reason:"공식 자료에서 확인할 수 있는 사실입니다." },
    { text:"모든 수업은 체육으로 시작해야 한다.", type:"opinion", reason:"바람이나 주장을 나타내는 의견입니다." }
  ];
  let index = 0, score = 0, locked = false;
  const choiceButtons = [...document.querySelectorAll("[data-choice]")];
  function showCard() {
    locked = false;
    document.querySelector("#status").textContent = `${cards.length}장 중 ${index + 1}장 · 맞힌 수 ${score}`;
    document.querySelector("#card").textContent = cards[index].text;
    document.querySelector("#feedback").className = "feedback";
    document.querySelector("#feedback").textContent = "분류하면 이유가 나옵니다.";
    document.querySelector("#next").hidden = true;
    choiceButtons.forEach(button => { button.disabled = false; });
    choiceButtons[0].focus();
  }
  choiceButtons.forEach(button => button.addEventListener("click", () => {
    if (locked) return;
    locked = true;
    const correct = button.dataset.choice === cards[index].type;
    if (correct) score += 1;
    choiceButtons.forEach(item => { item.disabled = true; });
    const feedback = document.querySelector("#feedback");
    feedback.className = `feedback ${correct ? "correct" : "incorrect"}`;
    feedback.textContent = `${correct ? "맞게 분류했습니다." : "분류를 다시 살펴보세요."} ${cards[index].reason}`;
    document.querySelector("#next").hidden = false;
    document.querySelector("#next").focus();
  }));
  document.querySelector("#next").addEventListener("click", () => {
    index += 1;
    if (index < cards.length) return showCard();
    document.querySelector("#activity").hidden = true;
    document.querySelector("#result").hidden = false;
    document.querySelector("#summary").textContent = `${cards.length}장 중 ${score}장을 맞게 분류했습니다. 사실은 확인할 수 있고, 의견은 생각이나 판단을 담습니다.`;
    document.querySelector("#result").focus();
  });
  document.querySelector("#restart").addEventListener("click", () => {
    index = 0; score = 0;
    document.querySelector("#result").hidden = true;
    document.querySelector("#activity").hidden = false;
    showCard();
  });
  showCard();
</script>
</body>
</html>