Click here for free DL of the app version that can save data.

No:1177

270

←

Prev Next

→

History Quiz
Developer User3258｜Date and time 23/6/18 7:07:41
Build time 42.066 sec｜Game capacity 3.38KB｜

Script

歴史クイズ

歴史クイズは、3つの質問から構成されています。プレイヤーは1つの選択肢を選んで答えます。正しい答えを選ぶと、スコアが1ポイント増えます。全ての質問に答えた後、プレイヤーの正解数に応じたスコアが表示されます。スマホでも遊べるように、レスポンシブなスタイルを適用しました。また、日本の歴史に沿った絵文字を多用し、より楽しい雰囲気を演出しました。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>歴史クイズ</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 2em;
		}

h1 {
			text-align: center;
		}

.quiz {
			width: 80%;
			margin: 0 auto;
			padding: 20px;
			border: 2px solid black;
			border-radius: 10px;
			margin-bottom: 20px;
		}

.choices {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

button {
			margin: 10px;
			padding: 10px;
			border-radius: 10px;
			border: none;
			background-color: lightblue;
			font-size: 1em;
			cursor: pointer;
		}

button:hover {
			background-color: lightgreen;
		}

.result {
			font-size: 3em;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>歴史クイズ</h1>
	<div id="quizContainer"></div>
	<button id="startBtn">スタート</button>
	<div id="resultContainer"></div>

let currentQuiz = 0;
		let score = 0;

const quizContainer = document.getElementById("quizContainer");
		const startBtn = document.getElementById("startBtn");
		const resultContainer = document.getElementById("resultContainer");

const showQuiz = () => {
			quizContainer.innerHTML = `
				<div class="quiz">
					<p>${quizData[currentQuiz].question}</p>
					<div class="choices">
						<button onclick="checkAnswer('${quizData[currentQuiz].choices[0]}')">${quizData[currentQuiz].choices[0]}</button>
						<button onclick="checkAnswer('${quizData[currentQuiz].choices[1]}')">${quizData[currentQuiz].choices[1]}</button>
						<button onclick="checkAnswer('${quizData[currentQuiz].choices[2]}')">${quizData[currentQuiz].choices[2]}</button>
						<button onclick="checkAnswer('${quizData[currentQuiz].choices[3]}')">${quizData[currentQuiz].choices[3]}</button>
					</div>
				</div>
			`;
		}

const checkAnswer = (chosenAnswer) => {
			if (chosenAnswer === quizData[currentQuiz].correctAnswer) {
				score++;
			}

currentQuiz++;

if (currentQuiz < quizData.length) {
				showQuiz();
			} else {
				showResult();
			}
		}

const showResult = () => {
			resultContainer.innerHTML = `
				<div class="result">
					<p>あなたのスコアは${score}/${quizData.length}です。</p>
				</div>
			`;
		}

startBtn.addEventListener("click", () => {
			showQuiz();
		});
	</script>
</body>
</html>