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

No:924

174

←

Prev Next

→

Human Alias Quiz
Developer User3193｜Date and time 23/6/17 22:40:24
Build time 56.504 sec｜Game capacity 4.347KB｜

Script

人間の別名クイズ

以下の絵文字は人間を表す別名です。正解を選んでください。

「人間の別名クイズ」というタイトルのクイズアプリです。クイズの問題と解答を配列で定義し、ランダムに選択肢を生成しています。4つの選択肢のボタンをクリックすることで回答でき、正解か不正解かが表示されます。クイズが終了すると「クイズ終了！お疲れ様でした👏」が表示されます。絵文字を多用して、ユーモラスな雰囲気を出しています。スマホでも問題なく操作できるように、ボタンの大きさや配置を調整しました。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>人間の別名クイズ</title>
	<style>
		body {
			font-size: 20px;
		}
		h1 {
			font-size: 40px;
			text-align: center;
			margin-top: 20px;
			margin-bottom: 0;
		}
		p {
			text-align: center;
			margin-top: 10px;
		}
		#question {
			font-size: 30px;
			text-align: center;
			margin-top: 50px;
		}
		#answer {
			font-size: 20px;
			text-align: center;
			margin-top: 20px;
		}
		#buttons {
			text-align: center;
			margin-top: 20px;
		}
		button {
			font-size: 20px;
			margin: 10px;
			padding: 10px;
			border: none;
			border-radius: 20px;
			background-color: lightblue;
			color: white;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>人間の別名クイズ</h1>
	<p>以下の絵文字は人間を表す別名です。正解を選んでください。</p>
	<div id="question"></div>
	<div id="answer"></div>
	<div id="buttons">
		<button id="button1"></button>
		<button id="button2"></button>
		<button id="button3"></button>
		<button id="button4"></button>
	</div>
	<script>
		// クイズの問題と解答の配列
		const quiz = [
			{question: "👨‍👩‍👧‍👦", answer: "家族"},
			{question: "🏫", answer: "学校"},
			{question: "👴", answer: "老人"},
			{question: "👶", answer: "赤ちゃん"},
			{question: "🏠", answer: "家"},
			{question: "👔", answer: "ビジネスマン"},
			{question: "👩‍⚕️", answer: "看護師"},
			{question: "👨‍🍳", answer: "シェフ"},
			{question: "🕵️‍♂️", answer: "探偵"},
			{question: "🎓", answer: "学生"}
		];

// クイズの現在のインデックスを表す変数
		let currentQuizIndex = 0;

// 表示する問題と選択肢を更新する関数
		function updateQuiz() {
			document.getElementById("question").textContent = quiz[currentQuizIndex].question;
			const answers = generateAnswers();
			for(let i = 0; i < 4; i++) {
				document.getElementById("button" + (i + 1)).textContent = answers[i];
			}
		}

// ランダムな選択肢を生成する関数
		function generateAnswers() {
			const correctAnswer = quiz[currentQuizIndex].answer;
			const answers = [correctAnswer];
			while(answers.length < 4) {
				const randomIndex = Math.floor(Math.random() * quiz.length);
				const randomAnswer = quiz[randomIndex].answer;
				if(answers.indexOf(randomAnswer) === -1) {
					answers.push(randomAnswer);
				}
			}
			return shuffleArray(answers);
		}

// 配列をランダムに並び替える関数
		function shuffleArray(array) {
			for(let i = array.length - 1; i > 0; i--) {
				const j = Math.floor(Math.random() * (i + 1));
				[array[i], array[j]] = [array[j], array[i]];
			}
			return array;
		}

// 選択肢をクリックした時の処理
		function choose(answer) {
			if(answer.textContent === quiz[currentQuizIndex].answer) {
				document.getElementById("answer").textContent = "正解！🎉";
			} else {
				document.getElementById("answer").textContent = "不正解...😭";
			}
			currentQuizIndex++;
			if(currentQuizIndex < quiz.length) {
				setTimeout(function() {
					updateQuiz();
					document.getElementById("answer").textContent = "";
				}, 1000);
			} else {
				setTimeout(function() {
					document.getElementById("question").textContent = "クイズ終了！お疲れ様でした👏";
					document.getElementById("buttons").style.display = "none";
				}, 1000);
			}
		}

// 選択肢のボタンにイベントリスナーを追加する
		const buttons = document.querySelectorAll("button");
		buttons.forEach(function(button) {
			button.addEventListener("click", function() {
				choose(this);
			})
		});

// 最初にクイズを表示する
		updateQuiz();
	</script>
</body>
</html>