Team Ai
Apppublic

Wisetsut/integer-web-app

sourceHugging Faceupdated 5mo agoView on Hugging Face
0likes
integer.html647 linesDownload Raw Back to root
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>