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();

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();

body { font-family: 'Georgia', serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #333; line-height: 1.6; }