Spaces:

awacke1
/

SamsTopTenQuiz

Running

File size: 14,468 Bytes

c5f830b

<!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 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">
            <!-- Question cards will be injected here by JavaScript -->
        </div>

        <footer class="mt-12 text-center footer-text">
            <p class="text-xs text-gray-500">&copy; 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>