Which Element Are You?
.element-quiz-container {
font-family: ‘Georgia’, serif;
background: linear-gradient(to bottom, #d4f1d4, #b3e5fc);
color: #1a1a40;
overflow-x: hidden;
padding: 20px;
}
.elemquiz-container {
display: flex;
max-width: 1050px;
margin: 0 auto;
min-height: 80vh;
gap: 20px;
}
.elemquiz-sidebar {
width: 250px;
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.elemquiz-sidebar h2 {
color: #4caf50;
text-align: center;
margin-bottom: 20px;
}
.elemquiz-progress-bar {
background: #e0e0e0;
height: 20px;
border-radius: 10px;
overflow: hidden;
}
.elemquiz-progress {
background: #4caf50;
height: 100%;
width: 0;
transition: width 0.3s ease;
}
.elemquiz-main-content {
width: 800px;
background: rgba(255, 255, 255, 0.95);
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
min-height: 600px;
position: relative;
}
.elemquiz-main-content h1 {
text-align: center;
color: #4caf50;
text-shadow: 0 0 5px #4caf50;
margin-bottom: 20px;
}
.elemquiz-question {
position: absolute;
top: 80px;
left: 30px;
right: 30px;
min-height: 400px;
padding: 20px;
background: rgba(255, 255, 255, 0.85);
background-size: cover;
background-position: center;
border-radius: 8px;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.elemquiz-question.active {
opacity: 1;
visibility: visible;
}
#elemquiz-q1 {
background-image: url(‘
https://atenajos.blog/wp-content/uploads/2025/08/3d7b7-a-glowing-sunset-over-a-horizon-with-warm-oranges-pinks.png’);
}
#elemquiz-q2 {
background-image: url(‘
https://atenajos.blog/wp-content/uploads/2025/08/a29d3-a-majestic-mountain-landscape-with-snow-capped-peaks-lush-green-valleys.png’);
}
#elemquiz-q3 {
background-image: url(‘
https://atenajos.blog/wp-content/uploads/2025/08/a341a-a-cascading-waterfall-flowing-into-a-turquoise-pool-surrounded-by.png’);
}
#elemquiz-q4 {
background-image: url(‘
https://atenajos.blog/wp-content/uploads/2025/08/3a7fe-a-glowing-volcano-at-dusk-with-molten-lava-contrasting.png’);
}
#elemquiz-q5 {
background-image: url(‘
https://atenajos.blog/wp-content/uploads/2025/08/a1650-a-dense-misty-forest-with-sunlight-filtering-through-tall.png’);
}
#elemquiz-q6 {
background-image: url(‘
https://atenajos.blog/wp-content/uploads/2025/08/2c06e-gentle-ocean-waves-lapping-at-a-sandy-shore-at.png’);
}
#elemquiz-q7 {
background-image: url(‘
https://atenajos.blog/wp-content/uploads/2025/08/6af26-an-open-windswept-plain-under-a-vast-cloudy-sky.png’);
}
.elemquiz-question h3 {
color: #1a1a40;
margin-bottom: 10px;
}
.elemquiz-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.elemquiz-option {
padding: 15px;
background: #f9f9f9;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
}
.elemquiz-option[data-element=”Fire”] {
border: 2px solid #ff4500;
}
.elemquiz-option[data-element=”Water”] {
border: 2px solid #1e90ff;
}
.elemquiz-option[data-element=”Earth”] {
border: 2px solid #228b22;
}
.elemquiz-option[data-element=”Air”] {
border: 2px solid #87ceeb;
}
.elemquiz-option:hover {
background: #e0e0e0;
transform: scale(1.02);
}
.elemquiz-option.selected {
background: #d3d3d3;
color: #1a1a40;
}
.elemquiz-option[data-element=”Fire”].selected {
background: #ff4500;
color: #fff;
}
.elemquiz-option[data-element=”Water”].selected {
background: #1e90ff;
color: #fff;
}
.elemquiz-option[data-element=”Earth”].selected {
background: #228b22;
color: #fff;
}
.elemquiz-option[data-element=”Air”].selected {
background: #87ceeb;
color: #1a1a40;
}
.elemquiz-next-button {
display: block;
margin: 20px auto 0;
padding: 12px 30px;
background: #4caf50;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
transition: box-shadow 0.3s, background 0.3s;
pointer-events: auto;
}
.elemquiz-next-button:hover {
background: #66bb6a;
box-shadow: 0 0 15px rgba(76, 175, 80, 0.8);
}
#elemquiz-countdown {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
text-align: center;
width: 150px;
height: 150px;
}
.countdown-circle {
width: 100%;
height: 100%;
}
.countdown-circle svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.countdown-circle circle {
fill: none;
stroke: #4caf50;
stroke-width: 10;
stroke-dasharray: 283;
stroke-dashoffset: 0;
animation: countdown 3s linear forwards;
}
@keyframes countdown {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 283;
}
}
.countdown-number {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2em;
color: #4caf50;
text-shadow: 0 0 5px #4caf50;
}
#elemquiz-result {
position: absolute;
top: 80px;
left: 30px;
right: 30px;
display: none;
text-align: center;
padding: 20px;
background: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
min-height: 500px;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
#elemquiz-result.active {
opacity: 1;
visibility: visible;
}
#elemquiz-result h2 {
color: #4caf50;
margin-bottom: 15px;
}
#elemquiz-description {
margin: 15px 0;
line-height: 1.6;
}
.elemquiz-element-image {
max-width: 250px;
height: auto;
margin: 15px auto;
display: block;
border-radius: 10px;
border: 3px solid #4caf50;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}
.elemquiz-share-buttons {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.elemquiz-share-buttons a {
padding: 10px 20px;
color: #fff;
text-decoration: none;
border-radius: 8px;
transition: opacity 0.3s;
}
.elemquiz-share-buttons .twitter {
background: #1DA1F2;
}
.elemquiz-share-buttons .facebook {
background: #3b5998;
}
.elemquiz-share-buttons .pinterest {
background: #BD081C;
}
.elemquiz-share-buttons a:hover {
opacity: 0.8;
}
#elemquiz-reset {
background: #4b0082;
color: #e6e6fa;
box-shadow: 0 0 10px rgba(75, 0, 130, 0.5);
}
#elemquiz-reset:hover {
background: #6a0dad;
box-shadow: 0 0 15px rgba(75, 0, 130, 0.8);
}
@media (max-width: 1050px) {
.elemquiz-container {
flex-direction: column;
align-items: center;
}
.elemquiz-sidebar {
width: 100%;
max-width: 800px;
}
.elemquiz-main-content {
width: 100%;
max-width: 800px;
}
}
Which Element Are You?
1. How would you describe your personality?
Passionate and intense
Calm and adaptable
Steady and reliable
Free-spirited and curious
Next
2. What’s your ideal vacation spot?
Desert or volcano
Beach or river
Forest or mountain
Open plains or skydiving
Next
3. How do you make decisions?
With instinct and energy
With intuition and flow
With logic and stability
With creativity and flexibility
Next
4. How do you approach challenges?
Boldly, with fierce determination
Adaptably, going with the flow
Methodically, with careful planning
Creatively, thinking outside the box
Next
5. What inspires you most?
Achievement and success
Connection and empathy
Security and growth
Freedom and exploration
Next
6. What’s your approach to relationships?
Passionate and intense
Empathetic and supportive
Loyal and dependable
Open-minded and communicative
Next
7. How do you recharge?
Through action and excitement
Through relaxation and calm
Through routine and grounding
Through exploration and new experiences
Next
You are !
![Element Image]()
Try Again
document.addEventListener(‘DOMContentLoaded’, () => {
const quiz = document.getElementById(‘elemquiz-quiz’);
const questions = document.querySelectorAll(‘.elemquiz-question’);
const countdownDiv = document.getElementById(‘elemquiz-countdown’);
const countdownNumber = document.querySelector(‘.countdown-number’);
const resultDiv = document.getElementById(‘elemquiz-result’);
const elementSpan = document.getElementById(‘elemquiz-element’);
const descriptionP = document.getElementById(‘elemquiz-description’);
const elementImage = document.getElementById(‘elemquiz-element-image’);
const resetButton = document.getElementById(‘elemquiz-reset’);
const progressBar = document.getElementById(‘elemquiz-progress’);
let currentQuestion = 0;
let scores = {};
const descriptions = {
‘Fire’: {
text: ‘You are Fire, bold, passionate, and dynamic. Your energy lights up any room, and your drive pushes you to conquer challenges with fierce determination. **Strengths**: Leadership, enthusiasm, and courage. **Life Path**: Embrace your inner spark to inspire others and blaze your own trail.’,
image: ‘
https://atenajos.blog/wp-content/uploads/2025/08/a541c-fire-1.png’
},
‘Water’: {
text: ‘You are Water, intuitive, empathetic, and fluid. You flow through life with grace, adapting to any situation and connecting deeply with others. **Strengths**: Compassion, adaptability, and emotional depth. **Life Path**: Trust your intuition to navigate life’s currents and nurture those around you.’,
image: ‘
https://atenajos.blog/wp-content/uploads/2025/08/f987c-water.png’
},
‘Earth’: {
text: ‘You are Earth, grounded, nurturing, and dependable. Your steady presence provides stability, and your practical approach builds lasting foundations. **Strengths**: Reliability, patience, and growth. **Life Path**: Cultivate your surroundings with care, creating a legacy of strength and security.’,
image: ‘
https://atenajos.blog/wp-content/uploads/2025/08/763ce-earth.png’
},
‘Air’: {
text: ‘You are Air, free, intellectual, and imaginative. Your curious mind soars, exploring new ideas and inspiring others with your creativity. **Strengths**: Flexibility, curiosity, and vision. **Life Path**: Embrace your freedom to explore and share your innovative ideas with the world.’,
image: ‘
https://atenajos.blog/wp-content/uploads/2025/08/5260b-air.png’
}
};
function updateProgress() {
try {
if (!progressBar) {
console.warn(‘Progress bar element not found’);
return;
}
const progressPercent = (currentQuestion / (questions.length + 1)) * 100;
progressBar.style.width = `${progressPercent}%`;
console.log(`Progress updated: ${progressPercent}%`);
} catch (error) {
console.error(‘Error in updateProgress:’, error);
}
}
function nextQuestion() {
console.log(`Next button clicked, currentQuestion: ${currentQuestion}`);
try {
if (currentQuestion < questions.length) {
questions[currentQuestion].classList.remove('active');
currentQuestion++;
if (currentQuestion {
option.addEventListener(‘click’, () => {
try {
const element = option.getAttribute(‘data-element’);
scores[element] = (scores[element] || 0) + 1;
option.classList.add(‘selected’);
console.log(`Option selected: ${element}, Score: ${scores[element]}`);
} catch (error) {
console.error(‘Error in option click:’, error);
}
});
});
quiz.addEventListener(‘click’, (event) => {
if (event.target.classList.contains(‘elemquiz-next-button’)) {
nextQuestion();
}
});
resetButton.addEventListener(‘click’, () => {
try {
scores = {};
currentQuestion = 0;
countdownDiv.style.display = ‘none’;
resultDiv.style.display = ‘none’;
resultDiv.classList.remove(‘active’);
questions.forEach((question, index) => {
question.classList.toggle(‘active’, index === 0);
});
document.querySelectorAll(‘.elemquiz-option’).forEach(option => {
option.classList.remove(‘selected’);
});
updateProgress();
console.log(‘Quiz reset’);
} catch (error) {
console.error(‘Error in reset:’, error);
}
});
function startCountdown() {
try {
questions.forEach(question => question.classList.remove(‘active’));
countdownDiv.style.display = ‘block’;
let countdown = 3;
countdownNumber.textContent = countdown;
const interval = setInterval(() => {
countdown–;
countdownNumber.textContent = countdown;
if (countdown maxScore) {
maxScore = scores[element];
winningElement = element;
}
}
if (!winningElement) {
winningElement = ‘Earth’;
}
elementSpan.textContent = winningElement;
descriptionP.textContent = descriptions[winningElement].text;
elementImage.src = descriptions[winningElement].image;
elementImage.alt = `${winningElement} Element`;
currentQuestion++;
updateProgress();
console.log(`Result shown: ${winningElement}`);
} catch (error) {
console.error(‘Error in showResult:’, error);
}
}
function shareTwitter() {
try {
const element = elementSpan.textContent;
const text = `I’m ${element}! Find out which element you are with this fun quiz!`;
const url = ‘
https://atomic-temporary-240405815.wpcomstaging.com/find-out-which-element-you-are-in-minutes/?utm_source=twitter&utm_medium=social&utm_campaign=element_quiz’;
window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`, ‘_blank’);
} catch (error) {
console.error(‘Error in shareTwitter:’, error);
}
}
function shareFacebook() {
try {
const element = elementSpan.textContent;
const url = ‘
https://atomic-temporary-240405815.wpcomstaging.com/find-out-which-element-you-are-in-minutes/?utm_source=facebook&utm_medium=social&utm_campaign=element_quiz’;
window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}”e=${encodeURIComponent(`I’m ${element}! Which element are you?`)}`, ‘_blank’);
} catch (error) {
console.error(‘Error in shareFacebook:’, error);
}
}
function sharePinterest() {
try {
const element = elementSpan.textContent;
const url = ‘
https://atomic-temporary-240405815.wpcomstaging.com/find-out-which-element-you-are-in-minutes/?utm_source=pinterest&utm_medium=social&utm_campaign=element_quiz’;
window.open(`https://pinterest.com/pin/create/button/?url=${encodeURIComponent(url)}&description=${encodeURIComponent(`I’m ${element}! Take this quiz to find out which element you are!`)}`, ‘_blank’);
} catch (error) {
console.error(‘Error in sharePinterest:’, error);
}
}
// Initialize first question
updateProgress();
});
