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

No:2631

3414

←

Prev Next

→

Yamanote Line Next Station Quiz
Developer anonymous｜Date and time 70/1/1 9:44:48
Build time unknown sec｜Game capacity 2.688KB｜

Script

山手線の次の駅クイズ

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>山手線の次の駅クイズ</title>
	<style>
		body {
			font-size: 2em;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #FFE4E1;
		}

.button {
			background-color: #F5DEB3;
			padding: 0.5em;
			border: none;
			border-radius: 0.3em;
			cursor: pointer;
			margin-top: 1em;
			color: #000000;
		}

h1 {
			font-size: 4em;
			margin-bottom: 0.5em;
			color: #FF69B4;
		}

h2 {
			font-size: 3em;
			margin: 0;
			color: #FF8C00;
		}
	</style>
</head>

<body>
	<h1>山手線の次の駅クイズ</h1>
	<h2 id="question"></h2>
	<div>
		<button class="button" id="answer1"></button>
		<button class="button" id="answer2"></button>
		<button class="button" id="answer3"></button>
	</div>

let currentQuestion = 0;
		let score = 0;

const questionEl = document.querySelector("#question");
		const answer1 = document.querySelector("#answer1");
		const answer2 = document.querySelector("#answer2");
		const answer3 = document.querySelector("#answer3");

function showQuestion(question) {
			questionEl.textContent = question.question;
			answer1.textContent = "1️⃣" + question.answers[0];
			answer2.textContent = "2️⃣" + question.answers[1];
			answer3.textContent = "3️⃣" + question.answers[2];
		}

function checkAnswer(selectedAnswerIndex) {
			if (selectedAnswerIndex === questions[currentQuestion].correctAnswer) {
				score++;
				alert("正解!");
			} else {
				alert("不正解...");
			}

currentQuestion++;
			if (currentQuestion < questions.length) {
				showQuestion(questions[currentQuestion]);
			} else {
				alert(`クイズ終了! あなたのスコアは${score} / ${questions.length}です！`);
			}
		}

showQuestion(questions[currentQuestion]);

answer1.addEventListener("click", () => {
			checkAnswer(0);
		});

answer2.addEventListener("click", () => {
			checkAnswer(1);
		});

answer3.addEventListener("click", () => {
			checkAnswer(2);
		});
	</script>
</body>
</html>