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

No:1470

231

←

Prev Next

→

A game that generates life h○cks and determines if..ALL
Developer User3346｜Date and time 23/6/18 17:06:30
Build time 51.355 sec｜Game capacity 4.401KB｜

Script

ライフハック判定ゲーム

以下の質問に答えて、「あくらつかどうか？」を判定しよう！

←

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 {
			margin: 0;
			padding: 0;
			background-color: #d1e7ff;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-family: Arial, sans-serif;
		}
		h1 {
			margin-top: 50px;
			font-size: 50px;
			color: #052f68;
		}
		h2 {
			margin-top: 30px;
			font-size: 30px;
			color: #052f68;
		}
		p {
			margin-top: 20px;
			font-size: 20px;
			color: #052f68;
			text-align: center;
		}
		button {
			margin-top: 50px;
			padding: 10px 20px;
			background-color: #052f68;
			color: white;
			border: none;
			border-radius: 5px;
			font-size: 20px;
			cursor: pointer;
		}
		.game-container {
			margin-top: 50px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.question {
			margin-top: 20px;
			font-size: 25px;
			color: #052f68;
		}
		.answers {
			margin-top: 30px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		.answer {
			margin: 10px;
			padding: 10px 20px;
			background-color: #052f68;
			color: white;
			border: none;
			border-radius: 5px;
			font-size: 20px;
			cursor: pointer;
			transition: background-color 0.3s;
		}
		.answer:hover {
			background-color: #2b77c5;
		}
		.result {
			margin-top: 50px;
			font-size: 30px;
			color: #052f68;
		}
	</style>
</head>
<body>
	<h1>ライフハック判定ゲーム</h1>
	<p>以下の質問に答えて、「あくらつかどうか？」を判定しよう！</p>
	<button onclick="startGame()">スタート！</button>
	<div class="game-container" style="display:none;">
		<div class="question"></div>
		<div class="answers"></div>
		<div class="result" style="display:none;"></div>
	</div>
	<script>
		const questions = [
			{ 
				question: "食器洗い機を使う前に、必ず予備洗いをする。", 
				answers: [
					{ text: "あくらつ", correct: false }, 
					{ text: "かどうか", correct: true }
				] 
			},
			{ 
				question: "歯ブラシを電子レンジで1分加熱すると、細菌が死滅する。", 
				answers: [
					{ text: "あくらつ", correct: false },
					{ text: "かどうか", correct: true }
				] 
			},
			{ 
				question: "疲れ目には、スマホを見る前に床に寝転がって目を閉じると効果的。", 
				answers: [
					{ text: "あくらつ", correct: true },
					{ text: "かどうか", correct: false }
				] 
			},
			{ 
				question: "納豆に醤油よりも塩をかけると、美味しくなる。", 
				answers: [
					{ text: "あくらつ", correct: true },
					{ text: "かどうか", correct: false }
				] 
			},
			{ 
				question: "テレビを見ながら寝ると、目が痛くなる。", 
				answers: [
					{ text: "あくらつ", correct: false },
					{ text: "かどうか", correct: true }
				] 
			}
		];

let currentQuestionIndex;
		let score = 0;

const startGame = () => {
			document.querySelector("button").style.display = "none";
			document.querySelector(".game-container").style.display = "flex";
			currentQuestionIndex = 0;
			showQuestion();
		};

const showResult = () => {
			document.querySelector(".question").style.display = "none";
			document.querySelector(".answers").style.display = "none";
			const result = document.querySelector(".result");
			result.textContent = `あなたのスコアは${score}点！`;
			result.style.display = "block";
		};
	</script>
</body>
</html>