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

No:651

196

←

Prev Next

→

AI-like game
Developer User3064｜Date and time 23/6/17 1:23:23
Build time 55.071 sec｜Game capacity 3.587KB｜

Script

以下は「AIが出す問題に答えるゲーム」の一例です。

AI Quiz Game

←

Prev　Next

→ 　

Back　

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

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

以下は「AIが出す問題に答えるゲーム」の一例です。

<!DOCTYPE html>
<html>
<head>
	<title>AI Quiz Game</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f2f2f2;
			font-family: Arial, sans-serif;
			font-size: 16px;
			color: #333;
		}
		
		h1 {
			font-size: 40px;
			text-align: center;
			margin-top: 50px;
		}
		
		p {
			font-size: 20px;
			line-height: 1.5;
			margin: 20px;
			text-align: justify;
		}
		
		button {
			padding: 20px;
			font-size: 24px;
			border: none;
			border-radius: 10px;
			background-color: #008CBA;
			color: white;
			box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
			cursor: pointer;
			transition: background-color 0.3s ease;
		}
		
		button:hover {
			background-color: #005b80;
		}
		
		#question {
			margin: 20px;
			padding: 20px;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
			text-align: center;
		}
		
		#result {
			margin: 20px;
			padding: 20px;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
			text-align: center;
			display: none;
		}
		
		#score {
			font-size: 24px;
			font-weight: bold;
			margin: 10px;
		}
		
		#message {
			font-size: 20px;
			margin: 10px;
		}
	</style>
</head>
<body>
	<h1>AI Quiz Game</h1>
	<div id="question"></div>
	<div id="result">
		<div id="score"></div>
		<div id="message"></div>
		<button onclick="location.reload()">Play Again</button>
	</div>
	<script>
		const questions = [
			{
				question: "日本の首都は？",
				choices: ["東京", "京都", "大阪", "札幌"],
				answer: "東京"
			},
			{
				question: "世界最大の湖は？",
				choices: ["琵琶湖", "カリブ海", "カスピ海", "スーペリア湖"],
				answer: "カスピ海"
			},
			{
				question: "アメリカの独立宣言は何年に書かれた？",
				choices: ["1776年", "1789年", "1793年", "1812年"],
				answer: "1776年"
			}
		];
		
		let current_question = 0;
		let score = 0;
		
		function showQuestion() {
			const question_div = document.getElementById("question");
			question_div.innerHTML = `
				<p>${questions[current_question].question}</p>
				${questions[current_question].choices.map(choice => `
					<button onclick="checkAnswer('${choice}')">${choice}</button>
				`).join("")}
			`;
		}
		
		function checkAnswer(selected_choice) {
			if (selected_choice == questions[current_question].answer) {
				score++;
				document.getElementById("score").innerHTML = `Score: ${score} / ${questions.length}`;
				document.getElementById("message").innerHTML = "正解！👍";
			} else {
				document.getElementById("message").innerHTML = "不正解…😢";
			}
			current_question++;
			if (current_question == questions.length) {
				showResult();
			} else {
				showQuestion();
			}
		}
		
		function showResult() {
			document.getElementById("question").style.display = "none";
			document.getElementById("result").style.display = "";
			document.getElementById("score").innerHTML = `Score: ${score} / ${questions.length}`;
			if (score == questions.length) {
				document.getElementById("message").innerHTML = "すごい！全問正解！🎉";
			} else if (score >= questions.length / 2) {
				document.getElementById("message").innerHTML = "不得意じゃないね😊";
			} else {
				document.getElementById("message").innerHTML = "もっと勉強しよう…💦";
			}
		}
		
		showQuestion();
	</script>
</body>
</html>