<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>기후 행동 선택과 즉시 피드백</title>
<style>
:root{--ink:#10283c;--muted:#536a7d;--line:#d8e4e8;--green:#16775a;--pale:#edf8f4}*{box-sizing:border-box}body{margin:0;background:#eef5f3;color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif;line-height:1.55}.app{width:min(720px,calc(100% - 32px));margin:40px auto;background:#fff;border-radius:28px;padding:clamp(24px,5vw,48px);box-shadow:0 20px 60px rgba(24,72,61,.12)}.top{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-weight:800}.bar{height:10px;margin:12px 0 30px;border-radius:999px;background:#e6eceb;overflow:hidden}.bar span{display:block;height:100%;width:33%;background:var(--green);transition:width .25s}h1{font-size:clamp(28px,5vw,42px);line-height:1.2;margin:0 0 12px}p{color:var(--muted)}.choices{display:grid;gap:12px;margin-top:24px}.choices button,.reset{min-height:58px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);padding:14px 18px;font:inherit;font-weight:800;text-align:left;cursor:pointer}.choices button:hover,.choices button:focus-visible{border-color:var(--green);outline:3px solid #b8e5d5;background:var(--pale)}.feedback{min-height:92px;margin-top:20px;padding:18px;border-radius:16px;background:var(--pale);color:#185842}.feedback strong{display:block}.reset{display:none;margin-top:16px;text-align:center;background:var(--green);color:#fff}.reset.show{display:block}@media(max-width:480px){.app{margin:16px auto;border-radius:20px}.top{font-size:14px}}
</style>
</head>
<body>
<main class="app">
<div class="top"><span>기후 행동 실험</span><span id="progress">1 / 3</span></div>
<div class="bar" aria-hidden="true"><span></span></div>
<h1 id="question">학교까지 가까운 거리를 이동할 때 어떤 선택이 좋을까요?</h1>
<p>한 가지를 고르면 이유를 바로 확인할 수 있습니다.</p>
<div class="choices"></div>
<div class="feedback" aria-live="polite">보기를 선택해 주세요.</div>
<button class="reset" type="button">다시 시작</button>
</main>
<script>
const data=[{q:"학교까지 가까운 거리를 이동할 때 어떤 선택이 좋을까요?",a:["보호자 차로 이동하기","걷거나 자전거 타기"],right:1,why:"걷기와 자전거는 이동 중 직접 배출되는 탄소가 거의 없습니다."},{q:"교실을 잠시 비울 때 먼저 할 일은 무엇일까요?",a:["불과 화면 끄기","그대로 두기"],right:0,why:"사용하지 않는 조명과 화면을 끄면 불필요한 전력 사용을 줄입니다."},{q:"급식에서 먹을 만큼 받는 이유는 무엇일까요?",a:["남는 음식을 줄이기 위해","접시를 크게 보이게 하려고"],right:0,why:"먹을 만큼 받으면 음식물 쓰레기와 처리 과정의 에너지를 함께 줄입니다."}];let index=0;
const choices=document.querySelector(".choices"),feedback=document.querySelector(".feedback"),reset=document.querySelector(".reset");
function render(){const item=data[index];document.querySelector("#question").textContent=item.q;document.querySelector("#progress").textContent=`${index+1} / ${data.length}`;document.querySelector(".bar span").style.width=`${(index+1)/data.length*100}%`;choices.innerHTML="";feedback.textContent="보기를 선택해 주세요.";item.a.forEach((text,i)=>{const button=document.createElement("button");button.type="button";button.textContent=text;button.addEventListener("click",()=>choose(i));choices.append(button);});}
function choose(value){const item=data[index];feedback.innerHTML=`<strong>${value===item.right?"좋은 선택입니다.":"다시 생각해 봅시다."}</strong>${item.why}`;choices.querySelectorAll("button").forEach(b=>b.disabled=true);setTimeout(()=>{if(index<data.length-1){index+=1;render();}else{feedback.innerHTML="<strong>활동 완료</strong>세 가지 행동의 이유를 친구에게 한 문장으로 말해 보세요.";reset.classList.add("show");}},700);}
reset.addEventListener("click",()=>{index=0;reset.classList.remove("show");render();});render();
</script>
</body>
</html>