Team Ai
Apppublic

CatThanapha/integer

sourceHugging Faceupdated 5mo agoView on Hugging Face
0likes
integer.html514 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, 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;"> &nbsp; ตัวที่สอง: <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>