-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
168 lines (148 loc) · 8.69 KB
/
Copy pathindex.html
File metadata and controls
168 lines (148 loc) · 8.69 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>cachehit — 당신의 캐시 히트율은?</title>
<meta name="description" content="CDN·캐싱·이미지/동영상 서빙 파이프라인을 얼마나 알고 계신가요? 백엔드 개발자를 위한 콘텐츠 서빙 퀴즈.">
<meta property="og:title" content="cachehit — 당신의 캐시 히트율은?">
<meta property="og:description" content="CDN·캐싱·이미지/동영상 서빙 퀴즈. 모든 오답은 실제 오개념에서 가져왔습니다.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="cachehit">
<meta property="og:locale" content="ko_KR">
<meta property="og:url" content="https://midagedev.github.io/cachehit/">
<!-- summary_large_image 카드는 이 이미지가 없으면 렌더되지 않는다. 생성: python3 tools/make-og.py -->
<meta property="og:image" content="https://midagedev.github.io/cachehit/assets/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="cachehit — 당신의 캐시 히트율은? CDN·캐싱·이미지/동영상 서빙 파이프라인 퀴즈">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="cachehit — 당신의 캐시 히트율은?">
<meta name="twitter:description" content="CDN·캐싱·이미지/동영상 서빙 퀴즈. 모든 오답은 실제 오개념에서 가져왔습니다.">
<meta name="twitter:image" content="https://midagedev.github.io/cachehit/assets/og.png">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💾</text></svg>">
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<main id="app">
<!-- ── 시작 ───────────────────────────────────────── -->
<section id="screen-intro" class="screen">
<div class="hero">
<div class="logo">cache<span class="accent">hit</span></div>
<h1>당신의 캐시 히트율은?</h1>
<p class="lede">
CDN·캐싱·이미지/동영상 서빙 파이프라인.<br>
매일 쓰지만 정확히는 모르는 것들을 물어봅니다.
</p>
<div class="len-pick">
<div class="len-btns" role="group" aria-label="문항 수">
<button class="btn btn-len" data-len="10" aria-pressed="true">10문항</button>
<button class="btn btn-len" data-len="20" aria-pressed="false">20문항</button>
</div>
<p class="len-note"><b id="intro-minutes">–</b>분 예상 · 4지선다 · 주제 5개에서 골고루</p>
</div>
<button id="btn-start" class="btn btn-primary btn-lg">시작하기</button>
<div id="best-record" class="best hidden">
이전 최고 기록 <b></b>
</div>
<details class="how">
<summary>어떻게 만든 퀴즈인가요?</summary>
<div class="how-body">
<p>학습 효과가 검증된 방식으로 설계했습니다.</p>
<ul>
<li><b>오답이 진짜입니다.</b> 모든 오답은 현업에서 실제로 흔한 오해에서 가져왔습니다. 아무 보기나 채워 넣지 않았습니다.</li>
<li><b>확신도를 함께 묻습니다.</b> 확신했는데 틀린 오류가 가장 강하게 교정됩니다(hypercorrection). 그래서 그 순간을 놓치지 않고 표시합니다.</li>
<li><b>모르겠으면 찍고 “찍었어요”를 누르세요.</b> 건너뛰기 버튼은 두지 않았습니다. 틀릴 줄 알면서 한 인출 시도도 이후 학습을 돕고, 즉시 해설이 붙어 있으면 추측한 내용이 오답인 채로 기억에 남을 위험도 사라지기 때문입니다. 대신 <b>찍어서 맞은 문항</b>을 결과에서 따로 모아 드립니다.</li>
<li><b>즉시 해설합니다.</b> 왜 정답인지뿐 아니라 <b>당신이 고른 오답이 왜 틀렸는지</b>를 함께 보여줍니다.</li>
<li><b>약한 것만 다시 풉니다.</b> 틀린 문항과 찍어서 맞은 문항을 함께 모읍니다. 피드백 직후 한 번 더 인출하지 않으면 교정한 오류가 되돌아옵니다.</li>
</ul>
<p class="how-foot">문항 저작 규약은 <a href="https://github.com/midagedev/cachehit/blob/main/AUTHORING.md" target="_blank" rel="noopener">AUTHORING.md</a>에 공개되어 있습니다.</p>
</div>
</details>
</div>
</section>
<!-- ── 퀴즈 ───────────────────────────────────────── -->
<section id="screen-quiz" class="screen hidden">
<header class="quiz-head">
<div class="progress"><div id="progress-bar"></div></div>
<div class="quiz-meta">
<span id="q-counter">1 / 20</span>
<span id="q-topic" class="chip"></span>
<span id="q-diff" class="chip chip-diff"></span>
</div>
</header>
<article class="q-card">
<h2 id="q-text"></h2>
<ul id="q-options" class="options"></ul>
<div id="confidence" class="confidence hidden">
<p class="confidence-label">얼마나 확신하시나요?</p>
<div class="confidence-btns">
<button class="btn btn-conf" data-conf="sure">확신해요</button>
<button class="btn btn-conf" data-conf="unsure">반반이에요</button>
<button class="btn btn-conf" data-conf="guess">찍었어요</button>
</div>
</div>
<div id="feedback" class="feedback hidden">
<div id="verdict" class="verdict"></div>
<div id="why-yours" class="why-block hidden">
<span class="why-tag">고르신 답</span>
<p></p>
</div>
<div id="why-correct" class="why-block">
<span class="why-tag why-tag-ok">정답</span>
<p></p>
</div>
<p id="explanation" class="explanation"></p>
<p id="source" class="source"></p>
<div class="fb-actions">
<button id="btn-next" class="btn btn-primary">다음</button>
<button id="btn-copy-q" class="btn btn-ghost" title="문항·보기·해설을 마크다운으로 복사합니다. Claude나 노트에 붙여넣어 더 파고들 때 쓰세요.">문항 복사</button>
</div>
</div>
</article>
</section>
<!-- ── 결과 ───────────────────────────────────────── -->
<section id="screen-result" class="screen hidden">
<div class="result-hero">
<p class="result-label">당신의 캐시 히트율</p>
<div id="result-rate" class="result-rate">0<span>%</span></div>
<div id="result-grade" class="result-grade"></div>
<p id="result-line" class="result-line"></p>
</div>
<div class="result-body">
<h3>영역별</h3>
<div id="topic-bars" class="topic-bars"></div>
<div id="hyper-block" class="hyper hidden">
<h3>확신했는데 틀린 문항</h3>
<p class="hyper-note">가장 값진 문항들입니다. 확신이 깨진 순간이 가장 오래 기억에 남습니다.</p>
<ul id="hyper-list"></ul>
</div>
<div id="guess-block" class="hyper hidden">
<h3>찍어서 맞은 문항</h3>
<p class="hyper-note">채점은 정답이지만 아는 것은 아닙니다. 맞았기 때문에 그냥 지나치기 쉬워, 모르는 상태가 틀린 문항보다 오래 남습니다.</p>
<ul id="guess-list"></ul>
</div>
<div class="result-actions">
<button id="btn-retry-wrong" class="btn btn-primary">틀린 문항만 다시 풀기</button>
<button id="btn-share" class="btn">결과 카드 저장</button>
<a id="btn-tweet" class="btn" target="_blank" rel="noopener">X에 공유</a>
<button id="btn-restart" class="btn btn-ghost">처음부터</button>
</div>
<details class="review">
<summary>전체 문항 다시 보기</summary>
<ol id="review-list" class="review-list"></ol>
</details>
</div>
</section>
</main>
<footer class="site-foot">
<a href="https://github.com/midagedev/cachehit" target="_blank" rel="noopener">GitHub</a>
<span>·</span>
<a href="https://github.com/midagedev/cachehit/blob/main/AUTHORING.md" target="_blank" rel="noopener">문항 저작 규약</a>
<span>·</span>
<a href="https://github.com/midagedev/cachehit/issues" target="_blank" rel="noopener">문항 제보</a>
</footer>
<canvas id="card-canvas" width="1200" height="630" style="display:none"></canvas>
<script src="assets/app.js"></script>
</body>
</html>