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

No:150

316

←

Prev Next

→

Miscellaneous Quiz
Developer User2604｜Date and time 23/5/29 15:57:44
Build time 115.035 sec｜Game capacity 4.386KB｜

Script

雑学クイズ

Score: 0

このアプリは、JavaScriptで作られた雑学クイズゲームです。プレイヤーは、画面に表示されるクイズの問題に対して、正しい選択肢を選ぶことができます。選んだ選択肢が正しければ、スコアが加算されます。スコアは画面に表示されます。絵文字を多めに使っています。スマホでも操作可能です。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>雑学クイズ</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
		}
		h1 {
			text-align: center;
			font-size: 3rem;
			margin-top: 2rem;
			margin-bottom: 1rem;
		}
		#question {
			text-align: center;
			font-size: 2rem;
			margin-top: 2rem;
			margin-bottom: 1rem;
		}
		#answers {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 1rem;
			margin-bottom: 2rem;;
		}
		.answer-button {
			background-color: #fff;
			border: none;
			border-radius: 0.5rem;
			padding: 1rem;
			margin: 0.5rem;
			font-size: 1.5rem;
			box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
			cursor: pointer;
			transition: all 0.3s ease-out;
		}
		.answer-button:hover {
			transform: translateY(-0.2rem);
			box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
		}
		.correct {
			background-color: green;
			color: #fff;
			box-shadow: none;
		}
		.incorrect {
			background-color: red;
			color: #fff;
			box-shadow: none;
		}
		#score {
			text-align: center;
			font-size: 2rem;
			margin-top: 1rem;
			margin-bottom: 2rem;
		}
	</style>
</head>
<body>
	<h1>雑学クイズ</h1>
	<div id="question"></div>
	<div id="answers"></div>
	<div id="score">Score: 0</div>
	<script>
		const questions = [
			{
				question: "絶賛された「風の谷のナウシカ」は、宮崎駿の何作目か？",
				answers: [
					{ text: "1作目", correct: false },
					{ text: "2作目", correct: true },
					{ text: "3作目", correct: false },
					{ text: "4作目", correct: false }
				]
			},
			{
				question: "進撃の巨人の作者の名前は？",
				answers: [
					{ text: "諫山創", correct: true },
					{ text: "諸星大二郎", correct: false },
					{ text: "手塚治虫", correct: false },
					{ text: "尾田栄一郎", correct: false }
				]
			},
			{
				question: "サンキューマートの創業者は誰？",
				answers: [
					{ text: "中尾芳文", correct: true },
					{ text: "佐藤清", correct: false },
					{ text: "清水富美加", correct: false },
					{ text: "森川葵", correct: false }
				]
			},
			{
				question: "「飛ぶ教室」で知られる漫画家は誰？",
				answers: [
					{ text: "大和和紀", correct: false },
					{ text: "赤塚不二夫", correct: false },
					{ text: "新井素子", correct: true },
					{ text: "浜田ブリトニー", correct: false }
				]
			},
			{
				question: "世界で最も人口が多い国は？",
				answers: [
					{ text: "中国", correct: true },
					{ text: "インド", correct: false },
					{ text: "アメリカ", correct: false },
					{ text: "ロシア", correct: false }
				]
			}
		];

let currentQuestion = 0;
		let score = 0;

const questionElement = document.getElementById("question");
		const answerElements = document.getElementById("answers");

function resetAnswerButtons() {
			answerElements.innerHTML = "";
		}

function disableAnswerButtons() {
			const answerButtons = document.querySelectorAll(".answer-button");
			answerButtons.forEach(answerButton => {
				answerButton.disabled = true;
			});
		}

showQuestion();
	</script>
</body>
</html>