Wisetsut/integer-web-app
0
1<!DOCTYPE html>
2<html lang="th">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, shrink-to-fit=no">
6 <title>การบวกจำนวนเต็ม • ม.1 | สื่อการสอนพร้อม Instant Feedback</title>
7 <!-- Tailwind CSS -->
8 <script src="https://cdn.tailwindcss.com"></script>
9 <!-- Font Sarabun -->
10 <link href="https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
11 <style>
12 body {
13 font-family: 'Sarabun', sans-serif;
14 background: linear-gradient(135deg, #f3e8ff 0%, #faf5ff 50%, #ffffff 100%);
15 min-height: 100vh;
16 }
17 .fade-in-up {
18 animation: fadeInUp 0.6s ease-out forwards;
19 opacity: 0;
20 transform: translateY(20px);
21 }
22 @keyframes fadeInUp {
23 to { opacity: 1; transform: translateY(0); }
24 }
25 .delay-1 { animation-delay: 0.2s; }
26 .delay-2 { animation-delay: 0.4s; }
27 .delay-3 { animation-delay: 0.6s; }
28 .delay-4 { animation-delay: 0.8s; }
29 .delay-5 { animation-delay: 1.0s; }
30 .card {
31 background: rgba(255, 255, 255, 0.85);
32 backdrop-filter: blur(12px);
33 border-radius: 1.5rem;
34 border: 1px solid rgba(196, 181, 253, 0.5);
35 box-shadow: 0 20px 40px -12px rgba(124, 58, 237, 0.15);
36 }
37 .step-indicator {
38 background: linear-gradient(135deg, #7c3aed, #a78bfa);
39 color: white;
40 width: 36px;
41 height: 36px;
42 border-radius: 50%;
43 display: flex;
44 align-items: center;
45 justify-content: center;
46 font-weight: 700;
47 box-shadow: 0 6px 14px rgba(124, 58, 237, 0.3);
48 }
49 .example-card {
50 background: linear-gradient(145deg, #faf5ff, #ede9fe);
51 border-left: 5px solid #7c3aed;
52 transition: all 0.3s;
53 }
54 .example-card:hover {
55 background: linear-gradient(145deg, #ede9fe, #ddd6fe);
56 transform: translateY(-3px);
57 box-shadow: 0 12px 24px -8px rgba(124, 58, 237, 0.25);
58 }
59 .btn-primary {
60 background: linear-gradient(120deg, #7c3aed, #a78bfa);
61 transition: all 0.3s;
62 border: none;
63 cursor: pointer;
64 }
65 .btn-primary:hover {
66 background: linear-gradient(120deg, #6d28d9, #8b5cf6);
67 box-shadow: 0 8px 20px -6px rgba(124, 58, 237, 0.5);
68 transform: scale(1.03);
69 }
70 .feedback-correct {
71 background: #d1fae5;
72 border-left: 4px solid #10b981;
73 animation: slideIn 0.4s ease-out;
74 }
75 .feedback-incorrect {
76 background: #fee2e2;
77 border-left: 4px solid #ef4444;
78 animation: slideIn 0.4s ease-out;
79 }
80 .feedback-hint {
81 background: #fef3c7;
82 border-left: 4px solid #f59e0b;
83 animation: slideIn 0.4s ease-out;
84 }
85 @keyframes slideIn {
86 from { opacity: 0; transform: translateX(-10px); }
87 to { opacity: 1; transform: translateX(0); }
88 }
89 .pulse-dot {
90 width: 8px;
91 height: 8px;
92 background: #10b981;
93 border-radius: 50%;
94 display: inline-block;
95 animation: pulse 1.5s infinite;
96 }
97 @keyframes pulse {
98 0%, 100% { opacity: 1; transform: scale(1); }
99 50% { opacity: 0.6; transform: scale(1.5); }
100 }
101 .progress-dot {
102 width: 12px;
103 height: 12px;
104 border-radius: 50%;
105 background: #d8b4fe;
106 transition: all 0.3s;
107 }
108 .progress-dot.active {
109 background: #7c3aed;
110 box-shadow: 0 0 12px rgba(124, 58, 237, 0.6);
111 transform: scale(1.3);
112 }
113 </style>
114</head>
115<body class="antialiased text-gray-800 p-4 md:p-6">
116
117 <!-- Header -->
118 <div class="max-w-5xl mx-auto text-center mb-6 fade-in-up">
119 <span class="text-4xl md:text-5xl">➕</span>
120 <h1 class="text-3xl md:text-4xl font-bold text-purple-900 mt-2">
121 การบวกจำนวนเต็ม <span class="text-purple-600">ม.1</span>
122 </h1>
123 <p class="text-purple-500 text-lg mt-1">🔢 เรียนรู้ผ่านกิจกรรม พร้อมตัวช่วยทันทีเมื่อต้องการ</p>
124 <!-- Progress indicator -->
125 <div class="flex items-center justify-center gap-3 mt-4">
126 <span class="text-sm text-purple-600 font-medium">ขั้นนำ</span>
127 <span class="progress-dot active" id="dot1"></span>
128 <span class="text-purple-300">—</span>
129 <span class="text-sm text-purple-400">ขั้นสอน</span>
130 <span class="progress-dot" id="dot2"></span>
131 <span class="text-purple-300">—</span>
132 <span class="text-sm text-purple-400">ขั้นสรุป</span>
133 <span class="progress-dot" id="dot3"></span>
134 </div>
135 </div>
136
137 <main class="max-w-5xl mx-auto space-y-8">
138
139 <!-- ==================== ขั้นนำ ==================== -->
140 <section id="step-intro" class="scroll-mt-20 card p-6 md:p-8 fade-in-up">
141 <div class="flex items-center gap-3 mb-4">
142 <span class="step-indicator">1</span>
143 <h2 class="text-2xl md:text-3xl font-bold text-purple-900">🌅 ขั้นนำ : สถานการณ์ในชีวิตประจำวัน</h2>
144 </div>
145
146 <!-- เนื้อหา -->
147 <div class="bg-purple-50 p-4 md:p-6 rounded-2xl border border-purple-200 mb-5">
148 <p class="text-lg text-purple-800 font-semibold mb-2">
149 📍 ลองนึกถึง "ลิฟต์" ในห้างสรรพสินค้า...
150 </p>
151 <p class="text-gray-700 leading-relaxed">
152 สมมติว่าชั้นล่างสุดคือชั้น <span class="font-bold text-red-600">-2</span> (ใต้ดิน)
153 และคุณอยู่ที่ชั้น <span class="font-bold text-blue-600">+3</span>
154 ถ้ากดลิฟต์ให้ <span class="font-semibold text-purple-700">ลงไป 5 ชั้น</span>
155 คุณจะไปอยู่ชั้นอะไร?
156 <span class="italic text-gray-500">(นี่คือการบวกจำนวนเต็ม: 3 + (-5) = ?)</span>
157 </p>
158 </div>
159
160 <!-- คำถามปลายเปิด -->
161 <div class="space-y-4 fade-in-up delay-1">
162 <div class="bg-white p-5 rounded-xl border border-purple-200 shadow-sm">
163 <p class="font-bold text-purple-800 text-lg mb-2">
164 💬 คำถามชวนคิดที่ 1
165 </p>
166 <p class="text-gray-700">
167 ถ้าคุณมีเงินอยู่ <span class="text-green-600 font-bold">200 บาท</span>
168 แต่ต้องจ่ายค่าขนมให้เพื่อน <span class="text-red-600 font-bold">350 บาท</span>
169 สถานะการเงินของคุณจะเป็นอย่างไร? คิดเป็นจำนวนเต็มได้เท่าไร?
170 </p>
171 <div class="mt-3 flex flex-wrap items-center gap-2">
172 <input
173 type="text"
174 id="introQ1"
175 class="flex-1 min-w-[200px] p-3 border border-purple-200 rounded-xl bg-purple-50 text-purple-900 placeholder-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-400"
176 placeholder="เขียนคำตอบที่นี่...">
177 <button class="btn-primary text-white px-4 py-2 rounded-full font-semibold text-sm flex items-center gap-1" onclick="checkIntroQ1()">
178 <span>✅</span> ตรวจคำตอบ
179 </button>
180 </div>
181 <div id="feedback-intro1" class="mt-3 hidden"></div>
182 </div>
183
184 <div class="bg-white p-5 rounded-xl border border-purple-200 shadow-sm fade-in-up delay-2">
185 <p class="font-bold text-purple-800 text-lg mb-2">
186 🌡️ คำถามชวนคิดที่ 2
187 </p>
188 <p class="text-gray-700">
189 อุณหภูมิตอนเช้าวัดได้ <span class="text-blue-600 font-bold">-3 องศาเซลเซียส</span>
190 ตอนเที่ยงอุณหภูมิ <span class="font-semibold text-purple-700">เพิ่มขึ้น 8 องศา</span>
191 อุณหภูมิตอนเที่ยงเป็นเท่าไร? เขียนเป็นประโยคสัญลักษณ์ได้ว่าอย่างไร?
192 </p>
193 <div class="mt-3 flex flex-wrap items-center gap-2">
194 <input
195 type="text"
196 id="introQ2"
197 class="flex-1 min-w-[200px] p-3 border border-purple-200 rounded-xl bg-purple-50 text-purple-900 placeholder-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-400"
198 placeholder="คำตอบและประโยคสัญลักษณ์...">
199 <button class="btn-primary text-white px-4 py-2 rounded-full font-semibold text-sm flex items-center gap-1" onclick="checkIntroQ2()">
200 <span>✅</span> ตรวจคำตอบ
201 </button>
202 </div>
203 <div id="feedback-intro2" class="mt-3 hidden"></div>
204 </div>
205 </div>
206 </section>
207
208 <!-- ==================== ขั้นสอน ==================== -->
209 <section id="step-teach" class="scroll-mt-20 card p-6 md:p-8 fade-in-up delay-2">
210 <div class="flex items-center gap-3 mb-4">
211 <span class="step-indicator">2</span>
212 <h2 class="text-2xl md:text-3xl font-bold text-purple-900">📖 ขั้นสอน : 4 กรณีการบวกจำนวนเต็ม</h2>
213 </div>
214
215 <!-- กริด 4 กรณี -->
216 <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
217
218 <!-- กรณี 1: บวก + บวก -->
219 <div class="example-card p-5 rounded-xl fade-in-up delay-1">
220 <span class="text-sm bg-green-200 text-green-800 px-3 py-1 rounded-full font-semibold">กรณี 1</span>
221 <h3 class="text-xl font-bold text-green-700 mt-2">➕ จำนวนเต็มบวก + จำนวนเต็มบวก</h3>
222 <p class="text-gray-600 mt-2">ผลลัพธ์เป็น <span class="font-bold text-green-700">บวกเสมอ</span> และมีค่ามากขึ้น</p>
223 <div class="bg-white p-3 rounded-lg mt-3 text-center">
224 <span class="text-2xl font-mono font-bold text-green-600">(+4) + (+3) = +7</span>
225 </div>
226 <p class="text-sm text-gray-500 mt-2">ตัวอย่าง: มีเงิน 4 บาท ได้เพิ่มอีก 3 บาท → มีเงิน 7 บาท</p>
227 <!-- Instant feedback ลองเอง -->
228 <div class="mt-4 pt-3 border-t border-purple-200">
229 <p class="text-sm font-semibold text-purple-700 mb-2">🔍 ลองคำนวณ: (+12) + (+9) = ?</p>
230 <div class="flex gap-2">
231 <input type="text" id="case1Q" class="flex-1 p-2 border border-green-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-300" placeholder="คำตอบ?">
232 <button class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-semibold hover:bg-green-600 transition" onclick="checkCase1()">ตรวจ</button>
233 </div>
234 <div id="feedback-case1" class="mt-2 text-sm hidden"></div>
235 </div>
236 </div>
237
238 <!-- กรณี 2: ลบ + ลบ -->
239 <div class="example-card p-5 rounded-xl fade-in-up delay-2">
240 <span class="text-sm bg-red-200 text-red-800 px-3 py-1 rounded-full font-semibold">กรณี 2</span>
241 <h3 class="text-xl font-bold text-red-700 mt-2">➖ จำนวนเต็มลบ + จำนวนเต็มลบ</h3>
242 <p class="text-gray-600 mt-2">ผลลัพธ์เป็น <span class="font-bold text-red-700">ลบเสมอ</span> และมีค่าติดลบมากขึ้น</p>
243 <div class="bg-white p-3 rounded-lg mt-3 text-center">
244 <span class="text-2xl font-mono font-bold text-red-600">(-5) + (-2) = -7</span>
245 </div>
246 <p class="text-sm text-gray-500 mt-2">ตัวอย่าง: ติดหนี้ 5 บาท กู้เพิ่มอีก 2 บาท → ติดหนี้รวม 7 บาท</p>
247 <div class="mt-4 pt-3 border-t border-purple-200">
248 <p class="text-sm font-semibold text-purple-700 mb-2">🔍 ลองคำนวณ: (-8) + (-6) = ?</p>
249 <div class="flex gap-2">
250 <input type="text" id="case2Q" class="flex-1 p-2 border border-red-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-300" placeholder="คำตอบ?">
251 <button class="bg-red-500 text-white px-3 py-1 rounded-full text-xs font-semibold hover:bg-red-600 transition" onclick="checkCase2()">ตรวจ</button>
252 </div>
253 <div id="feedback-case2" class="mt-2 text-sm hidden"></div>
254 </div>
255 </div>
256
257 <!-- กรณี 3: บวก + ลบ -->
258 <div class="example-card p-5 rounded-xl fade-in-up delay-3">
259 <span class="text-sm bg-purple-200 text-purple-800 px-3 py-1 rounded-full font-semibold">กรณี 3</span>
260 <h3 class="text-xl font-bold text-purple-700 mt-2">🔵 จำนวนเต็มบวก + จำนวนเต็มลบ</h3>
261 <p class="text-gray-600 mt-2">ผลลัพธ์ขึ้นอยู่กับ <span class="font-bold text-purple-700">ค่าสัมบูรณ์ที่มากกว่า</span></p>
262 <div class="bg-white p-3 rounded-lg mt-3 text-center space-y-2">
263 <span class="text-xl font-mono font-bold text-blue-600">(+8) + (-3) = +5</span><br>
264 <span class="text-xl font-mono font-bold text-red-600">(+2) + (-6) = -4</span>
265 </div>
266 <p class="text-sm text-gray-500 mt-2">คิดเหมือน "มี" แล้ว "ใช้" ดูว่าเหลือหรือขาด</p>
267 <div class="mt-4 pt-3 border-t border-purple-200">
268 <p class="text-sm font-semibold text-purple-700 mb-2">🔍 ลองคำนวณ: (+15) + (-22) = ?</p>
269 <div class="flex gap-2">
270 <input type="text" id="case3Q" class="flex-1 p-2 border border-purple-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-300" placeholder="คำตอบ?">
271 <button class="bg-purple-500 text-white px-3 py-1 rounded-full text-xs font-semibold hover:bg-purple-600 transition" onclick="checkCase3()">ตรวจ</button>
272 </div>
273 <div id="feedback-case3" class="mt-2 text-sm hidden"></div>
274 </div>
275 </div>
276
277 <!-- กรณี 4: ลบ + บวก -->
278 <div class="example-card p-5 rounded-xl fade-in-up delay-4">
279 <span class="text-sm bg-indigo-200 text-indigo-800 px-3 py-1 rounded-full font-semibold">กรณี 4</span>
280 <h3 class="text-xl font-bold text-indigo-700 mt-2">🟣 จำนวนเต็มลบ + จำนวนเต็มบวก</h3>
281 <p class="text-gray-600 mt-2">เหมือนกรณี 3 เพียงสลับที่ <span class="font-bold text-indigo-700">ใช้หลักการเดียวกัน</span></p>
282 <div class="bg-white p-3 rounded-lg mt-3 text-center space-y-2">
283 <span class="text-xl font-mono font-bold text-red-600">(-7) + (+4) = -3</span><br>
284 <span class="text-xl font-mono font-bold text-blue-600">(-1) + (+9) = +8</span>
285 </div>
286 <p class="text-sm text-gray-500 mt-2">เริ่มจาก "ติดลบ" แล้ว "ได้รับ" ดูว่ายังติดลบหรือกลับเป็นบวก</p>
287 <div class="mt-4 pt-3 border-t border-purple-200">
288 <p class="text-sm font-semibold text-purple-700 mb-2">🔍 ลองคำนวณ: (-20) + (+14) = ?</p>
289 <div class="flex gap-2">
290 <input type="text" id="case4Q" class="flex-1 p-2 border border-indigo-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300" placeholder="คำตอบ?">
291 <button class="bg-indigo-500 text-white px-3 py-1 rounded-full text-xs font-semibold hover:bg-indigo-600 transition" onclick="checkCase4()">ตรวจ</button>
292 </div>
293 <div id="feedback-case4" class="mt-2 text-sm hidden"></div>
294 </div>
295 </div>
296 </div>
297
298 <!-- คำถามเช็กความเข้าใจ -->
299 <div class="bg-amber-50 border border-amber-200 rounded-2xl p-5 fade-in-up delay-5">
300 <p class="font-bold text-amber-800 text-lg mb-3">✋ เช็กความเข้าใจ (ก่อนไปขั้นสรุป)</p>
301 <div class="space-y-4">
302 <div>
303 <p class="font-semibold text-gray-800">1. (-10) + (-4) = ? อยู่ในกรณีใด และผลลัพธ์เป็นเท่าไร?</p>
304 <div class="flex flex-wrap gap-2 mt-2">
305 <input type="text" id="checkQ1" class="flex-1 min-w-[180px] p-2 border border-amber-300 rounded-lg bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-amber-400" placeholder="พิมพ์คำตอบ...">
306 <button class="btn-primary text-white px-4 py-2 rounded-full font-semibold text-sm" onclick="checkUnderstand1()">ตรวจ</button>
307 </div>
308 <div id="feedback-check1" class="mt-2 text-sm hidden"></div>
309 </div>
310 <div>
311 <p class="font-semibold text-gray-800">2. จงยกตัวอย่างสถานการณ์ที่ผลลัพธ์ของการบวกจำนวนเต็มเป็น 0</p>
312 <div class="flex flex-wrap gap-2 mt-2">
313 <input type="text" id="checkQ2" class="flex-1 min-w-[180px] p-2 border border-amber-300 rounded-lg bg-white text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-amber-400" placeholder="ตัวอย่างเช่น...">
314 <button class="btn-primary text-white px-4 py-2 rounded-full font-semibold text-sm" onclick="checkUnderstand2()">ตรวจ</button>
315 </div>
316 <div id="feedback-check2" class="mt-2 text-sm hidden"></div>
317 </div>
318 </div>
319 </div>
320 </section>
321
322 <!-- ==================== ขั้นสรุป ==================== -->
323 <section id="step-summary" class="scroll-mt-20 card p-6 md:p-8 fade-in-up delay-3">
324 <div class="flex items-center gap-3 mb-4">
325 <span class="step-indicator">3</span>
326 <h2 class="text-2xl md:text-3xl font-bold text-purple-900">🎯 ขั้นสรุป : หลักการสำคัญ + แบบฝึกหัด</h2>
327 </div>
328
329 <!-- สรุปเนื้อหา -->
330 <div class="bg-purple-50 p-5 rounded-2xl border border-purple-200 mb-6 fade-in-up delay-1">
331 <h3 class="text-xl font-bold text-purple-800 mb-2">📌 สรุปการบวกจำนวนเต็ม</h3>
332 <ul class="list-disc list-inside space-y-2 text-gray-700">
333 <li><span class="font-semibold text-green-700">เครื่องหมายเหมือนกัน</span> → นำค่าสัมบูรณ์มาบวกกัน ใส่เครื่องหมายเดิม</li>
334 <li><span class="font-semibold text-purple-700">เครื่องหมายต่างกัน</span> → นำค่าสัมบูรณ์มาลบกัน (มากลบน้อย) ใส่เครื่องหมายของจำนวนที่มีค่าสัมบูรณ์มากกว่า</li>
335 <li>การบวกด้วย <span class="font-bold">0</span> ได้จำนวนเดิม (เอกลักษณ์การบวก)</li>
336 </ul>
337 </div>
338
339 <!-- โจทย์แบบฝึกหัด 3 ข้อ (Productive Struggle) -->
340 <div class="space-y-5 fade-in-up delay-2">
341 <p class="font-bold text-purple-800 text-lg flex items-center gap-2">
342 <span>🧗</span> แบบฝึกหัดท้าทาย (ลองคิดด้วยตัวเองก่อนใช้ตัวช่วย)
343 </p>
344
345 <!-- ข้อ 1 -->
346 <div class="bg-white p-5 rounded-xl border border-purple-200 shadow-sm">
347 <p class="font-semibold text-gray-800">ข้อ 1: อุณหภูมิที่ขั้วโลกเหนือตอนเที่ยงคืนวัดได้ -25°C อีก 6 ชั่วโมงต่อมาอุณหภูมิลดลงอีก 13°C อุณหภูมิ ณ เวลานั้นเป็นเท่าใด?</p>
348 <div class="mt-3 flex flex-wrap items-center gap-2">
349 <input type="text" id="ex1" class="flex-1 min-w-[150px] p-2 border border-purple-200 rounded-lg bg-purple-50 text-purple-900 placeholder-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-400" placeholder="คำตอบของคุณ...">
350 <button class="btn-primary text-white px-4 py-2 rounded-full font-semibold text-sm" onclick="checkEx1()">✅ ตรวจ</button>
351 <button class="bg-amber-400 text-white px-4 py-2 rounded-full font-semibold text-sm hover:bg-amber-500 transition" onclick="showHint('hint-ex1')">💡 ขอคำใบ้</button>
352 </div>
353 <div id="feedback-ex1" class="mt-3 hidden"></div>
354 <div id="hint-ex1" class="mt-2 hidden feedback-hint p-3 rounded-lg text-sm">
355 <span class="font-bold">💡 คำใบ้:</span> อุณหภูมิลดลง = บวกด้วยจำนวนลบ (-25) + (-13) = ?
356 </div>
357 </div>
358
359 <!-- ข้อ 2 -->
360 <div class="bg-white p-5 rounded-xl border border-purple-200 shadow-sm">
361 <p class="font-semibold text-gray-800">ข้อ 2: นักดำน้ำอยู่ที่ระดับความลึก 15 เมตรจากผิวน้ำ (-15) จากนั้นว่ายขึ้นมา 9 เมตร (+9) ตอนนี้เขาอยู่ที่ระดับใด?</p>
362 <div class="mt-3 flex flex-wrap items-center gap-2">
363 <input type="text" id="ex2" class="flex-1 min-w-[150px] p-2 border border-purple-200 rounded-lg bg-purple-50 text-purple-900 placeholder-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-400" placeholder="คำตอบของคุณ...">
364 <button class="btn-primary text-white px-4 py-2 rounded-full font-semibold text-sm" onclick="checkEx2()">✅ ตรวจ</button>
365 <button class="bg-amber-400 text-white px-4 py-2 rounded-full font-semibold text-sm hover:bg-amber-500 transition" onclick="showHint('hint-ex2')">💡 ขอคำใบ้</button>
366 </div>
367 <div id="feedback-ex2" class="mt-3 hidden"></div>
368 <div id="hint-ex2" class="mt-2 hidden feedback-hint p-3 rounded-lg text-sm">
369 <span class="font-bold">💡 คำใบ้:</span> ขึ้นมา = บวกด้วยจำนวนบวก (-15) + (+9) = ? เครื่องหมายต่างกัน ให้นำค่ามาลบกัน
370 </div>
371 </div>
372
373 <!-- ข้อ 3 -->
374 <div class="bg-white p-5 rounded-xl border border-purple-200 shadow-sm">
375 <p class="font-semibold text-gray-800">ข้อ 3: (+32) + (-45) + (+18) = ? (ลองบวกทีละคู่)</p>
376 <div class="mt-3 flex flex-wrap items-center gap-2">
377 <input type="text" id="ex3" class="flex-1 min-w-[150px] p-2 border border-purple-200 rounded-lg bg-purple-50 text-purple-900 placeholder-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-400" placeholder="คำตอบของคุณ...">
378 <button class="btn-primary text-white px-4 py-2 rounded-full font-semibold text-sm" onclick="checkEx3()">✅ ตรวจ</button>
379 <button class="bg-amber-400 text-white px-4 py-2 rounded-full font-semibold text-sm hover:bg-amber-500 transition" onclick="showHint('hint-ex3')">💡 ขอคำใบ้</button>
380 </div>
381 <div id="feedback-ex3" class="mt-3 hidden"></div>
382 <div id="hint-ex3" class="mt-2 hidden feedback-hint p-3 rounded-lg text-sm">
383 <span class="font-bold">💡 คำใบ้:</span> ลองบวกสองตัวแรกก่อน: (+32)+(-45) = ? แล้วค่อยบวกกับ (+18)
384 </div>
385 </div>
386 </div>
387
388 <div class="text-center mt-6 fade-in-up delay-3">
389 <p class="text-purple-600 font-medium text-lg">🌟 ความพยายามในการคิดคือการเรียนรู้ที่แท้จริง! 🌟</p>
390 </div>
391 </section>
392 </main>
393
394 <script>
395 // ============ ฟังก์ชัน Instant Feedback ============
396
397 // ขั้นนำ คำถามที่ 1
398 function checkIntroQ1() {
399 const input = document.getElementById('introQ1').value.trim();
400 const fb = document.getElementById('feedback-intro1');
401 fb.classList.remove('hidden');
402
403 if (input === '' || input === null) {
404 fb.className = 'mt-3 feedback-hint p-3 rounded-lg text-sm';
405 fb.innerHTML = '<span class="font-bold">⚠️ กรุณาเขียนคำตอบก่อนตรวจ</span>';
406 return;
407 }
408
409 const normalized = input.replace(/\s+/g, '').toLowerCase();
410 const correctAnswers = ['-150', '150', 'ติดลบ150', 'ขาด150', 'ขาดทุน150', '-150บาท', 'ติดหนี้150'];
411 const isCorrect = correctAnswers.some(ans => normalized.includes(ans.replace(/\s+/g, '')));
412
413 if (isCorrect || normalized.includes('-150') || (normalized.includes('150') && (normalized.includes('-') || normalized.includes('ลบ') || normalized.includes('ขาด') || normalized.includes('หนี้')))) {
414 fb.className = 'mt-3 feedback-correct p-3 rounded-lg text-sm';
415 fb.innerHTML = '<span class="font-bold flex items-center gap-2"><span class="pulse-dot"></span>✅ ถูกต้อง!</span> 200 + (-350) = -150 บาท (ขาดทุน 150 บาท)';
416 } else if (normalized.includes('150') && !normalized.includes('-')) {
417 fb.className = 'mt-3 feedback-incorrect p-3 rounded-lg text-sm';
418 fb.innerHTML = '<span class="font-bold">❌ ใกล้เคียง!</span> ต้องตอบ -150 เพราะเงินไม่พอจ่าย (200-350 = -150)';
419 } else {
420 fb.className = 'mt-3 feedback-incorrect p-3 rounded-lg text-sm';
421 fb.innerHTML = '<span class="font-bold">❌ ยังไม่ถูก</span> ลองคิดว่า: มี 200 แต่ต้องจ่าย 350 จะเหลือหรือขาด? คิดเป็น 200 + (-350) = ?';
422 }
423 }
424
425 // ขั้นนำ คำถามที่ 2
426 function checkIntroQ2() {
427 const input = document.getElementById('introQ2').value.trim();
428 const fb = document.getElementById('feedback-intro2');
429 fb.classList.remove('hidden');
430
431 if (input === '') {
432 fb.className = 'mt-3 feedback-hint p-3 rounded-lg text-sm';
433 fb.innerHTML = '<span class="font-bold">⚠️ กรุณาเขียนคำตอบก่อนตรวจ</span>';
434 return;
435 }
436
437 const normalized = input.replace(/\s+/g, '').toLowerCase();
438 const hasAnswer = normalized.includes('5') || normalized.includes('+5');
439 const hasSymbol = normalized.includes('(-3)+8') || normalized.includes('-3+8') || normalized.includes('(-3)+(+8)') || normalized.includes('8+(-3)');
440
441 if (hasAnswer && hasSymbol) {
442 fb.className = 'mt-3 feedback-correct p-3 rounded-lg text-sm';
443 fb.innerHTML = '<span class="font-bold flex items-center gap-2"><span class="pulse-dot"></span>✅ ถูกต้อง!</span> (-3) + (+8) = +5 องศาเซลเซียส';
444 } else if (hasAnswer && !hasSymbol) {
445 fb.className = 'mt-3 feedback-hint p-3 rounded-lg text-sm';
446 fb.innerHTML = '<span class="font-bold">👍 คำตอบถูก แต่ลองเขียนประโยคสัญลักษณ์ด้วย:</span> (-3) + (+8) = +5';
447 } else {
448 fb.className = 'mt-3 feedback-incorrect p-3 rounded-lg text-sm';
449 fb.innerHTML = '<span class="font-bold">❌ ยังไม่สมบูรณ์</span> อุณหภูมิเพิ่มขึ้น 8 จาก -3 คือ (-3) + (+8) = +5°C';
450 }
451 }
452
453 // ขั้นสอน กรณีที่ 1
454 function checkCase1() {
455 const input = document.getElementById('case1Q').value.trim();
456 const fb = document.getElementById('feedback-case1');
457 fb.classList.remove('hidden');
458 const answer = '+21 หรือ 21';
459
460 if (input === '21' || input === '+21' || input === '21' || input === '21 ') {
461 fb.className = 'mt-2 feedback-correct p-2 rounded-lg text-xs';
462 fb.innerHTML = '✅ ถูกต้อง! (+12) + (+9) = +21';
463 } else {
464 fb.className = 'mt-2 feedback-incorrect p-2 rounded-lg text-xs';
465 fb.innerHTML = '❌ ลองใหม่: บวก+บวก ให้นำค่ามารวมกัน 12+9 = 21';
466 }
467 }
468
469 // ขั้นสอน กรณีที่ 2
470 function checkCase2() {
471 const input = document.getElementById('case2Q').value.trim();
472 const fb = document.getElementById('feedback-case2');
473 fb.classList.remove('hidden');
474
475 if (input === '-14' || input === '-14' || input === '(-14)') {
476 fb.className = 'mt-2 feedback-correct p-2 rounded-lg text-xs';
477 fb.innerHTML = '✅ ถูกต้อง! (-8) + (-6) = -14';
478 } else {
479 fb.className = 'mt-2 feedback-incorrect p-2 rounded-lg text-xs';
480 fb.innerHTML = '❌ ลองใหม่: ลบ+ลบ ให้นำค่ามารวมกันแล้วใส่เครื่องหมายลบ 8+6=14 → -14';
481 }
482 }
483
484 // ขั้นสอน กรณีที่ 3
485 function checkCase3() {
486 const input = document.getElementById('case3Q').value.trim();
487 const fb = document.getElementById('feedback-case3');
488 fb.classList.remove('hidden');
489
490 if (input === '-7' || input === '-7' || input === '(-7)') {
491 fb.className = 'mt-2 feedback-correct p-2 rounded-lg text-xs';
492 fb.innerHTML = '✅ ถูกต้อง! (+15) + (-22) = -7 (22-15=7, ใส่เครื่องหมายลบเพราะ |-22| > |+15|)';
493 } else {
494 fb.className = 'mt-2 feedback-incorrect p-2 rounded-lg text-xs';
495 fb.innerHTML = '❌ ลองใหม่: 22-15=7 → ใส่เครื่องหมายของจำนวนที่มากกว่า (-22) → -7';
496 }
497 }
498
499 // ขั้นสอน กรณีที่ 4
500 function checkCase4() {
501 const input = document.getElementById('case4Q').value.trim();
502 const fb = document.getElementById('feedback-case4');
503 fb.classList.remove('hidden');
504
505 if (input === '-6' || input === '-6' || input === '(-6)') {
506 fb.className = 'mt-2 feedback-correct p-2 rounded-lg text-xs';
507 fb.innerHTML = '✅ ถูกต้อง! (-20) + (+14) = -6 (20-14=6, ใส่เครื่องหมายลบเพราะ |-20| > |+14|)';
508 } else {
509 fb.className = 'mt-2 feedback-incorrect p-2 rounded-lg text-xs';
510 fb.innerHTML = '❌ ลองใหม่: 20-14=6 → ใส่เครื่องหมายของจำนวนที่มากกว่า (-20) → -6';
511 }
512 }
513
514 // เช็คความเข้าใจ ข้อ 1
515 function checkUnderstand1() {
516 const input = document.getElementById('checkQ1').value.trim();
517 const fb = document.getElementById('feedback-check1');
518 fb.classList.remove('hidden');
519
520 if (input === '-14' || input === '(-14)' || input === 'กรณี2' || input.includes('กรณีที่2') || input.includes('ลบ+ลบ')) {
521 if (input.includes('-14') || input === '-14') {
522 fb.className = 'mt-2 feedback-correct p-3 rounded-lg text-sm';
523 fb.innerHTML = '✅ ถูกต้อง! (-10)+(-4) = -14 (กรณีที่ 2: ลบ+ลบ)';
524 } else {
525 fb.className = 'mt-2 feedback-hint p-3 rounded-lg text-sm';
526 fb.innerHTML = '👍 ระบุกรณีถูก! ลองคำนวณ: (-10)+(-4) = -(10+4) = -14';
527 }
528 } else {
529 fb.className = 'mt-2 feedback-incorrect p-3 rounded-lg text-sm';
530 fb.innerHTML = '❌ ยังไม่ถูก: (-10)+(-4) อยู่ในกรณีที่ 2 (ลบ+ลบ) ผลลัพธ์ = -(10+4) = -14';
531 }
532 }
533
534 // เช็คความเข้าใจ ข้อ 2
535 function checkUnderstand2() {
536 const input = document.getElementById('checkQ2').value.trim();
537 const fb = document.getElementById('feedback-check2');
538 fb.classList.remove('hidden');
539
540 if (input === '') {
541 fb.className = 'mt-2 feedback-hint p-3 rounded-lg text-sm';
542 fb.innerHTML = '⚠️ กรุณาเขียนตัวอย่างก่อนตรวจ';
543 return;
544 }
545
546 const hasOpposite = (input.includes('5') && input.includes('-5')) ||
547 (input.includes('10') && input.includes('-10')) ||
548 (input.includes('+') && input.includes('-')) ||
549 input.includes('ตรงข้าม') || input.includes('ตรงกันข้าม') ||
550 input.includes('ศูนย์') || input.includes('0');
551
552 if (hasOpposite) {
553 fb.className = 'mt-2 feedback-correct p-3 rounded-lg text-sm';
554 fb.innerHTML = '✅ ดีมาก! ตัวอย่างเช่น (+5) + (-5) = 0 หรือ (-10) + (+10) = 0 (จำนวนตรงข้ามบวกกันได้ศูนย์)';
555 } else {
556 fb.className = 'mt-2 feedback-incorrect p-3 rounded-lg text-sm';
557 fb.innerHTML = '❌ ลองใหม่: จำนวนที่บวกกันได้ 0 ต้องเป็นจำนวนตรงข้าม เช่น (+7) + (-7) = 0';
558 }
559 }
560
561 // แบบฝึกหัดข้อ 1
562 function checkEx1() {
563 const input = document.getElementById('ex1').value.trim();
564 const fb = document.getElementById('feedback-ex1');
565 fb.classList.remove('hidden');
566
567 if (input === '-38' || input === '(-38)' || input === '-38°C' || input === '-38 องศา') {
568 fb.className = 'mt-3 feedback-correct p-3 rounded-lg text-sm';
569 fb.innerHTML = '<span class="font-bold flex items-center gap-2"><span class="pulse-dot"></span>✅ ถูกต้อง!</span> (-25) + (-13) = -38°C';
570 } else {
571 fb.className = 'mt-3 feedback-incorrect p-3 rounded-lg text-sm';
572 fb.innerHTML = '<span class="font-bold">❌ ยังไม่ถูก</span> ลองคิดใหม่ หรือกด "ขอคำใบ้" เพื่อดูแนวทาง';
573 }
574 }
575
576 // แบบฝึกหัดข้อ 2
577 function checkEx2() {
578 const input = document.getElementById('ex2').value.trim();
579 const fb = document.getElementById('feedback-ex2');
580 fb.classList.remove('hidden');
581
582 if (input === '-6' || input === '(-6)' || input === '-6 เมตร' || input === 'ต่ำกว่าผิวน้ำ6เมตร') {
583 fb.className = 'mt-3 feedback-correct p-3 rounded-lg text-sm';
584 fb.innerHTML = '<span class="font-bold flex items-center gap-2"><span class="pulse-dot"></span>✅ ถูกต้อง!</span> (-15) + (+9) = -6 เมตร (อยู่ต่ำกว่าผิวน้ำ 6 เมตร)';
585 } else {
586 fb.className = 'mt-3 feedback-incorrect p-3 rounded-lg text-sm';
587 fb.innerHTML = '<span class="font-bold">❌ ยังไม่ถูก</span> ลองคิดใหม่ หรือกด "ขอคำใบ้" เพื่อดูแนวทาง';
588 }
589 }
590
591 // แบบฝึกหัดข้อ 3
592 function checkEx3() {
593 const input = document.getElementById('ex3').value.trim();
594 const fb = document.getElementById('feedback-ex3');
595 fb.classList.remove('hidden');
596
597 if (input === '5' || input === '+5' || input === '5' || input === '(+5)') {
598 fb.className = 'mt-3 feedback-correct p-3 rounded-lg text-sm';
599 fb.innerHTML = '<span class="font-bold flex items-center gap-2"><span class="pulse-dot"></span>✅ ถูกต้อง!</span> (+32)+(-45)+(+18) = (+32-45)+(+18) = (-13)+(+18) = +5';
600 } else {
601 fb.className = 'mt-3 feedback-incorrect p-3 rounded-lg text-sm';
602 fb.innerHTML = '<span class="font-bold">❌ ยังไม่ถูก</span> ลองบวกทีละคู่ หรือกด "ขอคำใบ้" เพื่อดูแนวทาง';
603 }
604 }
605
606 // ฟังก์ชันแสดงคำใบ้
607 function showHint(id) {
608 const hint = document.getElementById(id);
609 if (hint.classList.contains('hidden')) {
610 hint.classList.remove('hidden');
611 } else {
612 hint.classList.add('hidden');
613 }
614 }
615
616 // ============ Progress Indicator ============
617 const sections = [
618 { id: 'step-intro', dot: 'dot1' },
619 { id: 'step-teach', dot: 'dot2' },
620 { id: 'step-summary', dot: 'dot3' }
621 ];
622
623 function updateProgress() {
624 let currentSection = sections[0].id;
625 sections.forEach(sec => {
626 const el = document.getElementById(sec.id);
627 if (el) {
628 const rect = el.getBoundingClientRect();
629 if (rect.top <= window.innerHeight/2) {
630 currentSection = sec.id;
631 }
632 }
633 });
634
635 sections.forEach(sec => {
636 const dot = document.getElementById(sec.dot);
637 if (dot) {
638 dot.classList.toggle('active', sec.id === currentSection);
639 }
640 });
641 }
642
643 window.addEventListener('scroll', updateProgress);
644 window.addEventListener('load', updateProgress);
645 </script>
646</body>
647</html>