Advanced Coffee Quiz with Badges
body {
font-family: ‘Arial’, sans-serif;
max-width: 700px;
margin: 20px auto;
padding: 20px;
background-color: #f7f1e9;
}
.quiz-container {
background-color: #fff;
padding: 25px;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
h1 {
text-align: center;
color: #3c2f2f;
font-size: 2em;
margin-bottom: 20px;
}
.question {
margin-bottom: 20px;
font-size: 1.3em;
font-weight: bold;
color: #3c2f2f;
}
.question-image {
width: 100%;
max-height: 200px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 15px;
}
.options {
display: flex;
flex-direction: column;
gap: 12px;
}
.option {
background-color: #e6d7b9;
padding: 12px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
font-size: 1.1em;
}
.option:hover {
background-color: #d1c2a3;
transform: scale(1.02);
}
.option.selected {
background-color: #a67b5b;
color: #fff;
}
#submit-btn {
display: block;
margin: 20px auto;
padding: 12px 30px;
background-color: #3c2f2f;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1.1em;
transition: background-color 0.3s;
}
#submit-btn:hover {
background-color: #5a4033;
}
#retake-btn {
display: none;
margin: 10px auto;
padding: 12px 30px;
background-color: #3c2f2f;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1.1em;
}
#retake-btn:hover {
background-color: #5a4033;
}
#result {
margin-top: 20px;
text-align: center;
color: #3c2f2f;
}
.score-message {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}
.badge-container {
margin: 20px 0;
text-align: center;
}
.badge-image {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
border: 3px solid #a67b5b;
margin-bottom: 10px;
}
.badge-title {
font-size: 1.2em;
font-weight: bold;
color: #3c2f2f;
}
.badge-description {
font-size: 1em;
color: #5a4033;
}
.progress-bar {
width: 100%;
background-color: #e6d7b9;
border-radius: 10px;
height: 20px;
margin: 10px 0;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: #a67b5b;
transition: width 1s ease-in-out;
}
.answer-details {
margin-top: 20px;
text-align: left;
}
.answer-item {
margin-bottom: 15px;
padding: 10px;
border-left: 4px solid;
border-radius: 5px;
}
.answer-item.correct {
border-color: #4caf50;
background-color: #e8f5e9;
}
.answer-item.incorrect {
border-color: #f44336;
background-color: #ffebee;
}
.share-buttons {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.share-btn {
display: inline-block;
padding: 10px 15px;
color: #fff;
text-decoration: none;
border-radius: 5px;
font-size: 0.9em;
transition: opacity 0.3s;
}
.share-btn:hover {
opacity: 0.9;
}
.twitter { background-color: #000; }
.facebook { background-color: #3b5998; }
.linkedin { background-color: #0077b5; }
Are You a Coffee Guru? Take the Ultimate Quiz!
1. What is the primary source of caffeine in coffee beans?
Chlorogenic acid
Trigonelline
Caffeine alkaloid
Theobromine
2. Which country is the largest producer of coffee in the world?
Colombia
Brazil
Ethiopia
Vietnam
3. What does “espresso” mean in Italian?
Quick
Strong
Pressed
Black
4. Which coffee drink typically includes steamed milk and foam?
Americano
Cappuccino
Macchiato
Ristretto
5. What is the traditional Ethiopian coffee ceremony called?
6. What process is commonly used to make decaf coffee?
Swiss Water Process
French Press Method
Cold Brew Extraction
AeroPress Technique
7. Which coffee bean variety is known for higher caffeine content?
Arabica
Robusta
Liberica
Excelsa
8. What is the primary difference between cold brew and iced coffee?
Cold brew is steeped longer
Iced coffee uses decaf beans
Cold brew is always sweeter
Iced coffee is brewed colder
Submit Quiz
Retake Quiz
document.addEventListener(‘DOMContentLoaded’, () => {
const options = document.querySelectorAll(‘.option’);
const submitBtn = document.getElementById(‘submit-btn’);
const retakeBtn = document.getElementById(‘retake-btn’);
const resultDiv = document.getElementById(‘result’);
let answers = {};
const quizData = {
1: { correct: ‘Caffeine alkaloid’, explanation: ‘The caffeine alkaloid is the primary source of caffeine in coffee beans, providing that energizing kick!’ },
2: { correct: ‘Brazil’, explanation: ‘Brazil is the world\’s largest coffee producer, contributing about 40% of global supply.’ },
3: { correct: ‘Quick’, explanation: ‘”Espresso” comes from the Italian word for “quick,” referring to the fast brewing process.’ },
4: { correct: ‘Cappuccino’, explanation: ‘A cappuccino is made with espresso, steamed milk, and a thick layer of foam.’ },
5: { correct: ‘Buna’, explanation: ‘The traditional Ethiopian coffee ceremony is called “Buna,” a cultural ritual of hospitality.’ },
6: { correct: ‘Swiss Water Process’, explanation: ‘The Swiss Water Process uses water and carbon filtration to remove caffeine, preserving flavor.’ },
7: { correct: ‘Robusta’, explanation: ‘Robusta beans have about twice the caffeine content of Arabica, making them more bitter and bold.’ },
8: { correct: ‘Cold brew is steeped longer’, explanation: ‘Cold brew is steeped for 12-24 hours, resulting in a smoother, less acidic flavor compared to iced coffee.’ }
};
const badges = {
legend: {
title: ‘Coffee Legend’,
description: ‘You\’ve mastered the art of coffee knowledge!’,
image: ‘
https://atenajos.blog/wp-content/uploads/2025/08/6b54d-coffee-legend-badge.png?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80’
},
pro: {
title: ‘Coffee Pro’,
description: ‘You\’re a true coffee expert!’,
image: ‘
https://atenajos.blog/wp-content/uploads/2025/08/2a468-coffee-pro-badge.png?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80’
},
enthusiast: {
title: ‘Coffee Enthusiast’,
description: ‘You love coffee and know your stuff!’,
image: ‘
https://atenajos.blog/wp-content/uploads/2025/08/42722-coffee-enthusiast-badge.png?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80’
},
novice: {
title: ‘Coffee Novice’,
description: ‘You\’re just starting your coffee journey!’,
image: ‘
https://atenajos.blog/wp-content/uploads/2025/08/2237b-coffee-novice-badge-2.png?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80’
}
};
options.forEach(option => {
option.addEventListener(‘click’, () => {
const questionNum = option.parentElement.getAttribute(‘data-question’);
const siblings = option.parentElement.querySelectorAll(‘.option’);
siblings.forEach(sib => sib.classList.remove(‘selected’));
option.classList.add(‘selected’);
answers[questionNum] = option.textContent;
});
});
submitBtn.addEventListener(‘click’, () => {
if (Object.keys(answers).length < 8) {
resultDiv.innerHTML = '
Please answer all questions!
‘;
return;
}
let score = 0;
let resultHTML = ‘
‘;
for (let q in answers) {
if (answers[q] === quizData[q].correct) score++;
}
const percentage = (score / 8) * 100;
let badge;
if (score === 8) {
badge = badges.legend;
resultHTML += ‘Perfect Brew! You\’re a Coffee Legend!’;
} else if (score >= 6) {
badge = badges.pro;
resultHTML += `Excellent! You scored ${score}/8. You\’re a Coffee Pro!`;
} else if (score >= 4) {
badge = badges.enthusiast;
resultHTML += `Nice Try! You scored ${score}/8. Keep brewing your knowledge!`;
} else {
badge = badges.novice;
resultHTML += `You scored ${score}/8. Time to grind some more coffee facts!`;
}
resultHTML += ‘
‘;
resultHTML += `
${badge.title}
${badge.description}
`;
resultHTML += `
`;
resultHTML += ‘
‘;
for (let q in quizData) {
const userAnswer = answers[q] || ‘No answer’;
const isCorrect = userAnswer === quizData[q].correct;
resultHTML += `
`;
resultHTML += `Question ${q}: ${document.getElementById(`q${q}`).textContent}
`;
resultHTML += `Your answer: ${userAnswer}
`;
resultHTML += `Correct answer: ${quizData[q].correct}
`;
resultHTML += `Explanation: ${quizData[q].explanation}`;
resultHTML += ‘
‘;
}
resultHTML += ‘
‘;
const shareText = `I scored ${score}/8 and earned the ${badge.title} badge on the Ultimate Coffee Quiz! ☕ Test your coffee knowledge!`;
const shareUrl = window.location.href;
resultHTML += ‘
‘;
resultDiv.innerHTML = resultHTML;
submitBtn.style.display = ‘none’;
retakeBtn.style.display = ‘block’;
});
retakeBtn.addEventListener(‘click’, () => {
answers = {};
options.forEach(option => option.classList.remove(‘selected’));
resultDiv.innerHTML = ”;
submitBtn.style.display = ‘block’;
retakeBtn.style.display = ‘none’;
});
});
