<!DOCTYPE html>
<html>
<head>
<title>酒田クイズ!!!</title>
<meta charset="UTF-8">
</head>
<body>
<h1>酒田クイズ!!!</h1>
<p>酒田についてクイズを出すから全問正解を目指して頑張ろう!!</p>
<h2>説明</h2>
<ul>
<li>1問4択になってるよ!!
<li>10問、50点満点で、難しい問題には高得点を得ることができるから<br>
満点を目指して頑張ろう!!（問題はランダムで出てくるよ!!）
<li>制限時間はないから安心してゆっくり考えられるよ!!
</ul>
<div id="question"></div>
<p><input type="radio" name="name" value="#name" checked>a
<p><input type="radio" name="name" value="#name" checked>b
<p><input type="radio" name="name" value="#name" checked>c
<p><input type="radio" name="name" value="#name" checked>d
<p><button onclick="checkAnswer()">回答する</button>
<button input type="reset" value="Reset"></button>
<p id="answerResult"></p>
<p id="totalScore"></p>
<script>
const questionsAndAnswers = [
{ question: 'ガーネットは0.3カラットでいくらでしょう?', answer: '27万', score: 1 },
{ question: 'アメジストは0.3カラットでいくらでしょう?', answer: '600円', score: 1 },
{ question: 'アクアアリンは0.3カラットでいくらでしょう?', answer: '3000円', score: 1 },
{ question: 'ダイヤモンドは0.3カラットでいくらでしょう?', answer: '12万円', score: 1 },
{ question: 'エメラルドは0.3カラットでいくらでしょう?', answer: '6万3000円', score: 1 },
{ question: 'パールは0.3カラットでいくらでしょう?', answer: '7000円', score: 1 },
{ question: 'ルビーは0.3カラットでいくらでしょう?', answer: '6万3000円', score: 1 },
{ question: 'ペリドットは0.3カラットでいくらでしょう?', answer: '2万5000円', score: 1 },
{ question: 'サファイアは0.3カラットでいくらでしょう?', answer: '2万5000円', score: 1 },
{ question: 'トルマリンは0.3カラットでいくらでしょう?', answer: '6000円', score: 1 },
{ question: 'シトリンは0.3カラットでいくらでしょう?', answer: '75円', score: 1 },
{ question: 'ラピスラズリは0.3カラットでいくらでしょう?', answer: '300円', score: 1 },
];
let totalScore = 0;
let remainingQuestions = questionsAndAnswers.slice();
function displayRandomQuestion() {
if (remainingQuestions.length === 0) {
document.getElementById('question').textContent = '全ての問題を解き終わりました！';
document.getElementById('answerResult').textContent = '';
document.getElementById('totalScore').textContent = `合計点数: ${totalScore}/12点`;
displayAnswerList(); // 回答一覧を表示
return;
}
const randomIndex = Math.floor(Math.random() * remainingQuestions.length);
const questionObj = remainingQuestions[randomIndex];
const question = questionObj.question;
document.getElementById('question').textContent = question;
document.getElementById('userAnswer').value = '';
document.getElementById('answerResult').textContent = '';
}
function checkAnswer() {
const userAnswer = document.getElementById('userAnswer').value.toLowerCase().trim();
const currentQuestion = document.getElementById('question').textContent;
const questionObj = remainingQuestions.find(qa => qa.question === currentQuestion);
const correctAnswer = questionObj.answer.toLowerCase();
const answerResultElement = document.getElementById('answerResult');
if (userAnswer === correctAnswer) {
answerResultElement.textContent = '正解です！';
totalScore += questionObj.score;
} else {
answerResultElement.textContent = `不正解です。正解は「${correctAnswer}」でした。`;
}
document.getElementById('totalScore').textContent = `合計点数: ${totalScore}/12点`;
remainingQuestions = remainingQuestions.filter(qa => qa.question !== currentQuestion);
displayRandomQuestion();
}
function displayAnswerList() {
const answerListElement = document.querySelector('.answer-list');
questionsAndAnswers.forEach(qa => {
const listItem = document.createElement('div');
listItem.classList.add('question', 'answer');
listItem.textContent = `${qa.question}: ${qa.answer}`;
answerListElement.appendChild(listItem);
});
}
// 最初の問題を表示
displayRandomQuestion();
</script>
</body>
</html>
