Spaces:

Lashtw
/

cake

Running

App Files Files Community

cake / index.html

Lashtw

Update index.html

f222430 verified 4 months ago

raw

history blame contribute delete

15.5 kB

	<!DOCTYPE html>
	<html lang="zh-TW">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>110年國中教育會考數學科非選題第2題─切蛋糕模擬器</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<style>
	/* 自定義樣式以符合原作顏色邏輯 */
	.green-text { color: #10b981; font-weight: bold; }
	.red-text { color: #ef4444; font-weight: bold; }
	.highlighted { font-size: 1.1em; padding: 0 2px; }

	/* 蛋糕格線動畫 */
	.cake-cell {
	transition: all 0.3s ease;
	}

	/* 滑桿樣式優化 */
	input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	background: transparent;
	}
	input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: #4f46e5;
	cursor: pointer;
	margin-top: -8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	}
	input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	background: #e5e7eb;
	border-radius: 2px;
	}
	</style>
	</head>
	<body class="bg-gray-50 min-h-screen font-sans text-gray-800">

	<div class="max-w-4xl mx-auto p-4 sm:p-6">
	<!-- 標題 -->
	<header class="mb-8 text-center">
	<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">110年國中教育會考數學科非選題第2題</h1>
	<p class="text-lg text-indigo-600 font-medium">切蛋糕模擬器</p>
	</header>

	<!-- Tab 切換 -->
	<div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
	<div class="flex border-b border-gray-200">
	<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">
	第一小題 (總和限制 4)
	</button>
	<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">
	第二小題 (總和限制 20)
	</button>
	</div>

	<!-- 內容區域 -->
	<div class="p-6 sm:p-8">

	<!-- 第一小題內容 -->
	<div id="tab1" class="space-y-8 block">
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
	<!-- 控制區 -->
	<div class="space-y-6">
	<div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
	<label class="block mb-2 font-bold text-gray-700">
	橫切次數 (綠色): <span id="val-h1" class="green-text text-xl">0</span>
	</label>
	<input type="range" id="input-h1" min="0" max="4" value="0" step="1"
	oninput="updateSim('tab1', 'h')">
	</div>

	<div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
	<label class="block mb-2 font-bold text-gray-700">
	縱切次數 (紅色): <span id="val-v1" class="red-text text-xl">0</span>
	</label>
	<input type="range" id="input-v1" min="0" max="4" value="0" step="1"
	oninput="updateSim('tab1', 'v')">
	</div>

	<div class="text-lg font-medium p-4 bg-indigo-50 rounded-lg text-indigo-900">
	總小塊數：<span id="result-total1" class="font-bold text-2xl">1</span>
	</div>

	<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">
	顯示/隱藏計算過程
	</button>

	<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">
	<!-- 計算過程將插入此處 -->
	</div>
	</div>

	<!-- 蛋糕視覺區 -->
	<div class="flex justify-center items-center bg-gray-100 rounded-xl p-4 min-h-[300px]">
	<div id="cake1" class="relative bg-white shadow-xl border-2 border-gray-800 transition-all duration-300"
	style="width: 100%; max-width: 400px; aspect-ratio: 1/1;">
	</div>
	</div>
	</div>
	</div>

	<!-- 第二小題內容 -->
	<div id="tab2" class="space-y-8 hidden">
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
	<!-- 控制區 -->
	<div class="space-y-6">
	<div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
	<label class="block mb-2 font-bold text-gray-700">
	橫切次數 (綠色): <span id="val-h2" class="green-text text-xl">0</span>
	</label>
	<input type="range" id="input-h2" min="0" max="20" value="0" step="1"
	oninput="updateSim('tab2', 'h')">
	</div>

	<div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
	<label class="block mb-2 font-bold text-gray-700">
	縱切次數 (紅色): <span id="val-v2" class="red-text text-xl">0</span>
	</label>
	<input type="range" id="input-v2" min="0" max="20" value="0" step="1"
	oninput="updateSim('tab2', 'v')">
	</div>

	<div class="grid grid-cols-2 gap-4">
	<div class="p-3 bg-gray-100 rounded-lg text-center">
	<div class="text-sm text-gray-500">未焦脆小塊</div>
	<div id="result-non-crispy2" class="text-xl font-bold text-gray-800">1</div>
	</div>
	<div class="p-3 bg-gray-600 rounded-lg text-center">
	<div class="text-sm text-gray-200">焦脆小塊</div>
	<div id="result-crispy2" class="text-xl font-bold text-white">0</div>
	</div>
	</div>

	<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">
	顯示/隱藏計算過程
	</button>

	<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">
	<!-- 計算過程將插入此處 -->
	</div>
	</div>

	<!-- 蛋糕視覺區 -->
	<div class="flex justify-center items-center bg-gray-100 rounded-xl p-4 min-h-[300px]">
	<div id="cake2" class="relative bg-white shadow-xl border-2 border-gray-800 transition-all duration-300"
	style="width: 100%; max-width: 400px; aspect-ratio: 1/1;">
	</div>
	</div>
	</div>
	</div>

	</div>
	</div>
	</div>

	<script>
	// 初始化狀態
	const state = {
	tab1: { h: 0, v: 0, maxSum: 4, highlightCrispy: false },
	tab2: { h: 0, v: 0, maxSum: 20, highlightCrispy: true }
	};

	// Tab 切換邏輯
	function switchTab(tabId) {
	document.getElementById('tab1').classList.add('hidden');
	document.getElementById('tab2').classList.add('hidden');
	document.getElementById(tabId).classList.remove('hidden');

	// 更新按鈕樣式
	const btn1 = document.getElementById('btn-tab1');
	const btn2 = document.getElementById('btn-tab2');

	const activeClass = "text-indigo-600 border-b-2 border-indigo-600 bg-indigo-50";
	const inactiveClass = "text-gray-500 hover:text-indigo-600";

	if(tabId === 'tab1') {
	btn1.className = `flex-1 py-4 text-center font-medium transition-colors ${activeClass}`;
	btn2.className = `flex-1 py-4 text-center font-medium transition-colors ${inactiveClass}`;
	} else {
	btn1.className = `flex-1 py-4 text-center font-medium transition-colors ${inactiveClass}`;
	btn2.className = `flex-1 py-4 text-center font-medium transition-colors ${activeClass}`;
	}
	}

	// 顯示/隱藏計算過程
	function toggleCalc(id) {
	const el = document.getElementById(id);
	if (el.classList.contains('hidden')) {
	el.classList.remove('hidden');
	} else {
	el.classList.add('hidden');
	}
	}

	// 核心更新邏輯
	function updateSim(tab, source) {
	const hInput = document.getElementById(`input-h${tab === 'tab1' ? '1' : '2'}`);
	const vInput = document.getElementById(`input-v${tab === 'tab1' ? '1' : '2'}`);

	let h = parseInt(hInput.value);
	let v = parseInt(vInput.value);
	const max = state[tab].maxSum;

	// 限制總和邏輯 (模仿原作的 update_sliders)
	if (h + v > max) {
	if (source === 'h') {
	v = max - h;
	vInput.value = v;
	} else {
	h = max - v;
	hInput.value = h;
	}
	}

	// 更新狀態
	state[tab].h = h;
	state[tab].v = v;

	// 更新數字顯示
	document.getElementById(`val-h${tab === 'tab1' ? '1' : '2'}`).innerText = h;
	document.getElementById(`val-v${tab === 'tab1' ? '1' : '2'}`).innerText = v;

	renderCake(tab);
	updateCalculations(tab);
	}

	// 渲染蛋糕網格
	function renderCake(tab) {
	const { h, v, highlightCrispy } = state[tab];
	const container = document.getElementById(`cake${tab === 'tab1' ? '1' : '2'}`);

	// 設定 Grid
	container.style.display = 'grid';
	container.style.gridTemplateRows = `repeat(${h + 1}, 1fr)`;
	container.style.gridTemplateColumns = `repeat(${v + 1}, 1fr)`;

	let html = '';
	// 生成格子
	for (let r = 0; r <= h; r++) {
	for (let c = 0; c <= v; c++) {
	const isEdge = (r === 0 \|\| r === h \|\| c === 0 \|\| c === v);
	// 如果需要高亮焦脆部分(第二小題) 且是邊緣
	const isCrispy = highlightCrispy && isEdge;

	const bgClass = isCrispy ? 'bg-gray-500' : 'bg-white';
	html += `<div class="cake-cell border border-gray-800 ${bgClass}"></div>`;
	}
	}
	container.innerHTML = html;
	}

	// 更新數學計算
	function updateCalculations(tab) {
	const { h, v } = state[tab];
	const totalPieces = (h + 1) * (v + 1);
	const crispyPieces = (h + 1) * 2 + (v + 1) * 2 - 4; // 扣掉重複的四個角
	// 如果只有 1x1，上述公式會出錯 (12 + 12 -4 = 0)，但在物理上整塊都是邊。
	// 邏輯修正：如果是 0 切，只有 1 塊，它是邊。
	// 實際上公式對於 h,v >= 1 是通用的。如果是 0,0， crispty 計算出來是 0，實際上應為 1。
	// 但依照考題邏輯，通常討論切開後的狀況。
	// 為了嚴謹，我們使用另一種算法：Total - Inner

	const innerH = Math.max(0, h - 1); // 實際上中間塊對應的倍率
	const innerV = Math.max(0, v - 1);
	const nonCrispyCalc = innerH * innerV; // 方法2的核心

	// 修正顯示邏輯：
	// 若 total = 1 (h=0, v=0)，nonCrispy = 0, crispy = 1
	const realNonCrispy = (h < 1 \|\| v < 1) ? 0 : nonCrispyCalc;
	const realCrispy = totalPieces - realNonCrispy;

	// 生成計算 HTML 字串
	const calcHtml = `
	<div class="mb-2">橫切次數：<span class='green-text highlighted'>${h}</span></div>
	<div class="mb-4">縱切次數：<span class='red-text highlighted'>${v}</span></div>

	<div class="font-bold underline mb-1 text-gray-700">方法1 (扣除法)：</div>
	<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>
	<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>

	<div class="font-bold underline mb-1 text-gray-700">方法2 (核心公式)：</div>
	<div>未焦脆小塊：(<span class='green-text highlighted'>${h}</span> - 1) × (<span class='red-text highlighted'>${v}</span> - 1) = <strong>${(h-1)*(v-1)}</strong></div>
	<div class="text-xs text-gray-500 mt-1">(註：若結果為負數或零，代表沒有內部區塊)</div>
	`;

	// 更新 DOM
	if (tab === 'tab1') {
	document.getElementById('result-total1').innerText = totalPieces;
	document.getElementById('calc1').innerHTML = calcHtml;
	} else {
	document.getElementById('result-non-crispy2').innerText = realNonCrispy;
	document.getElementById('result-crispy2').innerText = realCrispy;
	document.getElementById('calc2').innerHTML = calcHtml;
	}
	}

	// 頁面載入後初始化
	window.onload = function() {
	updateSim('tab1', 'h');
	updateSim('tab2', 'h');
	};

	</script>
	</body>
	</html>