HTML 직접 보기
<!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 { --ink:#102846; --sky:#edf7ff; --blue:#145ca8; --green:#157347; --red:#a12b2b; --line:#adc5dd; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; padding:clamp(16px,5vw,48px); background:linear-gradient(180deg,#eef7ff,#f9fbfd); color:var(--ink); font:18px/1.6 system-ui,-apple-system,sans-serif; }
main { width:min(100%,760px); margin:auto; background:#fff; border:1px solid var(--line); border-radius:28px; padding:clamp(20px,6vw,48px); box-shadow:0 18px 54px #10284618; }
h1 { margin:0; font-size:clamp(30px,7vw,46px); line-height:1.18; }
.eyebrow { color:var(--blue); font-weight:800; }
.bar { height:12px; margin:20px 0 28px; overflow:hidden; border-radius:999px; background:#dbe8f4; }
.bar > span { display:block; height:100%; background:var(--blue); transition:width 200ms ease; }
fieldset { border:0; padding:0; margin:0; min-width:0; }
legend { font-size:1.25rem; font-weight:850; margin-bottom:18px; }
.answers { display:grid; gap:12px; }
button { width:100%; min-height:54px; padding:13px 16px; border:2px solid var(--blue); border-radius:14px; background:#fff; color:var(--ink); font:inherit; font-weight:750; text-align:left; cursor:pointer; }
button:hover { background:var(--sky); }
button:focus-visible { outline:4px solid #ffbd2e; outline-offset:4px; }
button[aria-pressed="true"] { background:var(--sky); border-width:3px; }
button:disabled { opacity:.78; cursor:default; }
.primary { margin-top:16px; background:var(--blue); color:#fff; text-align:center; }
.feedback { min-height:68px; margin:18px 0 0; padding:14px 16px; border-radius:14px; background:#f1f5f9; font-weight:650; }
.feedback.correct { border-left:7px solid var(--green); }
.feedback.incorrect { border-left:7px solid var(--red); }
.result { text-align:center; }
[hidden] { display:none !important; }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }
</style>
</head>
<body>
<main>
<p class="eyebrow" id="step-label">1번째 안전 습관</p>
<h1>AI 활용 안전 습관</h1>
<div class="bar" aria-hidden="true"><span id="bar"></span></div>
<section id="activity">
<fieldset>
<legend id="question"></legend>
<div class="answers" id="answers"></div>
</fieldset>
<p id="feedback" class="feedback" role="status" aria-live="polite">안전하다고 생각하는 행동을 고르세요.</p>
<button id="next" class="primary" type="button" hidden>다음</button>
</section>
<section id="result" class="result" hidden tabindex="-1">
<h2>세 가지 안전 습관을 확인했습니다</h2>
<p id="score"></p>
<p>개인정보는 빼고, 사실은 다시 확인하고, 자료의 사용 권리를 살펴보세요.</p>
<button id="restart" class="primary" type="button">다시 시작</button>
</section>
</main>
<script>
const items = [
{ question:"AI에게 학생 상황을 물을 때 어떻게 설명할까요?", choices:["이름과 전화번호까지 자세히 적기","개인을 알 수 없게 상황만 적기","학생 얼굴 사진을 함께 보내기"], answer:1, success:"안전한 선택입니다. 개인을 알아볼 수 있는 정보는 빼고 상황만 설명합니다." },
{ question:"AI가 제시한 과학 설명은 어떻게 사용할까요?", choices:["그대로 시험 문제에 넣기","문장이 길면 맞다고 생각하기","교과서와 믿을 만한 자료로 확인하기"], answer:2, success:"좋습니다. AI 답변은 틀릴 수 있으므로 믿을 만한 자료와 비교합니다." },
{ question:"검색한 이미지를 자료에 넣기 전 무엇을 볼까요?", choices:["사용 허락과 출처 조건","검색 결과의 순서","이미지의 색상 수"], answer:0, success:"맞습니다. 사용할 수 있는 자료인지와 출처 표시 조건을 먼저 확인합니다." }
];
const state = { index:0, score:0, locked:false };
const $ = selector => document.querySelector(selector);
function showItem() {
state.locked = false;
const item = items[state.index];
$("#step-label").textContent = `${state.index + 1}번째 안전 습관 · ${items.length}개 중 ${state.index + 1}개`;
$("#bar").style.width = `${((state.index + 1) / items.length) * 100}%`;
$("#question").textContent = item.question;
$("#feedback").className = "feedback";
$("#feedback").textContent = "안전하다고 생각하는 행동을 고르세요.";
$("#next").hidden = true;
$("#answers").replaceChildren(...item.choices.map((label,index) => {
const button = document.createElement("button");
button.type = "button";
button.textContent = label;
button.setAttribute("aria-pressed","false");
button.addEventListener("click",() => answer(index,button));
return button;
}));
$("#answers button").focus();
}
function answer(index, selected) {
if (state.locked) return;
state.locked = true;
const correct = index === items[state.index].answer;
if (correct) state.score += 1;
selected.setAttribute("aria-pressed","true");
$("#answers").querySelectorAll("button").forEach(button => { button.disabled = true; });
$("#feedback").className = `feedback ${correct ? "correct" : "incorrect"}`;
$("#feedback").textContent = correct ? `정답. ${items[state.index].success}` : `확인할 점. ${items[state.index].success}`;
$("#next").textContent = state.index === items.length - 1 ? "결과 보기" : "다음 안전 습관";
$("#next").hidden = false;
$("#next").focus();
}
$("#next").addEventListener("click",() => {
state.index += 1;
if (state.index < items.length) return showItem();
$("#activity").hidden = true;
$("#result").hidden = false;
$("#score").textContent = `${items.length}개 중 ${state.score}개를 안전하게 판단했습니다.`;
$("#result").focus();
});
$("#restart").addEventListener("click",() => {
state.index = 0; state.score = 0;
$("#result").hidden = true; $("#activity").hidden = false;
showItem();
});
showItem();
</script>
</body>
</html>