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

No:101

3124

one after the other
Developer ひさひさ｜Date and time 23/5/16 23:18:23
Build time 110.885 sec｜Game capacity 3.828KB｜

ゲームの概要：「スマホマジック！」は、スマートフォンをテーマにしたクイズゲームです。プレイヤーは、スマホに関する質問を解答しながら、スマホの知識を深めていくことが目的となります。以下が、1枚のHTMLファイルに含まれるJavaScriptを用いたスマホマジック！のゲームプログラムです。

スマホマジック！

以下の質問に答えて、スマホの知識を深めよう！

質問が表示されます。

スマホマジック！は、クイズ形式でスマホに関する問題に挑戦し、正解数を競うゲームです。スタートボタンを押すと、問題が表示されます。問題に対し、3つの選択肢から正解を選び、ボタンをクリックします。正解した場合は「正解！」と、不正解だった場合は「不正解！」と、アラートメッセージで表示されます。全問題に回答すると、クイズ終了となり、もう一度プレイする場合は、スタートボタンをクリックします。また、問題に答える際に、絵文字が多数使用されています。

→ 　

1　

0　

[PR]現在の売れ筋グッズランキング

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

(C)2023 HisashiApp

ゲームの概要：「スマホマジック！」は、スマートフォンをテーマにしたクイズゲームです。プレイヤーは、スマホに関する質問を解答しながら、スマホの知識を深めていくことが目的となります。

以下が、1枚のHTMLファイルに含まれるJavaScriptを用いたスマホマジック！のゲームプログラムです。

<!DOCTYPE html>
<html>
<head>
	<title>スマホマジック！</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 1.2em;
			text-align: center;
			background-color: #ffe6e6;
		}
		button {
			font-size: 1.2em;
			padding: 10px 20px;
			margin: 10px;
			background-color: #ff9999;
			color: white;
			border: none;
			border-radius: 10px;
		}
	</style>
</head>
<body>

<h1>スマホマジック！</h1>
	<p>以下の質問に答えて、スマホの知識を深めよう！</p>

<div id="quiz">質問が表示されます。</div>
	<button id="start">スタート</button>

<script>
		const quiz = [
			{
				question: "スマホをつぶしてしまった時、どうしたらいい？",
				choices: [
					"自己修理に挑戦する",
					"修理業者に依頼する",
					"諦めて新しいスマホを買う"
				],
				answer: "修理業者に依頼する"
			},
			{
				question: "スマホの画面が割れてしまった時、ガラスフィルムを貼るという方法があるが、本当に効果があるか？",
				choices: [
					"効果がある",
					"効果がない"
				],
				answer: "効果がない"
			},
			{
				question: "スマホの電池がすぐに切れてしまう場合、どうすればいい？",
				choices: [
					"充電器を買い換える",
					"バッテリー交換をする",
					"アプリを削除する"
				],
				answer: "アプリを削除する"
			}
		];

const quizContainer = document.getElementById("quiz");
		const startButton = document.getElementById("start");
		let currentQuestionIndex = 0;

startButton.addEventListener("click", startQuiz);
		
		function startQuiz() {
			startButton.classList.add("hide");
			showQuestion();
		}
		
		function showQuestion() {
			const question = quiz[currentQuestionIndex];
			quizContainer.innerHTML = `<h2>${question.question}</h2>
				<div class="choices">
				${question.choices.map(choice => `<button class="choice">${choice}</button>`).join("")}
				</div>`;

const choiceButtons = document.querySelectorAll(".choice");
			choiceButtons.forEach(button => button.addEventListener("click", handleAnswer));
		}

function handleAnswer(event) {
			const selectedAnswer = event.target.innerText;
			const question = quiz[currentQuestionIndex];
			if (selectedAnswer === question.answer) {
				alert("正解！");
			} else {
				alert("不正解！");
			}
			currentQuestionIndex++;
			if (currentQuestionIndex < quiz.length) {
				showQuestion();
			} else {
				alert("クイズ終了！");
				startButton.innerText = "もう一度プレイする";
				startButton.classList.remove("hide");
				currentQuestionIndex = 0;
			}
		}
	</script>
</body>
</html>

スマホマジック！は、クイズ形式でスマホに関する問題に挑戦し、正解数を競うゲームです。スタートボタンを押すと、問題が表示されます。問題に対し、3つの選択肢から正解を選び、ボタンをクリックします。正解した場合は「正解！」と、不正解だった場合は「不正解！」と、アラートメッセージで表示されます。全問題に回答すると、クイズ終了となり、もう一度プレイする場合は、スタートボタンをクリックします。また、問題に答える際に、絵文字が多数使用されています。