Update index.html

index.html

@@ -259,6 +259,7 @@
         ];
 
         // --- Data: Categories & Problems ---
+        // Expanded Answer Bank to cover all valid commutative and sign variations
         const ALL_CATEGORIES = [
             {
                 id: "basic",
@@ -266,12 +267,36 @@
                 desc: "萬丈高樓平地起，找出共同的寶藏。",
                 color: "from-blue-500 to-cyan-500",
                 problems: [
-                    { id: 101, q: "3b^2 + 2b", a: ["b(3b+2)", "(3b+2)b", "b(2+3b)"], h: "提出公因式 b" },
-                    { id: 102, q: "5x^2 + 2x", a: ["x(5x+2)", "(5x+2)x", "x(2+5x)"], h: "提出公因式 x" },
-                    { id: 103, q: "6y^2 - 2y", a: ["2y(3y-1)", "(3y-1)2y", "y(6y-2)", "2(3y^2-y)"], h: "係數 6 和 2 都有公因數 2" },
-                    { id: 104, q: "4x^2 - 8x", a: ["4x(x-2)", "x(4x-8)", "4(x^2-2x)", "2x(2x-4)", "2(2x^2-4x)", "(-4x)(2-x)", "4x(-2+x)"], h: "提出 4x" },
-                    { id: 105, q: "ax + bx", a: ["x(a+b)", "(a+b)x", "x(b+a)"], h: "最簡單的提公因式" },
-                    { id: 106, q: "3x^2 + 6x", a: ["3x(x+2)", "x(3x+6)", "3(x^2+2x)", "3x(2+x)"], h: "提出 3x" }
+                    { 
+                        id: 101, q: "3b^2 + 2b", 
+                        a: ["b(3b+2)", "(3b+2)b", "b(2+3b)", "(2+3b)b"], 
+                        h: "提出公因式 b" 
+                    },
+                    { 
+                        id: 102, q: "5x^2 + 2x", 
+                        a: ["x(5x+2)", "(5x+2)x", "x(2+5x)", "(2+5x)x"], 
+                        h: "提出公因式 x" 
+                    },
+                    { 
+                        id: 103, q: "6y^2 - 2y", 
+                        a: ["2y(3y-1)", "(3y-1)2y", "2y(-1+3y)", "(-1+3y)2y", "-2y(1-3y)", "(1-3y)(-2y)"], 
+                        h: "係數 6 和 2 都有公因數 2" 
+                    },
+                    { 
+                        id: 104, q: "4x^2 - 8x", 
+                        a: ["4x(x-2)", "x(4x-8)", "4(x^2-2x)", "2x(2x-4)", "2(2x^2-4x)", "4x(-2+x)", "(-2+x)4x", "(4x-8)x", "(x-2)4x", "-4x(2-x)"], 
+                        h: "提出 4x" 
+                    },
+                    { 
+                        id: 105, q: "ax + bx", 
+                        a: ["x(a+b)", "(a+b)x", "x(b+a)", "(b+a)x"], 
+                        h: "最簡單的提公因式" 
+                    },
+                    { 
+                        id: 106, q: "3x^2 + 6x", 
+                        a: ["3x(x+2)", "x(3x+6)", "3(x^2+2x)", "3x(2+x)", "(x+2)3x", "(3x+6)x", "(2+x)3x"], 
+                        h: "提出 3x" 
+                    }
                 ]
             },
             {
@@ -280,12 +305,36 @@
                 desc: "分進合擊！尋找隱藏的括號。",
                 color: "from-emerald-500 to-teal-500",
                 problems: [
-                    { id: 201, q: "2x(x-2) + 5(x-2)", a: ["(x-2)(2x+5)", "(2x+5)(x-2)", "(x-2)(5+2x)", "(2-x)(-2x-5)"], h: "把 (x-2) 當作一個整體" },
-                    { id: 202, q: "x(3x-7) + 4(3x-7)", a: ["(3x-7)(x+4)", "(x+4)(3x-7)", "(3x-7)(4+x)", "(7-3x)(-x-4)"], h: "提出 (3x-7)" },
-                    { id: 203, q: "a(x+y) + b(x+y)", a: ["(x+y)(a+b)", "(a+b)(x+y)", "(y+x)(a+b)", "(x+y)(b+a)"], h: "都有 (x+y)" },
-                    { id: 204, q: "x^2 + 2x + xy + 2y", a: ["(x+2)(x+y)", "(x+y)(x+2)", "(2+x)(y+x)"], h: "前兩項一組，後兩項一組" },
-                    { id: 205, q: "ac + ad + bc + bd", a: ["(c+d)(a+b)", "(a+b)(c+d)", "(d+c)(a+b)", "(c+d)(b+a)"], h: "分組：a(c+d) + b(c+d)" },
-                    { id: 206, q: "3x(2x-5) + (2x-5)(x+8)", a: ["(2x-5)(4x+8)", "4(2x-5)(x+2)", "(4x+8)(2x-5)", "(2x-5)(8+4x)", "4(2x-5)(2+x)"], h: "合併剩下的：3x + (x+8)" }
+                    { 
+                        id: 201, q: "2x(x-2) + 5(x-2)", 
+                        a: ["(x-2)(2x+5)", "(2x+5)(x-2)", "(x-2)(5+2x)", "(5+2x)(x-2)", "(-x+2)(-2x-5)", "(-2x-5)(-x+2)", "-(2-x)(2x+5)", "-(2x+5)(2-x)"], 
+                        h: "把 (x-2) 當作一個整體" 
+                    },
+                    { 
+                        id: 202, q: "x(3x-7) + 4(3x-7)", 
+                        a: ["(3x-7)(x+4)", "(x+4)(3x-7)", "(3x-7)(4+x)", "(4+x)(3x-7)", "(7-3x)(-x-4)", "(-x-4)(7-3x)", "-(7-3x)(x+4)", "-(x+4)(7-3x)"], 
+                        h: "提出 (3x-7)" 
+                    },
+                    { 
+                        id: 203, q: "a(x+y) + b(x+y)", 
+                        a: ["(x+y)(a+b)", "(a+b)(x+y)", "(y+x)(a+b)", "(x+y)(b+a)", "(a+b)(y+x)", "(b+a)(x+y)", "(b+a)(y+x)"], 
+                        h: "都有 (x+y)" 
+                    },
+                    { 
+                        id: 204, q: "x^2 + 2x + xy + 2y", 
+                        a: ["(x+2)(x+y)", "(x+y)(x+2)", "(2+x)(y+x)", "(x+y)(2+x)", "(y+x)(x+2)", "(y+x)(2+x)", "(2+x)(x+y)"], 
+                        h: "前兩項一組，後兩項一組" 
+                    },
+                    { 
+                        id: 205, q: "ac + ad + bc + bd", 
+                        a: ["(c+d)(a+b)", "(a+b)(c+d)", "(d+c)(a+b)", "(c+d)(b+a)", "(a+b)(d+c)", "(b+a)(c+d)", "(b+a)(d+c)"], 
+                        h: "分組：a(c+d) + b(c+d)" 
+                    },
+                    { 
+                        id: 206, q: "3x(2x-5) + (2x-5)(x+8)", 
+                        a: ["(2x-5)(4x+8)", "4(2x-5)(x+2)", "(4x+8)(2x-5)", "(2x-5)(8+4x)", "4(2x-5)(2+x)", "4(x+2)(2x-5)", "4(2+x)(2x-5)", "(5-2x)(-4x-8)", "-(5-2x)(4x+8)"], 
+                        h: "合併剩下的：3x + (x+8)" 
+                    }
                 ]
             },
             {
@@ -294,11 +343,31 @@
                 desc: "敵人的敵人就是朋友，善用負號。",
                 color: "from-amber-500 to-orange-500",
                 problems: [
-                    { id: 301, q: "x(2x-1) + (1-2x)", a: ["(2x-1)(x-1)", "(x-1)(2x-1)", "(1-2x)(1-x)"], h: "(1-2x) 變號為 -(2x-1)" },
-                    { id: 302, q: "x(a-b) + y(b-a)", a: ["(a-b)(x-y)", "(x-y)(a-b)", "(b-a)(y-x)"], h: "(b-a) 變號為 -(a-b)" },
-                    { id: 303, q: "x(2x-3) - 3(3-2x)", a: ["(2x-3)(x+3)", "(x+3)(2x-3)", "(3-2x)(-x-3)"], h: "減去負的變成加" },
-                    { id: 304, q: "(x-y)^2 + 2(y-x)", a: ["(x-y)(x-y-2)", "(x-y-2)(x-y)", "(y-x)(y-x+2)"], h: "(y-x) 提出負號變成 -(x-y)" },
-                    { id: 305, q: "a(x-y) - b(y-x)", a: ["(x-y)(a+b)", "(a+b)(x-y)", "(y-x)(-a-b)"], h: "變號後提出 (x-y)" }
+                    { 
+                        id: 301, q: "x(2x-1) + (1-2x)", 
+                        a: ["(2x-1)(x-1)", "(x-1)(2x-1)", "(1-2x)(1-x)", "(1-x)(1-2x)", "-(1-2x)(x-1)", "-(x-1)(1-2x)", "-(2x-1)(1-x)"], 
+                        h: "(1-2x) 變號為 -(2x-1)" 
+                    },
+                    { 
+                        id: 302, q: "x(a-b) + y(b-a)", 
+                        a: ["(a-b)(x-y)", "(x-y)(a-b)", "(b-a)(y-x)", "(y-x)(b-a)", "-(b-a)(x-y)", "-(x-y)(b-a)", "-(a-b)(y-x)"], 
+                        h: "(b-a) 變號為 -(a-b)" 
+                    },
+                    { 
+                        id: 303, q: "x(2x-3) - 3(3-2x)", 
+                        a: ["(2x-3)(x+3)", "(x+3)(2x-3)", "(3-2x)(-x-3)", "(-x-3)(3-2x)", "(3+x)(2x-3)", "(2x-3)(3+x)", "-(3-2x)(x+3)"], 
+                        h: "減去負的變成加" 
+                    },
+                    { 
+                        id: 304, q: "(x-y)^2 + 2(y-x)", 
+                        a: ["(x-y)(x-y-2)", "(x-y-2)(x-y)", "(y-x)(y-x+2)", "(y-x+2)(y-x)", "(x-y-2)(x-y)", "-(y-x)(x-y-2)", "(-x+y+2)(-x+y)"], 
+                        h: "(y-x) 提出負號變成 -(x-y)" 
+                    },
+                    { 
+                        id: 305, q: "a(x-y) - b(y-x)", 
+                        a: ["(x-y)(a+b)", "(a+b)(x-y)", "(y-x)(-a-b)", "(-a-b)(y-x)", "(x-y)(b+a)", "(b+a)(x-y)", "-(y-x)(a+b)"], 
+                        h: "變號後提出 (x-y)" 
+                    }
                 ]
             },
             {
@@ -307,11 +376,52 @@
                 desc: "一加一減，成雙成對。",
                 color: "from-rose-500 to-pink-500",
                 problems: [
-                    { id: 401, q: "x^2 - 49", a: ["(x+7)(x-7)", "(x-7)(x+7)", "(7+x)(x-7)", "(-x-7)(7-x)"], h: "7 的平方是 49" },
-                    { id: 402, q: "x^2 - 1", a: ["(x+1)(x-1)", "(x-1)(x+1)", "(1+x)(x-1)"], h: "1 的平方還是 1" },
-                    { id: 403, q: "4x^2 - 9", a: ["(2x+3)(2x-3)", "(2x-3)(2x+3)", "(3+2x)(2x-3)"], h: "(2x)^2 - 3^2" },
-                    { id: 404, q: "25x^2 - 36y^2", a: ["(5x+6y)(5x-6y)", "(5x-6y)(5x+6y)", "(6y+5x)(5x-6y)"], h: "(5x)^2 - (6y)^2" },
-                    { id: 405, q: "49 - (y-1)^2", a: ["(8-y)(y+6)", "(y+6)(8-y)", "-(y-8)(y+6)", "(6+y)(8-y)", "(8-y)(6+y)", "(y-8)(-y-6)", "(-y-6)(y-8)"], h: "A=7, B=(y-1)" }
+                    { 
+                        id: 401, q: "x^2 - 49", 
+                        a: ["(x+7)(x-7)", "(x-7)(x+7)", "(7+x)(x-7)", "(x-7)(7+x)", "(-x-7)(7-x)", "(7-x)(-x-7)", "-(7-x)(x+7)"], 
+                        h: "7 的平方是 49" 
+                    },
+                    { 
+                        id: 402, q: "x^2 - 1", 
+                        a: ["(x+1)(x-1)", "(x-1)(x+1)", "(1+x)(x-1)", "(x-1)(1+x)", "(-x-1)(1-x)", "(1-x)(-x-1)", "-(1-x)(x+1)"], 
+                        h: "1 的平方還是 1" 
+                    },
+                    { 
+                        id: 403, q: "4x^2 - 9", 
+                        a: ["(2x+3)(2x-3)", "(2x-3)(2x+3)", "(3+2x)(2x-3)", "(2x-3)(3+2x)", "(-2x-3)(3-2x)", "-(3-2x)(2x+3)"], 
+                        h: "(2x)^2 - 3^2" 
+                    },
+                    { 
+                        id: 404, q: "25x^2 - 36y^2", 
+                        a: ["(5x+6y)(5x-6y)", "(5x-6y)(5x+6y)", "(6y+5x)(5x-6y)", "(5x-6y)(6y+5x)", "-(6y-5x)(5x+6y)"], 
+                        h: "(5x)^2 - (6y)^2" 
+                    },
+                    { 
+                        id: 405, q: "49 - (y-1)^2", 
+                        a: [
+                            // 基本正解: (8-y)(y+6) 及其變體
+                            "(8-y)(y+6)", "(y+6)(8-y)", 
+                            "(6+y)(8-y)", "(8-y)(6+y)",
+                            "(-y+8)(y+6)", "(y+6)(-y+8)",
+                            "(-y+8)(6+y)", "(6+y)(-y+8)",
+
+                            // 負負得正系列: (-y-6)(y-8)
+                            "(-y-6)(y-8)", "(y-8)(-y-6)",
+                            "(-6-y)(y-8)", "(y-8)(-6-y)",
+                            "(-y-6)(-8+y)", "(-8+y)(-y-6)",
+
+                            // 提出負號系列 1: -(y-8)(y+6)
+                            "-(y-8)(y+6)", "-(y+6)(y-8)",
+                            "-(y-8)(6+y)", "-(6+y)(y-8)",
+                            "-(-8+y)(y+6)", "-(y+6)(-8+y)",
+                            "-(-8+y)(6+y)", "-(6+y)(-8+y)",
+
+                            // 提出負號系列 2: -(8-y)(-y-6)
+                            "-(8-y)(-y-6)", "-(-y-6)(8-y)",
+                            "-(8-y)(-6-y)", "-(-6-y)(8-y)"
+                        ], 
+                        h: "A=7, B=(y-1)" 
+                    }
                 ]
             },
             {
@@ -320,11 +430,31 @@
                 desc: "頭平方，尾平方，2倍頭尾在中央。",
                 color: "from-violet-500 to-purple-500",
                 problems: [
-                    { id: 501, q: "x^2 + 2x + 1", a: ["(x+1)^2", "(x+1)(x+1)", "(1+x)^2"], h: "1 是 1^2，中間是 2*x*1" },
-                    { id: 502, q: "x^2 + 8x + 16", a: ["(x+4)^2", "(x+4)(x+4)", "(4+x)^2"], h: "16 是 4^2" },
-                    { id: 503, q: "x^2 - 4x + 4", a: ["(x-2)^2", "(2-x)^2", "(x-2)(x-2)"], h: "中間是負號" },
-                    { id: 504, q: "x^2 - 10x + 25", a: ["(x-5)^2", "(5-x)^2", "(x-5)(x-5)"], h: "25 是 5^2" },
-                    { id: 505, q: "16x^2 - 24x + 9", a: ["(4x-3)^2", "(3-4x)^2", "(4x-3)(4x-3)"], h: "(4x)^2 和 3^2" }
+                    { 
+                        id: 501, q: "x^2 + 2x + 1", 
+                        a: ["(x+1)^2", "(x+1)(x+1)", "(1+x)^2", "(1+x)(1+x)", "(-x-1)^2", "(-x-1)(-x-1)"], 
+                        h: "1 是 1^2，中間是 2*x*1" 
+                    },
+                    { 
+                        id: 502, q: "x^2 + 8x + 16", 
+                        a: ["(x+4)^2", "(x+4)(x+4)", "(4+x)^2", "(4+x)(4+x)", "(-x-4)^2"], 
+                        h: "16 是 4^2" 
+                    },
+                    { 
+                        id: 503, q: "x^2 - 4x + 4", 
+                        a: ["(x-2)^2", "(2-x)^2", "(x-2)(x-2)", "(2-x)(2-x)", "-(x-2)(2-x)"], 
+                        h: "中間是負號" 
+                    },
+                    { 
+                        id: 504, q: "x^2 - 10x + 25", 
+                        a: ["(x-5)^2", "(5-x)^2", "(x-5)(x-5)", "(5-x)(5-x)"], 
+                        h: "25 是 5^2" 
+                    },
+                    { 
+                        id: 505, q: "16x^2 - 24x + 9", 
+                        a: ["(4x-3)^2", "(3-4x)^2", "(4x-3)(4x-3)", "(3-4x)(3-4x)"], 
+                        h: "(4x)^2 和 3^2" 
+                    }
                 ]
             }
         ];
@@ -417,6 +547,7 @@
             const [manualRoomInput, setManualRoomInput] = useState(""); // 新增：手動輸入的狀態
             const [roomHistory, setRoomHistory] = useState([]); // 新增：房間歷史紀錄
             const [selectedStudent, setSelectedStudent] = useState(null);
+            const [showLargeQr, setShowLargeQr] = useState(false); // 新增：控制大圖顯示狀態
 
             // 新增：載入歷史紀錄
             useEffect(() => {
@@ -453,11 +584,11 @@
                 }
             };
 
-            // 新增：產生帶參數的網址與 QR Code 連結
-            const getQrData = () => {
+            // 新增：產生帶參數的網址與 QR Code 連結 (size 參數可調整)
+            const getQrUrl = (size = "150x150") => {
                 const baseUrl = window.location.origin + window.location.pathname;
                 const fullUrl = `${baseUrl}?room=${roomCode}`;
-                return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(fullUrl)}`;
+                return `https://api.qrserver.com/v1/create-qr-code/?size=${size}&data=${encodeURIComponent(fullUrl)}`;
             };
 
             // Filter data by room
@@ -498,6 +629,24 @@
 
             return (
                 <div className="min-h-screen flex flex-col p-4 md:p-6 relative bg-slate-900 text-slate-200 font-sans">
+                    {/* Large QR Modal */}
+                    {showLargeQr && (
+                        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/90 backdrop-blur-md p-4" onClick={() => setShowLargeQr(false)}>
+                            <div className="bg-white p-8 rounded-3xl animate-pop text-center max-w-lg w-full shadow-2xl relative" onClick={e => e.stopPropagation()}>
+                                <button onClick={() => setShowLargeQr(false)} className="absolute top-4 right-4 text-slate-400 hover:text-slate-600">
+                                    <Icons.Check className="rotate-45" />
+                                </button>
+                                <h3 className="text-2xl font-bold text-slate-800 mb-2">加入房間</h3>
+                                <div className="text-6xl font-mono font-bold text-amber-600 tracking-widest mb-6 select-all">{roomCode}</div>
+                                <div className="bg-white p-2 rounded-xl inline-block border-4 border-slate-100 mb-4">
+                                    <img src={getQrUrl("500x500")} alt="Large Room QR" className="w-full max-w-[400px] h-auto aspect-square object-contain" />
+                                </div>
+                                <p className="text-slate-500 font-bold">請學生掃描 QR Code 或輸入上方代碼</p>
+                                <div className="text-slate-400 text-xs mt-2">點擊任意處關閉</div>
+                            </div>
+                        </div>
+                    )}
+
                     <div className="flex justify-between items-center mb-6">
                         <h2 className="text-2xl font-bold flex items-center gap-2 text-amber-400"><Icons.Teacher /> 教師管理後台</h2>
                         <button onClick={onClose} className="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg">返回遊戲</button>
@@ -512,9 +661,15 @@
                                 <div className="text-xs text-slate-400 uppercase tracking-widest mb-2">目前房間代碼</div>
                                 {roomCode ? (
                                     <>
-                                        <div className="text-4xl font-mono font-bold text-yellow-400 tracking-widest mb-4">{roomCode}</div>
-                                        <div className="bg-white p-2 rounded-lg inline-block mx-auto">
-                                            <img src={getQrData()} alt="Room QR" className="w-32 h-32" />
+                                        <div className="text-4xl font-mono font-bold text-yellow-400 tracking-widest mb-4 select-all">{roomCode}</div>
+                                        <div 
+                                            className="bg-white p-2 rounded-lg inline-block mx-auto cursor-zoom-in hover:scale-105 transition-transform group relative"
+                                            onClick={() => setShowLargeQr(true)}
+                                        >
+                                            <img src={getQrUrl("150x150")} alt="Room QR" className="w-32 h-32" />
+                                            <div className="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/20 transition-colors rounded-lg">
+                                                <span className="opacity-0 group-hover:opacity-100 bg-black/70 text-white text-xs px-2 py-1 rounded backdrop-blur-sm pointer-events-none">點擊放大</span>
+                                            </div>
                                         </div>
                                         <div className="mt-2 text-xs text-slate-500">學生掃描後可自動填入代碼</div>
                                     </>
@@ -1077,23 +1232,80 @@
                     if (navigator.vibrate) navigator.vibrate(200);
                 }
             };
-
+            
             const insertSymbol = (symbol) => {
-                const input = inputRef.current; if (!input) return;
-                const start = input.selectionStart; const end = input.selectionEnd;
-                const text = input.value;
+                const input = inputRef.current;
+                
+                // Determine insertion point: prefer current cursor, fallback to end if lost
+                let start = cursorPos;
+                let end = cursorPos;
+
+                // If input is actually focused in DOM, use its real selection properties
+                if (input && document.activeElement === input) {
+                    start = input.selectionStart;
+                    end = input.selectionEnd;
+                } else if (input) {
+                    // If not focused (e.g. lost focus to button click), assume state cursorPos is valid
+                    // or default to end of string if unsure
+                    if (start > inputAnswer.length) start = inputAnswer.length;
+                    end = start;
+                }
+
+                const text = inputAnswer;
                 const newText = text.substring(0, start) + symbol + text.substring(end);
-                setInputAnswer(newText); setCursorPos(start + symbol.length);
+                const newPos = start + symbol.length;
+
+                setInputAnswer(newText);
+                setCursorPos(newPos);
+                
+                // Force focus and set selection after render cycle
+                setTimeout(() => {
+                    if (inputRef.current) {
+                        inputRef.current.focus();
+                        inputRef.current.setSelectionRange(newPos, newPos);
+                    }
+                }, 0);
             };
+
             const deleteSymbol = () => {
-                const input = inputRef.current; if (!input) return;
-                const start = input.selectionStart; const end = input.selectionEnd;
-                const text = input.value;
-                if (start !== end) { setInputAnswer(text.substring(0, start) + text.substring(end)); setCursorPos(start); } 
-                else if (start > 0) { setInputAnswer(text.substring(0, start - 1) + text.substring(end)); setCursorPos(start - 1); }
-                input.focus();
+                const input = inputRef.current;
+                
+                let start = cursorPos;
+                let end = cursorPos;
+
+                if (input && document.activeElement === input) {
+                    start = input.selectionStart;
+                    end = input.selectionEnd;
+                }
+
+                const text = inputAnswer;
+                let newText = text;
+                let newPos = start;
+
+                if (start !== end) {
+                    newText = text.substring(0, start) + text.substring(end);
+                    newPos = start;
+                } else if (start > 0) {
+                    newText = text.substring(0, start - 1) + text.substring(end);
+                    newPos = start - 1;
+                }
+
+                setInputAnswer(newText);
+                setCursorPos(newPos);
+
+                setTimeout(() => {
+                    if (inputRef.current) {
+                        inputRef.current.focus();
+                        inputRef.current.setSelectionRange(newPos, newPos);
+                    }
+                }, 0);
+            };
+
+            const handleSelect = (e) => {
+                // Sync React state with DOM state on user interaction
+                setCursorPos(e.target.selectionStart);
             };
-            const handleSelect = (e) => setCursorPos(e.target.selectionStart);
+
             const renderMath = (text) => <span className="font-math text-3xl md:text-4xl">{text.split(/(\^[0-9]+)/g).map((part, i) => part.startsWith("^") ? <sup key={i} className="text-xs font-bold relative -top-3 left-0.5" style={{verticalAlign: 'super'}}>{part.substring(1)}</sup> : part)}</span>;
             const getDynamicKeyboard = (question) => { const vars = new Set(); (question.match(/[a-z]/g) || []).forEach(m => vars.add(m)); if (vars.size === 0) vars.add('x'); return Array.from(vars).sort(); };
             
@@ -1242,8 +1454,8 @@
                          </div>
                          <div className={`absolute bottom-0 left-0 right-0 bg-[#16101a] border-t border-slate-800 p-2 z-50 transition-transform duration-500 ${chestOpen ? 'translate-y-full' : 'translate-y-0'}`}>
                              <div className="max-w-2xl mx-auto">
-                                 <div className="flex gap-1 mb-1.5 justify-center">{[...dynamicVars, '+', '-', '(', ')', '^2'].map(sym => <button key={sym} onClick={() => insertSymbol(sym)} className="flex-1 h-10 md:h-12 bg-[#2d2033] hover:bg-[#3e2d45] active:bg-[#251a2b] text-amber-100 rounded border-b-2 border-[#1a101f] active:border-b-0 active:translate-y-[2px] transition-all font-mono text-lg md:text-xl font-bold shadow-sm">{sym === '^2' ? <span>^<sup className="text-xs font-bold relative -top-1">2</sup></span> : sym}</button>)}<button onClick={deleteSymbol} className="flex-none w-14 h-10 md:h-12 bg-slate-700 hover:bg-slate-600 text-slate-200 rounded border-b-2 border-slate-800 active:border-b-0 active:translate-y-[2px] flex items-center justify-center"><Icons.Backspace /></button><button onClick={() => { setInputAnswer(""); setCursorPos(0); inputRef.current?.focus(); }} className="flex-none w-14 h-10 md:h-12 bg-red-900/30 hover:bg-red-900/50 text-red-400 rounded border-b-2 border-red-900/50 active:border-b-0 active:translate-y-[2px] text-xs font-bold">清除</button></div>
-                                 <div className="flex gap-1 justify-center">{['1','2','3','4','5','6','7','8','9','0'].map(num => <button key={num} onClick={() => insertSymbol(num)} className="flex-1 h-10 md:h-12 bg-[#1f1623] hover:bg-[#2d2033] active:bg-[#16101a] text-slate-400 hover:text-amber-200 rounded border-b-2 border-black active:border-b-0 active:translate-y-[2px] transition-all font-mono text-lg md:text-xl font-bold shadow-sm">{num}</button>)}</div>
+                                 <div className="flex gap-1 mb-1.5 justify-center">{[...dynamicVars, '+', '-', '(', ')', '^2'].map(sym => <button onMouseDown={(e) => e.preventDefault()} onTouchStart={(e) => e.preventDefault()} key={sym} onClick={() => insertSymbol(sym)} className="flex-1 h-10 md:h-12 bg-[#2d2033] hover:bg-[#3e2d45] active:bg-[#251a2b] text-amber-100 rounded border-b-2 border-[#1a101f] active:border-b-0 active:translate-y-[2px] transition-all font-mono text-lg md:text-xl font-bold shadow-sm">{sym === '^2' ? <span>^<sup className="text-xs font-bold relative -top-1">2</sup></span> : sym}</button>)}<button onMouseDown={(e) => e.preventDefault()} onTouchStart={(e) => e.preventDefault()} onClick={deleteSymbol} className="flex-none w-14 h-10 md:h-12 bg-slate-700 hover:bg-slate-600 text-slate-200 rounded border-b-2 border-slate-800 active:border-b-0 active:translate-y-[2px] flex items-center justify-center"><Icons.Backspace /></button><button onMouseDown={(e) => e.preventDefault()} onTouchStart={(e) => e.preventDefault()} onClick={() => { setInputAnswer(""); setCursorPos(0); inputRef.current?.focus(); }} className="flex-none w-14 h-10 md:h-12 bg-red-900/30 hover:bg-red-900/50 text-red-400 rounded border-b-2 border-red-900/50 active:border-b-0 active:translate-y-[2px] text-xs font-bold">清除</button></div>
+                                 <div className="flex gap-1 justify-center">{['1','2','3','4','5','6','7','8','9','0'].map(num => <button onMouseDown={(e) => e.preventDefault()} onTouchStart={(e) => e.preventDefault()} key={num} onClick={() => insertSymbol(num)} className="flex-1 h-10 md:h-12 bg-[#1f1623] hover:bg-[#2d2033] active:bg-[#16101a] text-slate-400 hover:text-amber-200 rounded border-b-2 border-black active:border-b-0 active:translate-y-[2px] transition-all font-mono text-lg md:text-xl font-bold shadow-sm">{num}</button>)}</div>
                              </div>
                          </div>
                      </div>