오늘의 생각 질문 뽑기

<!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; min-height:100vh; display:grid; place-items:center; padding:18px; background:#edf7ff; color:#14345c; font:18px/1.55 system-ui,-apple-system,sans-serif; }
    main { width:min(100%,720px); padding:clamp(22px,6vw,48px); background:white; border:1px solid #b4cbe0; border-radius:26px; text-align:center; }
    h1 { margin-top:0; font-size:clamp(30px,7vw,46px); line-height:1.2; }
    .counter { font-weight:800; color:#225f98; }
    .prompt { min-height:180px; display:grid; place-items:center; margin:24px 0; padding:28px; border:3px solid #173b68; border-radius:22px; background:#f9fcff; font-size:clamp(24px,6vw,36px); font-weight:850; line-height:1.35; }
    button { width:100%; min-height:56px; margin-top:10px; padding:12px; border:2px solid #145ca8; border-radius:14px; background:#145ca8; color:white; font:inherit; font-weight:800; cursor:pointer; }
    button.secondary { background:white; color:#145ca8; }
    button:focus-visible { outline:4px solid #ffbd2e; outline-offset:3px; }
    button:disabled { opacity:.55; cursor:default; }
    .message { min-height:30px; }
  </style>
</head>
<body>
<main>
  <h1>오늘의 생각 질문</h1>
  <p>질문은 한 번씩만 나옵니다. 친구와 30초 동안 생각을 나누세요.</p>
  <p id="counter" class="counter">6개 남음</p>
  <p id="prompt" class="prompt" tabindex="-1">‘질문 뽑기’를 눌러 시작하세요.</p>
  <p id="message" class="message" role="status" aria-live="polite">아직 뽑은 질문이 없습니다.</p>
  <button id="draw" type="button">질문 뽑기</button>
  <button id="restart" class="secondary" type="button">처음부터 다시</button>
</main>
<script>
  const original = [
    "오늘 새롭게 알게 된 것은 무엇인가요?",
    "가장 궁금해진 점은 무엇인가요?",
    "친구의 생각에서 배운 점은 무엇인가요?",
    "오늘 배운 내용을 어디에 써 보고 싶나요?",
    "처음 생각과 지금 생각은 어떻게 달라졌나요?",
    "다음 시간에 더 알아보고 싶은 것은 무엇인가요?"
  ];
  let remaining = [];
  let drawn = 0;
  function reset() {
    remaining = [...original];
    drawn = 0;
    document.querySelector("#prompt").textContent = "‘질문 뽑기’를 눌러 시작하세요.";
    document.querySelector("#message").textContent = "아직 뽑은 질문이 없습니다.";
    document.querySelector("#counter").textContent = `${remaining.length}개 남음`;
    document.querySelector("#draw").disabled = false;
    document.querySelector("#draw").focus();
  }
  document.querySelector("#draw").addEventListener("click", () => {
    if (!remaining.length) return;
    const pickedIndex = Math.floor(Math.random() * remaining.length);
    const [picked] = remaining.splice(pickedIndex, 1);
    drawn += 1;
    document.querySelector("#prompt").textContent = picked;
    document.querySelector("#counter").textContent = `${remaining.length}개 남음`;
    document.querySelector("#message").textContent = `${drawn}번째 질문입니다. 같은 질문은 다시 나오지 않습니다.`;
    document.querySelector("#prompt").focus();
    if (!remaining.length) {
      document.querySelector("#draw").disabled = true;
      document.querySelector("#message").textContent = "모든 질문을 뽑았습니다. 다시 시작하면 질문이 모두 돌아옵니다.";
      document.querySelector("#restart").focus();
    }
  });
  document.querySelector("#restart").addEventListener("click", reset);
  reset();
</script>
</body>
</html>