CatThanapha/integer
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, user-scalable=yes">
6 <title>เรียนคณิตศาสตร์: การบวกจำนวนเต็ม | ม.1</title>
7 <style>
8 * {
9 box-sizing: border-box;
10 margin: 0;
11 padding: 0;
12 }
13
14 body {
15 font-family: 'Sarabun', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 background: linear-gradient(135deg, #f5f7fa 0%, #e9edf2 100%);
17 min-height: 100vh;
18 display: flex;
19 justify-content: center;
20 align-items: center;
21 padding: 20px;
22 }
23
24 /* main card container */
25 .app-container {
26 max-width: 1100px;
27 width: 100%;
28 background: white;
29 border-radius: 48px;
30 box-shadow: 0 25px 45px -12px rgba(0,0,0,0.25);
31 overflow: hidden;
32 transition: all 0.2s ease;
33 }
34
35 /* step navigation */
36 .step-tabs {
37 display: flex;
38 background: #1e293b;
39 color: white;
40 flex-wrap: wrap;
41 }
42
43 .step-btn {
44 flex: 1;
45 text-align: center;
46 padding: 16px 8px;
47 font-weight: bold;
48 font-size: 1.2rem;
49 background: #334155;
50 cursor: pointer;
51 transition: all 0.2s;
52 border: none;
53 color: #cbd5e1;
54 letter-spacing: 1px;
55 }
56
57 .step-btn.active {
58 background: #f97316;
59 color: white;
60 box-shadow: inset 0 -3px 0 #ffedd5;
61 }
62
63 .step-btn:hover:not(.active) {
64 background: #475569;
65 color: #f1f5f9;
66 }
67
68 /* content panel */
69 .panel {
70 padding: 2rem 2rem 2.5rem;
71 display: none;
72 animation: fadeIn 0.3s ease;
73 }
74
75 .panel.active-panel {
76 display: block;
77 }
78
79 @keyframes fadeIn {
80 from { opacity: 0; transform: translateY(8px);}
81 to { opacity: 1; transform: translateY(0);}
82 }
83
84 h1, h2, h3 {
85 color: #0f172a;
86 margin-bottom: 1rem;
87 }
88
89 h1 {
90 font-size: 1.8rem;
91 border-left: 6px solid #f97316;
92 padding-left: 18px;
93 }
94
95 h2 {
96 font-size: 1.6rem;
97 border-bottom: 2px solid #fed7aa;
98 display: inline-block;
99 padding-bottom: 5px;
100 }
101
102 .example-grid {
103 display: flex;
104 flex-wrap: wrap;
105 gap: 1.2rem;
106 margin: 1.5rem 0;
107 }
108
109 .case-card {
110 background: #f8fafc;
111 border-radius: 28px;
112 padding: 1rem 1.2rem;
113 flex: 1 1 200px;
114 box-shadow: 0 4px 10px rgba(0,0,0,0.05);
115 border: 1px solid #e2e8f0;
116 transition: transform 0.1s;
117 }
118
119 .case-card strong {
120 font-size: 1.2rem;
121 color: #c2410c;
122 display: block;
123 margin-bottom: 10px;
124 }
125
126 .equation {
127 font-size: 1.6rem;
128 font-weight: bold;
129 background: white;
130 display: inline-block;
131 padding: 0.2rem 0.8rem;
132 border-radius: 40px;
133 margin: 8px 0;
134 font-family: monospace;
135 }
136
137 .explain {
138 background: #eef2ff;
139 border-left: 4px solid #f97316;
140 padding: 8px 12px;
141 margin-top: 10px;
142 border-radius: 16px;
143 }
144
145 .question-box {
146 background: #fffbeb;
147 border-radius: 24px;
148 padding: 1.2rem;
149 margin: 1.5rem 0;
150 border: 1px solid #fed7aa;
151 }
152
153 .question-box p {
154 font-weight: bold;
155 margin-bottom: 8px;
156 }
157
158 input, button {
159 font-size: 1rem;
160 padding: 8px 12px;
161 border-radius: 60px;
162 border: 1px solid #cbd5e1;
163 margin-right: 10px;
164 margin-top: 6px;
165 }
166
167 button {
168 background: #f97316;
169 color: white;
170 border: none;
171 cursor: pointer;
172 font-weight: bold;
173 transition: 0.1s;
174 }
175
176 button:hover {
177 background: #ea580c;
178 }
179
180 .feedback {
181 margin-top: 12px;
182 font-style: italic;
183 color: #2c3e66;
184 }
185
186 .summary-card {
187 background: #e6f7ec;
188 padding: 1rem;
189 border-radius: 32px;
190 margin: 1rem 0;
191 }
192
193 .exercise {
194 background: white;
195 border-radius: 28px;
196 padding: 1rem;
197 margin: 1rem 0;
198 box-shadow: 0 2px 6px rgba(0,0,0,0.05);
199 }
200
201 .flex-between {
202 display: flex;
203 justify-content: space-between;
204 align-items: center;
205 flex-wrap: wrap;
206 }
207
208 hr {
209 margin: 20px 0;
210 }
211 .open-question {
212 background: #eef2ff;
213 padding: 0.8rem;
214 border-radius: 24px;
215 margin: 16px 0;
216 }
217 @media (max-width: 680px) {
218 .panel { padding: 1.2rem; }
219 .step-btn { font-size: 0.9rem; padding: 12px 4px; }
220 }
221 </style>
222</head>
223<body>
224<div class="app-container">
225 <div class="step-tabs">
226 <button class="step-btn" data-step="1">🚀 ขั้นนำ</button>
227 <button class="step-btn" data-step="2">📚 ขั้นสอน</button>
228 <button class="step-btn" data-step="3">🎯 ขั้นสรุป + แบบฝึก</button>
229 </div>
230
231 <!-- =========================== STEP 1 : ขั้นนำ ========================= -->
232 <div id="step1Panel" class="panel">
233 <h1>🧊 การบวกจำนวนเต็ม ในชีวิตประจำวัน</h1>
234 <div class="open-question">
235 🌟 <strong>ลองนึกภาพตาม:</strong> "เช้าวันหนึ่งอุณหภูมินอกบ้านอยู่ที่ -2°C ต่อมาอุณหภูมิเพิ่มขึ้น 5°C" <br>
236 แล้วอุณหภูมิใหม่คือเท่าไหร่? (เกี่ยวโยงกับการบวกจำนวนเต็ม)
237 </div>
238 <div class="open-question">
239 💰 <strong>อีกสถานการณ์:</strong> "คุณมีหนี้ 500 บาท (ติดลบ) แล้วคุณได้รับค่าขนมเพิ่ม 300 บาท สุดท้ายคุณมีสถานะการเงินอย่างไร?"
240 </div>
241
242 <div class="question-box">
243 <p>🗣️ คำถามปลายเปิด (ลองคิด/คุยกัน):</p>
244 <ul style="margin-left: 1.5rem;">
245 <li>ในชีวิตจริงมีเหตุการณ์อะไรบ้างที่เราใช้ "การบวกติดลบ" หรือการบวกจำนวนเต็มลบ?</li>
246 <li>สมมติคุณอยู่ชั้น 3 (ชั้นที่ 3 แทน +3) แล้วกดลิฟต์ลง 5 ชั้น คุณจะไปอยู่ชั้นไหน? แทนการบวกอย่างไร?</li>
247 </ul>
248 <div class="feedback" style="color:#4b5563;">💡 hint: การบวกจำนวนเต็มลบ คือการเลื่อนไปทางซ้ายบนเส้นจำนวน</div>
249 </div>
250 <div style="text-align: right; margin-top: 20px;">
251 <button id="nextToTeach">เข้าสู่ขั้นสอน ➡️</button>
252 </div>
253 </div>
254
255 <!-- =========================== STEP 2 : ขั้นสอน (4 กรณี + คำถามเช็คความเข้าใจ) ========================= -->
256 <div id="step2Panel" class="panel">
257 <h2>📖 การบวกจำนวนเต็ม 4 กรณีหลัก</h2>
258 <div class="example-grid">
259 <!-- กรณี 1: บวก + บวก -->
260 <div class="case-card">
261 <strong>✅ กรณีที่ 1: บวก + บวก</strong>
262 <div class="equation">(+7) + (+3) = 10</div>
263 <div class="explain">นำค่าสัมบูรณ์มาบวกกัน ผลลัพธ์เป็นบวก <br> 🧮 7+3=10 → +10</div>
264 </div>
265 <!-- กรณี 2: ลบ + ลบ -->
266 <div class="case-card">
267 <strong>❄️ กรณีที่ 2: ลบ + ลบ</strong>
268 <div class="equation">(-5) + (-4) = -9</div>
269 <div class="explain">นำค่าสัมบูรณ์มาบวกกัน แล้วเติมเครื่องหมายลบ <br> 5+4=9 → -9</div>
270 </div>
271 <!-- กรณี 3: บวก + ลบ (ผลบวกอาจเป็นบวกหรือลบ) -->
272 <div class="case-card">
273 <strong>⚖️ กรณีที่ 3: บวก + ลบ</strong>
274 <div class="equation">(+9) + (-4) = 5</div>
275 <div class="explain">หาค่าต่างของสัมบูรณ์ (9-4=5) แล้วใช้เครื่องหมายของจำนวนที่มีค่าสัมบูรณ์มากกว่า (9>4 → บวก)</div>
276 </div>
277 <!-- กรณี 4: ลบ + บวก -->
278 <div class="case-card">
279 <strong>🔄 กรณีที่ 4: ลบ + บวก</strong>
280 <div class="equation">(-6) + (+10) = 4</div>
281 <div class="explain">หาค่าต่าง 10-6=4, 10 มีค่าสัมบูรณ์มากกว่า → ผลลัพธ์เป็นบวก 4</div>
282 </div>
283 </div>
284
285 <!-- ตัวอย่างเพิ่มเติมให้เห็นทั้งสองแบบของ บวก+ลบ / ลบ+บวก -->
286 <div style="background:#f1f5f9; border-radius: 24px; padding: 1rem; margin: 1rem 0;">
287 <p><strong>📌 ตัวอย่างเพิ่มเติม (บวก+ลบ ที่ได้ลบ) :</strong> (+3) + (-7) = -4 <br>
288 <strong>📌 ตัวอย่าง (ลบ+บวก ที่ได้ลบ) :</strong> (-8) + (+2) = -6</p>
289 <p>✨ <strong>หลักการจำ:</strong> ถ้าตัวเลขมีเครื่องหมายต่างกัน → ผลต่างของค่าสัมบูรณ์ และใช้เครื่องหมายตามตัวเลขที่มีค่ามากกว่า</p>
290 </div>
291
292 <!-- คำถามเช็คความเข้าใจ (Productive Struggle) -->
293 <div class="question-box" id="checkUnderstanding">
294 <p>🧠 <strong>เช็คความเข้าใจ (ลองทำเลย)</strong> : จงหาผลบวก</p>
295 <p>1️⃣ (-12) + (+5) = ?</p>
296 <input type="number" id="checkAns1" placeholder="คำตอบของคุณ">
297 <button id="checkBtn1">ตรวจข้อ 1</button>
298 <span id="feed1" class="feedback"></span>
299 <p style="margin-top: 12px;">2️⃣ (+8) + (-15) = ?</p>
300 <input type="number" id="checkAns2" placeholder="คำตอบของคุณ">
301 <button id="checkBtn2">ตรวจข้อ 2</button>
302 <span id="feed2" class="feedback"></span>
303 <div id="extraHint" style="margin-top: 12px; font-size:0.9rem; color:#b45309;"></div>
304 </div>
305
306 <div class="flex-between">
307 <button id="backToIntro">◀ ย้อนกลับ ขั้นนำ</button>
308 <button id="nextToSummary">ไปที่ขั้นสรุปและแบบฝึก ▶</button>
309 </div>
310 </div>
311
312 <!-- =========================== STEP 3 : ขั้นสรุป + แบบฝึกหัด (Productive Struggle) ========================= -->
313 <div id="step3Panel" class="panel">
314 <h2>📌 สรุปเนื้อหา การบวกจำนวนเต็ม</h2>
315 <div class="summary-card">
316 <ul style="margin-left: 1.2rem; line-height: 1.6;">
317 <li>🔹 <strong>บวกด้วยจำนวนเต็มบวก</strong> → เครื่องหมายเหมือนกัน (บวก+บวก) = ผลบวกเป็นบวก นำค่าสัมบูรณ์บวกกัน</li>
318 <li>🔹 <strong>บวกด้วยจำนวนเต็มลบ</strong> + ลบ+ลบ = ผลลัพธ์ลบ นำค่าสัมบูรณ์บวกกันเติมเครื่องหมายลบ</li>
319 <li>🔹 <strong>ต่างเครื่องหมาย</strong> (บวก+ลบ หรือ ลบ+บวก) → หาผลต่างของค่าสัมบูรณ์ ผลลัพธ์เป็นเครื่องหมายของตัวที่มีค่าสัมบูรณ์มากกว่า</li>
320 <li>🔹 การบวกจำนวนเต็มคือการเลื่อนไปบนเส้นจำนวน: บวกขวา, ลบซ้าย</li>
321 </ul>
322 </div>
323
324 <h3>✏️ แบบฝึกหัด (ท้าทายความคิด) : จงแสดงวิธีคิดหรือเติมคำตอบ</h3>
325 <div id="exercisesContainer">
326 <!-- ข้อ 1 -->
327 <div class="exercise" id="ex1">
328 <p><strong>ข้อ 1</strong> : จงหาค่าของ (-20) + (+35) + (-10) (Hint: บวกทีละคู่ หรือ คิดทีละขั้น)</p>
329 <input type="number" id="ex1Ans" placeholder="คำตอบ">
330 <button class="checkEx" data-ex="1">ตรวจข้อ 1</button>
331 <span id="ex1Feed" class="feedback"></span>
332 <div id="ex1Hint" class="explain" style="display:none; margin-top:8px;">💡 รวมบวกก่อน: (+35) + (-20) = 15, แล้ว 15 + (-10) = 5</div>
333 <button class="showHint" data-ex="1">🤔 ขอ hint</button>
334 </div>
335 <!-- ข้อ 2 -->
336 <div class="exercise" id="ex2">
337 <p><strong>ข้อ 2</strong> : อุณหภูมิตอนเช้า -8°C ตอนเที่ยงเพิ่มขึ้น 12°C และตอนเย็นลดลง 7°C อุณหภูมิตอนเย็นกี่องศา?</p>
338 <input type="number" id="ex2Ans" placeholder="คำตอบ (องศาเซลเซียส)">
339 <button class="checkEx" data-ex="2">ตรวจข้อ 2</button>
340 <span id="ex2Feed" class="feedback"></span>
341 <div id="ex2Hint" class="explain" style="display:none; margin-top:8px;">💡 (-8) + 12 = 4 , แล้ว 4 + (-7) = ? </div>
342 <button class="showHint" data-ex="2">🤔 ขอ hint</button>
343 </div>
344 <!-- ข้อ 3 (Productive struggle: ต้องคิดสองขั้น) -->
345 <div class="exercise" id="ex3">
346 <p><strong>ข้อ 3 (ท้าทาย)</strong> : จงเติมจำนวนเต็มในช่องว่างให้สมการเป็นจริง: ( ___ ) + (-15) = 7 และ ( ___ ) + ( -9 ) = -21</p>
347 <p>ตัวแรก: <input type="number" id="ex3a" placeholder="ตัวแรก" style="width:100px;"> ตัวที่สอง: <input type="number" id="ex3b" placeholder="ตัวที่สอง" style="width:100px;"></p>
348 <button id="checkEx3">ตรวจทั้งสองข้อ</button>
349 <span id="ex3Feed" class="feedback"></span>
350 <div id="ex3Hint" class="explain" style="display:none; margin-top:8px;">💡 แก้สมการ: a + (-15)=7 → a = 7+15 = 22 ; b + (-9) = -21 → b = -21+9 = -12</div>
351 <button id="showHint3">🤔 ขอ hint ข้อ 3</button>
352 </div>
353 </div>
354
355 <div style="margin-top: 30px; display: flex; justify-content: space-between;">
356 <button id="backToTeach">◀ กลับไปขั้นสอน</button>
357 <button id="resetAll">🔄 เริ่มต้นใหม่ (รีเซ็ต)</button>
358 </div>
359 <p style="text-align: center; margin-top: 20px; color: #4b5563;">✨ เรียนรู้ผ่าน Productive Struggle: ลองผิดลองถูก แล้วค่อยใช้ hint ครับ</p>
360 </div>
361</div>
362
363<script>
364 // ---------- การจัดการแสดงผล แบบ Single Page Model (แต่แยก panel) ----------
365 let currentStep = 1;
366
367 const step1Panel = document.getElementById('step1Panel');
368 const step2Panel = document.getElementById('step2Panel');
369 const step3Panel = document.getElementById('step3Panel');
370 const stepBtns = document.querySelectorAll('.step-btn');
371
372 function showStep(step) {
373 step1Panel.classList.remove('active-panel');
374 step2Panel.classList.remove('active-panel');
375 step3Panel.classList.remove('active-panel');
376 if(step === 1) step1Panel.classList.add('active-panel');
377 if(step === 2) step2Panel.classList.add('active-panel');
378 if(step === 3) step3Panel.classList.add('active-panel');
379
380 stepBtns.forEach(btn => {
381 const stepVal = parseInt(btn.getAttribute('data-step'));
382 if(stepVal === step) btn.classList.add('active');
383 else btn.classList.remove('active');
384 });
385 currentStep = step;
386 }
387
388 // event listeners for tabs
389 stepBtns.forEach(btn => {
390 btn.addEventListener('click', (e) => {
391 const step = parseInt(btn.getAttribute('data-step'));
392 showStep(step);
393 });
394 });
395
396 // navigation buttons
397 document.getElementById('nextToTeach').addEventListener('click', () => showStep(2));
398 document.getElementById('nextToSummary').addEventListener('click', () => showStep(3));
399 document.getElementById('backToIntro').addEventListener('click', () => showStep(1));
400 document.getElementById('backToTeach').addEventListener('click', () => showStep(2));
401 document.getElementById('resetAll').addEventListener('click', () => {
402 // clear all inputs and feedbacks in step2 & step3
403 document.getElementById('checkAns1').value = '';
404 document.getElementById('checkAns2').value = '';
405 document.getElementById('feed1').innerHTML = '';
406 document.getElementById('feed2').innerHTML = '';
407 document.getElementById('extraHint').innerHTML = '';
408 // clear exercises
409 document.getElementById('ex1Ans').value = '';
410 document.getElementById('ex2Ans').value = '';
411 document.getElementById('ex3a').value = '';
412 document.getElementById('ex3b').value = '';
413 const feeds = ['ex1Feed','ex2Feed','ex3Feed'];
414 feeds.forEach(f => document.getElementById(f).innerHTML = '');
415 // hide hints
416 document.querySelectorAll('.explain').forEach(el => { if(el.id?.includes('Hint') || el.style) el.style.display = 'none'; });
417 showStep(1);
418 });
419
420 // ---------- ฟังก์ชันเช็คความเข้าใจ ขั้นสอน ----------
421 document.getElementById('checkBtn1').addEventListener('click', () => {
422 const userVal = parseInt(document.getElementById('checkAns1').value);
423 const feed = document.getElementById('feed1');
424 if(isNaN(userVal)) { feed.innerHTML = '❌ กรุณากรอกตัวเลข'; return; }
425 if(userVal === -7) feed.innerHTML = '✅ ถูกต้อง! (-12) + 5 = -7 (ต่างเครื่องหมาย 12-5=7 เครื่องหมายลบ)';
426 else feed.innerHTML = `❌ ไม่ถูกต้อง คำตอบที่ถูกคือ -7 ลองดู: 12-5=7 แล้วใช้เครื่องหมายของ 12 (ลบ) ได้ -7`;
427 });
428 document.getElementById('checkBtn2').addEventListener('click', () => {
429 const userVal = parseInt(document.getElementById('checkAns2').value);
430 const feed = document.getElementById('feed2');
431 if(isNaN(userVal)) { feed.innerHTML = '❌ กรอกตัวเลข'; return; }
432 if(userVal === -7) feed.innerHTML = '✅ เก่งมาก! (+8)+(-15) = -7 (8-15 = -7 หรือ 15-8=7 แล้วใส่ลบ)';
433 else feed.innerHTML = `❌ คำตอบที่ถูกคือ -7 เพราะ 8 + (-15) = -7 ลองทบทวนดูครับ`;
434 });
435
436 // ---------- ตรวจแบบฝึกหัด Step3 (Productive Struggle + hint เฉพาะเมื่อกด) ----------
437 // ข้อ 1 และ 2 และ 3
438 function checkExercise(exNum) {
439 if(exNum === 1){
440 let val = parseInt(document.getElementById('ex1Ans').value);
441 let feedSpan = document.getElementById('ex1Feed');
442 if(isNaN(val)) { feedSpan.innerHTML = '⚠️ กรุณาใส่ตัวเลข'; return; }
443 if(val === 5) feedSpan.innerHTML = '🎉 ถูกต้อง! (-20)+35=15, 15+(-10)=5';
444 else feedSpan.innerHTML = `❌ ยังไม่ถูก ลองทำทีละคู่ หรือกด hint (ผลลัพธ์ควรเป็น 5)`;
445 } else if(exNum === 2){
446 let val = parseInt(document.getElementById('ex2Ans').value);
447 let feedSpan = document.getElementById('ex2Feed');
448 if(isNaN(val)) { feedSpan.innerHTML = '⚠️ กรุณาใส่องศา'; return; }
449 if(val === -3) feedSpan.innerHTML = '🌡️ ถูกต้อง! -8 +12 = 4 , 4+(-7) = -3 องศา';
450 else feedSpan.innerHTML = `❌ ไม่ถูกต้อง คำตอบคือ -3°C (จาก -8+12=4 แล้ว 4-7 = -3)`;
451 }
452 }
453
454 document.querySelectorAll('.checkEx').forEach(btn => {
455 btn.addEventListener('click', (e) => {
456 const ex = parseInt(btn.getAttribute('data-ex'));
457 checkExercise(ex);
458 });
459 });
460
461 // แสดง hint ในแต่ละข้อ (Productive struggle อนุญาตให้ hint แต่ไม่บังคับ)
462 document.querySelectorAll('.showHint').forEach(btn => {
463 btn.addEventListener('click', (e) => {
464 const ex = parseInt(btn.getAttribute('data-ex'));
465 const hintDiv = document.getElementById(`ex${ex}Hint`);
466 if(hintDiv) hintDiv.style.display = 'block';
467 });
468 });
469
470 // ข้อ 3 แยก
471 document.getElementById('checkEx3').addEventListener('click', () => {
472 let a = parseInt(document.getElementById('ex3a').value);
473 let b = parseInt(document.getElementById('ex3b').value);
474 let feed = document.getElementById('ex3Feed');
475 if(isNaN(a) || isNaN(b)) { feed.innerHTML = 'กรอกตัวเลขให้ครบทั้งสองช่อง'; return; }
476 let correctA = 22;
477 let correctB = -12;
478 if(a === correctA && b === correctB) feed.innerHTML = '✅ เยี่ยม! ถูกต้องทั้งคู่ (22 + (-15)=7 และ -12+(-9)=-21)';
479 else feed.innerHTML = `❌ ยังไม่ถูก ตัวแรกควรเป็น ${correctA} (เพราะ 7+15=22) ตัวที่สองควรเป็น ${correctB} (เพราะ -21+9 = -12)`;
480 });
481 document.getElementById('showHint3').addEventListener('click', () => {
482 const hintDiv = document.getElementById('ex3Hint');
483 if(hintDiv) hintDiv.style.display = 'block';
484 });
485
486 // เพิ่มความ productive struggle: extra hint ในขั้นสอน ถ้าผิดซ้ำ (ไม่ได้บังคับ)
487 let wrongCount1 = 0, wrongCount2 = 0;
488 document.getElementById('checkBtn1').addEventListener('click', function(){
489 let val = parseInt(document.getElementById('checkAns1').value);
490 if(val !== -7 && !isNaN(val)) {
491 wrongCount1++;
492 if(wrongCount1 >= 2) document.getElementById('extraHint').innerHTML = '💡 วิธีคิด: (-12)+(+5) = ใช้ค่าสัมบูรณ์ต่าง 12-5=7 แล้วเครื่องหมายของ -12 (ลบ) = -7';
493 } else if(val === -7){ wrongCount1=0; document.getElementById('extraHint').innerHTML = '';}
494 });
495 document.getElementById('checkBtn2').addEventListener('click', function(){
496 let val = parseInt(document.getElementById('checkAns2').value);
497 if(val !== -7 && !isNaN(val)){
498 wrongCount2++;
499 if(wrongCount2 >= 2) document.getElementById('extraHint').innerHTML += '🧠 (+8)+(-15) = -(15-8) = -7';
500 } else if(val === -7){ wrongCount2=0;}
501 });
502
503 // ซ่อน hint ในข้อต่างๆ เริ่มต้น hint ซ่อนไว้แล้ว
504 // ซ่อน hint divs ตอนเริ่ม
505 document.querySelectorAll('.explain').forEach(el => {
506 if(el.id && (el.id.includes('Hint') || el.id === 'ex1Hint' || el.id === 'ex2Hint' || el.id === 'ex3Hint')) {
507 el.style.display = 'none';
508 }
509 });
510 // เริ่มต้น step1
511 showStep(1);
512</script>
513</body>
514</html>