<!--
This is the complete code for the Bible Trivia Jeopardy game.
You can copy and paste this entire block into a single "Code Block"
on your Squarespace site.
The code is divided into three sections:
1. HTML Structure: The main layout of the game.
2. CSS Styling: The visual design, which uses Tailwind CSS for a modern look.
3. JavaScript Logic: The interactive part that handles showing/hiding questions and answers.
Feel free to edit the 'questions' array in the JavaScript section to customize the trivia!
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bible Trivia Jeopardy</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Use Inter font -->
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #121212;
}
/* Basic container styling to ensure it looks good on any page */
#game-container {
width: 100%;
max-width: 960px;
margin: auto;
}
</style>
</head>
<body class="bg-gray-900 text-white flex items-center justify-center min-h-screen p-4">
<div id="game-container" class="w-full max-w-4xl bg-gray-800 rounded-lg shadow-2xl p-6 md:p-10 flex flex-col items-center">
<!-- Start Screen -->
<div id="start-screen" class="text-center">
<h1 class="text-4xl md:text-6xl font-extrabold mb-4 text-yellow-400">Bible Trivia Jeopardy!</h1>
<p class="text-lg md:text-xl text-gray-300 mb-8">Click the button to begin your challenge and test your knowledge of the scriptures.</p>
<button id="start-button" class="px-8 py-4 bg-yellow-600 hover:bg-yellow-700 text-white font-bold text-xl md:text-2xl rounded-full transition duration-300 ease-in-out transform hover:scale-105 shadow-lg focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:ring-opacity-50">
Start Game
</button>
</div>
<!-- Slides Container -->
<div id="slides-container" class="hidden w-full h-full flex flex-col items-center justify-between">
<!-- Trivia Question -->
<div class="text-center mb-8">
<h2 id="category" class="text-2xl md:text-3xl font-semibold text-yellow-400 mb-2"></h2>
<h3 id="points" class="text-xl md:text-2xl font-medium text-gray-300 mb-6"></h3>
<p id="question" class="text-3xl md:text-5xl font-bold text-center"></p>
<!-- Answer initially hidden -->
<p id="answer" class="text-xl md:text-3xl font-medium text-green-400 mt-8 hidden"></p>
</div>
<!-- Control Buttons -->
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 w-full justify-center">
<button id="reveal-button" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50">
Reveal Answer
</button>
<button id="next-button" class="px-6 py-3 bg-gray-600 hover:bg-gray-700 text-white font-semibold rounded-full transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-50 hidden">
Next Question
</button>
<button id="end-game-button" class="px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-full transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-red-500 focus:ring-opacity-50 hidden">
End Game
</button>
</div>
</div>
<!-- End Screen -->
<div id="end-screen" class="hidden text-center">
<h2 class="text-4xl md:text-6xl font-extrabold mb-4 text-green-400">Game Over!</h2>
<p class="text-lg md:text-xl text-gray-300 mb-8">Thanks for playing Bible Trivia Jeopardy.</p>
<button id="restart-button" class="px-8 py-4 bg-yellow-600 hover:bg-yellow-700 text-white font-bold text-xl md:text-2xl rounded-full transition duration-300 ease-in-out transform hover:scale-105 shadow-lg focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:ring-opacity-50">
Play Again
</button>
</div>
</div>
<script>
// Data for the trivia questions and answers
const questions = [
// Old Testament Giants
{ category: "Old Testament Giants", points: "$200", question: "This giant Philistine warrior, famously defeated by a young shepherd with a sling, stood over nine feet tall.", answer: "Who is Goliath?" },
{ category: "Old Testament Giants", points: "$400", question: "Besides Goliath, this man was another of the four sons of the giant who were killed by David's mighty men. He was known for having twelve fingers and twelve toes.", answer: "Who is the man with six fingers and six toes? (The answer is an unnamed descendant of the giant in 2 Samuel 21:20)" },
{ category: "Old Testament Giants", points: "$600", question: "This king of Bashan was said to have a bed that was over thirteen feet long, suggesting he was a man of great size. His defeat is recorded in the book of Deuteronomy.", answer: "Who is Og?" },
{ category: "Old Testament Giants", points: "$800", question: "While not a giant himself, this man was the father of the giants mentioned in 2 Samuel 21, often referred to as 'the father of the giants.'", answer: "Who is the giant Ishbi-Benob?" },
{ category: "Old Testament Giants", points: "$1000", question: "The 'Nephilim' are mentioned in Genesis 6 and are often translated as 'giants.' This is the Hebrew word that literally means 'the fallen ones.'", answer: "What is Nephilim?" },
// Miracles of Jesus
{ category: "Miracles of Jesus", points: "$200", question: "Jesus's first recorded miracle took place at this wedding, where he turned water into wine.", answer: "What is the wedding at Cana?" },
{ category: "Miracles of Jesus", points: "$400", question: "This woman, who had been suffering from a bleeding disorder for twelve years, was instantly healed simply by touching the hem of Jesus's garment.", answer: "Who is the woman with the issue of blood?" },
{ category: "Miracles of Jesus", points: "$600", question: "In the city of Bethsaida, Jesus used just five loaves of bread and two fish to feed this many people.", answer: "What is five thousand men, not counting women and children?" },
{ category: "Miracles of Jesus", points: "$800", question: "After spending three days in the tomb, Jesus raised this man from the dead, despite his sister Martha's concern that 'by this time there is a bad odor.'", answer: "Who is Lazarus?" },
{ category: "Miracles of Jesus", points: "$1000", question: "This miracle, performed on the Sea of Galilee, demonstrated Jesus's authority over nature and caused his disciples to wonder, 'What kind of man is this?'", answer: "What is calming the storm?" },
// Women of the Bible
{ category: "Women of the Bible", points: "$200", question: "She was the first woman, created from the rib of Adam.", answer: "Who is Eve?" },
{ category: "Women of the Bible", points: "$400", question: "Known for her unwavering loyalty to her mother-in-law, Naomi, this woman famously said, 'Where you go I will go, and where you stay I will stay.'", answer: "Who is Ruth?" },
{ category: "Women of the Bible", points: "$600", question: "This queen of Persia courageously approached the king to save her people from the evil plot of Haman.", answer: "Who is Esther?" },
{ category: "Women of the Bible", points: "$800", question: "This prophetess and judge of Israel led her people to victory against the Canaanite army of Sisera.", answer: "Who is Deborah?" },
{ category: "Women of the Bible", points: "$1000", question: "In the New Testament, this woman was the first to see the risen Christ after his resurrection.", answer: "Who is Mary Magdalene?" },
// The Apostle Paul's Journeys
{ category: "The Apostle Paul's Journeys", points: "$200", question: "Before his conversion, Paul was a Pharisee named this.", answer: "Who is Saul of Tarsus?" },
{ category: "The Apostle Paul's Journeys", points: "$400", question: "Paul's famous 'Road to Damascus' conversion experience took place on his way to this city.", answer: "What is Damascus?" },
{ category: "The Apostle Paul's Journeys", points: "$600", question: "After a shipwreck on his way to Rome, Paul and his companions landed on this island, where he was bitten by a viper but suffered no ill effects.", answer: "What is Malta?" },
{ category: "The Apostle Paul's Journeys", points: "$800", question: "This is the city where Paul was a tentmaker, and where he met Priscilla and Aquila.", answer: "What is Corinth?" },
{ category: "The Apostle Paul's Journeys", points: "$1000", question: "Paul's third missionary journey is said to have lasted approximately this many years.", answer: "What is three years?" },
// The Books of the Bible
{ category: "The Books of the Bible", points: "$200", question: "This is the first book of the New Testament.", answer: "What is Matthew?" },
{ category: "The Books of the Bible", points: "$400", question: "This is the shortest book in the Bible, with only one chapter.", answer: "What is Obadiah?" },
{ category: "The Books of the Bible", points: "$600", question: "This book, named after a prophet, is the longest prophetic book in the Old Testament.", answer: "What is Jeremiah?" },
{ category: "The Books of the Bible", points: "$800", question: "This is the only book of the Bible that does not mention God's name, Yahweh, even once.", answer: "What is Esther?" },
{ category: "The Books of the Bible", points: "$1000", question: "This is the only book in the Bible that is a letter written by a woman to a woman.", answer: "What is 2 John?" }
];
let currentQuestionIndex = 0;
const startScreen = document.getElementById('start-screen');
const startButton = document.getElementById('start-button');
const slidesContainer = document.getElementById('slides-container');
const categoryElement = document.getElementById('category');
const pointsElement = document.getElementById('points');
const questionElement = document.getElementById('question');
const answerElement = document.getElementById('answer');
const revealButton = document.getElementById('reveal-button');
const nextButton = document.getElementById('next-button');
const endGameButton = document.getElementById('end-game-button');
const endScreen = document.getElementById('end-screen');
const restartButton = document.getElementById('restart-button');
function showQuestion() {
if (currentQuestionIndex < questions.length) {
const q = questions[currentQuestionIndex];
categoryElement.textContent = q.category;
pointsElement.textContent = q.points;
questionElement.textContent = q.question;
answerElement.textContent = q.answer;
answerElement.classList.add('hidden');
revealButton.classList.remove('hidden');
nextButton.classList.add('hidden');
endGameButton.classList.add('hidden');
} else {
showEndScreen();
}
}
function showEndScreen() {
slidesContainer.classList.add('hidden');
endScreen.classList.remove('hidden');
}
function revealAnswer() {
answerElement.classList.remove('hidden');
revealButton.classList.add('hidden');
if (currentQuestionIndex < questions.length - 1) {
nextButton.classList.remove('hidden');
} else {
endGameButton.classList.remove('hidden');
}
}
function nextQuestion() {
currentQuestionIndex++;
showQuestion();
}
function startGame() {
startScreen.classList.add('hidden');
slidesContainer.classList.remove('hidden');
currentQuestionIndex = 0;
showQuestion();
}
function restartGame() {
endScreen.classList.add('hidden');
startGame();
}
startButton.addEventListener('click', startGame);
revealButton.addEventListener('click', revealAnswer);
nextButton.addEventListener('click', nextQuestion);
endGameButton.addEventListener('click', showEndScreen);
restartButton.addEventListener('click', restartGame);
// This is important for Squarespace to properly load the script
window.onload = function() {
// The initial setup is already handled by the DOM structure and event listeners
// but this ensures any dynamic content loads correctly.
};
</script>
</body>
</html>
