|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Sam's Birthday - Favorites With Plinko Game Card 📝</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #f0f4f8; |
|
|
} |
|
|
.game-title { |
|
|
color: #3730a3; |
|
|
} |
|
|
.question-card { |
|
|
background-color: #ffffff; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
page-break-inside: avoid; |
|
|
} |
|
|
.question-text-strong { |
|
|
color: #4338ca; |
|
|
} |
|
|
.answer-label { |
|
|
color: #3f3f46; |
|
|
} |
|
|
input[type="text"].answer-input { |
|
|
border: 1px solid #d1d5db; |
|
|
padding: 0.5rem 0.75rem; |
|
|
border-radius: 0.375rem; |
|
|
width: 100%; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
input[type="text"].answer-input:focus { |
|
|
outline: none; |
|
|
border-color: #4f46e5; |
|
|
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3); |
|
|
} |
|
|
.correct-answer-section { |
|
|
background-color: #f0fdf4; |
|
|
border-left: 4px solid #22c55e; |
|
|
padding: 0.5rem 0.75rem; |
|
|
border-radius: 0.25rem; |
|
|
} |
|
|
.correct-answer-text { |
|
|
color: #15803d; |
|
|
} |
|
|
.btn-toggle-answers { |
|
|
background-color: #4f46e5; |
|
|
color: white; |
|
|
transition: background-color 0.3s ease; |
|
|
} |
|
|
.btn-toggle-answers:hover { |
|
|
background-color: #4338ca; |
|
|
} |
|
|
.bonus-prompt-text { |
|
|
color: #6d28d9; |
|
|
} |
|
|
|
|
|
|
|
|
.correct-answer-container.hidden-answers .correct-answer-section { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
|
|
|
@media print { |
|
|
body { |
|
|
background-color: #ffffff; |
|
|
-webkit-print-color-adjust: exact; |
|
|
print-color-adjust: exact; |
|
|
} |
|
|
.btn-toggle-answers, .print-hide { |
|
|
display: none !important; |
|
|
} |
|
|
.question-card { |
|
|
box-shadow: none; |
|
|
border: 1px solid #e5e7eb; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
.correct-answer-section { |
|
|
display: block !important; |
|
|
background-color: #f9fafb !important; |
|
|
border-left: 2px solid #6b7280 !important; |
|
|
padding: 0.25rem 0.5rem; |
|
|
} |
|
|
.correct-answer-text { |
|
|
color: #1f2937 !important; |
|
|
} |
|
|
input[type="text"].answer-input { |
|
|
border-bottom: 1px solid #9ca3af; |
|
|
border-top: none; |
|
|
border-left: none; |
|
|
border-right: none; |
|
|
border-radius: 0; |
|
|
padding-left: 0; |
|
|
padding-right: 0; |
|
|
} |
|
|
input[type="text"].answer-input::placeholder { |
|
|
color: transparent; |
|
|
} |
|
|
.cards-container-grid { |
|
|
grid-template-columns: repeat(1, minmax(0, 1fr)) !important; |
|
|
} |
|
|
.page-container { |
|
|
padding: 0.5in !important; |
|
|
max-width: 100% !important; |
|
|
} |
|
|
.game-title, .footer-text { |
|
|
text-align: center; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="p-4 sm:p-6 md:p-8"> |
|
|
|
|
|
<div id="pageContainer" class="page-container max-w-5xl mx-auto"> |
|
|
<header class="text-center mb-8"> |
|
|
<h1 class="game-title text-3xl sm:text-4xl font-bold">Sam's Birthday - Favorites With Plinko Game Card 📝</h1> |
|
|
<p class="text-gray-600 mt-2">How well do you know Sam? Fill in the answers below!</p> |
|
|
</header> |
|
|
|
|
|
<div class="text-center mb-8 print-hide"> |
|
|
<button id="toggleAnswersBtn" class="btn-toggle-answers py-2 px-6 rounded-lg font-semibold text-lg"> |
|
|
Reveal Answers |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="cardsContainer" class="correct-answer-container hidden-answers cards-container-grid grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<footer class="mt-12 text-center footer-text"> |
|
|
<p class="text-xs text-gray-500">© 2025 Fun Times</p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const gameData = [ |
|
|
{ question: "Name Sam's all time favorite musical group? Hint: Their debut album was in 1986.", answer: "Beastie Boys" }, |
|
|
{ question: "What is Sam's favorite game? Hint: She grew up playing this game with her Grandma.", answer: "Yahtzee" }, |
|
|
{ |
|
|
question: "In her 20's, Sam lived briefly in which two states?", |
|
|
answer: ["California", "Texas"], // Array of parts for multi-input |
|
|
answerLabels: ["First State:", "Second State:"] // Labels for each input |
|
|
}, |
|
|
{ question: "Name Sam's longest Employer. Hint: Close to 20 years employment.", answer: "Metropolitan State University", alternatives: ["MSU"] }, |
|
|
{ |
|
|
question: "Sam holds a BA degree in _____, and Masters degree in _____?", |
|
|
answer: ["BA in English Literature", "Masters in Library Science"], // Array of parts for multi-input |
|
|
answerLabels: ["BA Degree:", "Masters Degree:"] // Labels for each input |
|
|
}, |
|
|
{ question: "What is Sam's biggest fear?", answer: "Spiders" }, |
|
|
{ question: "Name the first National Park that Sam and Aaron travelled to. Hint: It was during COVID.", answer: "Yellowstone National Park", alternatives: ["Yellowstone"] }, |
|
|
{ question: "Sam and her BFF have matching tattoos which is the title of a song. What is the Paul McCartney song?", answer: "Let It Be" }, |
|
|
{ question: "What animal would Sam like to have as an indoor pet?", answer: "A cat", alternatives: ["Cat", "Cats"] }, |
|
|
{ |
|
|
question: "If Sam won $1000 shopping spree at the store of her choice, which store would it be?", |
|
|
answer: "A local bookstore", // Main answer for bonus question |
|
|
alternatives: ["Bookstore", "Local Bookstore", "A bookstore"], |
|
|
bonusPrompt: "Bonus: Why would she choose this store?", |
|
|
bonusAnswer: "To support local business and her love for reading" |
|
|
} |
|
|
]; |
|
|
|
|
|
const cardsContainerEl = document.getElementById('cardsContainer'); |
|
|
const toggleAnswersBtn = document.getElementById('toggleAnswersBtn'); |
|
|
|
|
|
function renderCards() { |
|
|
cardsContainerEl.innerHTML = ''; // Clear existing cards |
|
|
|
|
|
gameData.forEach((item, index) => { |
|
|
const card = document.createElement('div'); |
|
|
card.className = 'question-card p-5 sm:p-6 flex flex-col'; |
|
|
|
|
|
let cardInnerHTML = ''; |
|
|
|
|
|
// Condition for multi-part non-bonus questions (e.g., Q3, Q5) |
|
|
if (Array.isArray(item.answer) && item.answerLabels && !item.bonusPrompt) { |
|
|
cardInnerHTML = ` |
|
|
<div class="flex-grow"> |
|
|
<h3 class="text-lg font-semibold question-text-strong mb-2"> |
|
|
<span class="question-number">${index + 1}.</span> |
|
|
${item.question} |
|
|
</h3> |
|
|
<div class="mb-3 mt-3"> |
|
|
<label for="answer-part1-${index}" class="block text-sm font-medium answer-label mb-1">${item.answerLabels[0]}</label> |
|
|
<input type="text" id="answer-part1-${index}" name="answer-part1-${index}" class="answer-input w-full" placeholder="${item.answerLabels[0].replace(':', '...')}"> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label for="answer-part2-${index}" class="block text-sm font-medium answer-label mb-1">${item.answerLabels[1]}</label> |
|
|
<input type="text" id="answer-part2-${index}" name="answer-part2-${index}" class="answer-input w-full" placeholder="${item.answerLabels[1].replace(':', '...')}"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-auto"> |
|
|
<div class="correct-answer-section mb-2"> |
|
|
<p class="text-xs font-medium text-gray-600">Correct Answer (${item.answerLabels[0].replace(':', '')}):</p> |
|
|
<p class="correct-answer-text font-semibold">${item.answer[0]}</p> |
|
|
</div> |
|
|
<div class="correct-answer-section"> |
|
|
<p class="text-xs font-medium text-gray-600">Correct Answer (${item.answerLabels[1].replace(':', '')}):</p> |
|
|
<p class="correct-answer-text font-semibold">${item.answer[1]}</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
// Condition for bonus questions (e.g., Q10) |
|
|
else if (item.bonusPrompt) { |
|
|
// 'item.answer' is the main answer for the bonus question |
|
|
const mainAnswerForBonusDisplay = item.answer; |
|
|
cardInnerHTML = ` |
|
|
<div class="flex-grow"> |
|
|
<h3 class="text-lg font-semibold question-text-strong mb-2"> |
|
|
<span class="question-number">${index + 1}.</span> |
|
|
${item.question} |
|
|
</h3> |
|
|
<div class="mb-3 mt-3"> |
|
|
<label for="answer-main-${index}" class="block text-sm font-medium answer-label mb-1">Your Answer (Main):</label> |
|
|
<input type="text" id="answer-main-${index}" name="answer-main-${index}" class="answer-input w-full" placeholder="Main answer..."> |
|
|
</div> |
|
|
<p class="text-sm font-semibold bonus-prompt-text mt-4 mb-1">${item.bonusPrompt}</p> |
|
|
<div class="mb-3"> |
|
|
<label for="answer-bonus-${index}" class="block text-sm font-medium answer-label mb-1">Your Answer (Bonus):</label> |
|
|
<input type="text" id="answer-bonus-${index}" name="answer-bonus-${index}" class="answer-input w-full" placeholder="Bonus answer..."> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-auto"> |
|
|
<div class="correct-answer-section mb-2"> |
|
|
<p class="text-xs font-medium text-gray-600">Correct Answer (Main):</p> |
|
|
<p class="correct-answer-text font-semibold">${mainAnswerForBonusDisplay}</p> |
|
|
</div> |
|
|
<div class="correct-answer-section"> |
|
|
<p class="text-xs font-medium text-gray-600">Correct Answer (Bonus):</p> |
|
|
<p class="correct-answer-text font-semibold">${item.bonusAnswer}</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
// Default for single-answer questions |
|
|
else { |
|
|
const singleAnswerDisplay = item.answer; // Assuming item.answer is a string here |
|
|
cardInnerHTML = ` |
|
|
<div class="flex-grow"> |
|
|
<h3 class="text-lg font-semibold question-text-strong mb-2"> |
|
|
<span class="question-number">${index + 1}.</span> |
|
|
${item.question} |
|
|
</h3> |
|
|
<div class="mb-3 mt-3"> |
|
|
<label for="answer-${index}" class="block text-sm font-medium answer-label mb-1">Your Answer:</label> |
|
|
<input type="text" id="answer-${index}" name="answer-${index}" class="answer-input w-full" placeholder="Type your answer here..."> |
|
|
</div> |
|
|
</div> |
|
|
<div class="correct-answer-section mt-auto"> |
|
|
<p class="text-xs font-medium text-gray-600">Correct Answer:</p> |
|
|
<p class="correct-answer-text font-semibold">${singleAnswerDisplay}</p> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
card.innerHTML = cardInnerHTML; |
|
|
cardsContainerEl.appendChild(card); |
|
|
}); |
|
|
} |
|
|
|
|
|
toggleAnswersBtn.addEventListener('click', () => { |
|
|
cardsContainerEl.classList.toggle('hidden-answers'); |
|
|
if (cardsContainerEl.classList.contains('hidden-answers')) { |
|
|
toggleAnswersBtn.textContent = 'Reveal Answers'; |
|
|
} else { |
|
|
toggleAnswersBtn.textContent = 'Hide Answers'; |
|
|
} |
|
|
}); |
|
|
|
|
|
// Initial render of cards |
|
|
renderCards(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
