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

No:2058

2058

←

Prev Next

→

Multiplication games
Developer User3476｜Date and time 23/6/19 23:24:53
Build time 33.397 sec｜Game capacity 2.28KB｜

Script

掛け算ゲーム

←

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>掛け算ゲーム</title>
	<style>
		body {
			text-align: center;
			font-size: 2em;
		}

button {
			padding: 0.5em;
			font-size: 1em;
			margin-top: 1em;
			background-color: #f4d03f;
			border-radius: 0.5em;
			border: none;
			color: #fff;
			cursor: pointer;
			box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
		}

button:hover {
			background-color: #f7dc6f;
		}

input[type=number] {
			padding: 0.5em;
			font-size: 1em;
			border: none;
			border-radius: 0.5em;
			box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.2);
			margin-top: 1em;
			text-align: center;
		}

.correct {
			color: green;
			font-size: 3em;
		}

.incorrect {
			color: red;
			font-size: 3em;
		}
	</style>
</head>
<body>
	<h1>掛け算ゲーム</h1>
	<p><span id="question"></span> = <input type="number" id="answer" placeholder="答えを入力してください"></p>
	<p><button id="submit">答える</button></p>
	<p id="result"></p>

// 初期化
		function init() {
			// 問題の表示
			document.getElementById('question').textContent = generateQuestion();
			document.getElementById('answer').value = '';
			document.getElementById('result').textContent = '';
		}

// 答えが正しいか判定
		function checkAnswer() {
			let inputAnswer = document.getElementById('answer').value;
			let result = document.getElementById('result');

if (inputAnswer === '') {
				result.textContent = '答えを入力してください';
				return;
			}

let [num1, num2] = generateQuestion().split('×').map(str => parseInt(str, 10));
			let correctAnswer = num1 * num2;

if (parseInt(inputAnswer) === correctAnswer) {
				result.innerHTML = '<span class="correct">正解！🎉🎉🎉</span>';
			} else {
				result.innerHTML = `<span class="incorrect">不正解...😢<br>正解は${correctAnswer}でした。</span>`;
			}
		}

// イベントリスナーの設定
		document.getElementById('submit').addEventListener('click', checkAnswer);

init(); // 初期化
	</script>
</body>
</html>