Hugging Face's logo

Spaces:
awacke1
/
SamsTopTenQuiz
Running

App Files Community
awacke1 commited on
Commit
c5f830b
·
verified ·
1 Parent(s): b0f0c57

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +278 -0
index.html ADDED
@@ -0,0 +1,278 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sam's Birthday - Favorites With Plinko Game Card 📝</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ font-family: 'Inter', sans-serif;
12
+ background-color: #f0f4f8; /* Light blue-gray background */
13
+ }
14
+ .game-title {
15
+ color: #3730a3; /* Indigo-800 */
16
+ }
17
+ .question-card {
18
+ background-color: #ffffff;
19
+ border-radius: 12px; /* Slightly less rounded */
20
+ 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 */
21
+ page-break-inside: avoid; /* Avoid breaking cards across printed pages */
22
+ }
23
+ .question-text-strong {
24
+ color: #4338ca; /* Indigo-700 */
25
+ }
26
+ .answer-label {
27
+ color: #3f3f46; /* Zinc-700 */
28
+ }
29
+ input[type="text"].answer-input {
30
+ border: 1px solid #d1d5db; /* Gray-300 */
31
+ padding: 0.5rem 0.75rem; /* p-2 px-3 */
32
+ border-radius: 0.375rem; /* rounded-md */
33
+ width: 100%;
34
+ box-sizing: border-box;
35
+ }
36
+ input[type="text"].answer-input:focus {
37
+ outline: none;
38
+ border-color: #4f46e5; /* Indigo-600 */
39
+ box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
40
+ }
41
+ .correct-answer-section {
42
+ background-color: #f0fdf4; /* Green-50 */
43
+ border-left: 4px solid #22c55e; /* Green-500 */
44
+ padding: 0.5rem 0.75rem;
45
+ border-radius: 0.25rem; /* rounded-sm */
46
+ }
47
+ .correct-answer-text {
48
+ color: #15803d; /* Green-700 */
49
+ }
50
+ .btn-toggle-answers {
51
+ background-color: #4f46e5; /* Indigo-600 */
52
+ color: white;
53
+ transition: background-color 0.3s ease;
54
+ }
55
+ .btn-toggle-answers:hover {
56
+ background-color: #4338ca; /* Indigo-700 */
57
+ }
58
+ .bonus-prompt-text {
59
+ color: #6d28d9; /* Violet-700 */
60
+ }
61
+
62
+ /* Initially hide answer sections */
63
+ .correct-answer-container.hidden-answers .correct-answer-section {
64
+ display: none;
65
+ }
66
+
67
+ /* Print-specific styles */
68
+ @media print {
69
+ body {
70
+ background-color: #ffffff; /* White background for printing */
71
+ -webkit-print-color-adjust: exact; /* Ensures colors print in Chrome/Safari */
72
+ print-color-adjust: exact; /* Standard */
73
+ }
74
+ .btn-toggle-answers, .print-hide {
75
+ display: none !important; /* Hide buttons and other non-print elements */
76
+ }
77
+ .question-card {
78
+ box-shadow: none; /* Remove shadow for printing */
79
+ border: 1px solid #e5e7eb; /* Light border for cards */
80
+ margin-bottom: 1rem; /* Space between cards on print */
81
+ }
82
+ .correct-answer-section {
83
+ display: block !important; /* Always show answers when printing */
84
+ background-color: #f9fafb !important; /* Lighter bg for print */
85
+ border-left: 2px solid #6b7280 !important; /* Gray border for print */
86
+ padding: 0.25rem 0.5rem;
87
+ }
88
+ .correct-answer-text {
89
+ color: #1f2937 !important; /* Darker text for print */
90
+ }
91
+ input[type="text"].answer-input {
92
+ border-bottom: 1px solid #9ca3af; /* Underline style for print */
93
+ border-top: none;
94
+ border-left: none;
95
+ border-right: none;
96
+ border-radius: 0;
97
+ padding-left: 0;
98
+ padding-right: 0;
99
+ }
100
+ input[type="text"].answer-input::placeholder {
101
+ color: transparent; /* Hide placeholder on print */
102
+ }
103
+ .cards-container-grid {
104
+ grid-template-columns: repeat(1, minmax(0, 1fr)) !important; /* Single column for print */
105
+ }
106
+ .page-container {
107
+ padding: 0.5in !important; /* Adjust print margins */
108
+ max-width: 100% !important;
109
+ }
110
+ .game-title, .footer-text {
111
+ text-align: center;
112
+ }
113
+ }
114
+ </style>
115
+ </head>
116
+ <body class="p-4 sm:p-6 md:p-8">
117
+
118
+ <div id="pageContainer" class="page-container max-w-5xl mx-auto">
119
+ <header class="text-center mb-8">
120
+ <h1 class="game-title text-3xl sm:text-4xl font-bold">Sam's Birthday - Favorites With Plinko Game Card 📝</h1>
121
+ <p class="text-gray-600 mt-2">How well do you know Sam? Fill in the answers below!</p>
122
+ </header>
123
+
124
+ <div class="text-center mb-8 print-hide">
125
+ <button id="toggleAnswersBtn" class="btn-toggle-answers py-2 px-6 rounded-lg font-semibold text-lg">
126
+ Reveal Answers
127
+ </button>
128
+ </div>
129
+
130
+ <div id="cardsContainer" class="correct-answer-container hidden-answers cards-container-grid grid grid-cols-1 md:grid-cols-2 gap-6">
131
+ <!-- Question cards will be injected here by JavaScript -->
132
+ </div>
133
+
134
+ <footer class="mt-12 text-center footer-text">
135
+ <p class="text-xs text-gray-500">&copy; 2025 Fun Times</p>
136
+ </footer>
137
+ </div>
138
+
139
+ <script>
140
+ const gameData = [
141
+ { question: "Name Sam's all time favorite musical group? Hint: Their debut album was in 1986.", answer: "Beastie Boys" },
142
+ { question: "What is Sam's favorite game? Hint: She grew up playing this game with her Grandma.", answer: "Yahtzee" },
143
+ {
144
+ question: "In her 20's, Sam lived briefly in which two states?",
145
+ answer: ["California", "Texas"], // Array of parts for multi-input
146
+ answerLabels: ["First State:", "Second State:"] // Labels for each input
147
+ },
148
+ { question: "Name Sam's longest Employer. Hint: Close to 20 years employment.", answer: "Metropolitan State University", alternatives: ["MSU"] },
149
+ {
150
+ question: "Sam holds a BA degree in _____, and Masters degree in _____?",
151
+ answer: ["BA in English Literature", "Masters in Library Science"], // Array of parts for multi-input
152
+ answerLabels: ["BA Degree:", "Masters Degree:"] // Labels for each input
153
+ },
154
+ { question: "What is Sam's biggest fear?", answer: "Spiders" },
155
+ { question: "Name the first National Park that Sam and Aaron travelled to. Hint: It was during COVID.", answer: "Yellowstone National Park", alternatives: ["Yellowstone"] },
156
+ { 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" },
157
+ { question: "What animal would Sam like to have as an indoor pet?", answer: "A cat", alternatives: ["Cat", "Cats"] },
158
+ {
159
+ question: "If Sam won $1000 shopping spree at the store of her choice, which store would it be?",
160
+ answer: "A local bookstore", // Main answer for bonus question
161
+ alternatives: ["Bookstore", "Local Bookstore", "A bookstore"],
162
+ bonusPrompt: "Bonus: Why would she choose this store?",
163
+ bonusAnswer: "To support local business and her love for reading"
164
+ }
165
+ ];
166
+
167
+ const cardsContainerEl = document.getElementById('cardsContainer');
168
+ const toggleAnswersBtn = document.getElementById('toggleAnswersBtn');
169
+
170
+ function renderCards() {
171
+ cardsContainerEl.innerHTML = ''; // Clear existing cards
172
+
173
+ gameData.forEach((item, index) => {
174
+ const card = document.createElement('div');
175
+ card.className = 'question-card p-5 sm:p-6 flex flex-col';
176
+
177
+ let cardInnerHTML = '';
178
+
179
+ // Condition for multi-part non-bonus questions (e.g., Q3, Q5)
180
+ if (Array.isArray(item.answer) && item.answerLabels && !item.bonusPrompt) {
181
+ cardInnerHTML = `
182
+ <div class="flex-grow">
183
+ <h3 class="text-lg font-semibold question-text-strong mb-2">
184
+ <span class="question-number">${index + 1}.</span>
185
+ ${item.question}
186
+ </h3>
187
+ <div class="mb-3 mt-3">
188
+ <label for="answer-part1-${index}" class="block text-sm font-medium answer-label mb-1">${item.answerLabels[0]}</label>
189
+ <input type="text" id="answer-part1-${index}" name="answer-part1-${index}" class="answer-input w-full" placeholder="${item.answerLabels[0].replace(':', '...')}">
190
+ </div>
191
+ <div class="mb-3">
192
+ <label for="answer-part2-${index}" class="block text-sm font-medium answer-label mb-1">${item.answerLabels[1]}</label>
193
+ <input type="text" id="answer-part2-${index}" name="answer-part2-${index}" class="answer-input w-full" placeholder="${item.answerLabels[1].replace(':', '...')}">
194
+ </div>
195
+ </div>
196
+ <div class="mt-auto">
197
+ <div class="correct-answer-section mb-2">
198
+ <p class="text-xs font-medium text-gray-600">Correct Answer (${item.answerLabels[0].replace(':', '')}):</p>
199
+ <p class="correct-answer-text font-semibold">${item.answer[0]}</p>
200
+ </div>
201
+ <div class="correct-answer-section">
202
+ <p class="text-xs font-medium text-gray-600">Correct Answer (${item.answerLabels[1].replace(':', '')}):</p>
203
+ <p class="correct-answer-text font-semibold">${item.answer[1]}</p>
204
+ </div>
205
+ </div>
206
+ `;
207
+ }
208
+ // Condition for bonus questions (e.g., Q10)
209
+ else if (item.bonusPrompt) {
210
+ // 'item.answer' is the main answer for the bonus question
211
+ const mainAnswerForBonusDisplay = item.answer;
212
+ cardInnerHTML = `
213
+ <div class="flex-grow">
214
+ <h3 class="text-lg font-semibold question-text-strong mb-2">
215
+ <span class="question-number">${index + 1}.</span>
216
+ ${item.question}
217
+ </h3>
218
+ <div class="mb-3 mt-3">
219
+ <label for="answer-main-${index}" class="block text-sm font-medium answer-label mb-1">Your Answer (Main):</label>
220
+ <input type="text" id="answer-main-${index}" name="answer-main-${index}" class="answer-input w-full" placeholder="Main answer...">
221
+ </div>
222
+ <p class="text-sm font-semibold bonus-prompt-text mt-4 mb-1">${item.bonusPrompt}</p>
223
+ <div class="mb-3">
224
+ <label for="answer-bonus-${index}" class="block text-sm font-medium answer-label mb-1">Your Answer (Bonus):</label>
225
+ <input type="text" id="answer-bonus-${index}" name="answer-bonus-${index}" class="answer-input w-full" placeholder="Bonus answer...">
226
+ </div>
227
+ </div>
228
+ <div class="mt-auto">
229
+ <div class="correct-answer-section mb-2">
230
+ <p class="text-xs font-medium text-gray-600">Correct Answer (Main):</p>
231
+ <p class="correct-answer-text font-semibold">${mainAnswerForBonusDisplay}</p>
232
+ </div>
233
+ <div class="correct-answer-section">
234
+ <p class="text-xs font-medium text-gray-600">Correct Answer (Bonus):</p>
235
+ <p class="correct-answer-text font-semibold">${item.bonusAnswer}</p>
236
+ </div>
237
+ </div>
238
+ `;
239
+ }
240
+ // Default for single-answer questions
241
+ else {
242
+ const singleAnswerDisplay = item.answer; // Assuming item.answer is a string here
243
+ cardInnerHTML = `
244
+ <div class="flex-grow">
245
+ <h3 class="text-lg font-semibold question-text-strong mb-2">
246
+ <span class="question-number">${index + 1}.</span>
247
+ ${item.question}
248
+ </h3>
249
+ <div class="mb-3 mt-3">
250
+ <label for="answer-${index}" class="block text-sm font-medium answer-label mb-1">Your Answer:</label>
251
+ <input type="text" id="answer-${index}" name="answer-${index}" class="answer-input w-full" placeholder="Type your answer here...">
252
+ </div>
253
+ </div>
254
+ <div class="correct-answer-section mt-auto">
255
+ <p class="text-xs font-medium text-gray-600">Correct Answer:</p>
256
+ <p class="correct-answer-text font-semibold">${singleAnswerDisplay}</p>
257
+ </div>
258
+ `;
259
+ }
260
+ card.innerHTML = cardInnerHTML;
261
+ cardsContainerEl.appendChild(card);
262
+ });
263
+ }
264
+
265
+ toggleAnswersBtn.addEventListener('click', () => {
266
+ cardsContainerEl.classList.toggle('hidden-answers');
267
+ if (cardsContainerEl.classList.contains('hidden-answers')) {
268
+ toggleAnswersBtn.textContent = 'Reveal Answers';
269
+ } else {
270
+ toggleAnswersBtn.textContent = 'Hide Answers';
271
+ }
272
+ });
273
+
274
+ // Initial render of cards
275
+ renderCards();
276
+ </script>
277
+ </body>
278
+ </html>