初期コミット。

sekiyaanis · Sep 9, 2024 · 9bbe01f · 9bbe01f
commit 9bbe01f
Show file tree

Hide file tree

Showing 4 changed files with 478 additions and 0 deletions.
diff --git a/QuizGame01.html b/QuizGame01.html
@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Quiz Game</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+	.question {
+	  font-size: 20px;
+	  margin-bottom: 10px;
+	}
+
+	.choices {
+	  list-style-type: none;
+	  padding: 0;
+	}
+
+	.choice {
+	  margin-bottom: 5px;
+	}
+
+	.choice input[type="radio"] {
+	  margin-right: 5px;
+	}
+	body {
+	font-family: Arial, sans-serif;
+	background-color: #f5f5f5;
+	padding: 20px;
+	}
+	h1 {
+	text-align: center;
+	color: #333;
+	margin-bottom: 20px;
+	}
+	.question {
+	font-size: 20px;
+	margin-bottom: 10px;
+	}
+	.choices {
+	list-style-type: none;
+	padding: 0;
+	}
+	.choice {
+	margin-bottom: 5px;
+	}
+	.choice input[type="radio"] {
+	margin-right: 5px;
+	}
+	#result-message {
+	font-size: 24px;
+	text-align: center;
+	margin-top: 20px;
+	}
+	/* Submit ボタンのCSS */
+	#submit-button {
+	background-color: #4CAF50; /* 背景色 */
+	color: white; /* 文字色 */
+	padding: 10px 20px; /* 内側のパディング */
+	border: none; /* 枠線なし */
+	border-radius: 4px; /* 角丸 */
+	cursor: pointer; /* マウスカーソルをポインターにする */
+	font-size: 16px; /* フォントサイズ */
+	}
+	#submit-button:hover {
+	background-color: #45a049; /* マウスオーバー時の背景色 */
+	}
+
+	/* 設問のCSS */
+	.question {
+		font-size: 20px; /* フォントサイズ */
+		margin-bottom: 10px; /* 下部のマージン */
+		font-weight: bold; /* 太字 */
+		color: #333; /* 文字色 */
+		background-color: #f9f9f9; /* 背景色 */
+		padding: 10px; /* 内側のパディング */
+		border-radius: 4px; /* 角丸 */
+	}
+
+	/* レスポンシブ対応 */
+	@media (max-width: 600px) {
+		.question {
+		font-size: 16px; /* フォントサイズ */
+		padding: 8px; /* 内側のパディング */
+		}
+	}
+
+	/* ページ全体のレスポンシブ対応 */
+	body {
+		max-width: 800px; /* 最大幅 */
+		margin: 0 auto; /* 中央寄せ */
+		padding: 20px; /* 内側のパディング */
+	}
+
+	/* ヘッダーとフッターのレスポンシブ対応 */
+	header, footer {
+		text-align: center; /* 中央寄せ */
+	}
+
+	/* クイズコンテナーのレスポンシブ対応 */
+	#quiz-container {
+		max-width: 600px; /* 最大幅 */
+		margin: 0 auto; /* 中央寄せ */
+	}
+
+	/* 結果コンテナーのレスポンシブ対応 */
+	#result-container {
+		max-width: 600px; /* 最大幅 */
+		margin: 0 auto; /* 中央寄せ */
+	}
+	#restart-button {
+	background-color: #ff0000; /* 例えば、赤色 */
+	color: white;
+	padding: 10px 20px;
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 16px;
+	}
+	#restart-button:hover {
+		background-color: #cc0000; /* 例えば、明るい赤色 */
+	}
+	#question-info {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-bottom: 20px;
+	}
+
+	#current-question-number,
+	#total-questions {
+	font-size: 18px;
+	margin-right: 5px;
+	}	
+	</style>
+</head>
+<body>
+  <h1>クイズゲーム</h1>
+
+  <div id="question-info">
+    <span id="current-question-number">1</span> / <span id="total-questions">10</span>
+  </div>
+
+  <div id="quiz-container">
+	<div class="question"></div>
+	<ul class="choices"></ul>
+	<button id="submit-button">Submit</button>
+  </div>
+
+  <div id="result-container" style="display: none;">
+	<h2 id="result-message"></h2>
+	<button id="restart-button">Restart</button>
+  </div>
+
+  <script>
+	const questions = [
+	{
+		question: "フランスの首都は何ですか？",
+		choices: ["パリ", "ロンドン", "ベルリン", "マドリード"],
+		answer: "パリ"
+	},
+	{
+		"question": "太陽系で一番大きな惑星は何ですか？",
+		"choices": ["地球", "火星", "木星", "金星"],
+		"answer": "木星"
+	},
+	{
+		"question": "エジプトの首都はどこですか？",
+		"choices": ["カイロ", "アテネ", "ローマ", "アルジェ"],
+		"answer": "カイロ"
+	},
+	{
+		"question": "光の速さはおよそどれくらいですか？",
+		"choices": ["30,000 km/s", "300,000 km/s", "3,000 km/s", "300 km/s"],
+		"answer": "300,000 km/s"
+	},
+	{
+		"question": "E=mc² の公式を提唱したのは誰ですか？",
+		"choices": ["アイザック・ニュートン", "アルベルト・アインシュタイン", "ニコラ・テスラ", "スティーブン・ホーキング"],
+		"answer": "アルベルト・アインシュタイン"
+	},
+	{
+		"question": "日本の最高峰である山はどれですか？",
+		"choices": ["富士山", "北岳", "槍ヶ岳", "白馬岳"],
+		"answer": "富士山"
+	},
+	{
+		"question": "イタリアの首都はどこですか？",
+		"choices": ["ローマ", "パリ", "ベルリン", "ロンドン"],
+		"answer": "ローマ"
+	},
+	{
+		"question": "ピカソはどの時代の画家ですか？",
+		"choices": ["ルネサンス", "バロック", "キュビズム", "印象派"],
+		"answer": "キュビズム"
+	},
+	{
+		"question": "最も多くの人々が話す言語は何ですか？",
+		"choices": ["スペイン語", "中国語", "英語", "ヒンディー語"],
+		"answer": "中国語"
+	},
+	{
+		"question": "コンピュータの基本的な単位であるバイト（Byte）は、何ビットで構成されていますか？",
+		"choices": ["8ビット", "16ビット", "32ビット", "64ビット"],
+		"answer": "8ビット"
+	}
+	];
+
+	let currentQuestionIndex = 0;
+	let score = 0;
+
+	function startQuiz() {
+	  const question = questions[currentQuestionIndex];
+	  document.querySelector(".question").textContent = question.question;
+
+	  const choices = document.querySelector(".choices");
+	  choices.innerHTML = "";
+
+	  question.choices.forEach((choice) => {
+		const li = document.createElement("li");
+		li.classList.add("choice");
+		const input = document.createElement("input");
+		input.type = "radio";
+		input.name = "choice";
+		input.value = choice;
+		li.appendChild(input);
+		li.appendChild(document.createTextNode(choice));
+		choices.appendChild(li);
+	  });
+      // 現在の設問番号と設問の総数を更新する
+      document.getElementById("current-question-number").textContent = currentQuestionIndex + 1;
+      document.getElementById("total-questions").textContent = questions.length;
+	}
+
+	function submitAnswer() {
+	  const selectedChoice = document.querySelector('input[name="choice"]:checked');
+	  if (!selectedChoice) {
+		alert("Please select an answer.");
+		return;
+	  }
+
+	  const question = questions[currentQuestionIndex];
+	  if (selectedChoice.value === question.answer) {
+		score++;
+	  }
+
+	  currentQuestionIndex++;
+
+	  if (currentQuestionIndex < questions.length) {
+		startQuiz();
+	  } else {
+		showResult();
+	  }
+
+      // 現在の設問番号を更新する
+      document.getElementById("current-question-number").textContent = currentQuestionIndex + 1;
+	}
+
+	function showResult() {
+	  document.getElementById("quiz-container").style.display = "none";
+	  document.getElementById("result-container").style.display = "block";
+	  document.getElementById("result-message").textContent = `結果発表！ ${score} 点中 ${questions.length} 点`;
+
+	// Remove the elements displaying current question number and total questions
+	const questionInfo = document.getElementById("question-info");
+      if (questionInfo) {
+        questionInfo.parentNode.removeChild(questionInfo);
+      }  
+	}
+
+	function restartQuiz() {
+	  currentQuestionIndex = 0;
+	  score = 0;
+	  document.getElementById("quiz-container").style.display = "block";
+	  document.getElementById("result-container").style.display = "none";
+	  startQuiz();
+
+      // 現在の設問番号と設問の総数をリセットする
+      document.getElementById("current-question-number").textContent = 1;
+      document.getElementById("total-questions").textContent = questions.length;
+	}
+
+	document.getElementById("submit-button").addEventListener("click", submitAnswer);
+	document.getElementById("restart-button").addEventListener("click", restartQuiz);
+
+	startQuiz();
+  </script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>MineSweeper</title>
+	<link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+	<div id="game-container">
+		<!-- Game board will be inserted here -->
+	</div>
+
+	<script src="script.js"></script>
+</body>
+</html>