Tarot Trivia Game

Loading your destiny...




Next Question
Score: 0




#tarot-game-container {
font-family: 'Georgia', serif;
max-width: 500px;
margin: 40px auto;
padding: 20px;
background: #1a1a2e;
color: #e94560;
border: 2px solid #950740;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
#question-text { font-size: 1.4rem; margin-bottom: 20px; color: #fff; }
.option-btn {
display: block;
width: 100%;
padding: 12px;
margin: 10px 0;
background: transparent;
border: 1px solid #e94560;
color: #e94560;
cursor: pointer;
border-radius: 5px;
transition: 0.3s;
}
.option-btn:hover { background: #e94560; color: #fff; }
.correct { background: #2ecc71 !important; color: white !important; border-color: #2ecc71; }
.wrong { background: #e74c3c !important; color: white !important; border-color: #e74c3c; }
#feedback { margin: 15px 0; font-style: italic; color: #fff; }
#next-btn {
background: #fff;
color: #1a1a2e;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
}
.hidden { display: none; }
#score-board { margin-top: 20px; font-size: 0.9rem; opacity: 0.8; }


const quizData = [
{
q: "Who was the artist of the iconic Rider-Waite-Smith deck?",
a: ["Pamela Colman Smith", "Aleister Crowley", "Salvador Dalí"],
correct: 0,
fact: "Pamela Colman Smith was an illustrator who was paid a flat fee and went largely uncredited for her work for decades!"
},
{
q: "What was the original 15th-century name for Tarot?",
a: ["The Oracle", "Tarocchi", "Arcana"],
correct: 1,
fact: "Before it was used for divination, 'Tarocchi' was simply a popular trick-taking card game in Italy."
},
{
q: "The 'Fool' card is numbered what in the Major Arcana?",
a: ["1", "22", "0"],
correct: 2,
fact: "The 0 represents infinite potential and the start of a journey where anything is possible."
}
];
let currentQ = 0;
let score = 0;
const qText = document.getElementById('question-text');
const optContainer = document.getElementById('options-container');
const feedback = document.getElementById('feedback');
const nextBtn = document.getElementById('next-btn');
const scoreDisplay = document.getElementById('current-score');
function loadQuestion() {
const data = quizData[currentQ];
qText.innerText = data.q;
optContainer.innerHTML = '';
feedback.classList.add('hidden');
nextBtn.classList.add('hidden');
data.a.forEach((opt, index) => {
const btn = document.createElement('button');
btn.innerText = opt;
btn.classList.add('option-btn');
btn.onclick = () => checkAnswer(index);
optContainer.appendChild(btn);
});
}
function checkAnswer(index) {
const buttons = document.querySelectorAll('.option-btn');
const correctIdx = quizData[currentQ].correct;
buttons.forEach(b => b.disabled = true);
if(index === correctIdx) {
buttons[index].classList.add('correct');
score++;
scoreDisplay.innerText = score;
} else {
buttons[index].classList.add('wrong');
buttons[correctIdx].classList.add('correct');
}
feedback.innerText = quizData[currentQ].fact;
feedback.classList.remove('hidden');
nextBtn.classList.remove('hidden');
}
nextBtn.onclick = () => {
currentQ++;
if(currentQ < quizData.length) {
loadQuestion();
} else {
qText.innerText = `The reading is complete! Your Final Score: ${score}/${quizData.length}`;
optContainer.innerHTML = '';
feedback.innerText = "Thanks for playing our Tarot Trivia!";
nextBtn.classList.add('hidden');
}
};
loadQuestion();


https://designbohemian.com/blogs/news/tarot-trivia-game?utm_source=dlvr.it&utm_medium=blogger