진행 표시를 더하는 선택 활동

<!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;background:#f2eff9;color:#28213d;font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif}.app{width:min(700px,calc(100% - 32px));margin:40px auto;padding:clamp(24px,5vw,44px);border-radius:26px;background:#fff;box-shadow:0 20px 60px rgba(54,36,91,.13)}header{display:flex;justify-content:space-between;gap:12px;align-items:center}.label{font-weight:900;color:#6843bd}.progress{padding:7px 12px;border-radius:999px;background:#eee8fa;font-weight:900}h1{margin:26px 0 10px;font-size:clamp(28px,5vw,42px);line-height:1.25}.hint{color:#665e75;line-height:1.55}.answers{display:grid;gap:12px;margin-top:24px}.answers button,.next,.reset{min-height:56px;border:1px solid #d9d0e9;border-radius:15px;background:#fff;color:#28213d;padding:14px 18px;font:inherit;font-weight:800;cursor:pointer}.answers button:hover,.answers button:focus-visible{outline:3px solid #cdbaf5;border-color:#6843bd}.feedback{min-height:70px;margin:18px 0;padding:16px;border-radius:14px;background:#f7f4fc;line-height:1.55}.next,.reset{width:100%;background:#6843bd;color:#fff}.next:disabled{background:#c5bdd4}.reset{display:none}@media(max-width:480px){.app{margin:16px auto;padding:22px}.progress{font-size:14px}}
</style>
</head>
<body>
<main class="app">
  <header><span class="label">문장 표현 고르기</span><span class="progress" aria-live="polite">1 / 2</span></header>
  <h1></h1><p class="hint">상황에 가장 알맞은 표현을 한 가지 고르세요.</p>
  <div class="answers"></div><div class="feedback" aria-live="polite">선택하면 이유가 보입니다.</div>
  <button class="next" type="button" disabled>다음</button><button class="reset" type="button">다시 시작</button>
</main>
<script>
const items=[{q:"친구의 발표에서 좋은 점을 전할 때?",a:["그냥 잘했어.","처음에 질문을 던져서 집중하기 쉬웠어."],right:1,why:"어떤 행동이 좋았는지 구체적으로 말하면 도움이 됩니다."},{q:"의견이 다를 때 먼저 할 말은?",a:["네 생각의 이유를 더 듣고 싶어.","그건 틀렸어."],right:0,why:"상대의 근거를 먼저 물으면 서로의 생각을 비교할 수 있습니다."}];let index=0,chosen=false;const title=document.querySelector("h1"),answers=document.querySelector(".answers"),feedback=document.querySelector(".feedback"),next=document.querySelector(".next"),reset=document.querySelector(".reset"),progress=document.querySelector(".progress");
function render(){chosen=false;next.disabled=true;title.textContent=items[index].q;progress.textContent=`${index+1} / ${items.length}`;feedback.textContent="선택하면 이유가 보입니다.";answers.innerHTML="";items[index].a.forEach((text,i)=>{const button=document.createElement("button");button.type="button";button.textContent=text;button.addEventListener("click",()=>select(i));answers.append(button);});}
function select(value){if(chosen)return;chosen=true;feedback.textContent=(value===items[index].right?"알맞습니다. ":"다시 살펴봅시다. ")+items[index].why;answers.querySelectorAll("button").forEach(b=>b.disabled=true);next.disabled=false;}
next.addEventListener("click",()=>{if(index<items.length-1){index+=1;render();}else{title.textContent="활동 완료";answers.innerHTML="";feedback.textContent="두 표현의 차이를 친구에게 한 문장으로 설명해 보세요.";next.style.display="none";reset.style.display="block";}});
reset.addEventListener("click",()=>{index=0;next.style.display="block";reset.style.display="none";render();});render();
</script>
</body>
</html>