What’s Your Hidden Superpower?
body {
font-family: ‘Poppins’, sans-serif;
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.quiz-container {
max-width: 700px;
background: #fff;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
padding: 30px;
position: relative;
}
h1 {
text-align: center;
color: #2c3e50;
font-size: 2.2em;
margin-bottom: 20px;
}
.progress-bar {
height: 10px;
background: #e0e0e0;
border-radius: 5px;
margin-bottom: 20px;
overflow: hidden;
}
.progress {
height: 100%;
background: linear-gradient(45deg, #007bff, #00c4ff);
transition: width 0.3s ease;
}
.timer-bar {
height: 6px;
background: #e0e0e0;
border-radius: 3px;
margin: 10px 0;
overflow: hidden;
}
.timer-progress {
height: 100%;
background: #e74c3c;
width: 100%;
transition: width linear;
}
.result-countdown {
display: none;
text-align: center;
margin: 20px 0;
}
.result-countdown p {
font-size: 1.5em;
color: #2c3e50;
margin-bottom: 10px;
}
.result-timer {
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
}
.result-timer-progress {
height: 100%;
background: #f1c40f;
width: 100%;
transition: width 5s linear;
}
.question {
display: none;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.question.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.question p {
font-size: 1.3em;
color: #34495e;
margin-bottom: 15px;
font-weight: 600;
}
button {
display: block;
width: 100%;
padding: 15px;
margin: 10px 0;
background: linear-gradient(45deg, #007bff, #00c4ff);
color: #fff;
border: none;
border-radius: 10px;
font-size: 1.1em;
cursor: pointer;
transition: transform 0.2s, background 0.3s;
}
button:hover {
transform: scale(1.02);
background: linear-gradient(45deg, #0056b3, #0096cc);
}
button:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}
#result {
display: none;
text-align: center;
animation: resultReveal 1s ease;
}
#result h2 {
color: #2c3e50;
font-size: 2em;
margin-bottom: 10px;
}
.result-image {
width: 150px;
height: 150px;
margin: 20px auto;
border-radius: 15px;
object-fit: cover;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
#result p {
color: #34495e;
font-size: 1.1em;
line-height: 1.6;
margin: 15px 0;
}
#result .tip {
font-style: italic;
color: #7f8c8d;
}
#share-buttons {
margin-top: 20px;
}
.share-btn, .reset-btn {
display: inline-block;
padding: 12px 25px;
margin: 8px;
background: #007bff;
color: #fff;
text-decoration: none;
border-radius: 8px;
font-size: 1em;
transition: background 0.3s;
}
.share-btn:hover, .reset-btn:hover {
background: #0056b3;
}
.reset-btn {
background: #e74c3c;
}
.reset-btn:hover {
background: #c0392b;
}
@keyframes resultReveal {
0% { opacity: 0; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1); }
}
@media (max-width: 600px) {
.quiz-container {
padding: 20px;
}
h1 {
font-size: 1.8em;
}
.question p {
font-size: 1.1em;
}
button {
font-size: 1em;
padding: 12px;
}
.result-image {
width: 120px;
height: 120px;
}
.result-countdown p {
font-size: 1.2em;
}
}
Discover Your Hidden Superpower! 🌟
1. When faced with a challenge, what’s your first instinct?
A. Understand others’ feelings
B. Brainstorm creative ideas
C. Take immediate action
2. What’s your secret weapon in a group?
A. Bringing people together
B. Sparking new ideas
C. Leading the charge
3. How do you approach a new opportunity?
A. Connect with others first
B. Explore creative possibilities
C. Dive in boldly
4. What’s your strength in a crisis?
A. Staying calm and empathetic
B. Thinking outside the box
C. Taking control
5. What drives your passion?
A. Helping others grow
B. Creating something new
C. Breaking barriers
6. How do you make tough decisions?
A. Consider others’ feelings
B. Weigh creative options
C. Trust your gut
7. What legacy do you want to leave?
A. A world of kindness
B. Groundbreaking ideas
C. Bold change
Revealing your superpower in 5…
Your Hidden Superpower Is…
![Your Superpower Image]()
let currentQuestion = 1;
let totalQuestions = 7;
let answers = { healer: 0, innovator: 0, pathfinder: 0 };
let timerInterval;
const questionTimeLimit = 15; // Seconds per question
const resultCountdownTime = 5; // Seconds for result reveal
function selectAnswer(questionNum, answer) {
answers++;
clearInterval(timerInterval);
document.querySelector(`.question[data-question=”${questionNum}”]`).classList.remove(‘active’);
if (questionNum {
timeLeft–;
if (timeLeft {
timeLeft–;
timerDisplay.textContent = timeLeft;
if (timeLeft q.classList.remove(‘active’));
document.querySelector(‘.question[data-question=”1″]’).classList.add(‘active’);
updateProgress();
startTimer();
}
function shareOnTwitter() {
const resultText = document.getElementById(‘result-text’).textContent.split(‘:’)[0];
const url = ‘
https://atomic-temporary-240405815.wpcomstaging.com/’;
const text = `🌟 My hidden superpower is ${resultText}! Discover yours at ${url} #SuperpowerQuiz #AtenaJos`;
window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`, ‘_blank’);
}
function shareOnFacebook() {
const url = ‘
https://atomic-temporary-240405815.wpcomstaging.com/’;
const text = `I discovered my hidden superpower! Find yours at ${url} #SuperpowerQuiz`;
window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, ‘_blank’);
}
// Initialize first question
document.querySelector(‘.question[data-question=”1″]’).classList.add(‘active’);
updateProgress();
startTimer();
