|
|
<!doctype html>
|
|
|
<html lang="ko">
|
|
|
<head>
|
|
|
<meta charset="utf-8"/>
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
|
<title>웹 퀴즈</title>
|
|
|
<style>
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
|
|
* {
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
line-height: 1.6;
|
|
|
margin: 0;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
color: #1a202c;
|
|
|
min-height: 100vh;
|
|
|
padding: 20px 0;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
max-width: 800px;
|
|
|
margin: 0 auto;
|
|
|
padding: 0 20px;
|
|
|
}
|
|
|
|
|
|
.quiz-header {
|
|
|
background: rgba(255, 255, 255, 0.95);
|
|
|
backdrop-filter: blur(20px);
|
|
|
border-radius: 20px;
|
|
|
padding: 30px;
|
|
|
margin-bottom: 25px;
|
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
}
|
|
|
|
|
|
.quiz-title {
|
|
|
font-size: 28px;
|
|
|
font-weight: 700;
|
|
|
margin: 0 0 15px 0;
|
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
background-clip: text;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.quiz-controls {
|
|
|
display: flex;
|
|
|
gap: 12px;
|
|
|
justify-content: center;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
|
color: white;
|
|
|
border: none;
|
|
|
border-radius: 12px;
|
|
|
padding: 12px 24px;
|
|
|
cursor: pointer;
|
|
|
font-weight: 500;
|
|
|
font-size: 14px;
|
|
|
transition: all 0.3s ease;
|
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
|
|
}
|
|
|
|
|
|
.btn:hover:not(:disabled) {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
|
|
|
}
|
|
|
|
|
|
.btn:disabled {
|
|
|
opacity: 0.5;
|
|
|
cursor: not-allowed;
|
|
|
transform: none;
|
|
|
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
|
|
|
}
|
|
|
|
|
|
.status-bar {
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
backdrop-filter: blur(10px);
|
|
|
border-radius: 15px;
|
|
|
padding: 15px 25px;
|
|
|
margin-bottom: 20px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
.progress-info {
|
|
|
font-weight: 500;
|
|
|
color: #4a5568;
|
|
|
}
|
|
|
|
|
|
.score-display {
|
|
|
background: linear-gradient(135deg, #48bb78, #38a169);
|
|
|
color: white;
|
|
|
padding: 8px 16px;
|
|
|
border-radius: 20px;
|
|
|
font-weight: 600;
|
|
|
font-size: 14px;
|
|
|
box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
|
|
|
}
|
|
|
|
|
|
.message-area {
|
|
|
min-height: 24px;
|
|
|
text-align: center;
|
|
|
font-weight: 500;
|
|
|
color: #e53e3e;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
|
|
|
.card {
|
|
|
background: rgba(255, 255, 255, 0.95);
|
|
|
backdrop-filter: blur(20px);
|
|
|
border-radius: 20px;
|
|
|
padding: 30px;
|
|
|
margin: 20px 0;
|
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.card:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
|
|
|
}
|
|
|
|
|
|
.question-text {
|
|
|
font-size: 18px;
|
|
|
font-weight: 500;
|
|
|
line-height: 1.7;
|
|
|
margin-bottom: 25px;
|
|
|
color: #2d3748;
|
|
|
}
|
|
|
|
|
|
.choice-wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin: 12px 0;
|
|
|
}
|
|
|
|
|
|
.choice {
|
|
|
display: block;
|
|
|
border: 2px solid #e2e8f0;
|
|
|
border-radius: 12px;
|
|
|
padding: 16px 20px;
|
|
|
margin: 0;
|
|
|
background: white;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s ease;
|
|
|
font-weight: 500;
|
|
|
color: #4a5568;
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.choice:hover {
|
|
|
border-color: #667eea;
|
|
|
background: #f7fafc;
|
|
|
transform: translateX(4px);
|
|
|
}
|
|
|
|
|
|
.choice.selected {
|
|
|
border-color: #667eea;
|
|
|
background: linear-gradient(135deg, #ebf4ff, #e6fffa);
|
|
|
color: #2b6cb0;
|
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
|
|
}
|
|
|
|
|
|
.choice.correct {
|
|
|
border-color: #48bb78;
|
|
|
background: linear-gradient(135deg, #f0fff4, #c6f6d5);
|
|
|
color: #22543d;
|
|
|
box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
|
|
|
}
|
|
|
|
|
|
.choice.wrong {
|
|
|
border-color: #f56565;
|
|
|
background: linear-gradient(135deg, #fff5f5, #fed7d7);
|
|
|
color: #742a2a;
|
|
|
box-shadow: 0 4px 12px rgba(245, 101, 101, 0.3);
|
|
|
}
|
|
|
|
|
|
.choice:disabled {
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
|
|
|
.checkbox-input {
|
|
|
margin-right: 12px;
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
accent-color: #667eea;
|
|
|
}
|
|
|
|
|
|
.result-card {
|
|
|
background: rgba(255, 255, 255, 0.95);
|
|
|
backdrop-filter: blur(20px);
|
|
|
border-radius: 20px;
|
|
|
padding: 30px;
|
|
|
margin-top: 20px;
|
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
}
|
|
|
|
|
|
.result-status {
|
|
|
font-size: 20px;
|
|
|
font-weight: 700;
|
|
|
margin-bottom: 15px;
|
|
|
text-align: center;
|
|
|
padding: 15px;
|
|
|
border-radius: 12px;
|
|
|
}
|
|
|
|
|
|
.result-correct {
|
|
|
background: linear-gradient(135deg, #c6f6d5, #9ae6b4);
|
|
|
color: #22543d;
|
|
|
}
|
|
|
|
|
|
.result-wrong {
|
|
|
background: linear-gradient(135deg, #fed7d7, #fbb6ce);
|
|
|
color: #742a2a;
|
|
|
}
|
|
|
|
|
|
.answer-display {
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
margin: 15px 0;
|
|
|
padding: 15px;
|
|
|
background: #f7fafc;
|
|
|
border-radius: 10px;
|
|
|
border-left: 4px solid #667eea;
|
|
|
}
|
|
|
|
|
|
.explanation {
|
|
|
color: #718096;
|
|
|
font-size: 14px;
|
|
|
line-height: 1.6;
|
|
|
margin-top: 15px;
|
|
|
padding: 15px;
|
|
|
background: #f8f9fa;
|
|
|
border-radius: 10px;
|
|
|
border-left: 4px solid #a0aec0;
|
|
|
}
|
|
|
|
|
|
.meta-info {
|
|
|
color: #a0aec0;
|
|
|
font-size: 12px;
|
|
|
font-weight: 500;
|
|
|
margin-top: 20px;
|
|
|
text-align: center;
|
|
|
text-transform: uppercase;
|
|
|
letter-spacing: 0.5px;
|
|
|
}
|
|
|
|
|
|
.completion-card {
|
|
|
text-align: center;
|
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
|
color: white;
|
|
|
border-radius: 20px;
|
|
|
padding: 40px;
|
|
|
box-shadow: 0 25px 50px rgba(102, 126, 234, 0.3);
|
|
|
}
|
|
|
|
|
|
.completion-title {
|
|
|
font-size: 32px;
|
|
|
font-weight: 700;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
|
|
|
.completion-score {
|
|
|
font-size: 18px;
|
|
|
opacity: 0.9;
|
|
|
margin-bottom: 25px;
|
|
|
}
|
|
|
|
|
|
.restart-btn {
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
|
color: white;
|
|
|
padding: 15px 30px;
|
|
|
border-radius: 12px;
|
|
|
font-weight: 600;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.restart-btn:hover {
|
|
|
background: rgba(255, 255, 255, 0.3);
|
|
|
transform: translateY(-2px);
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
.container {
|
|
|
padding: 0 10px;
|
|
|
}
|
|
|
|
|
|
.quiz-header {
|
|
|
padding: 20px 15px;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
|
|
|
.quiz-title {
|
|
|
font-size: 22px;
|
|
|
}
|
|
|
|
|
|
.quiz-controls {
|
|
|
gap: 8px;
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
padding: 10px 18px;
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
|
|
|
.status-bar {
|
|
|
padding: 12px 20px;
|
|
|
flex-direction: column;
|
|
|
gap: 10px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.card {
|
|
|
padding: 20px 15px;
|
|
|
margin: 15px 0;
|
|
|
}
|
|
|
|
|
|
.question-text {
|
|
|
font-size: 16px;
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
.choice-wrapper {
|
|
|
margin: 10px 0;
|
|
|
}
|
|
|
|
|
|
.choice {
|
|
|
padding: 14px 16px;
|
|
|
font-size: 14px;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
.checkbox-input {
|
|
|
margin-right: 10px;
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
}
|
|
|
|
|
|
.result-card {
|
|
|
padding: 20px 15px;
|
|
|
}
|
|
|
|
|
|
.result-status {
|
|
|
font-size: 18px;
|
|
|
padding: 12px;
|
|
|
}
|
|
|
|
|
|
.answer-display {
|
|
|
font-size: 15px;
|
|
|
padding: 12px;
|
|
|
}
|
|
|
|
|
|
.explanation {
|
|
|
font-size: 13px;
|
|
|
padding: 12px;
|
|
|
}
|
|
|
|
|
|
.completion-card {
|
|
|
padding: 30px 20px;
|
|
|
}
|
|
|
|
|
|
.completion-title {
|
|
|
font-size: 26px;
|
|
|
}
|
|
|
|
|
|
.completion-score {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
|
body {
|
|
|
padding: 10px 0;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
padding: 0 8px;
|
|
|
}
|
|
|
|
|
|
.quiz-header {
|
|
|
padding: 15px 12px;
|
|
|
}
|
|
|
|
|
|
.quiz-title {
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
padding: 8px 14px;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
.status-bar {
|
|
|
padding: 10px 15px;
|
|
|
}
|
|
|
|
|
|
.card {
|
|
|
padding: 15px 12px;
|
|
|
}
|
|
|
|
|
|
.question-text {
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
|
|
|
.choice {
|
|
|
padding: 12px 14px;
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
|
|
|
.checkbox-input {
|
|
|
width: 14px;
|
|
|
height: 14px;
|
|
|
}
|
|
|
|
|
|
.completion-title {
|
|
|
font-size: 24px;
|
|
|
}
|
|
|
|
|
|
.completion-score {
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
<div class="quiz-header">
|
|
|
<h1 class="quiz-title">인적자원관리 퀴즈</h1>
|
|
|
<div class="quiz-controls">
|
|
|
<button id="prev" class="btn">← 이전</button>
|
|
|
<button id="next" class="btn">다음 →</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="status-bar">
|
|
|
<div id="status" class="progress-info">문항 1/16</div>
|
|
|
<div class="score-display">점수: <span id="score-text">0</span></div>
|
|
|
</div>
|
|
|
|
|
|
<div id="message" class="message-area"></div>
|
|
|
<div id="quiz"></div>
|
|
|
</div>
|
|
|
<script>
|
|
|
let questions=[], idx=0, score=0, state=new Map(), finished=false;
|
|
|
function getState(i){ if(!state.has(i)) state.set(i,{selected:null, correct:false, revealed:false, scored:false}); return state.get(i); }
|
|
|
async function load(){
|
|
|
|
|
|
console.log('load() 함수가 호출되었습니다');
|
|
|
try{
|
|
|
const res=await fetch('questions.json',{cache:'no-store'});
|
|
|
if(!res.ok) throw new Error('HTTP '+res.status);
|
|
|
questions=await res.json();
|
|
|
}catch(e){
|
|
|
console.error('questions.json 로드 실패:', e);
|
|
|
const msg=document.getElementById('message');
|
|
|
if(msg) msg.textContent='문항 로드 실패: '+ (e && e.message ? e.message : e);
|
|
|
return;
|
|
|
}
|
|
|
idx=0; score=0; state.clear(); finished=false; render();
|
|
|
}
|
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
console.log('DOM 로드 완료');
|
|
|
if (typeof questions === 'undefined' || questions.length === 0) {
|
|
|
console.log('questions가 정의되지 않았거나 비어있음, load() 호출');
|
|
|
load();
|
|
|
} else {
|
|
|
console.log('questions 이미 정의됨, render() 호출');
|
|
|
render();
|
|
|
}
|
|
|
});
|
|
|
function normalize(s){return (s||'').toString().replace(/[\s ]+/g,'').toLowerCase();}
|
|
|
function escapeHtml(s){ const div=document.createElement('div'); div.textContent = (s ?? ''); return div.innerHTML; }
|
|
|
function render(){
|
|
|
const quiz=document.getElementById('quiz'); quiz.innerHTML='';
|
|
|
if(finished){
|
|
|
const done=document.createElement('div');
|
|
|
done.className='completion-card';
|
|
|
done.innerHTML = `
|
|
|
<div class="completion-title">퀴즈 완료! 🎉</div>
|
|
|
<div class="completion-score">최종 점수: ${score}/${questions.length} (${Math.round(score/questions.length*100)}%)</div>
|
|
|
<button class="restart-btn" onclick="restartQuiz()">다시 시작하기</button>
|
|
|
`;
|
|
|
quiz.appendChild(done);
|
|
|
|
|
|
const nextBtn=document.getElementById('next');
|
|
|
const prevBtn=document.getElementById('prev');
|
|
|
document.getElementById('status').textContent=`완료`;
|
|
|
document.getElementById('score-text').textContent=`${score}/${questions.length}`;
|
|
|
prevBtn.disabled = true;
|
|
|
nextBtn.textContent = '처음으로';
|
|
|
return;
|
|
|
}
|
|
|
const q=questions[idx]; const st=getState(idx);
|
|
|
|
|
|
const card=document.createElement('div'); card.className='card';
|
|
|
const questionDiv=document.createElement('div');
|
|
|
questionDiv.className='question-text';
|
|
|
questionDiv.textContent=q.prompt;
|
|
|
card.appendChild(questionDiv);
|
|
|
|
|
|
if(q.choices && q.choices.length){
|
|
|
const isMultiple = q.qtype === 'multiple';
|
|
|
|
|
|
q.choices.forEach((c,i)=>{
|
|
|
const wrapper=document.createElement('div');
|
|
|
wrapper.className='choice-wrapper';
|
|
|
|
|
|
if(isMultiple){
|
|
|
|
|
|
const checkbox=document.createElement('input');
|
|
|
checkbox.type='checkbox'; checkbox.id=`choice_${i}`; checkbox.value=c;
|
|
|
checkbox.className='checkbox-input';
|
|
|
|
|
|
const label=document.createElement('label');
|
|
|
label.htmlFor=`choice_${i}`; label.className='choice';
|
|
|
label.textContent=(i+1)+'. '+c;
|
|
|
|
|
|
if(!st.revealed){
|
|
|
checkbox.onchange=()=>selectMultiple(c, checkbox.checked);
|
|
|
if(st.selected && st.selected.includes && st.selected.includes(c)) {
|
|
|
checkbox.checked=true; label.classList.add('selected');
|
|
|
}
|
|
|
}else{
|
|
|
|
|
|
const isCorrect = Array.isArray(q.answer) ? q.answer.includes(c) : normalize(c)===normalize(q.answer);
|
|
|
if(isCorrect) label.classList.add('correct');
|
|
|
if(st.selected && st.selected.includes && st.selected.includes(c) && !isCorrect) label.classList.add('wrong');
|
|
|
checkbox.disabled=true;
|
|
|
}
|
|
|
|
|
|
wrapper.appendChild(checkbox); wrapper.appendChild(label);
|
|
|
}else{
|
|
|
|
|
|
const btn=document.createElement('button'); btn.className='choice'; btn.textContent=(i+1)+'. '+c;
|
|
|
if(!st.revealed){
|
|
|
btn.onclick=()=>select(c);
|
|
|
if(st.selected===c) btn.classList.add('selected');
|
|
|
}else{
|
|
|
|
|
|
const isCorrect = Array.isArray(q.answer) ? q.answer.includes(c) : normalize(c)===normalize(q.answer);
|
|
|
if(isCorrect) btn.classList.add('correct');
|
|
|
if(st.selected===c && !isCorrect) btn.classList.add('wrong');
|
|
|
btn.disabled=true;
|
|
|
}
|
|
|
wrapper.appendChild(btn);
|
|
|
}
|
|
|
|
|
|
card.appendChild(wrapper);
|
|
|
});
|
|
|
}else{
|
|
|
const input=document.createElement('input');
|
|
|
input.placeholder='정답 입력';
|
|
|
input.style='width:100%;padding:15px;border:2px solid #e2e8f0;border-radius:12px;margin-top:15px;font-size:16px;';
|
|
|
input.value = st.selected||'';
|
|
|
const check=document.createElement('button');
|
|
|
check.className='btn';
|
|
|
check.style='margin-top:15px;width:100%;';
|
|
|
check.textContent= st.revealed? '제출됨' : '제출';
|
|
|
if(!st.revealed){
|
|
|
check.onclick=()=>select(input.value.trim());
|
|
|
}else{
|
|
|
check.disabled=true;
|
|
|
}
|
|
|
card.appendChild(input); card.appendChild(check);
|
|
|
}
|
|
|
|
|
|
|
|
|
if(st.revealed){
|
|
|
const resultCard=document.createElement('div');
|
|
|
resultCard.className='result-card';
|
|
|
|
|
|
|
|
|
const resultDiv = document.createElement('div');
|
|
|
resultDiv.className = st.correct ? 'result-status result-correct' : 'result-status result-wrong';
|
|
|
resultDiv.textContent = st.correct ? '정답입니다! ✅' : '틀렸습니다! ❌';
|
|
|
resultCard.appendChild(resultDiv);
|
|
|
|
|
|
|
|
|
let answerText = '';
|
|
|
if(Array.isArray(q.answer)){
|
|
|
|
|
|
const answerNumbers = [];
|
|
|
q.answer.forEach(ans => {
|
|
|
const index = q.choices.findIndex(choice => normalize(choice) === normalize(ans));
|
|
|
if(index !== -1) answerNumbers.push(index + 1);
|
|
|
});
|
|
|
answerText = answerNumbers.join(', ');
|
|
|
}else{
|
|
|
|
|
|
const index = q.choices.findIndex(choice => normalize(choice) === normalize(q.answer));
|
|
|
answerText = index !== -1 ? (index + 1).toString() : '1';
|
|
|
}
|
|
|
|
|
|
const answerDiv = document.createElement('div');
|
|
|
answerDiv.className = 'answer-display';
|
|
|
answerDiv.innerHTML = `<strong>정답</strong>: ${answerText}`;
|
|
|
resultCard.appendChild(answerDiv);
|
|
|
|
|
|
|
|
|
if(q.explanation && q.explanation.toString().trim()){
|
|
|
const explanationDiv = document.createElement('div');
|
|
|
explanationDiv.className = 'explanation';
|
|
|
explanationDiv.innerHTML = `<strong>해설:</strong> ${escapeHtml(q.explanation.toString())}`;
|
|
|
resultCard.appendChild(explanationDiv);
|
|
|
}
|
|
|
|
|
|
card.appendChild(resultCard);
|
|
|
}
|
|
|
|
|
|
const meta=document.createElement('div');
|
|
|
meta.className='meta-info';
|
|
|
meta.textContent='유형: '+q.qtype.toUpperCase();
|
|
|
card.appendChild(meta);
|
|
|
|
|
|
quiz.appendChild(card);
|
|
|
|
|
|
const nextBtn=document.getElementById('next');
|
|
|
const prevBtn=document.getElementById('prev');
|
|
|
document.getElementById('status').textContent=`문항 ${idx+1}/${questions.length}`;
|
|
|
document.getElementById('score-text').textContent=`${score}/${questions.length}`;
|
|
|
prevBtn.disabled = idx===0;
|
|
|
nextBtn.textContent = st.revealed ? (idx===questions.length-1 ? '완료' : '다음 →') : '다음 →';
|
|
|
}
|
|
|
function selectMultiple(val, checked){
|
|
|
const q=questions[idx]; const st=getState(idx);
|
|
|
if(st.revealed) return;
|
|
|
|
|
|
if(!st.selected) st.selected = [];
|
|
|
if(!Array.isArray(st.selected)) st.selected = [];
|
|
|
|
|
|
if(checked){
|
|
|
if(!st.selected.includes(val)) st.selected.push(val);
|
|
|
}else{
|
|
|
st.selected = st.selected.filter(item => item !== val);
|
|
|
}
|
|
|
|
|
|
document.getElementById('message').textContent='';
|
|
|
render();
|
|
|
}
|
|
|
function select(val){
|
|
|
const q=questions[idx]; const st=getState(idx);
|
|
|
if(st.revealed) return;
|
|
|
st.selected = val;
|
|
|
st.correct = normalize(val)===normalize(q.answer);
|
|
|
document.getElementById('message').textContent='';
|
|
|
render();
|
|
|
}
|
|
|
function restartQuiz(){
|
|
|
idx=0; score=0; state.clear(); finished=false;
|
|
|
document.getElementById('message').textContent='';
|
|
|
render();
|
|
|
}
|
|
|
document.getElementById('prev').onclick=()=>{ if(finished) return; if(idx>0){ idx--; render(); }};
|
|
|
document.getElementById('next').onclick=()=>{
|
|
|
if(finished){ restartQuiz(); return; }
|
|
|
const st=getState(idx);
|
|
|
const q=questions[idx];
|
|
|
const msg=document.getElementById('message');
|
|
|
|
|
|
if(!st.revealed){
|
|
|
if(st.selected==null || (Array.isArray(st.selected) && st.selected.length===0)){
|
|
|
msg.textContent='먼저 답을 선택하세요.'; return;
|
|
|
}
|
|
|
|
|
|
|
|
|
st.revealed=true;
|
|
|
|
|
|
|
|
|
let isCorrect = false;
|
|
|
if(q.qtype === 'multiple'){
|
|
|
|
|
|
if(Array.isArray(q.answer) && Array.isArray(st.selected)){
|
|
|
const sortedAnswer = [...q.answer].sort();
|
|
|
const sortedSelected = [...st.selected].sort();
|
|
|
isCorrect = sortedAnswer.length === sortedSelected.length &&
|
|
|
sortedAnswer.every((ans, i) => normalize(ans) === normalize(sortedSelected[i]));
|
|
|
}
|
|
|
}else{
|
|
|
|
|
|
isCorrect = Array.isArray(q.answer) ?
|
|
|
q.answer.some(ans => normalize(st.selected) === normalize(ans)) :
|
|
|
normalize(st.selected) === normalize(q.answer);
|
|
|
}
|
|
|
|
|
|
st.correct = isCorrect;
|
|
|
if(st.correct && !st.scored){ score++; st.scored=true; }
|
|
|
render();
|
|
|
}else{
|
|
|
if(idx<questions.length-1){ idx++; render(); }
|
|
|
else { finished=true; render(); }
|
|
|
}
|
|
|
};
|
|
|
load();
|
|
|
</script>
|
|
|
</body></html> |
