What’s Your Life Adventure Personality?
body {
background-color: #f3f4f6;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.quiz-container {
max-width: 900px;
margin: 0 auto;
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
h1 {
text-align: center;
color: #2d3748;
font-size: 2rem;
margin-bottom: 20px;
}
.progress-bar-container {
background: #e2e8f0;
border-radius: 4px;
margin-bottom: 20px;
}
.progress-bar {
height: 8px;
background: linear-gradient(to right, #f687b3, #f6ad55);
width: 0;
border-radius: 4px;
transition: width 0.3s ease-in-out;
}
.question-card {
background: #f7fafc;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
transition: transform 0.3s;
}
.question-card:hover {
transform: translateY(-5px);
}
.question-card p {
font-size: 1.2rem;
color: #4a5568;
margin-bottom: 15px;
font-weight: 500;
}
.question-card label {
display: block;
padding: 10px;
font-size: 1rem;
color: #2d3748;
cursor: pointer;
border-radius: 6px;
}
.question-card label:hover {
background: #edf2f7;
}
.question-card input {
margin-right: 10px;
accent-color: #f6ad55;
}
.error-message {
color: #e53e3e;
text-align: center;
margin-bottom: 20px;
display: none;
}
.button-group {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
button {
padding: 12px 30px;
border: none;
border-radius: 8px;
font-size: 1.1rem;
cursor: pointer;
color: #fff;
transition: background 0.3s;
}
#submitButton {
background: linear-gradient(to right, #f687b3, #f6ad55);
}
#submitButton:hover {
background: linear-gradient(to right, #ed64a6, #ed8936);
}
#resetButton {
background: #718096;
}
#resetButton:hover {
background: #5a6175;
}
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 40;
}
.result-modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 600px;
width: 90%;
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
z-index: 50;
animation: slideIn 0.5s ease-in;
}
@keyframes slideIn {
from { transform: translate(-50%, -60%); opacity: 0; }
to { transform: translate(-50%, -50%); opacity: 1; }
}
.countdown {
font-size: 2.5rem;
font-weight: bold;
color: #f6ad55;
text-align: center;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.result-content img {
width: 100%;
border-radius: 8px;
margin: 15px 0;
}
.result-content h2 {
font-size: 1.8rem;
color: #f6ad55;
margin-bottom: 10px;
}
.result-content p {
color: #4a5568;
font-size: 1.1rem;
line-height: 1.6;
}
.share-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.share-buttons a {
padding: 10px 20px;
color: #fff;
text-decoration: none;
border-radius: 6px;
font-size: 0.9rem;
transition: transform 0.2s;
}
.share-buttons a:hover {
transform: scale(1.05);
}
.twitter { background: #1da1f2; }
.facebook { background: #3b5998; }
.whatsapp { background: #25d366; }
.linkedin { background: #0077b5; }
.pinterest { background: #bd081c; }
@media (max-width: 600px) {
.quiz-container { padding: 20px; }
h1 { font-size: 1.5rem; }
.question-card p { font-size: 1rem; }
.result-modal { width: 95%; }
button { font-size: 1rem; padding: 10px 20px; }
}
Discover Your Life Adventure Personality!
Please answer all questions!
1. How do you unwind after a long week?
Exploring a new city’s nightlife
Cozying up with a book or movie
Hiking or outdoor adventure
Creating art or music
2. What’s your dream vacation vibe?
Vibrant city with museums and cafes
Quiet beach with sunsets
Mountain trek with epic views
Cultural festival with local traditions
3. What drives you to try something new?
Connecting with new people
Personal growth and reflection
The thrill of a challenge
Expressing your creativity
4. What’s your go-to weekend activity?
Socializing at events or parties
Relaxing at home with a hobby
Extreme sports or fitness
Visiting art galleries or concerts
5. What’s your ideal way to celebrate a big win?
Throwing a big party with friends
Quiet dinner and reflection
An adrenaline-pumping adventure
Starting a new creative project
6. Which quote resonates with you most?
“Life is either a daring adventure or nothing at all.”
“The journey inward is the greatest adventure.”
“Do one thing every day that scares you.”
“Creativity is intelligence having fun.”
Reveal My Personality!
Reset Quiz
document.addEventListener(‘DOMContentLoaded’, () => {
const quizForm = document.getElementById(‘quizForm’);
const submitButton = document.getElementById(‘submitButton’);
const progressBar = document.getElementById(‘progressBar’);
const modalOverlay = document.getElementById(‘modalOverlay’);
const resultModal = document.getElementById(‘resultModal’);
const countdownDiv = document.getElementById(‘countdown’);
const resultContent = document.getElementById(‘resultContent’);
const resetButton = document.getElementById(‘resetButton’);
const errorMessage = document.getElementById(‘errorMessage’);
// Update progress bar
quizForm.addEventListener(‘change’, () => {
const answered = document.querySelectorAll(‘input[type=”radio”]:checked’).length;
const totalQuestions = 6;
progressBar.style.width = `${(answered / totalQuestions) * 100}%`;
});
// Handle form submission
const handleSubmit = (e) => {
e.preventDefault();
const answered = document.querySelectorAll(‘input[type=”radio”]:checked’).length;
// console.log(‘Answered questions:’, answered); // Debug
if (answered < 6) {
errorMessage.style.display = 'block';
window.scrollTo({ top: 0, behavior: 'smooth' });
return;
}
errorMessage.style.display = 'none';
let score = { a: 0, b: 0, c: 0, d: 0 };
const answers = new FormData(quizForm);
for (let [name, value] of answers) {
score[value] += 2;
}
// console.log('Scores:', score); // Debug
let maxScore = Math.max(score.a, score.b, score.c, score.d);
let result = '';
if (score.a === maxScore) {
result = `
Urban Explorer
You thrive in the buzz of city life, seeking new experiences, people, and cultures. Your adventures are filled with vibrant nights, museum visits, and trendy cafes.
Tip: Plan a weekend city break to a place you’ve never been! Check out local events to meet like-minded explorers.
`;
} else if (score.b === maxScore) {
result = `
Soulful Wanderer
You find peace in quiet moments, whether it’s reading by the sea or reflecting under the stars. Your adventures are introspective and rejuvenating.
Tip: Try a solo retreat or a mindfulness workshop to deepen your inner journey.
`;
} else if (score.c === maxScore) {
result = `
Thrill Seeker
You live for adrenaline, chasing epic challenges like mountain climbs or extreme sports. Your adventures push boundaries and test your limits.
Tip: Sign up for a new outdoor challenge, like rock climbing or a marathon, to fuel your passion.
`;
} else {
result = `
Creative Dreamer
Your adventures are fueled by creativity, from attending festivals to crafting your own art. You seek inspiration in every experience.
Tip: Visit a local art fair or start a creative project to express your unique vision.
`;
}
// Show countdown
modalOverlay.style.display = ‘block’;
resultModal.style.display = ‘block’;
countdownDiv.style.display = ‘block’;
resultContent.classList.add(‘hidden’);
let count = 3;
countdownDiv.textContent = count;
const countdownInterval = setInterval(() => {
count–;
countdownDiv.textContent = count;
if (count === 0) {
clearInterval(countdownInterval);
countdownDiv.style.display = ‘none’;
resultContent.innerHTML = result;
resultContent.classList.remove(‘hidden’);
}
}, 1000);
};
quizForm.addEventListener(‘submit’, handleSubmit);
submitButton.addEventListener(‘click’, handleSubmit); // Fallback
// Reset quiz
resetButton.addEventListener(‘click’, () => {
quizForm.reset();
progressBar.style.width = ‘0%’;
modalOverlay.style.display = ‘none’;
resultModal.style.display = ‘none’;
countdownDiv.style.display = ‘none’;
resultContent.innerHTML = ”;
resultContent.classList.add(‘hidden’);
errorMessage.style.display = ‘none’;
window.scrollTo({ top: 0, behavior: ‘smooth’ });
});
// Close modal
modalOverlay.addEventListener(‘click’, () => {
modalOverlay.style.display = ‘none’;
resultModal.style.display = ‘none’;
});
});
</或
