Love Simulation Game

Welcome to Love Simulation Game! Answer some questions and experience a pseudo-romance. After 7 questions, the confession button will appear. Are you ready to play?
<!DOCTYPE html>
<html>
<head>
	<title>Love Simulation Game</title>
	<meta charset="utf-8">
	<style type="text/css">
		body {
			font-family: Arial, sans-serif;
			text-align: center;
			background-color: #eee;
		}
		h1 {
			font-size: 2em;
			margin-bottom: 0;
		}
		p {
			font-size: 1.2em;
			margin-top: 0;
			margin-bottom: 20px;
		}
		button {
			font-size: 1.2em;
			padding: 10px;
			border-radius: 20px;
			border: none;
			background-color: #007bff;
			color: #fff;
			cursor: pointer;
			margin: 10px;
		}
		#question-container {
			background-color: #fff;
			padding: 20px;
			border-radius: 20px;
			margin: 20px auto;
			max-width: 500px;
			box-shadow: 0 2px 5px rgba(0,0,0,0.3);
		}
		.hidden {
			display: none;
		}
	</style>
</head>
<body>
	<h1>Love Simulation Game</h1>
	<p>Welcome to Love Simulation Game! Answer some questions and experience a pseudo-romance. After 7 questions, the confession button will appear. Are you ready to play?</p>
	<button id="start-btn">Start Game</button>

	<div id="question-container" class="hidden">
		<p id="question-text"></p>
		<button id="answer1"></button>
		<button id="answer2"></button>
		<button id="answer3"></button>
	</div>

	<button id="confess-btn" class="hidden">Confess!</button>
	<button id="retry-btn" class="hidden">Retry</button>

	<script type="text/javascript">
		// Set up initial variables
		var questionNum = 1;
		var answerNum = 3;
		var questions = [
			{
				text: "If you could travel anywhere in the world, where would you go?",
				answers: ["Japan", "Paris", "New York"]
			},
			{
				text: "What's your favorite food?",
				answers: ["Sushi", "Pizza", "Burgers"]
			},
			{
				text: "What kind of music do you like?",
				answers: ["Pop", "Rock", "Hip-hop"]
			},
			{
				text: "What's your favorite hobby?",
				answers: ["Reading", "Playing video games", "Cooking"]
			},
			{
				text: "What's your favorite animal?",
				answers: ["Cats", "Dogs", "Birds"]
			},
			{
				text: "What's your favorite movie genre?",
				answers: ["Drama", "Comedy", "Action"]
			},
			{
				text: "What do you value most in a relationship?",
				answers: ["Honesty", "Trust", "Communication"]
			}
		];
		var score = 0;

		// Function to display question and answer buttons
		function displayQuestion() {
			document.getElementById("question-text").innerHTML = questions[questionNum-1].text;

			var correctAnswer = Math.floor(Math.random() * answerNum);
			var answers = [];
			for (var i = 0; i < answerNum; i++) {
				if (i == correctAnswer) {
					answers.push("Correct Answer");
				} else {
					answers.push("Wrong Answer");
				}
			}
			answers.sort(() => Math.random() - 0.5);

			document.getElementById("answer1").innerHTML = answers[0];
			document.getElementById("answer2").innerHTML = answers[1];
			document.getElementById("answer3").innerHTML = answers[2];
		}

		// Add event listener to start button
		document.getElementById("start-btn").addEventListener("click", function() {
			document.getElementById("start-btn").classList.add("hidden");
			document.getElementById("question-container").classList.remove("hidden");
			displayQuestion();
		});

		// Add event listener to answer buttons
		var answerButtons = document.querySelectorAll("#question-container button");
		answerButtons.forEach(function(button) {
			button.addEventListener("click", function() {
				if (button.innerHTML == "Correct Answer") {
					score++;
				}
				if (questionNum >= 7) {
					document.getElementById("confess-btn").classList.remove("hidden");
					document.getElementById("retry-btn").classList.remove("hidden");
					answerButtons.forEach(function(button) {
						button.disabled = true;
					});
				} else {
					questionNum++;
					displayQuestion();
				}
			});
		});

		// Add event listener to confession button
		document.getElementById("confess-btn").addEventListener("click", function() {
			document.getElementById("question-container").classList.add("hidden");
			document.getElementById("confess-btn").classList.add("hidden");
			document.getElementById("retry-btn").classList.add("hidden");
			if (score >= 5) {
				alert("Congratulations! Your confession was successful!");
			} else if (score >= 3) {
				alert("Your confession was accepted, but there's still room for improvement.");
			} else {
				alert("Sorry, your confession was rejected.");
			}
		});

		// Add event listener to retry button
		document.getElementById("retry-btn").addEventListener("click", function() {
			answerButtons.forEach(function(button) {
				button.disabled = false;
			});
			score = 0;
			questionNum = 1;
			displayQuestion();
			document.getElementById("question-container").classList.remove("hidden");
			document.getElementById("confess-btn").classList.add("hidden");
			document.getElementById("retry-btn").classList.add("hidden");
		});
	</script>
</body>
</html>