<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="quizzes-container">
<h1>クイズ</h1>
<div class="quiz-container">
<h2>第1問</h2>
<div>
<p>問題①</p>
</div>
<form id="quiz-1">
<input name="answer" type="radio" value="a">不正解の答え</input>
<input name="answer" type="radio" value="b">正解の答え</input>
<input name="answer" type="radio" value="c">不正解の答え</input>
</form>
<button class="btn" type="button" onclick="answerQuiz1();">回答する</button>
</div>
<div class="quiz-container">
<h2>第2問</h2>
<div>
<p>問題②</p>
</div>
<form id="quiz-2">
<input name="answer" type="radio" value="a">正解の答え</input>
<input name="answer" type="radio" value="b">不正解の答え</input>
<input name="answer" type="radio" value="c">不正解の答え</input>
</form>
<button class="btn" type="button" onclick="answerQuiz2();">回答する</button>
</div>
<div class="quiz-container">
<h2>第3問</h2>
<div>
<p>問題③</p>
</div>
<form id="quiz-3">
<input name="answer" type="radio" value="a">不正解の答え</input>
<input name="answer" type="radio" value="b">不正解の答え</input>
<input name="answer" type="radio" value="c">正解の答え</input>
</form>
<button class="btn" type="button" onclick="answerQuiz3();">回答する</button>
</div>
<div id="score-container">
<p id="score-message"></p>
</div>
<button class="btn-score" type="button" onclick="showScore();">合計得点を見る</button>
</div>
</body>
const prefecturalCapital = [
{
id: "01",
question: "北海道の県庁所在地は？",
answer01: "札幌",
answer02: "福島",
answer03: "前橋",
answer04: "秋田",
},
{
id: "02",
question: "青森県の県庁所在地は？",
answer01: "青森",
answer02: "前橋",
answer03: "秋田",
answer04: "札幌",
},
{
id: "03",
question: "岩手県の県庁所在地は？",
answer01: "盛岡",
answer02: "福島",
answer03: "仙台",
answer04: "山形",
},
{
id: "04",
question: "宮城県の県庁所在地は？",
answer01: "仙台",
answer02: "札幌",
answer03: "前橋",
answer04: "水戸",
},
{
id: "05",
question: "秋田県の県庁所在地は？",
answer01: "秋田",
answer02: "盛岡",
answer03: "青森",
answer04: "札幌",
},
];
