Hugging Face's logo

Spaces:
saurabh2086
/
SG_P2_Math_Volume_3
Running

App Files Community
saurabh2086 commited on
Commit
47c1b72
·
verified ·
1 Parent(s): 29b1d49

revert changes

Browse files
Files changed (1) hide show
  1. index.html +25 -33
index.html CHANGED
@@ -15,36 +15,31 @@
15
  </style>
16
  </head>
17
  <body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
18
- <!-- Reduced padding on main container -->
19
- <div class="container mx-auto p-4 max-w-6xl bg-white rounded-2xl shadow-lg">
20
 
21
- <!-- Reduced margins and font size -->
22
- <header class="text-center mb-4">
23
- <h1 class="text-3xl sm:text-4xl font-bold text-blue-600">Volume Voyagers</h1>
24
- <p class="text-gray-500 mt-1">The water amount might trick your eyes! Count the glasses.</p>
25
  </header>
26
 
27
- <!-- Reduced top margin and vertical spacing -->
28
- <main class="space-y-4 mt-6">
29
- <!-- Reduced min-height and padding -->
30
- <div id="problem-display" class="grid grid-cols-1 md:grid-cols-3 gap-4 bg-blue-50 p-4 rounded-xl border border-blue-200 min-h-[320px] items-end">
 
31
  <!-- Problem will be rendered here -->
32
  </div>
33
 
34
- <!-- Reduced padding -->
35
- <div id="questions-container" class="bg-green-50 p-4 rounded-xl border border-green-200">
36
- <!-- Reduced margins -->
37
- <div id="questions-area" class="space-y-4 mb-4">
38
  <!-- Questions will be rendered here -->
39
  </div>
40
- <div class="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-4">
41
- <!-- Reduced button padding -->
42
- <button id="check-btn" class="w-full sm:w-auto bg-green-500 text-white font-bold py-2 px-6 rounded-lg shadow-md hover:bg-green-600 transition-transform transform hover:scale-105">Check Answers</button>
43
- <button id="new-question-btn" class="w-full sm:w-auto bg-purple-500 text-white font-bold py-2 px-6 rounded-lg shadow-md hover:bg-purple-600 transition-transform transform hover:scale-105">New Question</button>
44
  </div>
45
  </div>
46
- <!-- Reduced height and font size -->
47
- <div id="feedback-area" class="h-12 flex items-center justify-center text-xl font-bold transition-all duration-300"></div>
48
  </main>
49
  </div>
50
 
@@ -61,7 +56,7 @@
61
  userAnswers: {}
62
  };
63
 
64
- const glassSVG = `<svg viewBox="0 0 20 30" class="w-5 h-8" fill="#a5f3fc"><path d="M1,0 H19 L17,30 H3 L1,0 Z"></path></svg>`;
65
 
66
  const containerSVGs = {
67
  beaker: {
@@ -159,14 +154,13 @@
159
 
160
  const widthClass = container.type === 'wideBowl' ? 'w-64' : 'w-32';
161
 
162
- // Reduced font sizes, heights, and margins
163
  const itemHTML = `
164
- <div class="flex flex-col items-center text-center p-1">
165
- <p class="text-lg font-bold text-gray-600 mb-1">${container.value} Glasses</p>
166
- <div class="flex flex-wrap justify-center gap-1 min-h-[50px] mb-1">${glassesHTML}</div>
167
- <div class="text-2xl text-blue-500 font-bold">&darr;</div>
168
- <div class="${widthClass} h-28 mb-2 flex items-center justify-center">${containerHTML}</div>
169
- <p class="text-xl font-bold text-purple-700">Container ${container.name}</p>
170
  </div>
171
  `;
172
  problemDisplay.innerHTML += itemHTML;
@@ -188,18 +182,16 @@
188
 
189
  questionTemplates.forEach((q, index) => {
190
  gameState.questions.push({ id: `q${index}`, correctAnswer: q.answer });
191
- // Reduced button padding
192
  const optionsHTML = gameState.problemData.map(c => `
193
  <button data-question-id="q${index}" data-value="${c.name}"
194
- class="answer-btn bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded-lg transition-colors">
195
  ${c.name}
196
  </button>
197
  `).join('');
198
 
199
- // Reduced font size and margins
200
  const questionHTML = `
201
- <div class="flex flex-col sm:flex-row items-center justify-center text-base sm:text-lg space-y-2 sm:space-y-0">
202
- <p class="text-gray-700 mr-3 text-center">${q.text}</p>
203
  <div class="flex space-x-2">
204
  ${optionsHTML}
205
  </div>
 
15
  </style>
16
  </head>
17
  <body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
18
+ <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-6xl bg-white rounded-2xl shadow-lg">
 
19
 
20
+ <header class="text-center mb-6">
21
+ <h1 class="text-4xl sm:text-5xl font-bold text-blue-600">Volume Voyagers</h1>
22
+ <p class="text-gray-500 mt-2">The water amount might trick your eyes! Count the glasses.</p>
 
23
  </header>
24
 
25
+ <!-- Difficulty controls removed -->
26
+
27
+ <main class="space-y-8 mt-12">
28
+ <!-- Aligned containers and set a consistent grid for 3 items -->
29
+ <div id="problem-display" class="grid grid-cols-1 md:grid-cols-3 gap-6 bg-blue-50 p-6 rounded-xl border border-blue-200 min-h-[420px] items-end">
30
  <!-- Problem will be rendered here -->
31
  </div>
32
 
33
+ <div id="questions-container" class="bg-green-50 p-6 rounded-xl border border-green-200">
34
+ <div id="questions-area" class="space-y-6 mb-6">
 
 
35
  <!-- Questions will be rendered here -->
36
  </div>
37
+ <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
38
+ <button id="check-btn" class="w-full sm:w-auto bg-green-500 text-white font-bold py-3 px-8 rounded-lg shadow-md hover:bg-green-600 transition-transform transform hover:scale-105">Check Answers</button>
39
+ <button id="new-question-btn" class="w-full sm:w-auto bg-purple-500 text-white font-bold py-3 px-8 rounded-lg shadow-md hover:bg-purple-600 transition-transform transform hover:scale-105">New Question</button>
 
40
  </div>
41
  </div>
42
+ <div id="feedback-area" class="h-16 flex items-center justify-center text-2xl font-bold transition-all duration-300"></div>
 
43
  </main>
44
  </div>
45
 
 
56
  userAnswers: {}
57
  };
58
 
59
+ const glassSVG = `<svg viewBox="0 0 20 30" class="w-6 h-9" fill="#a5f3fc"><path d="M1,0 H19 L17,30 H3 L1,0 Z"></path></svg>`;
60
 
61
  const containerSVGs = {
62
  beaker: {
 
154
 
155
  const widthClass = container.type === 'wideBowl' ? 'w-64' : 'w-32';
156
 
 
157
  const itemHTML = `
158
+ <div class="flex flex-col items-center text-center p-2">
159
+ <p class="text-xl font-bold text-gray-600 mb-2">${container.value} Glasses</p>
160
+ <div class="flex flex-wrap justify-center gap-1 min-h-[70px] mb-2">${glassesHTML}</div>
161
+ <div class="text-3xl text-blue-500 font-bold mb-2">&darr;</div>
162
+ <div class="${widthClass} h-32 mb-6 flex items-center justify-center">${containerHTML}</div>
163
+ <p class="text-2xl font-bold text-purple-700">Container ${container.name}</p>
164
  </div>
165
  `;
166
  problemDisplay.innerHTML += itemHTML;
 
182
 
183
  questionTemplates.forEach((q, index) => {
184
  gameState.questions.push({ id: `q${index}`, correctAnswer: q.answer });
 
185
  const optionsHTML = gameState.problemData.map(c => `
186
  <button data-question-id="q${index}" data-value="${c.name}"
187
+ class="answer-btn bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2 px-6 rounded-lg transition-colors">
188
  ${c.name}
189
  </button>
190
  `).join('');
191
 
 
192
  const questionHTML = `
193
+ <div class="flex flex-col sm:flex-row items-center justify-center text-lg sm:text-xl space-y-2 sm:space-y-0">
194
+ <p class="text-gray-700 mr-4 text-center">${q.text}</p>
195
  <div class="flex space-x-2">
196
  ${optionsHTML}
197
  </div>