Benzer Kitaplar
.score-box, .question-counter background: white; padding: 0.3rem 1rem; border-radius: 40px; box-shadow: inset 0 0 0 1px #ede3c8, 0 2px 4px rgba(0,0,0,0.02);
const optionsHtml = q.options.map((opt, idx) => const prefixLetter = String.fromCharCode(65 + idx); return ` <div class="option-btn" data-opt-index="$idx"> <div class="option-prefix">$prefixLetter</div> <div>$escapeHtml(opt)</div> </div> `; ).join('');
.question-text background: #fef3da; padding: 1.2rem; border-radius: 2rem; font-size: 1.6rem; font-weight: 600; text-align: center; margin-bottom: 2rem; box-shadow: inset 0 1px 4px #ede0c2, 0 4px 8px rgba(0,0,0,0.05); word-break: break-word; color: #2c221b; line-height: 1.4;
.next-btn:disabled background: #bba88a; cursor: not-allowed; transform: none;
.score-box span, .question-counter span color: #b13e3e; font-size: 1.3rem; margin-left: 6px; font-weight: 800;
if (answerLocked) if (isCorrectOption) additionalClass = "correct-highlight"; if (isSelectedWrongOption) additionalClass = "selected-wrong"; if (isSelectedCorrect) additionalClass = "selected-correct";
// エスケープ処理 (XSS対策) function escapeHtml(str) return str.replace(/[&<>]/g, function(m) if (m === '&') return '&'; if (m === '<') return '<'; if (m === '>') return '>'; return m; ).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) return c; );
.header h1 font-size: 2rem; letter-spacing: 2px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
if (isCorrect) userScore++; updateScoreUI();
/* header with japanese vibe */ .header background: #b13e3e; background: linear-gradient(135deg, #c23b3b, #9e2a2a); padding: 1.5rem 2rem; color: white; text-align: center;
// 次へボタン const nextBtn = document.getElementById('nextButton'); if (nextBtn) nextBtn.addEventListener('click', () => if (!answerLocked) return; goToNextQuestion(); );
// 通常レンダリング (初期表示、回答前) function renderCurrentQuestion() if (currentIndex >= currentQuestions.length) // クイズ終了: 結果画面を表示 showResultScreen(); return;
.options-area display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;
.score-box, .question-counter background: white; padding: 0.3rem 1rem; border-radius: 40px; box-shadow: inset 0 0 0 1px #ede3c8, 0 2px 4px rgba(0,0,0,0.02);
const optionsHtml = q.options.map((opt, idx) => const prefixLetter = String.fromCharCode(65 + idx); return ` <div class="option-btn" data-opt-index="$idx"> <div class="option-prefix">$prefixLetter</div> <div>$escapeHtml(opt)</div> </div> `; ).join('');
.question-text background: #fef3da; padding: 1.2rem; border-radius: 2rem; font-size: 1.6rem; font-weight: 600; text-align: center; margin-bottom: 2rem; box-shadow: inset 0 1px 4px #ede0c2, 0 4px 8px rgba(0,0,0,0.05); word-break: break-word; color: #2c221b; line-height: 1.4;
.next-btn:disabled background: #bba88a; cursor: not-allowed; transform: none;
.score-box span, .question-counter span color: #b13e3e; font-size: 1.3rem; margin-left: 6px; font-weight: 800;
if (answerLocked) if (isCorrectOption) additionalClass = "correct-highlight"; if (isSelectedWrongOption) additionalClass = "selected-wrong"; if (isSelectedCorrect) additionalClass = "selected-correct";
// エスケープ処理 (XSS対策) function escapeHtml(str) return str.replace(/[&<>]/g, function(m) if (m === '&') return '&'; if (m === '<') return '<'; if (m === '>') return '>'; return m; ).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) return c; );
.header h1 font-size: 2rem; letter-spacing: 2px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
if (isCorrect) userScore++; updateScoreUI();
/* header with japanese vibe */ .header background: #b13e3e; background: linear-gradient(135deg, #c23b3b, #9e2a2a); padding: 1.5rem 2rem; color: white; text-align: center;
// 次へボタン const nextBtn = document.getElementById('nextButton'); if (nextBtn) nextBtn.addEventListener('click', () => if (!answerLocked) return; goToNextQuestion(); );
// 通常レンダリング (初期表示、回答前) function renderCurrentQuestion() if (currentIndex >= currentQuestions.length) // クイズ終了: 結果画面を表示 showResultScreen(); return;
.options-area display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;
