<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生年月日で宝石💎診断!!</title>
<link rel="stylesheet" href="houseki.css">
<script src="houseki.js" defer></script>
</head>
<body>
<form method="POST" action="./houseki.rb">
<div class="loader">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
<div class="bg-transparent">
<!-- 既存のコンテンツ -->
<script>
// 問題と答えのリスト
const questionsAndAnswers = [
{ question: '問題1', answer: '答え1' },
{ question: '問題2', answer: '答え2' },
{ question: '問題3', answer: '答え3' },
// 必要なだけ問題と答えを追加
];
// 問題と答えを表示する関数
function displayRandomQA() {
const randomIndex = Math.floor(Math.random() * questionsAndAnswers.length);
const question = questionsAndAnswers[randomIndex].question;
const questionDiv = document.getElementById('question');
const answerDiv = document.getElementById('answer');
const userAnswerInput = document.getElementById('userAnswer');
questionDiv.textContent = '問題： ' + question;
answerDiv.textContent = '';
answerDiv.style.display = 'none';
userAnswerInput.value = '';
}
// ユーザーの回答をチェックする関数
function checkAnswer() {
const userAnswerInput = document.getElementById('userAnswer');
const userAnswer = userAnswerInput.value.trim(); // 回答を取得し、トリム
const currentQuestionIndex = parseInt(document.getElementById('currentQuestionIndex').textContent);
const correctAnswer = questionsAndAnswers[currentQuestionIndex - 1].answer.trim(); // 正解を取得し、トリム
const answerDiv = document.getElementById('answer');
if (userAnswer.toLowerCase() === correctAnswer.toLowerCase()) {
answerDiv.textContent = '正解です！';
} else {
answerDiv.textContent = '不正解です。正解は ' + correctAnswer + ' です。';
}
answerDiv.style.display = 'block';
}
</script>
<h3>宝石値段クイズ!!</h3>
<button onclick="displayRandomQA()">新しい問題を表示</button>
<div id="question"></div>
<div id="answer" style="display: none;"></div>
<input type="text" id="userAnswer" placeholder="○○万円">
<button type="button" onclick="checkAnswer()">回答する</button>
<p id="currentQuestionIndex" style="display: none;">0</p>
</div>
</form>
</body>
</html>
