Spaces:
Running
Running
| <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 ; /* 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 ; /* Always show answers when printing */ | |
| background-color: #f9fafb ; /* Lighter bg for print */ | |
| border-left: 2px solid #6b7280 ; /* Gray border for print */ | |
| padding: 0.25rem 0.5rem; | |
| } | |
| .correct-answer-text { | |
| color: #1f2937 ; /* 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)) ; /* Single column for print */ | |
| } | |
| .page-container { | |
| padding: 0.5in ; /* Adjust print margins */ | |
| max-width: 100% ; | |
| } | |
| .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> | |