선택하고 피드백 받기 · 시작 자료

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AI 활용 안전 습관 선택 활동</title>
  <style>
    :root { color-scheme: light; --navy:#17345f; --blue:#eaf4ff; --line:#b8cbe2; --ok:#17653a; --bad:#a52a2a; }
    * { box-sizing:border-box; }
    body { margin:0; padding:24px 16px; background:#f5f9fd; color:#15243a; font:18px/1.55 system-ui,-apple-system,sans-serif; }
    main { width:min(100%,720px); margin:auto; padding:clamp(20px,5vw,40px); background:white; border:1px solid var(--line); border-radius:24px; box-shadow:0 12px 36px #17345f14; }
    h1 { margin:0 0 8px; color:var(--navy); font-size:clamp(28px,6vw,40px); line-height:1.2; }
    .progress { margin:20px 0; font-weight:700; }
    .question { font-size:1.2rem; font-weight:800; }
    .answers { display:grid; gap:12px; margin:20px 0; }
    button { min-height:52px; border:2px solid var(--navy); border-radius:14px; padding:12px 16px; background:white; color:var(--navy); font:inherit; font-weight:750; cursor:pointer; }
    button:hover { background:var(--blue); }
    button:focus-visible { outline:4px solid #ffbf47; outline-offset:3px; }
    button:disabled { cursor:default; opacity:.72; }
    .primary { background:var(--navy); color:white; }
    .feedback { min-height:64px; padding:14px; border-radius:14px; background:var(--blue); }
    .feedback.good { border-left:6px solid var(--ok); }
    .feedback.try-again { border-left:6px solid var(--bad); }
    [hidden] { display:none !important; }
  </style>
</head>
<body>
<main>
  <h1>AI 활용 안전 습관</h1>
  <p>가장 안전한 행동 하나를 고르고 이유를 확인하세요.</p>
  <p id="progress" class="progress">1 / 3</p>
  <section id="quiz" aria-labelledby="question">
    <h2 id="question" class="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 aria-labelledby="result-title">
    <h2 id="result-title">활동을 마쳤습니다</h2>
    <p id="score"></p>
    <p>개인정보는 넣지 않고, AI의 답은 확인하고, 자료의 사용 권리를 살펴보세요.</p>
    <button id="restart" class="primary" type="button">다시 시작</button>
  </section>
</main>
<script>
  const questions = [
    { q:"AI에게 도움을 요청할 때 가장 안전한 행동은?", a:["학생 이름과 상담 내용을 그대로 넣는다","개인을 알 수 없게 상황만 설명한다","학생 사진을 함께 올린다"], correct:1, why:"맞습니다. 개인을 알아볼 수 있는 이름·사진·연락처는 넣지 않습니다." },
    { q:"AI가 알려 준 설명을 수업에 쓰기 전에 할 일은?", a:["첫 답을 바로 사용한다","다른 AI에게만 다시 묻는다","교과서와 믿을 만한 자료로 사실을 확인한다"], correct:2, why:"맞습니다. AI 답변은 틀릴 수 있으므로 믿을 만한 자료로 확인합니다." },
    { q:"인터넷 이미지를 수업자료에 넣을 때 먼저 확인할 것은?", a:["검색 결과 첫 이미지인지","화면이 화려해지는지","사용 허락과 출처 표시 조건"], correct:2, why:"맞습니다. 이미지·글·음원의 사용 허락과 출처 조건을 확인합니다." }
  ];
  let index = 0;
  let score = 0;
  let answered = false;
  const questionEl = document.querySelector("#question");
  const answersEl = document.querySelector("#answers");
  const feedbackEl = document.querySelector("#feedback");
  const nextEl = document.querySelector("#next");

  function renderQuestion() {
    answered = false;
    document.querySelector("#progress").textContent = `${index + 1} / ${questions.length}`;
    questionEl.textContent = questions[index].q;
    answersEl.replaceChildren();
    feedbackEl.className = "feedback";
    feedbackEl.textContent = "보기를 선택하면 설명이 나옵니다.";
    nextEl.hidden = true;
    questions[index].a.forEach((answer, answerIndex) => {
      const button = document.createElement("button");
      button.type = "button";
      button.textContent = answer;
      button.addEventListener("click", () => choose(answerIndex));
      answersEl.append(button);
    });
    answersEl.querySelector("button").focus();
  }

  function choose(answerIndex) {
    if (answered) return;
    answered = true;
    const isCorrect = answerIndex === questions[index].correct;
    if (isCorrect) score += 1;
    feedbackEl.className = `feedback ${isCorrect ? "good" : "try-again"}`;
    feedbackEl.textContent = isCorrect ? questions[index].why : `다시 생각해 볼 점: ${questions[index].why}`;
    answersEl.querySelectorAll("button").forEach(button => { button.disabled = true; });
    nextEl.textContent = index === questions.length - 1 ? "결과 보기" : "다음";
    nextEl.hidden = false;
    nextEl.focus();
  }

  nextEl.addEventListener("click", () => {
    index += 1;
    if (index < questions.length) return renderQuestion();
    document.querySelector("#quiz").hidden = true;
    document.querySelector("#result").hidden = false;
    document.querySelector("#score").textContent = `${questions.length}문항 중 ${score}문항에서 안전한 습관을 골랐습니다.`;
    document.querySelector("#restart").focus();
  });
  document.querySelector("#restart").addEventListener("click", () => {
    index = 0; score = 0;
    document.querySelector("#result").hidden = true;
    document.querySelector("#quiz").hidden = false;
    renderQuestion();
  });
  renderQuestion();
</script>
</body>
</html>