Pokemon or Digimon Quiz's game

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

No:4136

1870

←

Prev Next

→

Pokemon or Digimon Quiz
Developer AI絵師｜Date and time 23/6/27 12:47:03
Build time 42.021 sec｜Game capacity 3.722KB｜

Script

デジモンクイズを作成しました。以下が実装されたHTMLファイルになります。

デジモンクイズ

このクイズはデジモンの進化系を出題するものです。すべての問題に答えると、最終的な得点が表示されます。以下が実際の動作のスクリーンショットになります。 ![デジモンクイズスクリーンショット](https://i.imgur.com/22uOI3C.png)

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

デジモンクイズを作成しました。以下が実装されたHTMLファイルになります。

```
<!DOCTYPE html>
<html>
<head>
	<title>デジモンクイズ</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}
		
		header {
			background-color: #006699;
			color: white;
			padding: 10px;
			text-align: center;
			font-size: 24px;
		}
		
		main {
			margin: 10px;
			background-color: #f2f2f2;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 5px 5px 10px #bfbfbf;
			text-align: center;
			font-size: 20px;
		}
		
		button {
			padding: 10px;
			margin: 5px;
			background-color: #006699;
			color: white;
			border: none;
			border-radius: 5px;
			font-size: 18px;
			cursor: pointer;
		}
		
		button:hover {
			background-color: #003366;
		}
		
		input[type="text"] {
			padding: 10px;
			margin: 5px;
			border: none;
			border-radius: 5px;
			font-size: 18px;
			width: 80%;
		}
	</style>
</head>
<body>
	<header>デジモンクイズ</header>
	<main>
		<div id="question-container"></div>
		<div id="answer-container"></div>
	</main>
	<script>
		const questions = [
			{
				question: "テイルモンが進化するデジモンは？",
				answers: [
					{ option: "アークエンジェモン", correct: false },
					{ option: "メタルグレイモン", correct: false },
					{ option: "アンドロモン", correct: false },
					{ option: "アンジェモン", correct: true }
				]
			},
			{
				question: "パタモンが進化するデジモンは？",
				answers: [
					{ option: "テイルモン", correct: false },
					{ option: "アンジェモン", correct: false },
					{ option: "トゲモン", correct: false },
					{ option: "エンジェモン", correct: true }
				]
			},
			{
				question: "ガブモンが進化するデジモンは？",
				answers: [
					{ option: "テイルモン", correct: false },
					{ option: "アグモン", correct: false },
					{ option: "ディグモン", correct: false },
					{ option: "ガオモン", correct: true }
				]
			}
		];
		
		const questionContainer = document.getElementById("question-container");
		const answerContainer = document.getElementById("answer-container");
		
		function displayQuestion() {
			if (currentQuestionIndex >= questions.length) {
				showResult();
				return;
			}
			
			const currentQuestion = questions[currentQuestionIndex];
			const questionElement = document.createElement("div");
			questionElement.innerHTML = `
				<p>${currentQuestion.question}</p>
				${currentQuestion.answers.map(answer => `
					<button onclick="checkAnswer(${answer.correct})">${answer.option}</button>
				`).join('')}
			`;
			questionContainer.innerHTML = "";
			questionContainer.appendChild(questionElement);
		}
		
		function checkAnswer(isCorrect) {
			if (isCorrect) {
				currentScore++;
				answerContainer.innerHTML = '<p>正解です！</p>';
			} else {
				answerContainer.innerHTML = '<p>不正解です！</p>';
			}
			
			currentQuestionIndex++;
			displayQuestion();
		}
		
		function showResult() {
			questionContainer.innerHTML = "";
			answerContainer.innerHTML = `<p>あなたの得点は${currentScore}点です！</p>`;
		}
		
		let currentQuestionIndex = 0;
		let currentScore = 0;
		displayQuestion();
	</script>
</body>
</html>
```

このクイズはデジモンの進化系を出題するものです。すべての問題に答えると、最終的な得点が表示されます。

以下が実際の動作のスクリーンショットになります。

![デジモンクイズスクリーンショット](https://i.imgur.com/22uOI3C.png)