<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ガンダムクイズ V1</title>
<style>
body {
font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
background-color: #f0f2f5;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#quiz-container {
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 600px;
padding: 20px 30px;
text-align: center;
}
h1 {
font-size: 24px;
color: #0d47a1;
margin-bottom: 20px;
}
#question-area {
margin-bottom: 20px;
}
#question-number {
font-size: 18px;
font-weight: bold;
color: #1976d2;
}
#question {
font-size: 20px;
min-height: 50px;
margin: 10px 0;
}
#options {
display: flex;
flex-direction: column;
gap: 12px;
}
.option {
background-color: #1e88e5;
color: white;
border: none;
border-radius: 8px;
padding: 15px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s, transform 0.1s;
}
.option:hover {
background-color: #1565c0;
}
.option:active {
transform: scale(0.98);
}
.option.disabled {
pointer-events: none;
opacity: 0.7;
}
#timer-area {
margin-top: 20px;
font-size: 28px;
font-weight: bold;
color: #d32f2f;
}
#result-area {
display: none;
}
#result-area h2 {
font-size: 28px;
color: #0d47a1;
}
#score {
font-size: 36px;
font-weight: bold;
color: #d32f2f;
margin: 10px 0 20px;
}
#restart-button {
background-color: #43a047;
color: white;
border: none;
border-radius: 8px;
padding: 15px 30px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s;
}
#restart-button:hover {
background-color: #2e7d32;
}
</style>
</head>
<body>
<div id="quiz-container">
<h1>ガンダムクイズ 🚀</h1>
<div id="quiz-area">
<div id="question-area">
<p id="question-number"></p>
<p id="question"></p>
</div>
<div id="options">
<button class="option" onclick="selectAnswer(0)"></button>
<button class="option" onclick="selectAnswer(1)"></button>
<button class="option" onclick="selectAnswer(2)"></button>
</div>
<div id="timer-area">
残り時間: <span id="timer">10</span>秒
</div>
</div>
<div id="result-area">
<h2>クイズ終了！</h2>
<p>あなたのスコアは...</p>
<p id="score"></p>
<button id="restart-button" onclick="location.reload()">もう一度挑戦する</button>
</div>
</div>
<script>
const quizData = [
{
question: "アムロ・レイが最初に乗ったガンダムの型式番号は？",
options: ["RX-78-2", "RX-77-2", "RX-75-4"],
answer: 0
},
{
question: "シャア・アズナブルの有名なセリフ「坊やだからさ」は誰に対して言った？",
options: ["ララァ・スン", "ガルマ・ザビ", "セイラ・マス"],
answer: 1
},
{
question: "地球連邦軍の拠点ジャブローがある大陸は？",
options: ["アフリカ大陸", "オーストラリア大陸", "南米大陸"],
answer: 2
},
{
question: "「ザクとは違うのだよ、ザクとは！」というセリフを発した人物は？",
options: ["ドズル・ザビ", "ランバ・ラル", "マ・クベ"],
answer: 1
},
{
question: "ホワイトベースの初代艦長は誰？",
options: ["ブライト・ノア", "パオロ・カシアス", "ヘンケン・ベッケナー"],
answer: 1 // パオロが初代、ブライトは代行から正式任官
},
{
question: "ガンダムの主兵装であるビーム・ライフルのエネルギー源は？",
options: ["核融合炉直結", "Eパック（エネルギーパック）", "ミノフスキー粒子"],
answer: 1
},
{
question: "黒い三連星が得意とする攻撃フォーメーション名は？",
options: ["トリプル・ドム・アタック", "ジェット・ストリーム・アタック", "マチルダさん救出作戦"],
answer: 1
},
{
question: "アムロが「親父にもぶたれたことないのに！」と言ったのは誰に殴られた後？",
options: ["リュウ・ホセイ", "カイ・シデン", "ブライト・ノア"],
answer: 2
},
{
question: "ジオン公国の最高指導者は誰？",
options: ["ギレン・ザビ", "デギン・ソド・ザビ", "キシリア・ザビ"],
answer: 1
},
{
question: "ラストシューティングで破壊されたジオン軍のモビルアーマーは？",
options: ["ビグ・ザム", "エルメス", "ジオング"],
answer: 2
}
];
let currentQuestionIndex = 0;
let score = 0;
let timerInterval;
let timeLeft = 10;
const questionNumberEl = document.getElementById('question-number');
const questionEl = document.getElementById('question');
const optionButtons = document.querySelectorAll('.option');
const timerEl = document.getElementById('timer');
const quizAreaEl = document.getElementById('quiz-area');
const resultAreaEl = document.getElementById('result-area');
const scoreEl = document.getElementById('score');
function startQuiz() {
currentQuestionIndex = 0;
score = 0;
quizAreaEl.style.display = 'block';
resultAreaEl.style.display = 'none';
showQuestion();
}
function showQuestion() {
if (currentQuestionIndex >= quizData.length) {
showResult();
return;
}
const currentQuestion = quizData[currentQuestionIndex];
questionNumberEl.textContent = `第 ${currentQuestionIndex + 1} 問`;
questionEl.textContent = currentQuestion.question;
currentQuestion.options.forEach((option, index) => {
optionButtons[index].textContent = option;
optionButtons[index].classList.remove('disabled');
});
startTimer();
}
function startTimer() {
timeLeft = 10;
timerEl.textContent = timeLeft;
clearInterval(timerInterval); // 前のタイマーをクリア
timerInterval = setInterval(() => {
timeLeft--;
timerEl.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(timerInterval);
// 時間切れは不正解として次に進む
nextQuestion();
}
}, 1000);
}
function selectAnswer(selectedIndex) {
clearInterval(timerInterval);
const correctIndex = quizData[currentQuestionIndex].answer;
if (selectedIndex === correctIndex) {
score++;
}
// ボタンを一時的に無効化
optionButtons.forEach(button => button.classList.add('disabled'));
// 0.5秒後に次の問題へ
setTimeout(nextQuestion, 500);
}
function nextQuestion() {
currentQuestionIndex++;
showQuestion();
}
function showResult() {
clearInterval(timerInterval);
quizAreaEl.style.display = 'none';
resultAreaEl.style.display = 'block';
scoreEl.textContent = `${score} / ${quizData.length} 問正解`;
}
// クイズを開始
startQuiz();
</script>
</body>
</html>
使用変数
| button | |
| charset | |
| class | |
| content | |
| correctIndex | |
| currentQuestion | |
| display | |
| id | |
| lang | |
| name | |
| nextQuestion -------( Function ) | |
| onclick | |
| optionButtons | |
| questionEl | |
| questionNumberEl | |
| quizAreaEl | |
| quizData | |
| resultAreaEl | |
| rrentQuestionIndex | |
| scale | |
| score | |
| scoreEl | |
| selectAnswer -------( Function ) | |
| selectedIndex | |
| showQuestion -------( Function ) | |
| showResult -------( Function ) | |
| startQuiz -------( Function ) | |
| startTimer -------( Function ) | |
| textContent | |
| timeLeft | |
| timerEl | |
| timerInterval | |
| width |