HTML 직접 보기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>태양계 8행성 탐험대</title>
<style>
:root {
color-scheme: dark;
--space-950: #050816;
--space-900: #0a1026;
--space-800: #111b3e;
--panel: rgba(14, 24, 55, 0.9);
--panel-soft: rgba(27, 41, 83, 0.72);
--line: rgba(161, 181, 255, 0.22);
--text: #f7f8ff;
--muted: #b8c3e7;
--accent: #8bd3ff;
--accent-strong: #4eb7ff;
--sun: #ffd166;
--correct: #6ee7b7;
--wrong: #fda4af;
--shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}
* { box-sizing: border-box; }
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
overflow-x: hidden;
color: var(--text);
background:
radial-gradient(circle at 15% 8%, rgba(89, 113, 255, 0.25), transparent 30rem),
radial-gradient(circle at 88% 30%, rgba(64, 201, 255, 0.13), transparent 28rem),
linear-gradient(155deg, var(--space-950), var(--space-900) 52%, #08112f);
font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
}
button, select { font: inherit; }
button, select {
min-height: 48px;
color: inherit;
}
button { cursor: pointer; }
button:focus-visible,
select:focus-visible {
outline: 4px solid #ffffff;
outline-offset: 3px;
}
button:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.app {
width: min(100% - 24px, 1180px);
margin: 0 auto;
padding: 20px 0 44px;
}
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 28px 22px;
border: 1px solid var(--line);
border-radius: 28px;
background: linear-gradient(145deg, rgba(25, 40, 89, 0.95), rgba(8, 15, 39, 0.9));
box-shadow: var(--shadow);
}
.hero::after {
position: absolute;
z-index: -1;
top: -66px;
right: -72px;
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #fff6b7 0 7%, #ffd166 25%, #f59e0b 62%, rgba(245, 158, 11, 0) 72%);
content: "";
filter: drop-shadow(0 0 34px rgba(255, 209, 102, 0.35));
}
.eyebrow {
margin: 0 0 6px;
color: #a9dcff;
font-size: 0.82rem;
font-weight: 900;
letter-spacing: 0.12em;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
max-width: 760px;
margin-bottom: 10px;
font-size: clamp(2rem, 8vw, 4.7rem);
line-height: 1.04;
letter-spacing: -0.055em;
text-wrap: balance;
}
.hero-copy {
max-width: 720px;
margin-bottom: 18px;
color: var(--muted);
font-weight: 650;
}
.scale-notice {
display: flex;
align-items: flex-start;
gap: 10px;
max-width: 760px;
margin: 0;
padding: 12px 14px;
border: 1px solid rgba(255, 209, 102, 0.34);
border-radius: 16px;
background: rgba(255, 209, 102, 0.1);
color: #fff1b3;
font-size: 0.92rem;
font-weight: 800;
}
.scale-notice strong { flex: 0 0 auto; }
.mode-tabs {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin: 16px 0;
padding: 8px;
border: 1px solid var(--line);
border-radius: 20px;
background: rgba(5, 8, 22, 0.78);
box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
}
.tab-button {
width: 100%;
padding: 10px 14px;
border: 1px solid transparent;
border-radius: 14px;
background: transparent;
color: var(--muted);
font-weight: 900;
text-align: left;
}
.tab-button[aria-selected="true"] {
border-color: rgba(139, 211, 255, 0.38);
background: linear-gradient(135deg, rgba(78, 183, 255, 0.28), rgba(92, 117, 255, 0.22));
color: #ffffff;
}
.panel {
padding: 22px;
border: 1px solid var(--line);
border-radius: 26px;
background: var(--panel);
box-shadow: var(--shadow);
}
.panel[hidden] { display: none; }
.panel-heading {
display: grid;
gap: 4px;
margin-bottom: 20px;
}
.panel-heading h2 {
margin-bottom: 0;
font-size: clamp(1.5rem, 5vw, 2.35rem);
line-height: 1.2;
letter-spacing: -0.035em;
}
.panel-heading p {
margin-bottom: 0;
color: var(--muted);
}
.explore-layout { display: grid; gap: 18px; }
.orbit-board {
position: relative;
overflow: hidden;
min-height: 316px;
padding: 18px;
border: 1px solid rgba(139, 211, 255, 0.18);
border-radius: 22px;
background:
radial-gradient(circle at 0 50%, rgba(255, 209, 102, 0.25), transparent 30%),
linear-gradient(120deg, rgba(8, 17, 47, 0.94), rgba(17, 29, 70, 0.74));
}
.sun-label {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
color: #ffe89b;
font-weight: 950;
}
.sun-dot {
width: 30px;
height: 30px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #ffffff, var(--sun) 35%, #f59e0b 75%);
box-shadow: 0 0 28px rgba(255, 209, 102, 0.55);
}
.planet-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.planet-button {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: 10px;
min-width: 0;
padding: 9px 10px;
border: 1px solid rgba(184, 195, 231, 0.2);
border-radius: 15px;
background: rgba(255, 255, 255, 0.045);
color: var(--text);
font-size: 0.9rem;
font-weight: 850;
text-align: left;
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.planet-button:hover { transform: translateY(-2px); }
.planet-button[aria-pressed="true"] {
border-color: var(--accent);
background: rgba(78, 183, 255, 0.17);
}
.planet-dot {
width: var(--planet-size, 28px);
height: var(--planet-size, 28px);
justify-self: center;
border-radius: 50%;
background: var(--planet-fill);
box-shadow: inset -7px -5px 12px rgba(0, 0, 0, 0.3), 0 0 13px rgba(151, 190, 255, 0.18);
}
.planet-detail,
.result-card {
min-height: 100%;
padding: 20px;
border: 1px solid rgba(139, 211, 255, 0.22);
border-radius: 22px;
background: var(--panel-soft);
}
.detail-kicker,
.progress-label {
margin-bottom: 6px;
color: var(--accent);
font-size: 0.8rem;
font-weight: 900;
letter-spacing: 0.08em;
}
.planet-detail h3,
.result-card h3 {
margin-bottom: 8px;
font-size: 1.55rem;
}
.fact-list {
display: grid;
gap: 9px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.fact-list li {
padding: 10px 12px;
border-left: 3px solid var(--accent);
border-radius: 0 12px 12px 0;
background: rgba(5, 8, 22, 0.42);
color: #dce5ff;
}
.compare-controls {
display: grid;
gap: 12px;
margin-bottom: 18px;
}
.field { display: grid; gap: 6px; }
.field label {
color: #dbe7ff;
font-size: 0.9rem;
font-weight: 850;
}
select {
width: 100%;
padding: 8px 12px;
border: 1px solid rgba(184, 195, 231, 0.34);
border-radius: 14px;
background: #111b3e;
}
.primary-button,
.secondary-button {
padding: 10px 16px;
border-radius: 14px;
font-weight: 900;
}
.primary-button {
border: 1px solid rgba(177, 228, 255, 0.48);
background: linear-gradient(135deg, #1476c5, #605de8);
color: #ffffff;
box-shadow: 0 10px 24px rgba(47, 105, 216, 0.24);
}
.secondary-button {
border: 1px solid rgba(184, 195, 231, 0.28);
background: rgba(255, 255, 255, 0.07);
color: #e8edff;
}
.compare-result-grid {
display: grid;
gap: 12px;
margin-top: 14px;
}
.compare-planet {
padding: 14px;
border: 1px solid rgba(184, 195, 231, 0.18);
border-radius: 15px;
background: rgba(5, 8, 22, 0.36);
}
.compare-planet strong { display: block; font-size: 1.15rem; }
.order-status {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
padding: 12px 14px;
border: 1px solid rgba(139, 211, 255, 0.18);
border-radius: 16px;
background: rgba(5, 8, 22, 0.35);
}
.order-status p { margin: 0; }
.order-buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.order-button {
padding: 10px 8px;
border: 1px solid rgba(184, 195, 231, 0.24);
border-radius: 14px;
background: rgba(255, 255, 255, 0.055);
font-weight: 850;
}
.order-button.is-correct {
border-color: var(--correct);
background: rgba(110, 231, 183, 0.15);
color: #c8ffeb;
}
.order-button.is-correct:disabled { opacity: 1; }
.order-button.is-wrong {
border-color: var(--wrong);
background: rgba(253, 164, 175, 0.13);
}
.order-track {
display: flex;
min-height: 58px;
align-items: center;
gap: 8px;
overflow-x: auto;
padding: 10px;
border-radius: 15px;
background: rgba(5, 8, 22, 0.46);
}
.order-track span {
flex: 0 0 auto;
padding: 6px 10px;
border: 1px solid rgba(110, 231, 183, 0.35);
border-radius: 999px;
background: rgba(110, 231, 183, 0.12);
color: #d6ffef;
font-size: 0.86rem;
font-weight: 850;
}
.feedback {
min-height: 52px;
margin: 14px 0 0;
padding: 12px 14px;
border-radius: 15px;
background: rgba(139, 211, 255, 0.1);
color: #dceeff;
font-weight: 800;
}
.feedback[data-tone="correct"] {
background: rgba(110, 231, 183, 0.13);
color: #caffea;
}
.feedback[data-tone="wrong"] {
background: rgba(253, 164, 175, 0.13);
color: #ffd9de;
}
.panel-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.source-note {
margin: 18px 2px 0;
color: #99a8d4;
font-size: 0.78rem;
text-align: center;
}
@media (min-width: 768px) {
.app { width: min(100% - 40px, 1180px); padding-top: 30px; }
.hero { padding: 38px 42px; }
.hero::after { top: -78px; right: -68px; width: 220px; height: 220px; }
.mode-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tab-button { text-align: center; }
.panel { padding: 30px; }
.explore-layout { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr); }
.planet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.compare-controls { grid-template-columns: 1fr 1fr auto; align-items: end; }
.compare-result-grid { grid-template-columns: 1fr 1fr; }
.order-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
.hero::after { right: 40px; width: 260px; height: 260px; }
.orbit-board { min-height: 350px; padding: 24px; }
.planet-grid { gap: 14px; }
.planet-button { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
</style>
</head>
<body>
<main class="app">
<header class="hero">
<p class="eyebrow">SCIENCE MISSION · 8 PLANETS</p>
<h1>태양계 8행성 탐험대</h1>
<p class="hero-copy">행성을 눌러 특징을 살펴보고, 두 행성을 비교하고, 태양에서 가까운 순서를 직접 완성해 보세요.</p>
<p class="scale-notice"><strong>축척 안내</strong><span>이 화면의 거리·크기·공전 속도는 실제 축척이 아닙니다.</span></p>
</header>
<div class="mode-tabs" role="tablist" aria-label="학습 활동 선택">
<button id="tab-explore" class="tab-button" type="button" role="tab" aria-selected="true" aria-controls="panel-explore" data-panel="explore">1. 행성 탐색</button>
<button id="tab-compare" class="tab-button" type="button" role="tab" aria-selected="false" aria-controls="panel-compare" data-panel="compare">2. 두 행성 비교</button>
<button id="tab-order" class="tab-button" type="button" role="tab" aria-selected="false" aria-controls="panel-order" data-panel="order">3. 순서 도전</button>
</div>
<section id="panel-explore" class="panel" role="tabpanel" aria-labelledby="tab-explore">
<div class="panel-heading">
<p class="eyebrow">MISSION 01</p>
<h2>8개 행성을 클릭해 탐색하세요</h2>
<p>수성부터 해왕성까지, 태양에서의 순서와 행성 유형을 확인합니다.</p>
</div>
<div class="explore-layout">
<div class="orbit-board">
<div class="sun-label"><span class="sun-dot" aria-hidden="true"></span>태양에서 가까운 순서 →</div>
<div class="planet-grid" aria-label="태양계 8개 행성">
<button class="planet-button" type="button" data-planet="0" aria-pressed="true"><span class="planet-dot" style="--planet-fill:linear-gradient(135deg,#d7d9de,#777f8d);--planet-size:24px" aria-hidden="true"></span><span>수성</span></button>
<button class="planet-button" type="button" data-planet="1" aria-pressed="false"><span class="planet-dot" style="--planet-fill:linear-gradient(135deg,#ffe0a3,#bc713e);--planet-size:30px" aria-hidden="true"></span><span>금성</span></button>
<button class="planet-button" type="button" data-planet="2" aria-pressed="false"><span class="planet-dot" style="--planet-fill:linear-gradient(135deg,#68d5f4,#286bd3 52%,#6ac779 55%);--planet-size:31px" aria-hidden="true"></span><span>지구</span></button>
<button class="planet-button" type="button" data-planet="3" aria-pressed="false"><span class="planet-dot" style="--planet-fill:linear-gradient(135deg,#f6a26b,#a63d2b);--planet-size:27px" aria-hidden="true"></span><span>화성</span></button>
<button class="planet-button" type="button" data-planet="4" aria-pressed="false"><span class="planet-dot" style="--planet-fill:linear-gradient(160deg,#ead6ad 20%,#a76742 38%,#f2dfba 58%,#98563a 72%);--planet-size:44px" aria-hidden="true"></span><span>목성</span></button>
<button class="planet-button" type="button" data-planet="5" aria-pressed="false"><span class="planet-dot" style="--planet-fill:linear-gradient(135deg,#f8df9b,#b69558);--planet-size:40px" aria-hidden="true"></span><span>토성</span></button>
<button class="planet-button" type="button" data-planet="6" aria-pressed="false"><span class="planet-dot" style="--planet-fill:linear-gradient(135deg,#d2ffff,#65cbd0);--planet-size:35px" aria-hidden="true"></span><span>천왕성</span></button>
<button class="planet-button" type="button" data-planet="7" aria-pressed="false"><span class="planet-dot" style="--planet-fill:linear-gradient(135deg,#67b6ff,#2455bd);--planet-size:35px" aria-hidden="true"></span><span>해왕성</span></button>
</div>
</div>
<article class="planet-detail" aria-live="polite" aria-atomic="true">
<p class="detail-kicker" id="detail-order">태양에서 1번째</p>
<h3 id="detail-name">수성</h3>
<p id="detail-summary">태양에 가장 가까운 행성이며 태양계에서 가장 작은 행성입니다.</p>
<ul class="fact-list">
<li id="detail-type">유형 · 암석형 행성</li>
<li id="detail-group">안쪽의 네 암석형 행성 중 하나입니다.</li>
</ul>
</article>
</div>
<div class="panel-actions">
<button class="secondary-button reset-all" type="button">전체 다시 시작</button>
</div>
</section>
<section id="panel-compare" class="panel" role="tabpanel" aria-labelledby="tab-compare" hidden>
<div class="panel-heading">
<p class="eyebrow">MISSION 02</p>
<h2>두 행성을 비교하세요</h2>
<p>서로 다른 행성을 골라 태양에서의 순서와 유형을 나란히 봅니다.</p>
</div>
<div class="compare-controls">
<div class="field">
<label for="planet-a">첫 번째 행성</label>
<select id="planet-a">
<option value="0">수성</option><option value="1">금성</option><option value="2">지구</option><option value="3">화성</option>
<option value="4">목성</option><option value="5">토성</option><option value="6">천왕성</option><option value="7">해왕성</option>
</select>
</div>
<div class="field">
<label for="planet-b">두 번째 행성</label>
<select id="planet-b">
<option value="0">수성</option><option value="1">금성</option><option value="2" selected>지구</option><option value="3">화성</option>
<option value="4">목성</option><option value="5">토성</option><option value="6">천왕성</option><option value="7">해왕성</option>
</select>
</div>
<button id="compare-button" class="primary-button" type="button">즉시 확인</button>
</div>
<article class="result-card" aria-live="polite" aria-atomic="true">
<p class="detail-kicker">비교 결과</p>
<h3 id="compare-title">수성과 지구</h3>
<p id="compare-summary">수성이 지구보다 태양에 가깝습니다. 두 행성은 모두 암석형 행성입니다.</p>
<div class="compare-result-grid">
<div class="compare-planet"><strong id="compare-a-name">수성</strong><span id="compare-a-fact">태양에서 1번째 · 암석형 행성</span></div>
<div class="compare-planet"><strong id="compare-b-name">지구</strong><span id="compare-b-fact">태양에서 3번째 · 암석형 행성</span></div>
</div>
</article>
<p id="compare-feedback" class="feedback" aria-live="polite">두 행성이 어떻게 다른지 읽고 다른 조합도 비교해 보세요.</p>
<div class="panel-actions">
<button id="compare-reset" class="secondary-button" type="button">비교 다시 시작</button>
<button class="secondary-button reset-all" type="button">전체 다시 시작</button>
</div>
</section>
<section id="panel-order" class="panel" role="tabpanel" aria-labelledby="tab-order" hidden>
<div class="panel-heading">
<p class="eyebrow">MISSION 03</p>
<h2>태양에서 가까운 순서로 선택하세요</h2>
<p>섞인 행성 이름에서 가장 가까운 행성부터 하나씩 누르면 즉시 피드백이 나옵니다.</p>
</div>
<div class="order-status">
<div>
<p class="progress-label">현재 진행</p>
<p id="order-progress">0 / 8개 선택</p>
</div>
<button id="order-reset" class="secondary-button" type="button">활동 다시 시작</button>
</div>
<div id="order-buttons" class="order-buttons" aria-label="섞인 행성 선택지"></div>
<div id="order-track" class="order-track" aria-label="완성한 행성 순서"><span>아직 선택한 행성이 없습니다</span></div>
<p id="order-feedback" class="feedback" aria-live="polite" aria-atomic="true">가장 먼저 수성을 찾아 눌러 보세요.</p>
<div class="panel-actions">
<button class="secondary-button reset-all" type="button">전체 다시 시작</button>
</div>
</section>
<p class="source-note">학습 사실 근거: NASA Science · About the Planets / Our Solar System, IAU Resolution B5</p>
</main>
<script>
(function () {
'use strict';
var planets = [
{ name: '수성', order: 1, type: '암석형 행성', summary: '태양에 가장 가까운 행성이며 태양계에서 가장 작은 행성입니다.', group: '안쪽의 네 암석형 행성 중 하나입니다.' },
{ name: '금성', order: 2, type: '암석형 행성', summary: '태양에서 두 번째에 있는 암석형 행성입니다.', group: '안쪽의 네 암석형 행성 중 하나입니다.' },
{ name: '지구', order: 3, type: '암석형 행성', summary: '우리가 사는 행성이며 태양에서 세 번째에 있습니다.', group: '안쪽의 네 암석형 행성 중 하나입니다.' },
{ name: '화성', order: 4, type: '암석형 행성', summary: '태양에서 네 번째에 있는 암석형 행성입니다.', group: '안쪽의 네 암석형 행성 중 하나입니다.' },
{ name: '목성', order: 5, type: '가스 거대 행성', summary: '태양에서 다섯 번째에 있으며 태양계에서 가장 큰 행성입니다.', group: '토성과 함께 가스 거대 행성으로 분류합니다.' },
{ name: '토성', order: 6, type: '가스 거대 행성', summary: '태양에서 여섯 번째에 있는 가스 거대 행성입니다.', group: '목성과 함께 가스 거대 행성으로 분류합니다.' },
{ name: '천왕성', order: 7, type: '얼음 거대 행성', summary: '태양에서 일곱 번째에 있는 얼음 거대 행성입니다.', group: '해왕성과 함께 얼음 거대 행성으로 분류합니다.' },
{ name: '해왕성', order: 8, type: '얼음 거대 행성', summary: '태양에서 여덟 번째이자 가장 먼 행성입니다.', group: '천왕성과 함께 얼음 거대 행성으로 분류합니다.' }
];
var tabButtons = Array.from(document.querySelectorAll('.tab-button'));
var panels = {
explore: document.getElementById('panel-explore'),
compare: document.getElementById('panel-compare'),
order: document.getElementById('panel-order')
};
var planetButtons = Array.from(document.querySelectorAll('.planet-button'));
var detailOrder = document.getElementById('detail-order');
var detailName = document.getElementById('detail-name');
var detailSummary = document.getElementById('detail-summary');
var detailType = document.getElementById('detail-type');
var detailGroup = document.getElementById('detail-group');
var firstSelect = document.getElementById('planet-a');
var secondSelect = document.getElementById('planet-b');
var compareFeedback = document.getElementById('compare-feedback');
var orderButtons = document.getElementById('order-buttons');
var orderTrack = document.getElementById('order-track');
var orderFeedback = document.getElementById('order-feedback');
var orderProgress = document.getElementById('order-progress');
var orderIndex = 0;
function ordinalText(order) {
return '태양에서 ' + order + '번째';
}
function showPanel(name, focusPanel) {
tabButtons.forEach(function (button) {
var active = button.dataset.panel === name;
button.setAttribute('aria-selected', active ? 'true' : 'false');
button.tabIndex = active ? 0 : -1;
});
Object.keys(panels).forEach(function (key) {
panels[key].hidden = key !== name;
});
if (focusPanel) {
panels[name].querySelector('h2').focus({ preventScroll: true });
}
}
function renderPlanet(index) {
var planet = planets[index];
planetButtons.forEach(function (button) {
button.setAttribute('aria-pressed', Number(button.dataset.planet) === index ? 'true' : 'false');
});
detailOrder.textContent = ordinalText(planet.order);
detailName.textContent = planet.name;
detailSummary.textContent = planet.summary;
detailType.textContent = '유형 · ' + planet.type;
detailGroup.textContent = planet.group;
}
function renderComparison() {
var first = planets[Number(firstSelect.value)];
var second = planets[Number(secondSelect.value)];
var title = document.getElementById('compare-title');
var summary = document.getElementById('compare-summary');
var firstName = document.getElementById('compare-a-name');
var firstFact = document.getElementById('compare-a-fact');
var secondName = document.getElementById('compare-b-name');
var secondFact = document.getElementById('compare-b-fact');
title.textContent = first.name + '과 ' + second.name;
firstName.textContent = first.name;
firstFact.textContent = ordinalText(first.order) + ' · ' + first.type;
secondName.textContent = second.name;
secondFact.textContent = ordinalText(second.order) + ' · ' + second.type;
if (first.order === second.order) {
summary.textContent = '같은 행성을 두 번 골랐습니다. 서로 다른 행성을 선택해 주세요.';
compareFeedback.textContent = '서로 다른 두 행성을 골라야 비교할 수 있습니다.';
compareFeedback.dataset.tone = 'wrong';
return;
}
var closer = first.order < second.order ? first : second;
var typeCopy = first.type === second.type
? '두 행성은 모두 ' + first.type + '입니다.'
: first.name + '은 ' + first.type + ', ' + second.name + '은 ' + second.type + '입니다.';
summary.textContent = closer.name + '이 태양에 더 가깝습니다. ' + typeCopy;
compareFeedback.textContent = '비교 완료! 순서와 유형을 함께 확인했습니다.';
compareFeedback.dataset.tone = 'correct';
}
function shuffledIndexes() {
var values = planets.map(function (_planet, index) { return index; });
for (var cursor = values.length - 1; cursor > 0; cursor -= 1) {
var target = Math.floor(Math.random() * (cursor + 1));
var temporary = values[cursor];
values[cursor] = values[target];
values[target] = temporary;
}
return values;
}
function renderOrderTrack() {
orderTrack.replaceChildren();
if (orderIndex === 0) {
var empty = document.createElement('span');
empty.textContent = '아직 선택한 행성이 없습니다';
orderTrack.appendChild(empty);
return;
}
planets.slice(0, orderIndex).forEach(function (planet) {
var chip = document.createElement('span');
chip.textContent = planet.order + '. ' + planet.name;
orderTrack.appendChild(chip);
});
}
function chooseOrder(button, index) {
if (index !== orderIndex) {
button.classList.add('is-wrong');
orderFeedback.textContent = '아직 ' + planets[orderIndex].name + ' 차례입니다. 태양에서 더 가까운 행성을 찾아보세요.';
orderFeedback.dataset.tone = 'wrong';
window.setTimeout(function () { button.classList.remove('is-wrong'); }, 420);
return;
}
button.classList.add('is-correct');
button.disabled = true;
orderIndex += 1;
orderProgress.textContent = orderIndex + ' / 8개 선택';
renderOrderTrack();
if (orderIndex === planets.length) {
orderFeedback.textContent = '순서 완성! 수성에서 해왕성까지 8개 행성을 모두 정확히 연결했습니다.';
orderFeedback.dataset.tone = 'correct';
return;
}
orderFeedback.textContent = '정답입니다. 다음은 ' + planets[orderIndex].name + '을 찾아보세요.';
orderFeedback.dataset.tone = 'correct';
}
function resetOrder() {
orderIndex = 0;
orderProgress.textContent = '0 / 8개 선택';
orderFeedback.textContent = '가장 먼저 수성을 찾아 눌러 보세요.';
orderFeedback.dataset.tone = '';
orderButtons.replaceChildren();
shuffledIndexes().forEach(function (index) {
var button = document.createElement('button');
button.type = 'button';
button.className = 'order-button';
button.textContent = planets[index].name;
button.addEventListener('click', function () { chooseOrder(button, index); });
orderButtons.appendChild(button);
});
renderOrderTrack();
}
function resetAll() {
renderPlanet(0);
firstSelect.value = '0';
secondSelect.value = '2';
renderComparison();
compareFeedback.textContent = '두 행성이 어떻게 다른지 읽고 다른 조합도 비교해 보세요.';
compareFeedback.dataset.tone = '';
resetOrder();
showPanel('explore', false);
tabButtons[0].focus();
}
tabButtons.forEach(function (button, index) {
button.addEventListener('click', function () { showPanel(button.dataset.panel, false); });
button.addEventListener('keydown', function (event) {
if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') { return; }
event.preventDefault();
var direction = event.key === 'ArrowRight' ? 1 : -1;
var nextIndex = (index + direction + tabButtons.length) % tabButtons.length;
tabButtons[nextIndex].focus();
showPanel(tabButtons[nextIndex].dataset.panel, false);
});
});
planetButtons.forEach(function (button) {
button.addEventListener('click', function () { renderPlanet(Number(button.dataset.planet)); });
});
document.getElementById('compare-button').addEventListener('click', renderComparison);
document.getElementById('compare-reset').addEventListener('click', function () {
firstSelect.value = '0';
secondSelect.value = '2';
renderComparison();
compareFeedback.textContent = '비교를 처음 상태로 돌렸습니다.';
compareFeedback.dataset.tone = '';
firstSelect.focus();
});
document.getElementById('order-reset').addEventListener('click', function () {
resetOrder();
orderButtons.querySelector('button').focus();
});
Array.from(document.querySelectorAll('.reset-all')).forEach(function (button) {
button.addEventListener('click', resetAll);
});
renderPlanet(0);
renderComparison();
resetOrder();
}());
</script>
</body>
</html>