Choice Game Using HTML CSS JavaScript

Choice Game Using HTML CSS JavaScript

Introduction:

Hello friends, you all are welcome to today’s new blog post. Today we have created a beautiful project for you which is Choice Game Using HTML CSS JavaScript in which the user has to choose the item. This game is very amazing and attractive which we can make. If you create small or big games like this then you get the knowledge of JavaScript and then you can also make big game projects. To create this you should have knowledge of basic HTML, CSS or JavaScript, then you can make it very easily.

Explanation :

First of all we are going to create a structure with the help of HTML in which we are going to add some important elements which will include things like buttons and icons.

  • Head Section:
    • <meta>: First of all, in HTML there is a meta link in the head section which is of different types and this is very important for our project.
    • <title>: If we want to add a title to our project then that is also added in the head section.
  • Body Section:
    • <div class=”container”>: First of all we have created a container in which we are going to add the necessary items of our project.
    • <h1>: We have also added a heading to the project which you can choose as per your choice.
    • <div>: We have created a div box in which the user will be shown the question for which he has to give the right answer.
    • <div class=”option-group” role=”radiogroup”>: We have also created an option section from which the user will select the right option.
    • <table>: We have also created a table which will show the two options.

CSS Styling:

  • body: In body we have used linear color you can use another one and centered the align items.
  • container: We have added max width of 800px to container and used padding along with red color in background.
  • h1: We have centered the heading text alignment, kept the color black and kept the font size 2 rem.
  • keyframes: We have added Keyframe because we have also added animation in this game.

JavaScript:

Now we have created the structure of our project with the help of html CSS and have also designed it with the help of CSS, so now to activate this game we need JavaScript code which activates our game.

  • const questions: We have also added different options in the JavaScript which the user will select.
  • function updateQuestion: We have created a function for the question through which user can select the answer which will have option A and B.
  • function updateHistory: I have created another function in which the history will be updated

Index.html:

	<div class="container">
		<h1>The Choice Game</h1>
		<div class="question" id="question">Which do you prefer?</div>
		<div class="option-group" role="radiogroup">
			<div class="either-option" role="radio" tabindex="0" aria-checked="false"></div>
			<div class="either-option" role="radio" tabindex="0" aria-checked="false"></div>
		</div>
		<div id="feedback" class="feedback" aria-live="polite"></div>
		<table class="history-table">
			<thead>
				<tr>
					<th>Question</th>
					<th>Your Choice</th>
				</tr>
			</thead>
			<tbody id="historyBody">
			</tbody>
		</table>
	</div>

Style.css:

body {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			margin: 0;
			min-height: 100vh;
			background: linear-gradient(135deg, #6e8efb, #a777e3);
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 2rem;
		}

		.container {
			max-width: 800px;
			width: 90%;
			background: rgba(255, 255, 255, 0.95);
			padding: 2rem;
			border-radius: 20px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
		}

		h1 {
			text-align: center;
			color: #2d3436;
			margin-bottom: 1.5rem;
			font-size: 2rem;
		}

		.question {
			text-align: center;
			font-size: 1.2rem;
			margin-bottom: 1.5rem;
			color: #636e72;
		}

		.option-group {
			display: flex;
			gap: 1rem;
			margin-bottom: 1.5rem;
		}

		.either-option {
			flex: 1;
			padding: 1.5rem;
			border: none;
			border-radius: 12px;
			background: #f5f6fa;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 1.1rem;
			font-weight: 600;
			color: #2d3436;
			text-align: center;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		}

		.either-option:hover {
			transform: translateY(-2px);
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
		}

		.either-option.selected {
			background: #6c5ce7;
			color: white;
			transform: scale(1.05);
		}

		.feedback {
			text-align: center;
			font-size: 1.2rem;
			color: #6c5ce7;
			min-height: 2rem;
			margin-top: 1rem;
		}

		.history-table {
			width: 100%;
			margin-top: 2rem;
			border-collapse: collapse;
			background: white;
			border-radius: 12px;
			overflow: hidden;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		}

		.history-table th {
			background: #6c5ce7;
			color: white;
			padding: 1rem;
			text-align: left;
		}

		.history-table td {
			padding: 1rem;
			border-top: 1px solid #eee;
		}

		.history-table tr:hover {
			background: #f8f9fe;
		}

		@keyframes slideIn {
			from {
				opacity: 0;
				transform: translateY(20px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.history-table tr {
			animation: slideIn 0.3s ease forwards;
		}

Script.js:

	const questions = [{
				a: "Pizza 🍕",
				b: "Burger 🍔"
			},
			{
				a: "Beach ⛱️",
				b: "Mountain ⛰️"
			},
			{
				a: "Cat 😺",
				b: "Dog 🐕"
			},
			{
				a: "Summer ☀️",
				b: "Winter ❄️"
			},
			{
				a: "Netflix 📺",
				b: "Book 📚"
			}
		];
		let currentQuestion = 0;

		function updateQuestion() {
			const options = document.querySelectorAll('.either-option');
			options[0].textContent = questions[currentQuestion].a;
			options[1].textContent = questions[currentQuestion].b;
			document.getElementById('feedback').textContent = '';
		}

		function updateHistory(choice) {
			const historyBody = document.getElementById('historyBody');
			const row = document.createElement('tr');
			row.innerHTML = `
        <td>${questions[currentQuestion].a} vs ${questions[currentQuestion].b}</td>
        <td>${choice}</td>
      `;
			historyBody.insertBefore(row, historyBody.firstChild);
		}

		function handleSelection(event) {
			const options = document.querySelectorAll('.either-option');
			options.forEach(opt => {
				opt.setAttribute('aria-checked', 'false');
				opt.classList.remove('selected');
			});
			const selected = event.currentTarget;
			selected.setAttribute('aria-checked', 'true');
			selected.classList.add('selected');
			updateHistory(selected.textContent);
			document.getElementById('feedback').textContent = 'Great choice! 🎉';
			setTimeout(() => {
				currentQuestion = (currentQuestion + 1) % questions.length;
				options.forEach(opt => {
					opt.classList.remove('selected');
					opt.setAttribute('aria-checked', 'false');
				});
				updateQuestion();
			}, 1000);
		}
		document.addEventListener('DOMContentLoaded', function() {
			const options = document.querySelectorAll('.either-option');
			updateQuestion();
			options.forEach(option => {
				option.addEventListener('click', handleSelection);
				option.addEventListener('keydown', function(event) {
					if (event.key === 'Enter' || event.key === ' ') {
						event.preventDefault();
						handleSelection(event);
					}
				});
			});
		});