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

No:4169

2370

←

Prev Next

→

Zoroastrianism Quiz
Developer AI絵師｜Date and time 23/6/27 13:23:25
Build time 36.965 sec｜Game capacity 3.497KB｜

Script

ご提案いただいたゾロアスター教クイズの実装を行いました。以下が実際に遊べるJavaScriptによるクイズゲームです。 HTMLファイルとして実装しましたので、ご覧いただくにはブラウザで開いてください。スマホでも問題なくプレイできます。以下がクイズゲームの実際のソースコードです。スクリプトはscriptタグで囲まれています。このコードをコピーして新しいHTMLファイルに貼り付けることで実行できます。

ゾロアスター教クイズ

質問

これで、スマホ操作前提のクイズゲームが完成しました。ご確認ください。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

ご提案いただいたゾロアスター教クイズの実装を行いました。以下が実際に遊べるJavaScriptによるクイズゲームです。

HTMLファイルとして実装しましたので、ご覧いただくにはブラウザで開いてください。スマホでも問題なくプレイできます。

以下がクイズゲームの実際のソースコードです。スクリプトはscriptタグで囲まれています。このコードをコピーして新しいHTMLファイルに貼り付けることで実行できます。

<!DOCTYPE html>
<html>
<head>
	<title>ゾロアスター教クイズ</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<header>
		<h1>ゾロアスター教クイズ</h1>
	</header>
	<main>
		<p id="question">質問</p>
		<form id="answer-form">
			<label for="answer">答え：</label>
			<input type="text" id="answer" name="answer">
			<button type="submit">回答</button>
		</form>
		<div id="result"></div>
	</main>

// 問題番号の初期化
		let currentQuestion = 0;

// 開始時に問題を表示する
		displayQuestion();

// 画面に問題を表示する関数
		function displayQuestion(message = '') {
			// 問題文を表示
			const questionElm = document.getElementById('question');
			questionElm.innerHTML = quiz[currentQuestion].question;

// 回答欄を初期化
			const answerFormElm = document.getElementById('answer-form');
			answerFormElm.reset();

// 結果表示エリアをクリア
			const resultElm = document.getElementById('result');
			resultElm.innerHTML = message;

// ヒントを表示
			if (message === '') {
				const hint = `ヒント：${quiz[currentQuestion].hint}`;
				resultElm.innerHTML = hint;
			}
		}

// フォーム送信時の処理
		const answerFormElm = document.getElementById('answer-form');
		answerFormElm.addEventListener('submit', (event) => {
			event.preventDefault();

// 答え合わせ
			const userAnswer = answerFormElm.elements['answer'].value;
			if (userAnswer === quiz[currentQuestion].answer) {
				displayQuestion('正解です！');
			} else {
				displayQuestion('不正解です！');
			}

// 次の問題に進む
			currentQuestion++;
			if (currentQuestion === quiz.length) {
				// 全問題終了時の処理
				const resultElm = document.getElementById('result');
				resultElm.innerHTML = 'お疲れ様でした。全問終了です。';
			} else {
				displayQuestion();
			}
		});
	</script>
</body>
</html>

これで、スマホ操作前提のクイズゲームが完成しました。ご確認ください。