Overview
This guide walks you through creating an interactive quiz that attempts to guess someone's generation based on their cultural knowledge. The quiz asks questions about pop culture, technology, and cultural touchstones from different eras to determine if someone is a Baby Boomer, Generation X, Millennial, or Generation Z.
Absolutely no manual work was involved in the development of this little project. It's 100% vibe coded ;]
Age Guesser Quiz
Can we guess your generation based on your cultural knowledge?
We'll ask you 20 questions about pop culture, technology, and cultural touchstones from different eras. Based on your answers, we'll try to guess which generation you belong to!
Baby Boomers
Born 1946-1964
Generation X
Born 1965-1980
Millennials
Born 1981-1996
Generation Z
Born 1997-2012
Question 1 of 20
5% Complete
Explanation:
Quiz Complete!
If you want to know how to make your quiz inside a Ghost CMS page (or any other CMS that supports code embeds), here's how I made it:
TL;DR
- Ask Manus AI to create the quiz
- Paste the code to Claude and ask it to redo the page so it works as a single, clean embed.
- Done ;)
Complete Guide
Step 1: Initial Concept and Prompt
Original Prompt
Create an interactive quiz that attempts to guess someone's age/generation based on their cultural knowledge.
The quiz should include:
- Questions about pop culture, technology, and cultural references from different decades
- Examples like "What whips the llama's ass?" (Answer: Winamp - explaining it was a popular MP3 player)
- References to era-specific technologies: Napster, cassette tapes, modern platforms like TikTok
- Questions spanning different generations to identify Boomers, Gen X, Millennials, and Gen Z
By analyzing which questions someone can and cannot answer correctly, the quiz should predict their generational cohort. Include explanations for each answer to provide educational context about why certain references belong to specific time periods.
Tools Used
- Manus AI (manus.im) - For initial quiz creation and iteration
- Claude AI - For converting to embeddable format
Step 2: Development Process
Phase 1: Initial Creation
- Submitted prompt to Manus AI
- Received a functional quiz with 20 questions
- Questions covered multiple generations appropriately
- Each question had four multiple-choice answers
- Included explanations for educational value
Phase 2: Image Removal
I realized that images were making answers too obvious, allowing me to guess the correct answers.
Solution:
- Prompted: "Remove all images from the quiz" - complicated, I know...
- Manus AI successfully removed visual elements
- Quiz now relied purely on cultural knowledge
I know I could look for better images, but I'm lazy and the whole idea was to vibe code the entire thing.
Phase 3: Answer Randomization
The first answer was always the correct one. A simple problem, but it would make this quiz pretty much useless.
Solution:
- Prompted: "Randomize the answer positions."
- Manus AI shuffled answer positions randomly
- Quiz became more challenging and fair
Phase 4: Packaging
- Requested Manus AI to wrap everything in a ZIP file
- Received complete HTML file with embedded CSS and JavaScript
- Ready for deployment testing
Step 3: Embedding Challenges and Solutions
The Problem
When attempting to embed the original HTML file:
- CSS styles conflicted with existing page styles
- JavaScript functions conflicted with site scripts
- Page layout broke due to styling conflicts
- Nothing worked anymore. :|
The Solution - Claude AI Optimization
I have tried to modify it using Manus, but it just kept changing the script, redoing the answers, and messing up what it had already created, so I decided to move it to Claude. It converted the standalone HTML to an embeddable format on the first try, and everything just worked as I wanted.
Note: After writing this, I just realized it could potentially be faster/better if done completely using Claude. I'm too lazy to test it, so... do it yourself ;)
- Removed HTML document structure
- Eliminated
<!DOCTYPE>,<html>,<head>,<body>tags - Kept only the content portion
- Eliminated
- Scoped CSS to prevent conflicts
- Wrapped all styles with
.quiz-containerparent selector - Changed class names to be more specific
- Ensured styles only affect quiz elements
- Wrapped all styles with
- Made JavaScript self-contained
- Wrapped all code in
<script>tags - Used unique function names to avoid conflicts
- Maintained all original functionality
- Wrapped all code in
- Optimized for CMS embedding
- Single code block that can be copy-pasted
- Works with any CMS that allows HTML/code blocks
- No external dependencies required
Step 4: Implementation in Ghost CMS
Steps to Embed:
- Open Ghost admin panel
- Create new post or page
- Click "+" to add new block
- Select "HTML" block type
- Paste the complete code
- Save and publish
Result:
- Fully functional quiz embedded in page
- No style conflicts with existing theme
- Mobile responsive design
- Complete user experience preserved
Step 5: Customization and Reusability
Creating Your Own Quiz Variations
The code structure is highly adaptable. Here are examples of other quiz types you can create:
Example 1: Movie Knowledge Quiz
const questions = [
{
question: "Which movie featured the line 'Nobody puts Baby in a corner'?",
options: ["Dirty Dancing", "Ghost", "Pretty Woman", "Flashdance"],
correct: "Dirty Dancing",
generation: "genx",
explanation: "Dirty Dancing (1987) was a cultural phenomenon for Generation X..."
}
// Add more questions...
];
Example 2: Music Era Quiz
const questions = [
{
question: "What music format was most popular in the 1980s?",
options: ["Vinyl", "Cassette tapes", "CDs", "Digital downloads"],
correct: "Cassette tapes",
generation: "genx",
explanation: "Cassette tapes dominated the 1980s music scene..."
}
// Add more questions...
];
Example 3: Technology Evolution Quiz
const questions = [
{
question: "What was the primary way to communicate online in the early 2000s?",
options: ["Email", "AIM/MSN Messenger", "Text messages", "Social media"],
correct: "AIM/MSN Messenger",
generation: "millennials",
explanation: "Instant messaging was the primary form of online communication..."
}
// Add more questions...
];
Customization Options
1. Change Categories
Replace generation categories with any classification:
let categoryScores = {
category1: 0,
category2: 0,
category3: 0,
category4: 0
};
const categoryNames = {
category1: 'Your Category 1',
category2: 'Your Category 2',
category3: 'Your Category 3',
category4: 'Your Category 4'
};
2. Modify Styling
Update the CSS variables to match your brand:
.quiz-container {
background: linear-gradient(135deg, #your-color1 0%, #your-color2 100%);
}
.quiz-title {
background: linear-gradient(135deg, #your-brand-color1 0%, #your-brand-color2 100%);
}
3. Adjust Question Count
Modify the questions array - the progress tracking automatically adjusts.
4. Change UI Text
Update any text strings in the HTML and JavaScript to match your needs.
Additional Use Cases
Platform Compatibility
This embed code works with:
- WordPress: Custom HTML blocks or text editor
- Ghost CMS: HTML cards
- Webflow: Embed components
- Squarespace: Code blocks
- Wix: HTML components
- Any platform supporting HTML/CSS/JS embeds
Quiz Type Ideas
- Personality Quizzes: "What type of traveler are you?"
- Knowledge Tests: "How well do you know 90s pop culture?"
- Preference Surveys: "What's your ideal work environment?"
- Skill Assessments: "Test your marketing knowledge."
- Fun Categorizations: "Which Disney villain are you?"
Conclusion
This process demonstrates you don't need technical skills to create something "cool". AI tools and language models leveled the playing field. You don't need lengthy meetings, approvals, sprint cycles, or a development team involved. Just create whatever you think would work as a link or lead magnet. Don't be shy!
- Manus AI for creative content generation and iteration (most likely not needed at all...)
- Claude AI for technical optimization and compatibility
The result is a professional, embeddable quiz that can be adapted for countless use cases while maintaining technical reliability and user engagement.
Resources
- Manus AI: manus.im - For initial quiz creation (give me a shout if you need an invitation)
- Ghost CMS: this website
- CSS Grid/Flexbox: For responsive design modifications
- JavaScript: For adding custom functionality
Full Code
<style>
.quiz-container * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.quiz-container {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.quiz-box {
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
max-width: 600px;
width: 100%;
padding: 40px;
text-align: center;
}
.quiz-title {
font-size: 2.5rem;
font-weight: bold;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
}
.quiz-subtitle {
color: #666;
font-size: 1.1rem;
margin-bottom: 30px;
}
.generation-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 30px 0;
}
.generation-card {
padding: 20px;
border-radius: 15px;
text-align: center;
}
.generation-card.boomers {
background: rgba(59, 130, 246, 0.1);
border: 2px solid rgba(59, 130, 246, 0.3);
}
.generation-card.genx {
background: rgba(34, 197, 94, 0.1);
border: 2px solid rgba(34, 197, 94, 0.3);
}
.generation-card.millennials {
background: rgba(251, 191, 36, 0.1);
border: 2px solid rgba(251, 191, 36, 0.3);
}
.generation-card.genz {
background: rgba(168, 85, 247, 0.1);
border: 2px solid rgba(168, 85, 247, 0.3);
}
.generation-title {
font-weight: bold;
margin-bottom: 5px;
}
.generation-card.boomers .generation-title {
color: #3b82f6;
}
.generation-card.genx .generation-title {
color: #22c55e;
}
.generation-card.millennials .generation-title {
color: #f59e0b;
}
.generation-card.genz .generation-title {
color: #a855f7;
}
.generation-years {
color: #666;
font-size: 0.9rem;
}
.start-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 15px 30px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: transform 0.2s;
margin-top: 20px;
}
.start-btn:hover {
transform: translateY(-2px);
}
.question-container {
display: none;
}
.question-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.question-number {
font-size: 1.2rem;
font-weight: bold;
}
.progress-text {
color: #666;
}
.progress-bar {
width: 100%;
height: 8px;
background: #e5e7eb;
border-radius: 4px;
margin-bottom: 30px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transition: width 0.3s ease;
}
.question-text {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 30px;
text-align: left;
}
.options-container {
display: grid;
gap: 15px;
margin-bottom: 30px;
}
.option-btn {
padding: 15px 20px;
border: 2px solid #e5e7eb;
border-radius: 10px;
background: white;
text-align: left;
cursor: pointer;
transition: all 0.2s;
font-size: 1rem;
}
.option-btn:hover {
border-color: #667eea;
background: rgba(102, 126, 234, 0.05);
}
.option-btn.correct {
border-color: #22c55e;
background: rgba(34, 197, 94, 0.1);
}
.option-btn.incorrect {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.1);
}
.option-btn.disabled {
cursor: not-allowed;
opacity: 0.6;
}
.correct-badge {
float: right;
background: #22c55e;
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: bold;
}
.explanation-container {
display: none;
margin-top: 20px;
}
.question-image {
max-width: 100%;
height: 200px;
object-fit: contain;
border-radius: 10px;
margin: 20px 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.explanation-box {
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 10px;
padding: 20px;
margin: 20px 0;
text-align: left;
}
.explanation-title {
font-weight: bold;
color: #1e40af;
margin-bottom: 10px;
}
.explanation-text {
color: #1e40af;
line-height: 1.6;
}
.next-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 24px;
border-radius: 25px;
font-weight: bold;
cursor: pointer;
transition: transform 0.2s;
margin-top: 20px;
}
.next-btn:hover {
transform: translateY(-2px);
}
.results-container {
display: none;
}
.results-title {
font-size: 2rem;
font-weight: bold;
margin-bottom: 20px;
}
.generation-result {
font-size: 1.5rem;
font-weight: bold;
margin: 20px 0;
padding: 20px;
border-radius: 15px;
}
.generation-result.boomers {
background: rgba(59, 130, 246, 0.1);
color: #1e40af;
}
.generation-result.genx {
background: rgba(34, 197, 94, 0.1);
color: #166534;
}
.generation-result.millennials {
background: rgba(251, 191, 36, 0.1);
color: #92400e;
}
.generation-result.genz {
background: rgba(168, 85, 247, 0.1);
color: #7c2d12;
}
.score-breakdown {
margin: 30px 0;
text-align: left;
}
.score-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #e5e7eb;
}
.score-item:last-child {
border-bottom: none;
}
.restart-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 24px;
border-radius: 25px;
font-weight: bold;
cursor: pointer;
transition: transform 0.2s;
margin-top: 20px;
}
.restart-btn:hover {
transform: translateY(-2px);
}
@media (max-width: 768px) {
.quiz-box {
padding: 20px;
}
.quiz-title {
font-size: 2rem;
}
.generation-grid {
grid-template-columns: 1fr;
gap: 15px;
}
}
</style>
<div class="quiz-container">
<div class="quiz-box">
<!-- Welcome Screen -->
<div id="welcome-screen">
<h1 class="quiz-title">Age Guesser Quiz</h1>
<p class="quiz-subtitle">Can we guess your generation based on your cultural knowledge?</p>
<p>We'll ask you 20 questions about pop culture, technology, and cultural touchstones from different eras. Based on your answers, we'll try to guess which generation you belong to!</p>
<div class="generation-grid">
<div class="generation-card boomers">
<div class="generation-title">Baby Boomers</div>
<div class="generation-years">Born 1946-1964</div>
</div>
<div class="generation-card genx">
<div class="generation-title">Generation X</div>
<div class="generation-years">Born 1965-1980</div>
</div>
<div class="generation-card millennials">
<div class="generation-title">Millennials</div>
<div class="generation-years">Born 1981-1996</div>
</div>
<div class="generation-card genz">
<div class="generation-title">Generation Z</div>
<div class="generation-years">Born 1997-2012</div>
</div>
</div>
<button class="start-btn" onclick="startQuiz()">Start Quiz 🎯</button>
</div>
<!-- Question Screen -->
<div id="question-screen" class="question-container">
<div class="question-header">
<div class="question-number" id="question-number">Question 1 of 20</div>
<div class="progress-text" id="progress-text">5% Complete</div>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progress-fill"></div>
</div>
<div class="question-text" id="question-text"></div>
<div class="options-container" id="options-container"></div>
<div class="explanation-container" id="explanation-container">
<img id="question-image" class="question-image" style="display: none;" />
<div class="explanation-box">
<div class="explanation-title">Explanation:</div>
<div class="explanation-text" id="explanation-text"></div>
</div>
<button class="next-btn" onclick="nextQuestion()">Next Question</button>
</div>
</div>
<!-- Results Screen -->
<div id="results-screen" class="results-container">
<h2 class="results-title">Quiz Complete!</h2>
<div id="generation-result" class="generation-result"></div>
<div class="score-breakdown" id="score-breakdown"></div>
<button class="restart-btn" onclick="restartQuiz()">Take Quiz Again</button>
</div>
</div>
</div>
<script>
// Quiz data
const questions = [
{
question: "What popular 1950s TV show featured Lucille Ball as a housewife prone to hilarious antics?",
options: ["I Love Lucy", "The Honeymooners", "Leave It to Beaver", "Father Knows Best"],
correct: "I Love Lucy",
generation: "boomers",
explanation: "\"I Love Lucy\" was a groundbreaking sitcom that aired from 1951 to 1957, starring Lucille Ball as Lucy Ricardo. It was known for its physical comedy and Ball's comedic timing, becoming a cultural phenomenon and setting the standard for many sitcoms that followed."
},
{
question: "Before the internet, how did people typically look up information for school projects or general knowledge?",
options: ["In an encyclopedia", "Asking Siri", "Google search", "Wikipedia"],
correct: "In an encyclopedia",
generation: "boomers",
explanation: "Before the internet became widespread, encyclopedias were the primary source for research. Families would often own multi-volume sets like Encyclopedia Britannica, and students would spend hours looking up topics in these comprehensive reference books."
},
{
question: "What was the most popular way to listen to music in the 1980s?",
options: ["Vinyl records", "Cassette tapes", "CDs", "Streaming services"],
correct: "Cassette tapes",
generation: "genx",
explanation: "The 1980s were dominated by cassette tapes, which were portable and allowed people to record their own mix tapes. The Sony Walkman revolutionized personal music listening during this decade."
},
{
question: "Which gaming console was most popular in the early 2000s?",
options: ["PlayStation 2", "Xbox", "Nintendo GameCube", "Dreamcast"],
correct: "PlayStation 2",
generation: "millennials",
explanation: "The PlayStation 2, released in 2000, became the best-selling video game console of all time. It was hugely popular among millennials who were teenagers and young adults at the time."
},
{
question: "What does 'stan' mean in modern internet slang?",
options: ["To be a superfan", "To steal", "To understand", "To be confused"],
correct: "To be a superfan",
generation: "genz",
explanation: "The term 'stan' comes from Eminem's song about an obsessive fan named Stan. In modern usage, it means to be a huge fan of someone or something, and is commonly used by Gen Z on social media."
},
{
question: "What was the primary way to rent movies in the 1990s?",
options: ["Video stores", "Netflix", "iTunes", "Amazon Prime"],
correct: "Video stores",
generation: "genx",
explanation: "Video rental stores like Blockbuster were hugely popular in the 1990s. People would browse physical shelves, rent VHS tapes (and later DVDs), and had to return them by a certain date to avoid late fees."
},
{
question: "Which social media platform was most popular among college students in the mid-2000s?",
options: ["MySpace", "Facebook", "Instagram", "TikTok"],
correct: "Facebook",
generation: "millennials",
explanation: "Facebook launched in 2004 and was initially exclusive to college students. It became the dominant social media platform for millennials during their college years, before expanding to the general public."
},
{
question: "What does 'OK Boomer' typically express?",
options: ["Respect for elders", "Dismissal of outdated views", "Agreement", "Confusion"],
correct: "Dismissal of outdated views",
generation: "genz",
explanation: "'OK Boomer' became a popular Gen Z phrase used to dismiss what they perceive as outdated or out-of-touch opinions, typically from older generations. It gained widespread usage around 2019."
},
{
question: "What was the most common way to communicate with friends in the early 2000s?",
options: ["Text messaging", "AIM/MSN Messenger", "Email", "Phone calls"],
correct: "AIM/MSN Messenger",
generation: "millennials",
explanation: "Instant messaging services like AIM (AOL Instant Messenger) and MSN Messenger were the primary way millennials communicated online. Screen names, away messages, and buddy lists were central to digital social life."
},
{
question: "Which app is most associated with short-form video content?",
options: ["Instagram", "YouTube", "TikTok", "Snapchat"],
correct: "TikTok",
generation: "genz",
explanation: "TikTok became the dominant platform for short-form video content, particularly popular with Gen Z. Its algorithm-driven feed and creative tools made it a cultural phenomenon."
},
{
question: "What was the most popular portable music player of the early 2000s?",
options: ["iPod", "CD player", "Walkman", "Boom box"],
correct: "iPod",
generation: "millennials",
explanation: "The iPod, launched in 2001, revolutionized portable music for millennials. Its sleek design and large storage capacity made it the must-have gadget of the early 2000s."
},
{
question: "Which TV show featured the characters Beavis and Butt-Head?",
options: ["MTV", "Nickelodeon", "Cartoon Network", "Comedy Central"],
correct: "MTV",
generation: "genx",
explanation: "Beavis and Butt-Head aired on MTV from 1993 to 1997 and was hugely popular with Generation X. The show was known for its crude humor and commentary on music videos."
},
{
question: "What does 'salty' mean in internet slang?",
options: ["Thirsty", "Angry or bitter", "Funny", "Sad"],
correct: "Angry or bitter",
generation: "genz",
explanation: "In internet slang, 'salty' means to be upset, angry, or bitter about something. This usage has been popular across multiple generations but is particularly common in Gen Z communication."
},
{
question: "Which dance was popular on social media in 2020?",
options: ["The Carlton", "The Macarena", "WAP dance", "Gangnam Style"],
correct: "WAP dance",
generation: "genz",
explanation: "The WAP dance became a viral sensation on TikTok in 2020, with millions of users creating their own versions. It exemplified how Gen Z uses social media to spread dance trends."
},
{
question: "What was the most popular way to discover new music in the 2000s?",
options: ["Radio", "MTV", "Napster/LimeWire", "Spotify"],
correct: "Napster/LimeWire",
generation: "millennials",
explanation: "Peer-to-peer file sharing services like Napster and LimeWire were hugely popular among millennials for discovering and downloading music, despite legal concerns."
},
{
question: "Which phrase became popular to describe being environmentally conscious?",
options: ["Going green", "Being woke", "Staying fresh", "Getting lit"],
correct: "Going green",
generation: "millennials",
explanation: "'Going green' became a popular phrase in the 2000s as environmental awareness grew, particularly among millennials who embraced eco-friendly lifestyles and products."
},
{
question: "What was the original name of the social media platform now known as TikTok?",
options: ["Vine", "Musical.ly", "Dubsmash", "Flipagram"],
correct: "Musical.ly",
generation: "genz",
explanation: "Musical.ly was a popular lip-syncing app that merged with TikTok in 2018. It was particularly popular with Gen Z users before becoming the TikTok we know today."
},
{
question: "Which gaming system was known for motion controls?",
options: ["PlayStation 3", "Xbox 360", "Nintendo Wii", "Nintendo DS"],
correct: "Nintendo Wii",
generation: "millennials",
explanation: "The Nintendo Wii, released in 2006, revolutionized gaming with its motion-sensing controls. It was particularly popular with millennials and brought gaming to a broader audience."
},
{
question: "What does 'periodt' mean in Gen Z slang?",
options: ["Time of month", "End of discussion", "Question mark", "Maybe"],
correct: "End of discussion",
generation: "genz",
explanation: "'Periodt' is an emphatic way of saying 'period' to end a statement, meaning 'end of discussion' or 'that's final.' It's commonly used by Gen Z on social media."
},
{
question: "Which boy band was hugely popular in the late 1990s?",
options: ["One Direction", "BTS", "NSYNC", "Jonas Brothers"],
correct: "NSYNC",
generation: "millennials",
explanation: "NSYNC was one of the biggest boy bands of the late 1990s and early 2000s, along with the Backstreet Boys. They were particularly popular with millennials during their teenage years."
}
];
let currentQuestionIndex = 0;
let generationScores = {
boomers: 0,
genx: 0,
millennials: 0,
genz: 0
};
function startQuiz() {
document.getElementById('welcome-screen').style.display = 'none';
document.getElementById('question-screen').style.display = 'block';
showQuestion();
}
function showQuestion() {
const question = questions[currentQuestionIndex];
const questionNumber = currentQuestionIndex + 1;
const progress = (questionNumber / questions.length) * 100;
document.getElementById('question-number').textContent = `Question ${questionNumber} of ${questions.length}`;
document.getElementById('progress-text').textContent = `${Math.round(progress)}% Complete`;
document.getElementById('progress-fill').style.width = `${progress}%`;
document.getElementById('question-text').textContent = question.question;
const optionsContainer = document.getElementById('options-container');
optionsContainer.innerHTML = '';
question.options.forEach((option, index) => {
const button = document.createElement('button');
button.className = 'option-btn';
button.textContent = option;
button.onclick = () => selectAnswer(option);
optionsContainer.appendChild(button);
});
document.getElementById('explanation-container').style.display = 'none';
}
function selectAnswer(selectedOption) {
const question = questions[currentQuestionIndex];
const options = document.querySelectorAll('.option-btn');
options.forEach(option => {
option.classList.add('disabled');
if (option.textContent === question.correct) {
option.classList.add('correct');
option.innerHTML += ' <span class="correct-badge">✓</span>';
} else if (option.textContent === selectedOption && selectedOption !== question.correct) {
option.classList.add('incorrect');
}
});
if (selectedOption === question.correct) {
generationScores[question.generation]++;
}
document.getElementById('explanation-text').textContent = question.explanation;
document.getElementById('explanation-container').style.display = 'block';
}
function nextQuestion() {
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
showQuestion();
} else {
showResults();
}
}
function showResults() {
document.getElementById('question-screen').style.display = 'none';
document.getElementById('results-screen').style.display = 'block';
const maxScore = Math.max(...Object.values(generationScores));
const winningGeneration = Object.keys(generationScores).find(key => generationScores[key] === maxScore);
const generationNames = {
boomers: 'Baby Boomer',
genx: 'Generation X',
millennials: 'Millennial',
genz: 'Generation Z'
};
const resultDiv = document.getElementById('generation-result');
resultDiv.className = `generation-result ${winningGeneration}`;
resultDiv.textContent = `You're most likely a ${generationNames[winningGeneration]}!`;
const scoreBreakdown = document.getElementById('score-breakdown');
scoreBreakdown.innerHTML = '<h3>Your Score Breakdown:</h3>';
Object.entries(generationScores).forEach(([generation, score]) => {
const scoreItem = document.createElement('div');
scoreItem.className = 'score-item';
scoreItem.innerHTML = `
<span>${generationNames[generation]}</span>
<span>${score}/${questions.length}</span>
`;
scoreBreakdown.appendChild(scoreItem);
});
}
function restartQuiz() {
currentQuestionIndex = 0;
generationScores = {
boomers: 0,
genx: 0,
millennials: 0,
genz: 0
};
document.getElementById('results-screen').style.display = 'none';
document.getElementById('welcome-screen').style.display = 'block';
}
</script>Total development time: ~2 hours including iterations and optimization
