Spaces:
Running
Running
File size: 11,932 Bytes
9aaecd5 e63b823 9aaecd5 f7a6b12 9aaecd5 577d523 9aaecd5 577d523 9aaecd5 4579841 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 |
<!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; /* Light blue-gray background */
}
.game-title {
color: #3730a3; /* Indigo-800 */
}
.question-card {
background-color: #ffffff;
border-radius: 12px; /* Slightly less rounded */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Tailwind shadow-md */
page-break-inside: avoid; /* Avoid breaking cards across printed pages */
}
.question-text-strong {
color: #4338ca; /* Indigo-700 */
}
.answer-label {
color: #3f3f46; /* Zinc-700 */
}
input[type="text"].answer-input {
border: 1px solid #d1d5db; /* Gray-300 */
padding: 0.5rem 0.75rem; /* p-2 px-3 */
border-radius: 0.375rem; /* rounded-md */
width: 100%;
box-sizing: border-box;
}
input[type="text"].answer-input:focus {
outline: none;
border-color: #4f46e5; /* Indigo-600 */
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
}
.correct-answer-section {
background-color: #f0fdf4; /* Green-50 */
border-left: 4px solid #22c55e; /* Green-500 */
padding: 0.5rem 0.75rem;
border-radius: 0.25rem; /* rounded-sm */
}
.correct-answer-text {
color: #15803d; /* Green-700 */
}
.btn-toggle-answers {
background-color: #4f46e5; /* Indigo-600 */
color: white;
transition: background-color 0.3s ease;
}
.btn-toggle-answers:hover {
background-color: #4338ca; /* Indigo-700 */
}
.bonus-prompt-text {
color: #6d28d9; /* Violet-700 */
}
/* Initially hide answer sections */
.correct-answer-container.hidden-answers .correct-answer-section {
display: none;
}
/* Print-specific styles */
@media print {
body {
background-color: #ffffff; /* White background for printing */
-webkit-print-color-adjust: exact; /* Ensures colors print in Chrome/Safari */
print-color-adjust: exact; /* Standard */
}
.btn-toggle-answers, .print-hide {
display: none !important; /* Hide buttons and other non-print elements */
}
.question-card {
box-shadow: none; /* Remove shadow for printing */
border: 1px solid #e5e7eb; /* Light border for cards */
margin-bottom: 1rem; /* Space between cards on print */
}
.correct-answer-section {
display: block !important; /* Always show answers when printing */
background-color: #f9fafb !important; /* Lighter bg for print */
border-left: 2px solid #6b7280 !important; /* Gray border for print */
padding: 0.25rem 0.5rem;
}
.correct-answer-text {
color: #1f2937 !important; /* Darker text for print */
}
input[type="text"].answer-input {
border-bottom: 1px solid #9ca3af; /* Underline style for print */
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; /* Hide placeholder on print */
}
.cards-container-grid {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important; /* Single column for print */
}
.page-container {
padding: 0.5in !important; /* Adjust print margins */
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 Favorites Challenge!</h1> <!-- Emoji removed from title -->
<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">
<!-- Question cards will be injected here by JavaScript -->
</div>
<footer class="mt-12 text-center footer-text">
<p class="text-xs text-gray-500">© 2025 Fun Times</p> <!-- Emoji removed from footer -->
</footer>
</div>
<script>
const gameData = [
// emoji property removed from all objects
{ 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 and Texas", alternatives: ["CA and TX"] },
{ 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 and Masters in Library Science", alternatives: ["English Literature and Library Science", "English Lit and Library Science", "BA English Literature Masters Library Science"] },
{ 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", 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 mainAnswerHTML = '';
if (Array.isArray(item.answer)) {
mainAnswerHTML = item.answer.join(' / ');
} else {
mainAnswerHTML = item.answer;
}
// Emoji span removed from this template literal
let 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">${mainAnswerHTML}</p>
</div>
`;
if (item.bonusPrompt) {
// Emoji span removed from this template literal as well
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">${mainAnswerHTML}</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>
`;
}
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>
|