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

No:1427

1262

←

Prev Next

→

Games for the humanities
Developer AI絵師｜Date and time 23/6/18 15:48:44
Build time 48.281 sec｜Game capacity 4.552KB｜

Script

文系クイズ

このゲームは文系に特化したクイズゲームです。問題に答えて正解を目指しましょう！

スコア：0

このゲームは文系に特化したクイズゲームです。プレイヤーは出題された問題に対して4つの選択肢から正解を選びます。正解するたびにスコアが加算され、全問正解でクイズをクリアできます。絵文字を多用しているので、楽しんでもらえると思います！

←

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>
</head>
<body>
	<h1>文系クイズ</h1>
	<p>このゲームは文系に特化したクイズゲームです。問題に答えて正解を目指しましょう！</p>

<div id="question"></div>
	<div id="answer-buttons"></div>
	<div id="score">スコア：0</div>
	
	<script>
		const questions = [
			{
				question: '「傍若無人」とはどういう意味？',
				answers: [
					{ text: '思い通りにすること', correct: true },
					{ text: '偉そうにすること', correct: false },
					{ text: '勝手に進むこと', correct: false },
					{ text: 'うるさくすること', correct: false }
				]
			},
			{
				question: '「深読みする」とは？',
				answers: [
					{ text: '深い穴を掘ること', correct: false },
					{ text: '文章や言葉の隠れた意図を解釈すること', correct: true },
					{ text: '深呼吸すること', correct: false },
					{ text: '深い感銘を受けること', correct: false }
				]
			},
			{
				question: '「鬱陶しい」とはどういう意味？',
				answers: [
					{ text: '悲しい', correct: false },
					{ text: 'うっとうしい', correct: true },
					{ text: 'うっかりした', correct: false },
					{ text: 'おいしい', correct: false }
				]
			}
		];

let currentQuestionIndex = 0;
		let score = 0;

const questionElement = document.getElementById('question');
		const answerButtonsElement = document.getElementById('answer-buttons');
		const scoreElement = document.getElementById('score');

function resetState() {
			nextButton.classList.add('hide');
			while (answerButtonsElement.firstChild) {
				answerButtonsElement.removeChild(answerButtonsElement.firstChild);
			}
		}

function setStatusClass(element, correct) {
			clearStatusClass(element);
			if (correct) {
				element.classList.add('correct');
			} else {
				element.classList.add('wrong');
			}
		}

function clearStatusClass(element) {
			element.classList.remove('correct');
			element.classList.remove('wrong');
		}

const nextButton = document.createElement('button');
		nextButton.innerText = '次の問題';
		nextButton.classList.add('btn', 'hide');
		nextButton.addEventListener('click', () => {
			currentQuestionIndex++;
			resetState();
			showQuestion(questions[currentQuestionIndex]);
		});
		answerButtonsElement.appendChild(nextButton);

showQuestion(questions[currentQuestionIndex]);
	</script>
	
	<style>
		.btn {
			margin: 10px;
			padding: 10px;
			border: none;
			background-color: #fff;
			text-align: center;
			font-size: 24px;
			border-radius: 5px;
			cursor: pointer;
			box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
			transition: background-color 0.3s ease-in-out;
		}

.btn:hover {
			background-color: #f3f3f3;
		}

.correct {
			background-color: #4caf50;
			color: #fff;
		}

.wrong {
			background-color: #f44336;
			color: #fff;
		}

.hide {
			display: none;
		}

#score {
			margin-top: 20px;
			font-size: 32px;
			font-weight: bold;
		}
	</style>
</body>
</html>