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

No:1014

266

←

Prev Next

→

A game in which you answer a three-choice quiz abo..ALL
Developer User3212｜Date and time 23/6/18 0:10:34
Build time 42.423 sec｜Game capacity 3.128KB｜

Script

AIが考えるプレゼンで大事なことを3択のクイズで答えるゲーム

Score: 0

←

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>AI Quiz Game</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="game">
		<h1>AIが考えるプレゼンで大事なことを3択のクイズで答えるゲーム</h1>
		<p id="question"></p>
		<button id="btn0"></button>
		<button id="btn1"></button>
		<button id="btn2"></button>
		<p id="score">Score: 0</p>
	</div>

let currentQuestion = 0;
		let score = 0;
		let questionElement = document.getElementById("question");
		let btn0 = document.getElementById("btn0");
		let btn1 = document.getElementById("btn1");
		let btn2 = document.getElementById("btn2");
		let scoreElement = document.getElementById("score");

function loadQuestion(){

let q = questions[currentQuestion];

questionElement.textContent = q.question;
			btn0.textContent = q.options[0];
			btn1.textContent = q.options[1];
			btn2.textContent = q.options[2];
		}

function checkAnswer(answer){
			if(answer == questions[currentQuestion].answer){
				score++;
				scoreElement.textContent = "Score: " + score;
			}

currentQuestion++;
			if(currentQuestion == questions.length){
				alert("Game Over! Your final score is " + score);
			} else {
				loadQuestion();
			}
		}

btn0.addEventListener("click", function(){
			checkAnswer(0);
		});

btn1.addEventListener("click", function(){
			checkAnswer(1);
		});

btn2.addEventListener("click", function(){
			checkAnswer(2);
		});

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

#game{
		background-color: white;
		border-radius: 5px;
		padding: 20px;
		margin: auto;
		margin-top: 10%;
		max-width: 400px;
		text-align: center;
	}

h1{
		font-size: 2em;
		margin-bottom: 20px;
	}

#question{
		font-size: 1.5em;
		margin-bottom: 20px;
	}

button{
		padding: 10px;
		margin-top: 10px;
		font-size: 1.2em;
		background-color: #1E90FF;
		color: white;
		border: none;
		border-radius: 5px;
	}

button:hover{
		background-color: #4169E1;
	}

#score{
		margin-top: 20px;
		font-size: 1.2em;
	}
</style>