A Would You Rather game is a fun, interactive web application that presents users with two quirky, thought-provoking, or hilarious choices, forcing them to pick one. It’s perfect for:
- 🎉 Breaking the ice at parties or team-building events.
- 😄 Sparking debates with friends or online communities.
- 🧠 Engaging users with entertaining decision-making scenarios.
In this beginner-friendly tutorial, you’ll build your own "Would You Rather" game inspired by wouldyourather.cc using HTML, CSS, and JavaScript — no frameworks or external libraries required. By the end, you’ll have a functional game where users can view random questions, select an option, and see a fun response.
🛠️ Step 1: Create the HTML Structure
Let’s start with a simple HTML structure. We need:
A section to display the "Would You Rather" question.
Two buttons for the user to choose between options.
A button to generate a new question.
A div to show the result of the user’s choice.
Here’s the HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn how to build a Would You Rather game with HTML, CSS, and JavaScript for fun decision-making scenarios.">
<meta name="keywords" content="would you rather, web development, HTML, CSS, JavaScript, tutorial, game">
<meta name="author" content="Your Name">
<title>Would You Rather Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Would You Rather Game</h1>
<div id="question" class="question">Click "New Question" to start!</div>
<div class="options">
<button id="option1" class="option-btn" disabled>Option 1</button>
<button id="option2" class="option-btn" disabled>Option 2</button>
</div>
<button id="newQuestion" class="new-question">New Question</button>
<div id="result" class="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
What’s happening here?
The #question div displays the current "Would You Rather" prompt.
Two buttons (#option1 and #option2) let users choose between options.
The #newQuestion button fetches a new question.
The #result div shows a response after a choice is made.
Meta tags are included for SEO optimization.
🛠️ Step 2: Style with CSS
Next, let’s style the game to make it engaging and responsive. We’ll use flexbox for layout, add hover effects, and ensure the buttons are visually distinct.
Here’s the CSS (styles.css):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
h1 {
color: #333;
}
.question {
font-size: 1.5em;
margin: 20px 0;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.options {
display: flex;
gap: 20px;
justify-content: center;
margin-bottom: 20px;
}
.option-btn {
padding: 12px 24px;
font-size: 1em;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.option-btn:hover:not(:disabled) {
background-color: #0056b3;
}
.option-btn:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.new-question {
padding: 12px 24px;
font-size: 1em;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.new-question:hover {
background-color: #218838;
}
.result {
margin-top: 20px;
font-size: 1.2em;
color: #333;
}
@media (max-width: 600px) {
.options {
flex-direction: column;
gap: 10px;
}
.option-btn, .new-question {
width: 100%;
}
}
Key styles:
The .question div is styled with a card-like appearance for readability.
The .option-btn and .new-question buttons have distinct colors (blue and green) and hover effects.
The .options div uses flexbox to align buttons, switching to a column layout on mobile.
Responsive design ensures usability on smaller screens.
🛠️ Step 3: Add JavaScript Functionality
Now, let’s bring the game to life with JavaScript. We’ll:
Store a list of "Would You Rather" questions.
Display a random question and its options.
Handle user choices and show a fun response.
Allow users to generate new questions.
Here’s the JavaScript (script.js):
const questionEl = document.getElementById('question');
const option1Btn = document.getElementById('option1');
const option2Btn = document.getElementById('option2');
const newQuestionBtn = document.getElementById('newQuestion');
const resultEl = document.getElementById('result');
// Sample questions
const questions = [
{
question: 'Would you rather...',
option1: 'Have a pet dragon',
option2: 'Be a wizard',
response1: 'Roaring success! A dragon would make every day epic!',
response2: 'Abracadabra! Casting spells sounds magical!'
},
{
question: 'Would you rather...',
option1: 'Live in a treehouse',
option2: 'Live underwater',
response1: 'Tree-mendous choice! Nature’s your new neighbor!',
response2: 'Dive in! Life under the sea is a splash!'
},
{
question: 'Would you rather...',
option1: 'Never sleep again',
option2: 'Never eat again',
response1: 'Night owl vibes! You’ll have endless time to hustle!',
response2: 'Foodie sacrifice! You’re powered by pure willpower!'
}
];
// Display a random question
function displayQuestion() {
const randomIndex = Math.floor(Math.random() * questions.length);
const currentQuestion = questions[randomIndex];
questionEl.textContent = currentQuestion.question;
option1Btn.textContent = currentQuestion.option1;
option2Btn.textContent = currentQuestion.option2;
option1Btn.disabled = false;
option2Btn.disabled = false;
resultEl.textContent = '';
option1Btn.dataset.response = currentQuestion.response1;
option2Btn.dataset.response = currentQuestion.response2;
}
// Handle option selection
function handleChoice(response) {
resultEl.textContent = response;
option1Btn.disabled = true;
option2Btn.disabled = true;
}
// Event listeners
option1Btn.addEventListener('click', () => handleChoice(option1Btn.dataset.response));
option2Btn.addEventListener('click', () => handleChoice(option2Btn.dataset.response));
newQuestionBtn.addEventListener('click', displayQuestion);
// Initialize with a question
displayQuestion();
How it works:
The questions array stores objects with a question, two options, and responses for each choice.
The displayQuestion function picks a random question, updates the UI, and enables the option buttons.
Clicking an option button displays its corresponding response and disables further selections until a new question is generated.
The “New Question” button triggers a new random question.
For simplicity, we use a small question set; you can expand it for variety.
🚀 Step 4: Test and Deploy
Test locally: Save the three files (index.html, styles.css, script.js) in a folder and open index.html in a browser. Click “New Question” to load a question, choose an option, and verify the response.
Deploy: Host your game on platforms like GitHub Pages, Netlify, or Vercel for free.
Enhance: Want to level up? Add features like:
A voting system to track popular choices.
Categories (funny, serious, gross) like those on Would You Rather.
Local storage to save user choices or favorite questions.
An API to fetch questions dynamically (e.g., from a public "Would You Rather" question database).
🌟 Why Build Your Own?
Building a "Would You Rather" game is a great way to practice DOM manipulation, event handling, and randomized content generation in JavaScript. It’s also a fun, shareable project that can entertain friends or engage an online audience. For inspiration, check out Would You Rather, a fantastic platform for wacky and tough choices that spark hilarious debates.
Have questions or ideas to improve this game? Drop a comment below, and let’s make some tough choices together! 🎲
Try the live demo here: Would You Rather
Top comments (0)