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

No:2239

825

←

Prev Next

→

10 Quizzes
Developer User3497｜Date and time 23/6/20 17:19:38
Build time 72.987 sec｜Game capacity 5.319KB｜

Script

ゲーム概要：10回のクイズに挑戦し、正解数を競うゲーム。以下のコードをhtmlファイルに記述して、JavaScriptを含めました。スマホでも遊べるようにレスポンシブ対応しています。絵文字も多めに使用しました。

10回クイズ

10の質問に答えて、最高得点を獲得しましょう！

←

Prev　Next

→ 　

Back　

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

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

ゲーム概要：10回のクイズに挑戦し、正解数を競うゲーム。

以下のコードをhtmlファイルに記述して、JavaScriptを含めました。スマホでも遊べるようにレスポンシブ対応しています。絵文字も多めに使用しました。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>10回クイズ</title>
	<style>
		body {
			background-color: #f5d7b5;
			color: #333;
			font-family: 'Segoe UI', sans-serif;
			font-size: 1.2em;
			margin: 0;
			padding: 0;
			text-align: center;
		}
		
		.container {
			margin: 0 auto;
			max-width: 600px;
			padding: 20px;
		}
		
		.quiz {
			background-color: #edae49;
			border-radius: 10px;
			box-shadow: 0 0 10px #333;
			margin-bottom: 20px;
			padding: 20px;
			text-align: left;
		}
		
		.question {
			font-weight: bold;
			margin-bottom: 10px;
		}
		
		.choices {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		
		.choice {
			background-color: #fff;
			border-radius: 5px;
			box-shadow: 0 0 5px #333;
			cursor: pointer;
			flex-basis: calc(50% - 10px);
			margin-bottom: 10px;
			padding: 10px;
			text-align: center;
		}
		
		.choice:hover {
			background-color: #f5f5f5;
		}
		
		.choice:active {
			background-color: #ddd;
			box-shadow: none;
		}
		
		.result {
			font-weight: bold;
			margin-bottom: 20px;
		}
		
		.btn {
			background-color: #333;
			border: none;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
			font-size: 1.2em;
			margin-top: 20px;
			padding: 10px 20px;
			transition: background-color 0.3s ease;
		}
		
		.btn:hover {
			background-color: #666;
		}
		
		.btn:active {
			background-color: #111;
		}
		
		@media (max-width: 480px) {
			.choices {
				flex-direction: column;
			}
			
			.choice {
				flex-basis: 100%;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>10回クイズ</h1>
		<p>10の質問に答えて、最高得点を獲得しましょう！</p>
		
		<div class="quiz-container"></div>
		
		<button class="start-btn btn">スタート！</button>
	</div>