What’s Your Cosmic Superpower Persona? https://cdn.tailwindcss.com https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js body { font-family: ‘Exo 2’, sans-serif; background: linear-gradient(180deg, #0f172a, #1e293b); color: #bfdbfe; overflow-x: hidden; } .quiz-container { max-width: 900px; margin: 2rem auto; padding: 1rem; } .card-container { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .card-container::-webkit-scrollbar { display: none; } .question-card, .result-card { flex: 0 0 85%; margin: 0 1rem; padding: 2rem; background: url(‘https://www.transparenttextures.com/patterns/stardust.png’), rgba(15, 23, 42, 0.9); border: 2px solid #60a5fa; border-radius: 1rem; scroll-snap-align: center; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); } .option { cursor: pointer; transition: transform 0.3s, background 0.3s; background: rgba(96, 165, 250, 0.15); border: 1px solid #60a5fa; } .option:hover { transform: scale(1.02); background: rgba(96, 165, 250, 0.35); } .progress-circle { position: fixed; top: 1rem; right: 1rem; width: 70px; height: 70px; } .progress-circle svg { transform: rotate(-90deg); } .progress-circle circle { fill: none; stroke: #60a5fa; stroke-width: 6; } .progress-fill { stroke: #bfdbfe; stroke-dasharray: 283; stroke-dashoffset: 283; transition: stroke-dashoffset 0.5s; } .share-btn { transition: background 0.3s; } .share-btn:hover { filter: brightness(1.2); } .badge { width: 100px; height: 100px; background: radial-gradient(#60a5fa, #1e40af); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: bold; border: 2px solid #bfdbfe; } .result-image { width: 200px; height: 200px; object-fit: cover; border-radius: 1rem; border: 2px solid #60a5fa; margin-bottom: 1rem; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 12px #60a5fa; } 50% { box-shadow: 0 0 25px #60a5fa; } } .pulse { animation: pulse 3s infinite; } let scores = { titan: 0, weaver: 0, warden: 0, trickster: 0 }; const totalQuestions = 6; let currentQuestion = 1; // Load progress from localStorage const savedProgress = localStorage.getItem(‘cosmicQuizProgress’); if (savedProgress) { const progress = JSON.parse(savedProgress); scores = progress.scores; currentQuestion = progress.currentQuestion; scrollToCard(`q${currentQuestion}`); } function selectOption(questionId, element, nextId) { const questionScores = JSON.parse(element.getAttribute(‘data-scores’)); for (let key in questionScores) { scores[key] += questionScores[key]; } // Save progress localStorage.setItem(‘cosmicQuizProgress’, JSON.stringify({ scores, currentQuestion: currentQuestion + 1 })); // Animate and scroll gsap.to(`#${questionId}`, { opacity: 0, scale: 0.95, duration: 0.3, onComplete: () => { scrollToCard(nextId); gsap.fromTo(`#${nextId}`, { opacity: 0, scale: 0.95 }, { opacity: 1, scale: 1, duration: 0.5 }); currentQuestion++; updateProgress(); if (nextId === ‘result’) { showResult(); } }}); } function scrollToCard(cardId) { const card = document.getElementById(cardId); card.scrollIntoView({ behavior: ‘smooth’, inline: ‘center’ }); } function updateProgress() { const progress = (currentQuestion / (totalQuestions + 1)) * 283; document.querySelector(‘.progress-fill’).style.strokeDashoffset = 283 – progress; document.querySelector(‘.progress-circle div’).textContent = `${currentQuestion}/${totalQuestions}`; } function showResult() { // Calculate result let maxScore = 0; let persona = ‘titan’; for (let key in scores) { if (scores[key] > maxScore) { maxScore = scores[key]; persona = key; } } const personas = { titan: { name: ‘Starforge Titan’, description: ‘You wield raw cosmic power, forging stars and crushing threats with unmatched strength. Your presence shapes galaxies. Dive into our epic sci-fi stories!’, power: ‘90%’, control: ‘60%’, badge: ‘TITAN’, image: ‘https://atenajos.blog/wp-content/uploads/2025/08/db9bd-starforge-titan.png’ }, weaver: { name: ‘Void Weaver’, description: ‘You manipulate the fabric of reality, crafting intricate cosmic tapestries with precision. Your creations redefine existence. Explore our creative writing tips!’, power: ‘70%’, control: ‘95%’, badge: ‘WEAVER’, image: ‘https://atenajos.blog/wp-content/uploads/2025/08/17316-void-weaver.png’ }, warden: { name: ‘Astral Warden’, description: ‘You protect the cosmos with serene strength, restoring優先 and shielding worlds. Your light guides the lost. Check out our heroism and fantasy posts!’, power: ‘80%’, control: ‘85%’, badge: ‘WARDEN’, image: ‘https://atenajos.blog/wp-content/uploads/2025/08/e2ced-astral-warden.png’ }, trickster: { name: ‘Nebula Trickster’, description: ‘You dance through the cosmos with chaotic flair, bending rules and sparking surprises. Your mischief ignites adventure. Read our adventure and gaming tales!’, power: ‘65%’, control: ‘70%’, badge: ‘TRICKSTER’, image: ‘https://atenajos.blog/wp-content/uploads/2025/08/9c27d-nebula-trickster.png’ } }; // Display result document.getElementById(‘persona’).textContent = personas[persona].name; document.getElementById(‘description’).textContent = personas[persona].description; document.getElementById(‘power’).textContent = personas[persona].power; document.getElementById(‘control’).textContent = personas[persona].control; document.getElementById(‘badge’).textContent = personas[persona].badge; document.getElementById(‘result-image’).src = personas[persona].image; gsap.fromTo(‘#result’, { opacity: 0, scale: 0.8 }, { opacity: 1, scale: 1, duration: 0.8, ease: ‘back.out(1.7)’ }); // Share buttons const shareText = `I’m a ${personas[persona].name} in the Cosmic Superpower Quiz! Unleash your power at https://atenajos.blog/cosmic-superpower-quiz`; document.getElementById(‘twitter-share’).href = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}`; document.getElementById(‘reddit-share’).href = `https://www.reddit.com/submit?url=${encodeURIComponent(‘https://atenajos.blog/cosmic-superpower-quiz’)}&title=${encodeURIComponent(shareText)}`; document.getElementById(‘tumblr-share’).href = `https://www.tumblr.com/widgets/share/tool?canonicalUrl=${encodeURIComponent(‘https://atenajos.blog/cosmic-superpower-quiz’)}&title=${encodeURIComponent(shareText)}`; window.shareText = shareText; // For Instagram copy // Clear localStorage localStorage.removeItem(‘cosmicQuizProgress’); } function copyToClipboard() { navigator.clipboard.write(window.shareText).then(() => { alert(‘Link copied! Paste it on Instagram to share your result!’); }); } function resetQuiz() { scores = { titan: 0, weaver: 0, warden: 0, trickster: 0 }; currentQuestion = 1; localStorage.removeItem(‘cosmicQuizProgress’); gsap.to(‘#result’, { opacity: 0, scale: 0.8, duration: 0.3, onComplete: () => { scrollToCard(‘q1’); gsap.fromTo(‘#q1’, { opacity: 0, scale: 0.95 }, { opacity: 1, scale: 1, duration: 0.5 }); updateProgress(); }}); } // Initialize progress updateProgress();