Manchester United: The Ultimate Fan Quiz
* {
font-family: 'Inter', sans-serif;
}
.united-font {
font-family: 'Oswald', sans-serif;
}
body {
background: #000;
min-height: 100vh;
overflow-x: hidden;
}
.united-red {
color: #DA291C;
}
.bg-united-red {
background-color: #DA291C;
}
.glass-panel {
background: rgba(20, 20, 20, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(218, 41, 28, 0.3);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}
.option-btn {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
border: 2px solid #333;
}
.option-btn:hover:not(:disabled) {
transform: translateX(8px);
border-color: #DA291C;
box-shadow: 0 0 20px rgba(218, 41, 28, 0.3);
}
.option-btn.correct {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
border-color: #10b981;
color: white;
animation: correctPulse 0.6s ease;
}
.option-btn.wrong {
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
border-color: #ef4444;
color: white;
animation: shake 0.5s ease;
}
@keyframes correctPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
.progress-bar {
transition: width 0.5s ease;
}
.fade-in {
animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-out {
animation: slideOut 0.3s ease forwards;
}
@keyframes slideOut {
to { opacity: 0; transform: translateX(-20px); }
}
.timer-circle {
transition: stroke-dashoffset 1s linear;
}
.stadium-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.15;
background-image: url('data:image/svg+xml,');
background-size: cover;
background-position: center;
}
.devil-horn {
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.difficulty-badge {
font-size: 0.75rem;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.difficulty-easy { background: #10b981; color: white; }
.difficulty-medium { background: #f59e0b; color: black; }
.difficulty-hard { background: #ef4444; color: white; }
.difficulty-legendary { background: #7c3aed; color: white; }
.confetti {
position: fixed;
width: 10px;
height: 10px;
animation: confetti-fall 3s ease-out forwards;
}
@keyframes confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.trident-icon {
filter: drop-shadow(0 0 10px rgba(218, 41, 28, 0.5));
}
.stat-card {
background: linear-gradient(135deg, rgba(218, 41, 28, 0.1) 0%, rgba(0,0,0,0.5) 100%);
border: 1px solid rgba(218, 41, 28, 0.2);
}
.perfect-score {
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
MANCHESTER UNITED
The Ultimate Fan Examination
15 questions • Timed • No mercy for glory hunters
Quiz Complete!
Here's how you performed
Rank: Casual Fan
const questions = [
// CASUAL (Easy)
{
question: "What is Manchester United's home stadium called?",
options: ["Anfield", "Old Trafford", "Etihad Stadium", "Stamford Bridge"],
correct: 1,
category: "Stadium",
difficulty: "easy",
time: 15
},
{
question: "Who is known as 'The King' of Old Trafford?",
options: ["Bobby Charlton", "George Best", "Eric Cantona", "Cristiano Ronaldo"],
correct: 2,
category: "Legends",
difficulty: "easy",
time: 15
},
{
question: "What was the club's original name when founded in 1878?",
options: ["Manchester Central", "Newton Heath LYR", "St. Mark's West Gorton", "Manchester City"],
correct: 1,
category: "History",
difficulty: "easy",
time: 15
},
{
question: "Which number is famously associated with Cristiano Ronaldo at United?",
options: ["7", "9", "10", "17"],
correct: 0,
category: "Players",
difficulty: "easy",
time: 12
},
// FAN (Medium)
{
question: "Who scored both goals in the 1999 Champions League Final comeback against Bayern Munich?",
options: ["Teddy Sheringham & Ole Gunnar Solskjær", "Dwight Yorke & Andy Cole", "David Beckham & Paul Scholes", "Ryan Giggs & Roy Keane"],
correct: 0,
category: "1999 Treble",
difficulty: "medium",
time: 18
},
{
question: "Which player holds the record for most appearances for Manchester United?",
options: ["Bobby Charlton", "Ryan Giggs", "Paul Scholes", "Wayne Rooney"],
correct: 1,
category: "Records",
difficulty: "medium",
time: 18
},
{
question: "What is the name of the Munich Air Disaster survivor who went on to become a legendary manager?",
options: ["Matt Busby", "Jimmy Murphy", "Bobby Charlton", "Harry Gregg"],
correct: 0,
category: "History",
difficulty: "medium",
time: 18
},
{
question: "In which season did United win their first Premier League title under Sir Alex Ferguson?",
options: ["1990-91", "1991-92", "1992-93", "1993-94"],
correct: 2,
category: "Premier League",
difficulty: "medium",
time: 18
},
// EXPERT (Hard)
{
question: "Who was United's opponent in the 1968 European Cup Final, their first European triumph?",
options: ["Real Madrid", "Benfica", "AC Milan", "Ajax"],
correct: 1,
category: "European Glory",
difficulty: "hard",
time: 20
},
{
question: "What was the exact score when United beat Arsenal 8-2 at Old Trafford in 2011?",
options: ["8-2", "6-1", "7-1", "9-1"],
correct: 0,
category: "Memorable Matches",
difficulty: "hard",
time: 15
},
{
question: "Which player did United sign from Leeds United in 2002, triggering a major rivalry transfer?",
options: ["Rio Ferdinand", "Alan Smith", "Eric Cantona", "Rio Ferdinand"],
correct: 0,
category: "Transfers",
difficulty: "hard",
time: 20
},
{
question: "Who captained United to their 2008 Champions League victory in Moscow?",
options: ["Ryan Giggs", "Rio Ferdinand", "Gary Neville", "Nemanja Vidić"],
correct: 1,
category: "2008 Moscow",
difficulty: "hard",
time: 20
},
// LEGENDARY (Extreme)
{
question: "How many goals did Denis Law score for Manchester United?",
options: ["199", "237", "249", "271"],
correct: 1,
category: "Goal Scorers",
difficulty: "legendary",
time: 25
},
{
question: "Which player wore the number 16 shirt when United won the 1999 Champions League?",
options: ["Roy Keane", "Paul Scholes", "Teddy Sheringham", "Ole Gunnar Solskjær"],
correct: 0,
category: "Squad Numbers",
difficulty: "legendary",
time: 25
},
{
question: "In the 2009 transfer window, United sold Cristiano Ronaldo to Real Madrid for how much?",
options: ["£70 million", "£80 million", "£90 million", "£100 million"],
correct: 1,
category: "Record Transfers",
difficulty: "legendary",
time: 25
},
{
question: "Who scored United's fastest ever Premier League goal (after 9 seconds)?",
options: ["Wayne Rooney", "Cristiano Ronaldo", "Ryan Giggs", "Marcus Rashford"],
correct: 0,
category: "Records",
difficulty: "legendary",
time: 25
}
];
let currentQuestion = 0;
let score = 0;
let correctCount = 0;
let timer;
let timeLeft;
let questionResults = [];
let canAnswer = true;
let totalTimeUsed = 0;
const difficultyLabels = {
easy: { text: 'Casual', class: 'difficulty-easy' },
medium: { text: 'Fan', class: 'difficulty-medium' },
hard: { text: 'Expert', class: 'difficulty-hard' },
legendary: { text: 'Legend', class: 'difficulty-legendary' }
};
function startQuiz() {
document.getElementById('startScreen').classList.add('hidden');
document.getElementById('quizScreen').classList.remove('hidden');
document.getElementById('quizScreen').classList.add('fade-in');
currentQuestion = 0;
score = 0;
correctCount = 0;
totalTimeUsed = 0;
questionResults = [];
loadQuestion();
}
function loadQuestion() {
canAnswer = true;
const q = questions[currentQuestion];
const diff = difficultyLabels[q.difficulty];
// Update UI
document.getElementById('questionNumber').textContent = currentQuestion + 1;
document.getElementById('questionText').textContent = q.question;
document.getElementById('questionCategory').textContent = q.category;
document.getElementById('scoreDisplay').textContent = score;
document.getElementById('progressBar').style.width = `${(currentQuestion / questions.length) * 100}%`;
// Update difficulty badge
const diffBadge = document.getElementById('difficultyIndicator');
diffBadge.textContent = diff.text;
diffBadge.className = `difficulty-badge ${diff.class}`;
// Create options
const grid = document.getElementById('optionsGrid');
grid.innerHTML = '';
q.options.forEach((option, index) => {
const btn = document.createElement('button');
btn.className = 'option-btn w-full p-5 text-left rounded-xl font-medium text-white transition-all';
btn.innerHTML = `
${String.fromCharCode(65 + index)}
${option}
`;
btn.onclick = () => selectAnswer(index, btn);
grid.appendChild(btn);
});
// Reset next button
const nextBtn = document.getElementById('nextBtn');
nextBtn.disabled = true;
nextBtn.className = 'w-full py-4 bg-gray-800 text-gray-600 font-bold rounded-xl cursor-not-allowed transition-all uppercase tracking-wider border border-gray-700';
// Start timer
startTimer(q.time);
}
function startTimer(duration) {
timeLeft = duration;
const circle = document.getElementById('timerCircle');
const text = document.getElementById('timerText');
const circumference = 2 * Math.PI * 36;
circle.style.strokeDasharray = circumference;
circle.style.strokeDashoffset = 0;
circle.style.stroke = '#DA291C';
clearInterval(timer);
timer = setInterval(() => {
timeLeft--;
totalTimeUsed++;
text.textContent = timeLeft;
const offset = circumference - (timeLeft / duration) * circumference;
circle.style.strokeDashoffset = offset;
if (timeLeft <= 5) {
circle.style.stroke = '#ef4444';
}
if (timeLeft {
b.disabled = true;
b.classList.add('cursor-not-allowed');
if (b !== buttons[q.correct] && b !== btn) {
b.style.opacity = '0.5';
}
});
// Update score display
document.getElementById('scoreDisplay').textContent = score;
// Enable next button
const nextBtn = document.getElementById('nextBtn');
nextBtn.disabled = false;
nextBtn.className = 'w-full py-4 bg-gradient-to-r from-red-600 to-red-700 text-white font-bold rounded-xl hover:from-red-500 hover:to-red-600 transform hover:scale-[1.02] transition-all shadow-lg uppercase tracking-wider border border-red-400/30';
}
function timeUp() {
canAnswer = false;
const q = questions[currentQuestion];
const buttons = document.querySelectorAll('.option-btn');
buttons[q.correct].classList.add('correct');
buttons.forEach(b => {
b.disabled = true;
b.classList.add('cursor-not-allowed');
b.style.opacity = '0.5';
});
questionResults.push({
question: currentQuestion + 1,
correct: false,
points: 0,
timeLeft: 0,
difficulty: q.difficulty
});
const nextBtn = document.getElementById('nextBtn');
nextBtn.disabled = false;
nextBtn.className = 'w-full py-4 bg-gradient-to-r from-red-600 to-red-700 text-white font-bold rounded-xl hover:from-red-500 hover:to-red-600 transform hover:scale-[1.02] transition-all shadow-lg uppercase tracking-wider border border-red-400/30';
}
function nextQuestion() {
currentQuestion++;
if (currentQuestion >= questions.length) {
showResults();
} else {
const container = document.getElementById('questionContainer');
container.classList.add('slide-out');
setTimeout(() => {
container.classList.remove('slide-out');
loadQuestion();
container.classList.add('fade-in');
}, 300);
}
}
function showResults() {
document.getElementById('quizScreen').classList.add('hidden');
document.getElementById('resultScreen').classList.remove('hidden');
document.getElementById('resultScreen').classList.add('fade-in');
const accuracy = Math.round((correctCount / questions.length) * 100);
const avgTime = Math.round(totalTimeUsed / questions.length);
const maxPossible = questions.reduce((acc, q) => acc + Math.floor(100 * { easy: 1, medium: 1.5, hard: 2, legendary: 3 }[q.difficulty]), 0) + (20 * 10 * 3);
document.getElementById('finalScore').textContent = score.toLocaleString();
document.getElementById('correctAnswers').textContent = `${correctCount}/${questions.length}`;
document.getElementById('accuracy').textContent = `${accuracy}%`;
document.getElementById('avgTime').textContent = `${avgTime}s`;
// Determine rank
const rankBadge = document.getElementById('rankBadge');
let rank, color, message;
if (accuracy === 100 && score > maxPossible * 0.8) {
rank = "UNITED LEGEND";
color = "border-yellow-500 text-yellow-400";
message = "Perfection. Sir Alex would be proud.";
createConfetti();
document.getElementById('finalScore').classList.add('perfect-score');
} else if (accuracy >= 80) {
rank = "TRUE RED DEVIL";
color = "border-red-500 text-red-500";
message = "Outstanding knowledge! You bleed red.";
createConfetti();
} else if (accuracy >= 60) {
rank = "SEASON TICKET HOLDER";
color = "border-orange-500 text-orange-400";
message = "Solid fan! You know your history.";
} else if (accuracy >= 40) {
rank = "CASUAL SUPPORTER";
color = "border-gray-500 text-gray-400";
message = "Not bad, but hit the history books.";
} else {
rank = "GLORY HUNTER";
color = "border-gray-700 text-gray-600";
message = "Are you sure you're not a City fan?";
}
rankBadge.textContent = `RANK: ${rank}`;
rankBadge.className = `inline-block px-6 py-3 rounded-full text-lg font-bold mb-8 border-2 ${color} bg-black/50`;
document.getElementById('resultTitle').textContent = accuracy === 100 ? "PERFECT!" : "QUIZ COMPLETE";
document.getElementById('resultMessage').textContent = message;
// Breakdown
const breakdown = document.getElementById('breakdownList');
breakdown.innerHTML = '';
questionResults.forEach((result, idx) => {
const q = questions[idx];
const div = document.createElement('div');
div.className = 'flex justify-between items-center py-3 border-b border-gray-800 last:border-0';
const diffColor = {
easy: 'text-green-500',
medium: 'text-yellow-500',
hard: 'text-orange-500',
legendary: 'text-purple-500'
}[result.difficulty];
div.innerHTML = `
#${result.question}
${q.category}
${result.difficulty}
${result.correct
? `+${result.points}`
: `✗`
}
`;
breakdown.appendChild(div);
});
}
function createConfetti() {
const colors = ['#DA291C', '#FFD700', '#ffffff', '#000000'];
for (let i = 0; i {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + 'vw';
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.animationDuration = (Math.random() * 2 + 2) + 's';
confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
confetti.style.width = Math.random() * 10 + 5 + 'px';
confetti.style.height = Math.random() * 10 + 5 + 'px';
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 4000);
}, i * 30);
}
}
function restartQuiz() {
document.getElementById('resultScreen').classList.add('hidden');
document.getElementById('startScreen').classList.remove('hidden');
document.getElementById('startScreen').classList.add('fade-in');
document.getElementById('finalScore').classList.remove('perfect-score');
}
function shareResults() {
const accuracy = Math.round((correctCount / questions.length) * 100);
const rank = accuracy === 100 ? "UNITED LEGEND" :
accuracy >= 80 ? "TRUE RED DEVIL" :
accuracy >= 60 ? "SEASON TICKET HOLDER" :
accuracy >= 40 ? "CASUAL SUPPORTER" : "GLORY HUNTER";
const text = `I scored ${score.toLocaleString()} points (${accuracy}% accuracy) on the Manchester United Ultimate Fan Quiz!\n\nRank: ${rank}\n\nCan you beat my score? 🔴⚫⚪`;
if (navigator.share) {
navigator.share({
title: 'Manchester United Quiz Results',
text: text,
url: window.location.href
}).catch(err => console.log('Error sharing:', err));
} else {
navigator.clipboard.writeText(text).then(() => {
alert('Results copied to clipboard! Share with fellow Reds! 🔴');
});
}
}
// Create ambient particles
function createParticles() {
const container = document.getElementById('particles');
for (let i = 0; i < 20; i++) {
const particle = document.createElement('div');
particle.className = 'absolute w-1 h-1 bg-red-600/30 rounded-full';
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animation = `float ${10 + Math.random() * 10}s infinite ease-in-out`;
particle.style.animationDelay = Math.random() * 5 + 's';
container.appendChild(particle);
}
}
createParticles();
