|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ICONN Personality Quiz</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
} |
|
|
|
|
|
.option-card { |
|
|
transition: all 0.3s ease; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
.option-card:hover { |
|
|
transform: translateY(-5px) scale(1.02); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.option-card.selected { |
|
|
border-color: #7c3aed; |
|
|
background-color: #ede9fe; |
|
|
transform: scale(1.03); |
|
|
} |
|
|
.option-card.selected::after { |
|
|
content: "✓"; |
|
|
position: absolute; |
|
|
top: -10px; |
|
|
right: -10px; |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
background: #7c3aed; |
|
|
color: white; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: bold; |
|
|
} |
|
|
.progress-bar { |
|
|
transition: width 0.5s ease; |
|
|
height: 8px; |
|
|
border-radius: 4px; |
|
|
} |
|
|
.result-card { |
|
|
animation: fadeIn 0.8s ease; |
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%); |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.floating { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-15px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
.bounce { |
|
|
animation: bounce 0.5s; |
|
|
} |
|
|
@keyframes bounce { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-10px); } |
|
|
} |
|
|
.confetti { |
|
|
position: absolute; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
background-color: #f00; |
|
|
opacity: 0; |
|
|
} |
|
|
.option-icon { |
|
|
font-size: 1.5rem; |
|
|
margin-right: 1rem; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 50%; |
|
|
background: rgba(124, 58, 237, 0.1); |
|
|
color: #7c3aed; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
<div class="absolute inset-0 overflow-hidden"> |
|
|
<div class="absolute top-0 left-0 w-full h-full opacity-10"> |
|
|
<div class="absolute top-10 left-20 w-16 h-16 rounded-full bg-purple-300 animate-pulse"></div> |
|
|
<div class="absolute top-1/3 right-1/4 w-24 h-24 rounded-full bg-indigo-300 animate-pulse" style="animation-delay: 0.5s;"></div> |
|
|
<div class="absolute bottom-20 left-1/3 w-20 h-20 rounded-full bg-pink-300 animate-pulse" style="animation-delay: 1s;"></div> |
|
|
<div class="absolute bottom-1/4 right-20 w-12 h-12 rounded-full bg-blue-300 animate-pulse" style="animation-delay: 1.5s;"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-4 py-12 max-w-4xl relative z-10"> |
|
|
|
|
|
<header class="text-center mb-12"> |
|
|
<div class="inline-block mb-6"> |
|
|
<div class="bg-gradient-to-r from-purple-500 to-indigo-600 text-white text-xl font-bold px-6 py-3 rounded-full shadow-lg transform rotate-2"> |
|
|
✨ Personality Quiz ✨ |
|
|
</div> |
|
|
</div> |
|
|
<h1 class="text-5xl md:text-6xl font-bold text-gray-800 mb-4 animate__animated animate__fadeInDown"> |
|
|
Which <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600">ICONN</span> Are You? |
|
|
</h1> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto animate__animated animate__fadeIn animate__delay-1s"> |
|
|
Answer 5 simple questions to discover your ICONN personality match! |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div id="quiz-container" class="bg-white/90 backdrop-blur-md rounded-2xl shadow-2xl overflow-hidden animate__animated animate__fadeIn animate__delay-1s border border-white/20"> |
|
|
|
|
|
<div class="h-2 bg-gray-200/50 relative"> |
|
|
<div id="progress-bar" class="h-full bg-gradient-to-r from-purple-500 to-indigo-600 progress-bar rounded-full" style="width: 0%"></div> |
|
|
<div id="progress-text" class="absolute top-1/2 right-4 transform -translate-y-1/2 text-xs font-bold text-gray-600">0/5</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="question-container" class="p-8 md:p-10"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="px-8 pb-8 flex justify-between"> |
|
|
<button id="prev-btn" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-xl font-medium hover:bg-gray-300 transition-all transform hover:-translate-x-1 hidden"> |
|
|
<i class="fas fa-arrow-left mr-2"></i> Back |
|
|
</button> |
|
|
<button id="next-btn" class="px-8 py-3 bg-gradient-to-r from-purple-500 to-indigo-600 text-white rounded-xl font-bold hover:from-purple-600 hover:to-indigo-700 transition-all transform hover:translate-x-1 shadow-lg hover:shadow-xl ml-auto"> |
|
|
Next <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="results-container" class="hidden"> |
|
|
<div class="result-card rounded-2xl shadow-2xl overflow-hidden p-8 md:p-10 border border-white/20"> |
|
|
<div class="text-center"> |
|
|
<div class="animate__animated animate__bounceIn"> |
|
|
<h2 class="text-4xl font-bold text-gray-800 mb-2">Your ICONN Match Is...</h2> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-indigo-600 mx-auto mb-8 rounded-full"></div> |
|
|
</div> |
|
|
|
|
|
<div id="result-content" class="max-w-2xl mx-auto"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="mt-10 animate__animated animate__fadeInUp animate__delay-1s"> |
|
|
<button id="retake-btn" class="px-8 py-4 bg-gradient-to-r from-purple-500 to-indigo-600 text-white rounded-xl font-bold hover:from-purple-600 hover:to-indigo-700 transition-all transform hover:scale-105 shadow-lg hover:shadow-xl"> |
|
|
<i class="fas fa-redo mr-2"></i> Play Again |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const questions = [ |
|
|
{ |
|
|
question: "When you have free time, you usually...", |
|
|
options: [ |
|
|
{ text: "Follow a routine", icon: "fas fa-sync-alt", points: { iconn1: 2, iconne1: 0, iconni1: 0 } }, |
|
|
{ text: "Solve puzzles or code", icon: "fas fa-puzzle-piece", points: { iconn1: 0, iconne1: 2, iconni1: 0 } }, |
|
|
{ text: "Create art or music", icon: "fas fa-paint-brush", points: { iconn1: 0, iconne1: 0, iconni1: 2 } } |
|
|
] |
|
|
}, |
|
|
{ |
|
|
question: "Your superpower would be...", |
|
|
options: [ |
|
|
{ text: "Reliability", icon: "fas fa-clock", points: { iconn1: 2, iconne1: 0, iconni1: 0 } }, |
|
|
{ text: "Super intelligence", icon: "fas fa-brain", points: { iconn1: 0, iconne1: 2, iconni1: 0 } }, |
|
|
{ text: "Creative genius", icon: "fas fa-magic", points: { iconn1: 0, iconne1: 0, iconni1: 2 } } |
|
|
] |
|
|
}, |
|
|
{ |
|
|
question: "Choose a snack...", |
|
|
options: [ |
|
|
{ text: "Classic cookies", icon: "fas fa-cookie", points: { iconn1: 2, iconne1: 0, iconni1: 0 } }, |
|
|
{ text: "Brain-boosting nuts", icon: "fas fa-seedling", points: { iconn1: 0, iconne1: 2, iconni1: 0 } }, |
|
|
{ text: "Colorful macarons", icon: "fas fa-ice-cream", points: { iconn1: 0, iconne1: 0, iconni1: 2 } } |
|
|
] |
|
|
}, |
|
|
{ |
|
|
question: "Your ideal vacation is...", |
|
|
options: [ |
|
|
{ text: "A well-planned trip", icon: "fas fa-map-marked-alt", points: { iconn1: 2, iconne1: 0, iconni1: 0 } }, |
|
|
{ text: "A science museum visit", icon: "fas fa-microscope", points: { iconn1: 0, iconne1: 2, iconni1: 0 } }, |
|
|
{ text: "An art retreat", icon: "fas fa-palette", points: { iconn1: 0, iconne1: 0, iconni1: 2 } } |
|
|
] |
|
|
}, |
|
|
{ |
|
|
question: "How do you make decisions?", |
|
|
options: [ |
|
|
{ text: "Follow proven methods", icon: "fas fa-clipboard-list", points: { iconn1: 2, iconne1: 0, iconni1: 0 } }, |
|
|
{ text: "Analyze all options", icon: "fas fa-chart-pie", points: { iconn1: 0, iconne1: 2, iconni1: 0 } }, |
|
|
{ text: "Go with your gut", icon: "fas fa-heart", points: { iconn1: 0, iconne1: 0, iconni1: 2 } } |
|
|
] |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
const modelDescriptions = { |
|
|
iconn1: { |
|
|
name: "ICONN 1", |
|
|
title: "The Reliable Rock", |
|
|
description: "You're the steady foundation everyone can count on! Like a trusty old clock, you keep things running smoothly with your practical approach and love for routine. You shine when there's a clear plan to follow and enjoy making sure everything works just right.", |
|
|
strengths: ["Dependable", "Organized", "Practical", "Consistent"], |
|
|
color: "bg-blue-100", |
|
|
textColor: "text-blue-800", |
|
|
icon: "fas fa-cogs", |
|
|
character: "fas fa-user-cog" |
|
|
}, |
|
|
iconne1: { |
|
|
name: "ICONN e1", |
|
|
title: "The Brainy Bot", |
|
|
description: "You're a logic-loving, problem-solving machine! Your brain is always buzzing with ideas and solutions. You enjoy breaking down complex problems and finding the most efficient way to tackle them. For you, life is one big puzzle waiting to be solved!", |
|
|
strengths: ["Analytical", "Logical", "Precise", "Curious"], |
|
|
color: "bg-green-100", |
|
|
textColor: "text-green-800", |
|
|
icon: "fas fa-brain", |
|
|
character: "fas fa-robot" |
|
|
}, |
|
|
iconni1: { |
|
|
name: "ICONN i1", |
|
|
title: "The Creative Spark", |
|
|
description: "You're a burst of color in a gray world! Your imagination knows no bounds, and you see beauty and possibilities everywhere. Whether it's art, music, or innovative ideas, you bring creativity and flair to everything you do. The world is your canvas!", |
|
|
strengths: ["Imaginative", "Expressive", "Innovative", "Intuitive"], |
|
|
color: "bg-purple-100", |
|
|
textColor: "text-purple-800", |
|
|
icon: "fas fa-palette", |
|
|
character: "fas fa-user-astronaut" |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
let currentQuestion = 0; |
|
|
let answers = []; |
|
|
let scores = { iconn1: 0, iconne1: 0, iconni1: 0 }; |
|
|
|
|
|
|
|
|
const quizContainer = document.getElementById('quiz-container'); |
|
|
const questionContainer = document.getElementById('question-container'); |
|
|
const resultsContainer = document.getElementById('results-container'); |
|
|
const resultContent = document.getElementById('result-content'); |
|
|
const nextBtn = document.getElementById('next-btn'); |
|
|
const prevBtn = document.getElementById('prev-btn'); |
|
|
const progressBar = document.getElementById('progress-bar'); |
|
|
const progressText = document.getElementById('progress-text'); |
|
|
const retakeBtn = document.getElementById('retake-btn'); |
|
|
|
|
|
|
|
|
function initQuiz() { |
|
|
showQuestion(); |
|
|
updateProgressBar(); |
|
|
nextBtn.textContent = 'Next'; |
|
|
nextBtn.addEventListener('click', goToNextQuestion); |
|
|
prevBtn.addEventListener('click', goToPreviousQuestion); |
|
|
retakeBtn.addEventListener('click', resetQuiz); |
|
|
} |
|
|
|
|
|
|
|
|
function showQuestion() { |
|
|
const question = questions[currentQuestion]; |
|
|
let html = ` |
|
|
<div class="mb-8"> |
|
|
<div class="inline-block bg-indigo-100 text-indigo-800 px-4 py-1 rounded-full text-sm font-bold mb-4"> |
|
|
Question ${currentQuestion + 1} of ${questions.length} |
|
|
</div> |
|
|
<h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6">${question.question}</h2> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 gap-4"> |
|
|
`; |
|
|
|
|
|
question.options.forEach((option, index) => { |
|
|
const isSelected = answers[currentQuestion] === index; |
|
|
html += ` |
|
|
<div class="option-card p-5 border-2 rounded-xl cursor-pointer relative overflow-hidden ${isSelected ? 'selected border-purple-500' : 'border-gray-200'}" |
|
|
data-index="${index}" onclick="selectOption(this)"> |
|
|
<div class="flex items-center"> |
|
|
<div class="option-icon"> |
|
|
<i class="${option.icon}"></i> |
|
|
</div> |
|
|
<p class="text-lg font-medium text-gray-700">${option.text}</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
html += `</div>`; |
|
|
questionContainer.innerHTML = html; |
|
|
|
|
|
|
|
|
prevBtn.classList.toggle('hidden', currentQuestion === 0); |
|
|
nextBtn.textContent = currentQuestion === questions.length - 1 ? 'See My Result!' : 'Next'; |
|
|
} |
|
|
|
|
|
|
|
|
function selectOption(element) { |
|
|
const optionIndex = parseInt(element.getAttribute('data-index')); |
|
|
answers[currentQuestion] = optionIndex; |
|
|
|
|
|
|
|
|
element.classList.add('bounce'); |
|
|
setTimeout(() => { |
|
|
element.classList.remove('bounce'); |
|
|
}, 500); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.option-card').forEach(card => { |
|
|
card.classList.remove('selected', 'border-purple-500'); |
|
|
}); |
|
|
element.classList.add('selected', 'border-purple-500'); |
|
|
} |
|
|
|
|
|
|
|
|
function goToNextQuestion() { |
|
|
if (answers[currentQuestion] === undefined) { |
|
|
|
|
|
const options = document.querySelectorAll('.option-card'); |
|
|
options.forEach(option => { |
|
|
option.classList.add('animate__animated', 'animate__headShake'); |
|
|
setTimeout(() => { |
|
|
option.classList.remove('animate__animated', 'animate__headShake'); |
|
|
}, 1000); |
|
|
}); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const selectedOption = questions[currentQuestion].options[answers[currentQuestion]]; |
|
|
for (const model in selectedOption.points) { |
|
|
scores[model] += selectedOption.points[model]; |
|
|
} |
|
|
|
|
|
if (currentQuestion < questions.length - 1) { |
|
|
currentQuestion++; |
|
|
showQuestion(); |
|
|
updateProgressBar(); |
|
|
} else { |
|
|
showResults(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function goToPreviousQuestion() { |
|
|
if (currentQuestion > 0) { |
|
|
|
|
|
if (answers[currentQuestion] !== undefined) { |
|
|
const selectedOption = questions[currentQuestion].options[answers[currentQuestion]]; |
|
|
for (const model in selectedOption.points) { |
|
|
scores[model] -= selectedOption.points[model]; |
|
|
} |
|
|
} |
|
|
|
|
|
currentQuestion--; |
|
|
showQuestion(); |
|
|
updateProgressBar(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateProgressBar() { |
|
|
const progress = ((currentQuestion + 1) / questions.length) * 100; |
|
|
progressBar.style.width = `${progress}%`; |
|
|
progressText.textContent = `${currentQuestion + 1}/${questions.length}`; |
|
|
} |
|
|
|
|
|
|
|
|
function createConfetti() { |
|
|
const colors = ['#7c3aed', '#4f46e5', '#10b981', '#f59e0b', '#ef4444']; |
|
|
const container = document.querySelector('#results-container'); |
|
|
|
|
|
for (let i = 0; i < 100; i++) { |
|
|
const confetti = document.createElement('div'); |
|
|
confetti.className = 'confetti'; |
|
|
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; |
|
|
confetti.style.left = Math.random() * 100 + 'vw'; |
|
|
confetti.style.top = -10 + 'px'; |
|
|
confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0'; |
|
|
confetti.style.transform = `rotate(${Math.random() * 360}deg)`; |
|
|
|
|
|
const size = Math.random() * 8 + 4; |
|
|
confetti.style.width = size + 'px'; |
|
|
confetti.style.height = size + 'px'; |
|
|
|
|
|
container.appendChild(confetti); |
|
|
|
|
|
const animation = confetti.animate([ |
|
|
{ top: '-10px', opacity: 0 }, |
|
|
{ top: '10%', opacity: 1 }, |
|
|
{ top: '100%', opacity: 0 } |
|
|
], { |
|
|
duration: Math.random() * 3000 + 2000, |
|
|
delay: Math.random() * 2000, |
|
|
easing: 'cubic-bezier(0.1, 0.8, 0.3, 1)' |
|
|
}); |
|
|
|
|
|
animation.onfinish = () => confetti.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function showResults() { |
|
|
|
|
|
let highestScore = 0; |
|
|
let resultModel = 'iconn1'; |
|
|
|
|
|
for (const model in scores) { |
|
|
if (scores[model] > highestScore) { |
|
|
highestScore = scores[model]; |
|
|
resultModel = model; |
|
|
} |
|
|
} |
|
|
|
|
|
const result = modelDescriptions[resultModel]; |
|
|
|
|
|
|
|
|
let html = ` |
|
|
<div class="result-card ${result.color} ${result.textColor} rounded-2xl p-8 mb-8 border-4 border-white/30 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 opacity-10"> |
|
|
<div class="absolute top-10 left-10 w-32 h-32 rounded-full ${result.color.replace('bg-', 'bg-')} animate-pulse"></div> |
|
|
<div class="absolute bottom-10 right-10 w-24 h-24 rounded-full ${result.color.replace('bg-', 'bg-')} animate-pulse" style="animation-delay: 0.5s;"></div> |
|
|
</div> |
|
|
|
|
|
<div class="relative z-10"> |
|
|
<div class="flex flex-col items-center mb-8"> |
|
|
<div class="w-32 h-32 ${result.color} rounded-full flex items-center justify-center text-6xl mb-6 floating shadow-lg"> |
|
|
<i class="${result.character}"></i> |
|
|
</div> |
|
|
<h3 class="text-4xl font-bold mb-2">${result.name}</h3> |
|
|
<p class="text-xl font-medium mb-6">${result.title}</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white/80 backdrop-blur-sm rounded-xl p-6 mb-8"> |
|
|
<p class="text-lg mb-0">${result.description}</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h4 class="text-xl font-bold mb-4 text-center">Your Superpowers</h4> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-3"> |
|
|
${result.strengths.map(strength => ` |
|
|
<div class="bg-white/80 backdrop-blur-sm rounded-lg p-3 text-center font-medium ${result.textColor}"> |
|
|
${strength} |
|
|
</div> |
|
|
`).join('')} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white/80 backdrop-blur-sm rounded-xl p-6"> |
|
|
<h4 class="text-lg font-bold mb-4">Your Score Breakdown</h4> |
|
|
<div class="space-y-3"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium">ICONN 1</span> |
|
|
<span class="font-bold">${scores.iconn1}/10</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-3"> |
|
|
<div class="bg-blue-500 h-3 rounded-full" style="width: ${(scores.iconn1 / 10) * 100}%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium">ICONN e1</span> |
|
|
<span class="font-bold">${scores.iconne1}/10</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-3"> |
|
|
<div class="bg-green-500 h-3 rounded-full" style="width: ${(scores.iconne1 / 10) * 100}%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium">ICONN i1</span> |
|
|
<span class="font-bold">${scores.iconni1}/10</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-3"> |
|
|
<div class="bg-purple-500 h-3 rounded-full" style="width: ${(scores.iconni1 / 10) * 100}%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
resultContent.innerHTML = html; |
|
|
quizContainer.classList.add('hidden'); |
|
|
resultsContainer.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
createConfetti(); |
|
|
|
|
|
|
|
|
const resultCard = document.querySelector('.result-card'); |
|
|
resultCard.classList.add('animate__animated', 'animate__bounceIn'); |
|
|
} |
|
|
|
|
|
|
|
|
function resetQuiz() { |
|
|
currentQuestion = 0; |
|
|
answers = []; |
|
|
scores = { iconn1: 0, iconne1: 0, iconni1: 0 }; |
|
|
|
|
|
quizContainer.classList.remove('hidden'); |
|
|
resultsContainer.classList.add('hidden'); |
|
|
|
|
|
showQuestion(); |
|
|
updateProgressBar(); |
|
|
} |
|
|
|
|
|
|
|
|
window.onload = initQuiz; |
|
|
</script> |
|
|
</html> |
