Hugging Face's logo

Spaces:
Lashtw
/
cake
Running

App Files Community
Lashtw commited on
Commit
f222430
·
verified ·
1 Parent(s): 52fe190

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +313 -19
index.html CHANGED
@@ -1,19 +1,313 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-TW">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>110年國中教育會考數學科非選題第2題─切蛋糕模擬器</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ /* 自定義樣式以符合原作顏色邏輯 */
10
+ .green-text { color: #10b981; font-weight: bold; }
11
+ .red-text { color: #ef4444; font-weight: bold; }
12
+ .highlighted { font-size: 1.1em; padding: 0 2px; }
13
+
14
+ /* 蛋糕格線動畫 */
15
+ .cake-cell {
16
+ transition: all 0.3s ease;
17
+ }
18
+
19
+ /* 滑桿樣式優化 */
20
+ input[type=range] {
21
+ -webkit-appearance: none;
22
+ width: 100%;
23
+ background: transparent;
24
+ }
25
+ input[type=range]::-webkit-slider-thumb {
26
+ -webkit-appearance: none;
27
+ height: 20px;
28
+ width: 20px;
29
+ border-radius: 50%;
30
+ background: #4f46e5;
31
+ cursor: pointer;
32
+ margin-top: -8px;
33
+ box-shadow: 0 1px 3px rgba(0,0,0,0.3);
34
+ }
35
+ input[type=range]::-webkit-slider-runnable-track {
36
+ width: 100%;
37
+ height: 4px;
38
+ cursor: pointer;
39
+ background: #e5e7eb;
40
+ border-radius: 2px;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-50 min-h-screen font-sans text-gray-800">
45
+
46
+ <div class="max-w-4xl mx-auto p-4 sm:p-6">
47
+ <!-- 標題 -->
48
+ <header class="mb-8 text-center">
49
+ <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">110年國中教育會考數學科非選題第2題</h1>
50
+ <p class="text-lg text-indigo-600 font-medium">切蛋糕模擬器</p>
51
+ </header>
52
+
53
+ <!-- Tab 切換 -->
54
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
55
+ <div class="flex border-b border-gray-200">
56
+ <button onclick="switchTab('tab1')" id="btn-tab1" class="flex-1 py-4 text-center font-medium text-indigo-600 border-b-2 border-indigo-600 bg-indigo-50 transition-colors">
57
+ 第一小題 (總和限制 4)
58
+ </button>
59
+ <button onclick="switchTab('tab2')" id="btn-tab2" class="flex-1 py-4 text-center font-medium text-gray-500 hover:text-indigo-600 transition-colors">
60
+ 第二小題 (總和限制 20)
61
+ </button>
62
+ </div>
63
+
64
+ <!-- 內容區域 -->
65
+ <div class="p-6 sm:p-8">
66
+
67
+ <!-- 第一小題內容 -->
68
+ <div id="tab1" class="space-y-8 block">
69
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
70
+ <!-- 控制區 -->
71
+ <div class="space-y-6">
72
+ <div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
73
+ <label class="block mb-2 font-bold text-gray-700">
74
+ 橫切次數 (綠色): <span id="val-h1" class="green-text text-xl">0</span>
75
+ </label>
76
+ <input type="range" id="input-h1" min="0" max="4" value="0" step="1"
77
+ oninput="updateSim('tab1', 'h')">
78
+ </div>
79
+
80
+ <div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
81
+ <label class="block mb-2 font-bold text-gray-700">
82
+ 縱切次數 (紅色): <span id="val-v1" class="red-text text-xl">0</span>
83
+ </label>
84
+ <input type="range" id="input-v1" min="0" max="4" value="0" step="1"
85
+ oninput="updateSim('tab1', 'v')">
86
+ </div>
87
+
88
+ <div class="text-lg font-medium p-4 bg-indigo-50 rounded-lg text-indigo-900">
89
+ 總小塊數：<span id="result-total1" class="font-bold text-2xl">1</span>
90
+ </div>
91
+
92
+ <button onclick="toggleCalc('calc1')" class="w-full py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition shadow-md">
93
+ 顯示/隱藏 計算過程
94
+ </button>
95
+
96
+ <div id="calc1" class="hidden p-4 bg-yellow-50 border border-yellow-200 rounded-lg text-sm sm:text-base font-mono leading-relaxed">
97
+ <!-- 計算過程將插入此處 -->
98
+ </div>
99
+ </div>
100
+
101
+ <!-- 蛋糕視覺區 -->
102
+ <div class="flex justify-center items-center bg-gray-100 rounded-xl p-4 min-h-[300px]">
103
+ <div id="cake1" class="relative bg-white shadow-xl border-2 border-gray-800 transition-all duration-300"
104
+ style="width: 100%; max-width: 400px; aspect-ratio: 1/1;">
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- 第二小題內容 -->
111
+ <div id="tab2" class="space-y-8 hidden">
112
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
113
+ <!-- 控制區 -->
114
+ <div class="space-y-6">
115
+ <div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
116
+ <label class="block mb-2 font-bold text-gray-700">
117
+ 橫切次數 (綠色): <span id="val-h2" class="green-text text-xl">0</span>
118
+ </label>
119
+ <input type="range" id="input-h2" min="0" max="20" value="0" step="1"
120
+ oninput="updateSim('tab2', 'h')">
121
+ </div>
122
+
123
+ <div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
124
+ <label class="block mb-2 font-bold text-gray-700">
125
+ 縱切次數 (紅色): <span id="val-v2" class="red-text text-xl">0</span>
126
+ </label>
127
+ <input type="range" id="input-v2" min="0" max="20" value="0" step="1"
128
+ oninput="updateSim('tab2', 'v')">
129
+ </div>
130
+
131
+ <div class="grid grid-cols-2 gap-4">
132
+ <div class="p-3 bg-gray-100 rounded-lg text-center">
133
+ <div class="text-sm text-gray-500">未焦脆小塊</div>
134
+ <div id="result-non-crispy2" class="text-xl font-bold text-gray-800">1</div>
135
+ </div>
136
+ <div class="p-3 bg-gray-600 rounded-lg text-center">
137
+ <div class="text-sm text-gray-200">焦脆小塊</div>
138
+ <div id="result-crispy2" class="text-xl font-bold text-white">0</div>
139
+ </div>
140
+ </div>
141
+
142
+ <button onclick="toggleCalc('calc2')" class="w-full py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition shadow-md">
143
+ 顯示/隱藏 計算過程
144
+ </button>
145
+
146
+ <div id="calc2" class="hidden p-4 bg-yellow-50 border border-yellow-200 rounded-lg text-sm sm:text-base font-mono leading-relaxed">
147
+ <!-- 計算過程將插入此處 -->
148
+ </div>
149
+ </div>
150
+
151
+ <!-- 蛋糕視覺區 -->
152
+ <div class="flex justify-center items-center bg-gray-100 rounded-xl p-4 min-h-[300px]">
153
+ <div id="cake2" class="relative bg-white shadow-xl border-2 border-gray-800 transition-all duration-300"
154
+ style="width: 100%; max-width: 400px; aspect-ratio: 1/1;">
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <script>
165
+ // 初始化狀態
166
+ const state = {
167
+ tab1: { h: 0, v: 0, maxSum: 4, highlightCrispy: false },
168
+ tab2: { h: 0, v: 0, maxSum: 20, highlightCrispy: true }
169
+ };
170
+
171
+ // Tab 切換邏輯
172
+ function switchTab(tabId) {
173
+ document.getElementById('tab1').classList.add('hidden');
174
+ document.getElementById('tab2').classList.add('hidden');
175
+ document.getElementById(tabId).classList.remove('hidden');
176
+
177
+ // 更新按鈕樣式
178
+ const btn1 = document.getElementById('btn-tab1');
179
+ const btn2 = document.getElementById('btn-tab2');
180
+
181
+ const activeClass = "text-indigo-600 border-b-2 border-indigo-600 bg-indigo-50";
182
+ const inactiveClass = "text-gray-500 hover:text-indigo-600";
183
+
184
+ if(tabId === 'tab1') {
185
+ btn1.className = `flex-1 py-4 text-center font-medium transition-colors ${activeClass}`;
186
+ btn2.className = `flex-1 py-4 text-center font-medium transition-colors ${inactiveClass}`;
187
+ } else {
188
+ btn1.className = `flex-1 py-4 text-center font-medium transition-colors ${inactiveClass}`;
189
+ btn2.className = `flex-1 py-4 text-center font-medium transition-colors ${activeClass}`;
190
+ }
191
+ }
192
+
193
+ // 顯示/隱藏計算過程
194
+ function toggleCalc(id) {
195
+ const el = document.getElementById(id);
196
+ if (el.classList.contains('hidden')) {
197
+ el.classList.remove('hidden');
198
+ } else {
199
+ el.classList.add('hidden');
200
+ }
201
+ }
202
+
203
+ // 核心更新邏輯
204
+ function updateSim(tab, source) {
205
+ const hInput = document.getElementById(`input-h${tab === 'tab1' ? '1' : '2'}`);
206
+ const vInput = document.getElementById(`input-v${tab === 'tab1' ? '1' : '2'}`);
207
+
208
+ let h = parseInt(hInput.value);
209
+ let v = parseInt(vInput.value);
210
+ const max = state[tab].maxSum;
211
+
212
+ // 限制總和邏輯 (模仿原作的 update_sliders)
213
+ if (h + v > max) {
214
+ if (source === 'h') {
215
+ v = max - h;
216
+ vInput.value = v;
217
+ } else {
218
+ h = max - v;
219
+ hInput.value = h;
220
+ }
221
+ }
222
+
223
+ // 更新狀態
224
+ state[tab].h = h;
225
+ state[tab].v = v;
226
+
227
+ // 更新數字顯示
228
+ document.getElementById(`val-h${tab === 'tab1' ? '1' : '2'}`).innerText = h;
229
+ document.getElementById(`val-v${tab === 'tab1' ? '1' : '2'}`).innerText = v;
230
+
231
+ renderCake(tab);
232
+ updateCalculations(tab);
233
+ }
234
+
235
+ // 渲染蛋糕網格
236
+ function renderCake(tab) {
237
+ const { h, v, highlightCrispy } = state[tab];
238
+ const container = document.getElementById(`cake${tab === 'tab1' ? '1' : '2'}`);
239
+
240
+ // 設定 Grid
241
+ container.style.display = 'grid';
242
+ container.style.gridTemplateRows = `repeat(${h + 1}, 1fr)`;
243
+ container.style.gridTemplateColumns = `repeat(${v + 1}, 1fr)`;
244
+
245
+ let html = '';
246
+ // 生成格子
247
+ for (let r = 0; r <= h; r++) {
248
+ for (let c = 0; c <= v; c++) {
249
+ const isEdge = (r === 0 || r === h || c === 0 || c === v);
250
+ // 如果需要高亮焦脆部分(第二小題) 且 是邊緣
251
+ const isCrispy = highlightCrispy && isEdge;
252
+
253
+ const bgClass = isCrispy ? 'bg-gray-500' : 'bg-white';
254
+ html += `<div class="cake-cell border border-gray-800 ${bgClass}"></div>`;
255
+ }
256
+ }
257
+ container.innerHTML = html;
258
+ }
259
+
260
+ // 更新數學計算
261
+ function updateCalculations(tab) {
262
+ const { h, v } = state[tab];
263
+ const totalPieces = (h + 1) * (v + 1);
264
+ const crispyPieces = (h + 1) * 2 + (v + 1) * 2 - 4; // 扣掉重複的四個角
265
+ // 如果只有 1x1，上述公式會出錯 (1*2 + 1*2 -4 = 0)，但在物理上整塊都是邊。
266
+ // 邏輯修正：如果是 0 切，只有 1 塊，它是邊。
267
+ // 實際上公式對於 h,v >= 1 是通用的。如果是 0,0， crispty 計算出來是 0，實際上應為 1。
268
+ // 但依照考題邏輯，通常討論切開後的狀況。
269
+ // 為了嚴謹，我們使用另一種算法：Total - Inner
270
+
271
+ const innerH = Math.max(0, h - 1); // 實際上中間塊對應的倍率
272
+ const innerV = Math.max(0, v - 1);
273
+ const nonCrispyCalc = innerH * innerV; // 方法2的核心
274
+
275
+ // 修正顯示邏輯：
276
+ // 若 total = 1 (h=0, v=0)，nonCrispy = 0, crispy = 1
277
+ const realNonCrispy = (h < 1 || v < 1) ? 0 : nonCrispyCalc;
278
+ const realCrispy = totalPieces - realNonCrispy;
279
+
280
+ // 生成計算 HTML 字串
281
+ const calcHtml = `
282
+ <div class="mb-2">橫切次數：<span class='green-text highlighted'>${h}</span></div>
283
+ <div class="mb-4">縱切次數：<span class='red-text highlighted'>${v}</span></div>
284
+
285
+ <div class="font-bold underline mb-1 text-gray-700">方法1 (扣除法)：</div>
286
+ <div class="mb-1">焦脆小塊：(<span class='green-text highlighted'>${h}</span> + 1) × 2 + (<span class='red-text highlighted'>${v}</span> + 1) × 2 - 4 = <strong>${realCrispy}</strong></div>
287
+ <div class="mb-4">未焦脆小塊：(<span class='green-text highlighted'>${h}</span> + 1) × (<span class='red-text highlighted'>${v}</span> + 1) - ${realCrispy} = <strong>${realNonCrispy}</strong></div>
288
+
289
+ <div class="font-bold underline mb-1 text-gray-700">方法2 (核心公式)：</div>
290
+ <div>未焦脆小塊：(<span class='green-text highlighted'>${h}</span> - 1) × (<span class='red-text highlighted'>${v}</span> - 1) = <strong>${(h-1)*(v-1)}</strong></div>
291
+ <div class="text-xs text-gray-500 mt-1">(註：若結果為負數或零，代表沒有內部區塊)</div>
292
+ `;
293
+
294
+ // 更新 DOM
295
+ if (tab === 'tab1') {
296
+ document.getElementById('result-total1').innerText = totalPieces;
297
+ document.getElementById('calc1').innerHTML = calcHtml;
298
+ } else {
299
+ document.getElementById('result-non-crispy2').innerText = realNonCrispy;
300
+ document.getElementById('result-crispy2').innerText = realCrispy;
301
+ document.getElementById('calc2').innerHTML = calcHtml;
302
+ }
303
+ }
304
+
305
+ // 頁面載入後初始化
306
+ window.onload = function() {
307
+ updateSim('tab1', 'h');
308
+ updateSim('tab2', 'h');
309
+ };
310
+
311
+ </script>
312
+ </body>
313
+ </html>