<div id="sakura-science-app" class="sakura-app-wrapper">
<style>
/* ベーススタイル & リセット */
.sakura-app-wrapper {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #333;
line-height: 1.6;
box-sizing: border-box;
background-color: #ffeff2; /* 桜色の背景 */
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.sakura-app-wrapper * {
box-sizing: border-box;
}
/* レイアウトコンテナ */
.app-container {
max-width: 800px;
margin: 0 auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
overflow: hidden;
padding: 20px;
text-align: center;
}
/* ヘッダー・タイトル */
.app-title {
font-size: 1.5rem;
color: #d81b60; /* 濃いピンク */
margin-bottom: 20px;
font-weight: bold;
border-bottom: 2px solid #ffeff2;
padding-bottom: 10px;
}
/* ボタン共通スタイル */
.btn {
display: inline-block;
width: 100%;
max-width: 300px;
padding: 15px;
margin: 10px auto;
border: none;
border-radius: 50px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn:active {
transform: translateY(2px);
box-shadow: none;
}
/* モード選択ボタン */
.btn-mode {
background-color: #fff;
border: 2px solid #d81b60;
color: #d81b60;
}
.btn-mode:hover {
background-color: #fff0f5;
}
/* 苦手克服ボタン（特別感） */
.btn-weak {
background-color: #d81b60;
color: #fff;
border: 2px solid #d81b60;
}
.btn-weak:hover {
background-color: #ad1457;
}
/* アクションボタン */
.btn-action {
background-color: #333;
color: #fff;
}
/* 正誤判定ボタンエリア */
.judge-area {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.btn-circle {
width: 80px;
height: 80px;
border-radius: 50%;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.btn-correct {
background-color: #fff;
border: 3px solid #4CAF50;
color: #4CAF50;
}
.btn-wrong {
background-color: #fff;
border: 3px solid #F44336;
color: #F44336;
}
/* 問題・回答エリア */
.question-box {
font-size: 1.2rem;
font-weight: bold;
margin: 30px 0;
padding: 20px;
background: #fafafa;
border-radius: 8px;
}
.period-badge {
display: inline-block;
background: #e3f2fd; /* 理科っぽく少し青みを入れるか、統一感でグレーにするかですが、視認性のため淡い青に */
color: #0277bd;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8rem;
margin-bottom: 10px;
font-weight: bold;
}
.answer-box {
margin-top: 20px;
font-size: 1.4rem;
color: #d81b60;
font-weight: bold;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
/* 画面切り替え用 */
.screen {
display: none;
animation: fadeIn 0.3s ease;
}
.screen.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* 結果画面のスコア */
.score-display {
font-size: 2rem;
color: #d81b60;
margin: 20px 0;
}
</style>
<div class="app-container">
<h2 class="app-title">🧪 中学理科 一問一答<br><span style="font-size:0.8em; color:#666;">（2年・2分野）</span></h2>
<div id="screen-start" class="screen active">
<p>学習モードを選んでください</p>
<button class="btn btn-mode" onclick="app.startQuiz('seq')">📖 単元順（基本）</button>
<button class="btn btn-mode" onclick="app.startQuiz('random')">🎲 ランダム出題</button>
<button class="btn btn-weak" onclick="app.startQuiz('weak')">💪 苦手克服（復習）</button>
<div style="margin-top: 20px; font-size: 0.8rem; color: #888;">
<p>※学習履歴はブラウザに自動保存されます</p>
</div>
</div>
<div id="screen-quiz" class="screen">
<div class="progress-info">
第 <span id="q-current">1</span> 問 / 全 <span id="q-total">5</span> 問
</div>
<div class="question-box">
<span id="q-period" class="period-badge">単元</span>
<p id="q-text">ここに問題が表示されます</p>
</div>
<div id="answer-section">
<button id="btn-show-answer" class="btn btn-action" onclick="app.showAnswer()">答えを見る</button>
<div id="judge-controls" style="display: none;">
<div class="answer-box">
<span style="font-size: 0.9rem; color:#666;">正解は...</span>
<span id="a-text">解答</span>
</div>
<p style="font-size: 0.9rem;">合っていましたか？</p>
<div class="judge-area">
<button class="btn btn-circle btn-wrong" onclick="app.judge(false)">×</button>
<button class="btn btn-circle btn-correct" onclick="app.judge(true)">〇</button>
</div>
</div>
</div>
</div>
<div id="screen-result" class="screen">
<h3>おつかれさまでした！</h3>
<div class="score-display">
正解率: <span id="res-percent">0</span>%
<div style="font-size: 1rem; color: #666; margin-top:5px;">
(<span id="res-correct">0</span>問 / <span id="res-total">0</span>問中)
</div>
</div>
<button class="btn btn-mode" onclick="app.init()">もう一度モードを選ぶ</button>
</div>
</div>
<script>
const app = (function() {
// ==========================================
// 設定・データ定義
// ==========================================
// ★歴史アプリと被らないよう、キー名を変更しています
const STORAGE_KEY = 'sakura_science_2_2_v1';
// ★ここにスプレッドシートで作ったデータを貼り付けます
// ダミーデータとして、指定された5単元から1問ずつ入れています
const quizData = [
{ id: 1, period: '植物の体のつくりとはたらき', question: '植物が光のエネルギーを使って、水と二酸化炭素から栄養分（デンプン）をつくるはたらきを何といいますか。', answer: '光合成' },
{ id: 2, period: '植物の体のつくりとはたらき', question: '光合成によってデンプンなどの栄養分とともに発生する気体は何ですか。', answer: '酸素' },
{ id: 3, period: '植物の体のつくりとはたらき', question: '光合成に必要な原料は、水と何という気体ですか。', answer: '二酸化炭素' },
{ id: 4, period: '植物の体のつくりとはたらき', question: 'デンプンがあるときにヨウ素溶液を加えると、何色に変化しますか。', answer: '青紫色' },
{ id: 5, period: '植物の体のつくりとはたらき', question: '生物が酸素をとり入れ、二酸化炭素を出すはたらきを何といいますか。', answer: '呼吸' },
{ id: 6, period: '植物の体のつくりとはたらき', question: '植物において、光合成は昼と夜のどちらに行われますか。', answer: '昼（光が当たるとき）' },
{ id: 7, period: '植物の体のつくりとはたらき', question: '根から吸い上げられた水が、水蒸気となって植物の体から出ていく現象を何といいますか。', answer: '蒸散' },
{ id: 8, period: '植物の体のつくりとはたらき', question: '植物の葉の裏側に多くあり、蒸散の出口や気体の出入り口となるすきまを何といいますか。', answer: '気孔' },
{ id: 9, period: '植物の体のつくりとはたらき', question: '気孔を囲んでいる、三日月形の2つの細胞を何といいますか。', answer: '孔辺細胞' },
{ id: 10, period: '植物の体のつくりとはたらき', question: '植物の体で、根から吸収した「水や水にとけた養分」が通る管を何といいますか。', answer: '道管' },
{ id: 11, period: '植物の体のつくりとはたらき', question: '植物の体で、葉で作られた「栄養分」が通る管を何といいますか。', answer: '師管' },
{ id: 12, period: '植物の体のつくりとはたらき', question: '道管と師管が集まって束になっている部分を何といいますか。', answer: '維管束' },
{ id: 13, period: '植物の体のつくりとはたらき', question: '光合成の実験で、葉をエタノールにつける理由は何ですか。', answer: '葉の緑色（葉緑素）を脱色するため' },
{ id: 14, period: '植物の体のつくりとはたらき', question: '光合成の実験で、エタノールにつける前に葉を熱湯につける理由は何ですか。', answer: '葉を柔らかくするため' },
{ id: 15, period: '植物の体のつくりとはたらき', question: '植物の根の先端近くにある、綿毛のような細かい突起を何といいますか。', answer: '根毛' },
{ id: 16, period: '植物の体のつくりとはたらき', question: '根毛があることで、根にとってどのような利点がありますか。', answer: '表面積が大きくなり、水や養分を吸収しやすくなる' },
{ id: 17, period: '植物の体のつくりとはたらき', question: '双子葉類の茎の維管束は、どのように並んでいますか。', answer: '輪のように並んでいる' },
{ id: 18, period: '植物の体のつくりとはたらき', question: '単子葉類の茎の維管束は、どのように並んでいますか。', answer: '全体に散らばっている' },
{ id: 19, period: '植物の体のつくりとはたらき', question: 'BTB溶液は、二酸化炭素が溶けて酸性になると何色になりますか。', answer: '黄色' },
{ id: 20, period: '植物の体のつくりとはたらき', question: 'BTB溶液は、アルカリ性を示すとき何色になりますか。', answer: '青色' },
{ id: 21, period: '植物の体のつくりとはたらき', question: '植物の呼吸を確認する実験で、石灰水が白くにごるのは何という気体があるためですか。', answer: '二酸化炭素' },
{ id: 22, period: '植物の体のつくりとはたらき', question: 'トウモロコシやイネのように、子葉が1枚の植物の仲間を何といいますか。', answer: '単子葉類' },
{ id: 23, period: '植物の体のつくりとはたらき', question: 'ホウセンカやアブラナのように、子葉が2枚の植物の仲間を何といいますか。', answer: '双子葉類' },
{ id: 24, period: '植物の体のつくりとはたらき', question: '種子植物のうち、胚珠が子房の中に包まれている植物を何といいますか。', answer: '被子植物' },
{ id: 25, period: '植物の体のつくりとはたらき', question: 'ワセリンを葉に塗る実験は、葉の何を防ぐためですか。', answer: '蒸散' },
{ id: 26, period: '生物の体と細胞', question: '生物の体をつくっている、微小な部屋のような最小単位は何ですか。', answer: '細胞' },
{ id: 27, period: '生物の体と細胞', question: '植物の細胞の中にあり、光合成が行われる緑色の粒を何といいますか。', answer: '葉緑体' },
{ id: 28, period: '生物の体と細胞', question: '動物の細胞にはなく、植物の細胞の外側を囲んでいる丈夫な膜を何といいますか。', answer: '細胞壁' },
{ id: 29, period: '生物の体と細胞', question: '植物の細胞の中にある袋状のつくりで、細胞の活動でできた物質などが溶けている部分は何ですか。', answer: '液胞' },
{ id: 30, period: '生物の体と細胞', question: '細胞の中に1つあり、染色液によく染まる球形のつくりは何ですか。', answer: '核' },
{ id: 31, period: '生物の体と細胞', question: '形やはたらきが同じ細胞が集まったものを何といいますか（例：筋組織）。', answer: '組織' },
{ id: 32, period: '生物の体と細胞', question: 'いくつかの組織が集まって、特定のはたらきをする部分を何といいますか（例：胃、葉）。', answer: '器官' },
{ id: 33, period: '生物の体と細胞', question: '顕微鏡で観察する際、対物レンズとプレパラートを近づけるときは、どこを見ながら操作しますか。', answer: '横から見る' },
{ id: 34, period: '生物の体と細胞', question: '顕微鏡の倍率を上げると、視野の明るさはどうなりますか。', answer: '暗くなる' },
{ id: 35, period: '生物の体と細胞', question: '顕微鏡の倍率を上げると、見える範囲（視野）はどうなりますか。', answer: '狭くなる' },
{ id: 36, period: '生物の体と細胞', question: '実験を行う際、調べたい条件以外を同じにして行う実験を何といいますか。', answer: '対照実験' },
{ id: 37, period: '生物の体と細胞', question: '1つの細胞だけで体ができている生物を何といいますか。', answer: '単細胞生物' },
{ id: 38, period: '生物の体と細胞', question: '多くの細胞が集まって体ができている生物を何といいますか。', answer: '多細胞生物' },
{ id: 39, period: '生物の体と細胞', question: '酢酸カーミン液や酢酸オルセイン液などの染色液は、細胞のどの部分を染めますか。', answer: '核' },
{ id: 40, period: '動物：呼吸・循環・排出', question: '酸素を運ぶはたらきをする、血液中の赤い固形成分は何ですか。', answer: '赤血球' },
{ id: 41, period: '動物：呼吸・循環・排出', question: '赤血球に含まれる赤い色素で、酸素と結びつく性質を持つものは何ですか。', answer: 'ヘモグロビン' },
{ id: 42, period: '動物：呼吸・循環・排出', question: '体内に侵入した細菌などをとらえて分解する、血液中の成分は何ですか。', answer: '白血球' },
{ id: 43, period: '動物：呼吸・循環・排出', question: '出血したときに血液を固めるはたらきをする、血液中の成分は何ですか。', answer: '血小板' },
{ id: 44, period: '動物：呼吸・循環・排出', question: '血液の液体成分で、栄養分や不要な物質を溶かして運ぶものは何ですか。', answer: '血しょう' },
{ id: 45, period: '動物：呼吸・循環・排出', question: '心臓から送り出された血液が流れる、壁が厚く弾力のある血管を何といいますか。', answer: '動脈' },
{ id: 46, period: '動物：呼吸・循環・排出', question: '心臓へ戻る血液が流れる血管を何といいますか。', answer: '静脈' },
{ id: 47, period: '動物：呼吸・循環・排出', question: '静脈のところどころにある、血液の逆流を防ぐための構造は何ですか。', answer: '弁' },
{ id: 48, period: '動物：呼吸・循環・排出', question: '心臓から肺へ行き、再び心臓に戻る血液の循環経路を何といいますか。', answer: '肺循環' },
{ id: 49, period: '動物：呼吸・循環・排出', question: '心臓から全身へ行き、再び心臓に戻る血液の循環経路を何といいますか。', answer: '体循環' },
{ id: 50, period: '動物：呼吸・循環・排出', question: '酸素を多くふくんでいる血液（鮮やかな赤色）を何といいますか。', answer: '動脈血' },
{ id: 51, period: '動物：呼吸・循環・排出', question: '二酸化炭素を多くふくんでいる血液（暗赤色）を何といいますか。', answer: '静脈血' },
{ id: 52, period: '動物：呼吸・循環・排出', question: '気管支の先端にある小さな袋で、酸素と二酸化炭素の交換が行われる場所は何ですか。', answer: '肺胞' },
{ id: 53, period: '動物：呼吸・循環・排出', question: '有害なアンモニアを、害の少ない尿素に変える器官はどこですか。', answer: '肝臓' },
{ id: 54, period: '動物：呼吸・循環・排出', question: '血液中の不要な物質（尿素など）をこし出し、尿をつくる器官はどこですか。', answer: '腎臓' },
{ id: 55, period: '動物：呼吸・循環・排出', question: '肺胞のまわりを取り囲んでいる、極めて細い血管を何といいますか。', answer: '毛細血管' },
{ id: 56, period: '動物：呼吸・循環・排出', question: '肺胞がたくさんあることで、肺にとってどのような利点がありますか。', answer: '空気にふれる表面積が大きくなり、気体の交換効率が良くなる' },
{ id: 57, period: '動物：呼吸・循環・排出', question: '息を吸うとき、横隔膜はどうなりますか。', answer: '下がる' },
{ id: 58, period: '動物：呼吸・循環・排出', question: '息を吸うとき、胸こう（胸の空間）の体積はどうなりますか。', answer: '大きくなる' },
{ id: 59, period: '動物：呼吸・循環・排出', question: '心臓の上の部屋を何といいますか。', answer: '心房' },
{ id: 60, period: '動物：呼吸・循環・排出', question: '心臓の下の部屋を何といいますか。', answer: '心室' },
{ id: 61, period: '動物：呼吸・循環・排出', question: '心臓から全身へ血液を送り出す、最も筋肉が厚い部屋はどこですか。', answer: '左心室' },
{ id: 62, period: '動物：呼吸・循環・排出', question: '毛細血管から血しょうがしみ出し、細胞の間を満たしている液を何といいますか。', answer: '組織液' },
{ id: 63, period: '動物：呼吸・循環・排出', question: '細胞内で酸素を使って栄養分を分解し、エネルギーを取り出す活動を何といいますか。', answer: '細胞呼吸' },
{ id: 64, period: '動物：呼吸・循環・排出', question: '細胞呼吸によって発生する不要な物質は、二酸化炭素と何ですか。', answer: '水（およびアンモニアなど）' },
{ id: 65, period: '動物：呼吸・循環・排出', question: '尿は腎臓から何という管を通ってぼうこうに送られますか。', answer: '輸尿管' },
{ id: 66, period: '動物：呼吸・循環・排出', question: 'ヒトの心臓は、いくつの部屋に分かれていますか。', answer: '4つ' },
{ id: 67, period: '動物：行動のしくみ', question: '外界からの刺激を受けとる目、耳、鼻、舌、皮膚などの器官をまとめて何といいますか。', answer: '感覚器官' },
{ id: 68, period: '動物：行動のしくみ', question: '脳や脊髄のように、判断や命令を行う神経系をまとめて何といいますか。', answer: '中枢神経' },
{ id: 69, period: '動物：行動のしくみ', question: '感覚器官が受けとった刺激を中枢神経に伝える神経を何といいますか。', answer: '感覚神経' },
{ id: 70, period: '動物：行動のしくみ', question: '中枢神経からの命令を筋肉などに伝える神経を何といいますか。', answer: '運動神経' },
{ id: 71, period: '動物：行動のしくみ', question: '熱いものに触れたとき、思わず手を引っ込めるような、無意識に起こる反応を何といいますか。', answer: '反射' },
{ id: 72, period: '動物：行動のしくみ', question: '目に入ってきた光の量を調節するために、瞳の大きさを変える部分は何ですか。', answer: '虹彩' },
{ id: 73, period: '動物：行動のしくみ', question: '目のつくりで、光の刺激を受けとるスクリーンとなる部分は何ですか。', answer: '網膜' },
{ id: 74, period: '動物：行動のしくみ', question: '目において、光を屈折させて網膜上に像を結ばせる部分は何ですか。', answer: 'レンズ' },
{ id: 75, period: '動物：行動のしくみ', question: '耳において、音の振動を受けとって振動する膜は何ですか。', answer: '鼓膜' },
{ id: 76, period: '動物：行動のしくみ', question: '耳の奥にあり、内部の液体の振動を刺激として受けとる器官は何ですか。', answer: 'うずまき管' },
{ id: 77, period: '動物：行動のしくみ', question: '中枢神経から枝分かれして全身に広がる神経（感覚神経と運動神経）をまとめて何といいますか。', answer: '末しょう神経' },
{ id: 78, period: '動物：行動のしくみ', question: '反射の反応において、信号は脳を経由しますか、しませんか。', answer: 'しない（脊髄などを通る）' },
{ id: 79, period: '動物：行動のしくみ', question: '「背骨」がある動物の体の内部にある骨格を何といいますか。', answer: '内骨格' },
{ id: 80, period: '動物：行動のしくみ', question: '骨と骨がつながっている、曲げ伸ばしができる部分を何といいますか。', answer: '関節' },
{ id: 81, period: '動物：行動のしくみ', question: '筋肉の両端が骨についている丈夫な部分を何といいますか。', answer: 'けん' },
{ id: 82, period: '動物：行動のしくみ', question: '腕を曲げるとき、内側の筋肉は収縮しますか、ゆるみますか。', answer: '収縮する' },
{ id: 83, period: '動物：消化と吸収', question: '食物を分解して、体内に吸収されやすい状態に変えるはたらきを何といいますか。', answer: '消化' },
{ id: 84, period: '動物：消化と吸収', question: 'デンプンは消化されると、最終的に何という物質になりますか。', answer: 'ブドウ糖' },
{ id: 85, period: '動物：消化と吸収', question: 'タンパク質は消化されると、最終的に何という物質になりますか。', answer: 'アミノ酸' },
{ id: 86, period: '動物：消化と吸収', question: '唾液や胃液などにふくまれ、栄養分を分解する触媒のような働きをする物質を何といいますか。', answer: '消化酵素' },
{ id: 87, period: '動物：消化と吸収', question: '唾液にふくまれる消化酵素で、デンプンを分解するものは何ですか。', answer: 'アミラーゼ' },
{ id: 88, period: '動物：消化と吸収', question: '胆汁をつくる器官はどこですか。', answer: '肝臓' },
{ id: 89, period: '動物：消化と吸収', question: '消化された栄養分を吸収する、小腸の壁にある無数の小さな突起を何といいますか。', answer: '柔毛' },
{ id: 90, period: '動物：消化と吸収', question: '脂肪は消化されると、脂肪酸と何という物質になりますか。', answer: 'モノグリセリド' },
{ id: 91, period: '動物：消化と吸収', question: '胃液に含まれる消化酵素で、タンパク質を分解するものは何ですか。', answer: 'ペプシン' },
{ id: 92, period: '動物：消化と吸収', question: 'すい液に含まれる消化酵素で、脂肪を分解するものは何ですか。', answer: 'リパーゼ' },
{ id: 93, period: '動物：消化と吸収', question: '胆汁は消化酵素を含みますか、含みませんか。', answer: '含まない' },
{ id: 94, period: '動物：消化と吸収', question: '胆汁は、どの栄養素の分解を助けますか。', answer: '脂肪' },
{ id: 95, period: '動物：消化と吸収', question: '小腸で吸収されたブドウ糖とアミノ酸は、柔毛内の何に入りますか。', answer: '毛細血管' },
{ id: 96, period: '動物：消化と吸収', question: '小腸で吸収された脂肪酸とモノグリセリドは、再び脂肪となって柔毛内の何に入りますか。', answer: 'リンパ管' },
{ id: 97, period: '動物：消化と吸収', question: '小腸で吸収された栄養分は、血液によって最初にどの器官へ運ばれますか。', answer: '肝臓' },
{ id: 98, period: '動物：消化と吸収', question: '糖（麦芽糖など）があるかを調べるために使い、加熱すると赤褐色になる試薬は何ですか。', answer: 'ベネジクト溶液' },
{ id: 99, period: '動物：消化と吸収', question: 'ベネジクト溶液を使用する際、色の変化を見るために必要な操作は何ですか。', answer: '加熱する' },
{ id: 100, period: '動物：消化と吸収', question: '唾液のはたらきを調べる実験で、試験管を約40℃の湯に入れるのはなぜですか。', answer: '体温に近く、酵素がよくはたらく温度だから' },
];
// ==========================================
// 状態管理
// ==========================================
let state = {
mode: 'seq',
queue: [],
currentIndex: 0,
correctCount: 0
};
// ==========================================
// ローカルストレージ操作
// ==========================================
function getHistory() {
const data = localStorage.getItem(STORAGE_KEY);
return data ? JSON.parse(data) : {};
}
function saveHistory(id, isCorrect) {
const history = getHistory();
if (!history[id]) {
history[id] = { correct: 0, wrong: 0 };
}
if (isCorrect) {
history[id].correct++;
} else {
history[id].wrong++;
}
localStorage.setItem(STORAGE_KEY, JSON.stringify(history));
}
// ==========================================
// 画面操作
// ==========================================
function switchScreen(screenId) {
document.querySelectorAll('.screen').forEach(el => el.classList.remove('active'));
document.getElementById(screenId).classList.add('active');
}
// ==========================================
// ゲームロジック
// ==========================================
function init() {
switchScreen('screen-start');
}
function startQuiz(mode) {
state.mode = mode;
state.currentIndex = 0;
state.correctCount = 0;
let questions = [...quizData];
if (mode === 'random') {
questions.sort(() => Math.random() - 0.5);
} else if (mode === 'weak') {
const history = getHistory();
questions = questions.filter(q => {
const h = history[q.id];
return h && h.wrong > 0;
});
if (questions.length === 0) {
alert('苦手な問題はまだありません！\n素晴らしいです！まずは基本モードで学習を進めましょう🌸');
return;
}
questions.sort(() => Math.random() - 0.5);
}
state.queue = questions;
renderQuestion();
switchScreen('screen-quiz');
}
function renderQuestion() {
const q = state.queue[state.currentIndex];
document.getElementById('q-current').textContent = state.currentIndex + 1;
document.getElementById('q-total').textContent = state.queue.length;
document.getElementById('q-period').textContent = q.period; // 単元名を表示
document.getElementById('q-text').textContent = q.question;
document.getElementById('a-text').textContent = q.answer;
document.getElementById('btn-show-answer').style.display = 'block';
document.getElementById('judge-controls').style.display = 'none';
}
function showAnswer() {
document.getElementById('btn-show-answer').style.display = 'none';
document.getElementById('judge-controls').style.display = 'flex';
document.getElementById('judge-controls').style.flexDirection = 'column';
}
function judge(isCorrect) {
const currentQ = state.queue[state.currentIndex];
saveHistory(currentQ.id, isCorrect);
if (isCorrect) state.correctCount++;
state.currentIndex++;
if (state.currentIndex < state.queue.length) {
renderQuestion();
} else {
finishQuiz();
}
}
function finishQuiz() {
const total = state.queue.length;
const correct = state.correctCount;
const percent = total > 0 ? Math.round((correct / total) * 100) : 0;
document.getElementById('res-correct').textContent = correct;
document.getElementById('res-total').textContent = total;
document.getElementById('res-percent').textContent = percent;
switchScreen('screen-result');
}
return {
init,
startQuiz,
showAnswer,
judge
};
})();
</script>
</div>