AMAMnarin/integer-web-app-demo
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">
6 <title>🧮 การบวกจำนวนเต็ม | Step‑by‑Step Streaming</title>
7 <style>
8 * {
9 box-sizing: border-box;
10 margin: 0;
11 padding: 0;
12 }
13 body {
14 font-family: 'Sarabun', 'Kanit', 'Prompt', sans-serif;
15 background: linear-gradient(145deg, #fff9f0 0%, #ffe8d6 100%);
16 min-height: 100vh;
17 padding: 20px;
18 display: flex;
19 justify-content: center;
20 align-items: center;
21 }
22 .stream-container {
23 width: 100%;
24 max-width: 800px;
25 background: white;
26 border-radius: 35px;
27 box-shadow: 0 20px 40px rgba(0,0,0,0.15);
28 overflow: hidden;
29 }
30 /* ส่วนหัว */
31 .stream-header {
32 background: #f39c12;
33 color: white;
34 padding: 20px 30px;
35 text-align: center;
36 }
37 .stream-header h1 {
38 font-size: 2rem;
39 margin-bottom: 5px;
40 }
41 /* แถบขั้นตอน */
42 .step-indicator {
43 display: flex;
44 justify-content: space-around;
45 background: #fdebd0;
46 padding: 15px 10px;
47 border-bottom: 2px solid #f5cba7;
48 }
49 .step-dot {
50 display: flex;
51 flex-direction: column;
52 align-items: center;
53 cursor: pointer;
54 opacity: 0.6;
55 transition: 0.2s;
56 }
57 .step-dot.active {
58 opacity: 1;
59 font-weight: bold;
60 transform: scale(1.05);
61 }
62 .step-dot span:first-child {
63 background: #e67e22;
64 color: white;
65 width: 32px;
66 height: 32px;
67 border-radius: 50%;
68 display: flex;
69 align-items: center;
70 justify-content: center;
71 margin-bottom: 5px;
72 font-weight: bold;
73 }
74 .step-dot.active span:first-child {
75 background: #d35400;
76 box-shadow: 0 0 10px #f39c12;
77 }
78 .step-name {
79 font-size: 0.8rem;
80 color: #5d4037;
81 }
82 /* พื้นที่เนื้อหา */
83 .content-area {
84 padding: 25px 30px;
85 min-height: 400px;
86 background: #fff;
87 }
88 .step-section {
89 display: none;
90 animation: fadeSlide 0.4s ease;
91 }
92 .step-section.active {
93 display: block;
94 }
95 @keyframes fadeSlide {
96 from { opacity: 0; transform: translateY(15px); }
97 to { opacity: 1; transform: translateY(0); }
98 }
99 h2 {
100 color: #d35400;
101 margin-bottom: 15px;
102 font-size: 1.8rem;
103 border-left: 6px solid #f39c12;
104 padding-left: 15px;
105 }
106 h3 {
107 color: #2c3e50;
108 margin: 15px 0 8px;
109 }
110 .example-box {
111 background: #faf5ef;
112 padding: 15px;
113 border-radius: 15px;
114 margin: 12px 0;
115 }
116 details {
117 margin: 10px 0;
118 background: #fff;
119 border: 1px solid #f1c40f;
120 border-radius: 10px;
121 padding: 10px 15px;
122 }
123 summary {
124 font-weight: bold;
125 color: #c0392b;
126 cursor: pointer;
127 }
128 /* แบบฝึกหัด */
129 .exercise-item {
130 margin: 15px 0;
131 display: flex;
132 flex-wrap: wrap;
133 align-items: center;
134 gap: 12px;
135 background: #fdf2e9;
136 padding: 12px 18px;
137 border-radius: 14px;
138 }
139 .exercise-item input {
140 width: 90px;
141 padding: 10px;
142 border: 2px solid #f39c12;
143 border-radius: 10px;
144 font-size: 1rem;
145 text-align: center;
146 }
147 .feedback {
148 font-weight: bold;
149 margin-left: 8px;
150 }
151 .btn-check {
152 background: #27ae60;
153 color: white;
154 border: none;
155 padding: 12px 30px;
156 border-radius: 30px;
157 font-size: 1.1rem;
158 cursor: pointer;
159 margin: 15px 0;
160 box-shadow: 0 5px 0 #1e8449;
161 transition: 0.2s;
162 }
163 .btn-check:hover { background: #2ecc71; }
164 .score {
165 font-size: 1.2rem;
166 font-weight: bold;
167 margin-top: 10px;
168 }
169 /* ปุ่มนำทาง */
170 .nav-buttons {
171 display: flex;
172 justify-content: space-between;
173 padding: 15px 30px;
174 background: #f9f3e7;
175 border-top: 2px solid #f5cba7;
176 }
177 .nav-btn {
178 background: #f39c12;
179 border: none;
180 color: white;
181 padding: 12px 28px;
182 border-radius: 30px;
183 font-size: 1rem;
184 cursor: pointer;
185 font-weight: bold;
186 transition: 0.2s;
187 box-shadow: 0 4px 0 #c87f0a;
188 }
189 .nav-btn:disabled {
190 background: #ccc;
191 box-shadow: none;
192 cursor: not-allowed;
193 }
194 .nav-btn:active:not(:disabled) {
195 transform: translateY(2px);
196 box-shadow: 0 2px 0 #c87f0a;
197 }
198 @media (max-width: 550px) {
199 .step-name { font-size: 0.7rem; }
200 .content-area { padding: 15px; }
201 .exercise-item { flex-direction: column; align-items: flex-start; }
202 }
203 </style>
204</head>
205<body>
206<div class="stream-container">
207 <!-- หัวข้อใหญ่ -->
208 <div class="stream-header">
209 <h1>🧮 จำนวนเต็ม : การบวกจำนวนเต็ม</h1>
210 <p>ชั้นมัธยมศึกษาปีที่ 1 | เรียนรู้แบบ Step‑by‑Step</p>
211 </div>
212
213 <!-- ตัวบ่งชี้ขั้นตอน (สามารถคลิกเพื่อข้ามได้) -->
214 <div class="step-indicator">
215 <div class="step-dot" data-step="0" id="dot0">
216 <span>1</span>
217 <span class="step-name">ขั้นนำ</span>
218 </div>
219 <div class="step-dot" data-step="1" id="dot1">
220 <span>2</span>
221 <span class="step-name">ขั้นสอน</span>
222 </div>
223 <div class="step-dot" data-step="2" id="dot2">
224 <span>3</span>
225 <span class="step-name">ขั้นสรุป</span>
226 </div>
227 <div class="step-dot" data-step="3" id="dot3">
228 <span>4</span>
229 <span class="step-name">แบบฝึกหัด</span>
230 </div>
231 </div>
232
233 <!-- เนื้อหาที่เปลี่ยนไปตามขั้นตอน -->
234 <div class="content-area">
235 <!-- ขั้นนำ -->
236 <div class="step-section" id="step0">
237 <h2>🌟 ขั้นนำ : เปิดโลกจำนวนเต็ม</h2>
238 <p>ในชีวิตเรามีทั้ง <strong>เพิ่มขึ้น</strong> และ <strong>ลดลง</strong> จำนวนเต็มช่วยบอกปริมาณและทิศทาง</p>
239 <h3>🔍 สถานการณ์รอบตัว</h3>
240 <ul>
241 <li>🏢 ลิฟต์: เริ่มชั้น G (0) ขึ้น 3 ชั้น (+3) แล้วลง 2 ชั้น (-2) → <strong>+1</strong></li>
242 <li>💰 เงิน: มี 50 บาท จ่าย 30 บาท (-30) → เหลือ <strong>+20</strong></li>
243 <li>🌡️ อากาศ: -3°C ร้อนขึ้น 5°C (+5) → <strong>+2°C</strong></li>
244 </ul>
245 <div style="background:#fef9e7;padding:12px;border-radius:12px;margin-top:15px;">
246 <p><strong>❓ ลองคิด:</strong> ถ้าโลกนี้ไม่มีจำนวนลบ การบันทึกอุณหภูมิต่ำกว่าศูนย์จะเป็นอย่างไร?</p>
247 </div>
248 </div>
249
250 <!-- ขั้นสอน -->
251 <div class="step-section" id="step1">
252 <h2>📖 ขั้นสอน : หลักการบวกจำนวนเต็ม</h2>
253 <h3>🧮 กฎการบวก</h3>
254 <ul>
255 <li><strong>บวก + บวก</strong> → บวกปกติ</li>
256 <li><strong>ลบ + ลบ</strong> → บวกค่าสัมบูรณ์ แล้วใส่ลบ</li>
257 <li><strong>บวก + ลบ</strong> → เอาค่าสัมบูรณ์มากลบน้อย ใส่เครื่องหมายของตัวมาก</li>
258 <li><strong>0 + จำนวนใดๆ</strong> → ได้จำนวนนั้น</li>
259 </ul>
260 <div class="example-box">
261 <strong>🔎 Productive Struggle (ลองคิดก่อนกดดู)</strong>
262 <details>
263 <summary>(+4) + (-7) = ?</summary>
264 <p>เครื่องหมายต่าง → |+4|=4, |-7|=7 → 7-4=3 → ใช้เครื่องหมายลบ → <strong>-3</strong></p>
265 </details>
266 <details>
267 <summary>(-2) + (-5) = ?</summary>
268 <p>เครื่องหมายเหมือน → 2+5=7 → ใส่ลบ → <strong>-7</strong></p>
269 </details>
270 <details>
271 <summary>(+6)+(-2)+(-1) = ?</summary>
272 <p>รวมลบก่อน (-2)+(-1)=-3 → (+6)+(-3)=+3</p>
273 </details>
274 </div>
275 </div>
276
277 <!-- ขั้นสรุป -->
278 <div class="step-section" id="step2">
279 <h2>📝 ขั้นสรุป : สรุปหลักการ</h2>
280 <ul>
281 <li>ดูเครื่องหมายก่อน ➔ เหมือนกันบวกค่าสัมบูรณ์</li>
282 <li>ต่างกัน ➔ ลบกัน ใช้เครื่องหมายของตัวมาก</li>
283 <li>อย่าลืมใส่เครื่องหมายคำตอบให้ถูกต้อง</li>
284 </ul>
285 <p style="margin-top:10px;">✅ <strong>ขั้นตอน:</strong> ดูเครื่องหมาย → คิดค่าสัมบูรณ์ → คำนวณ → ใส่เครื่องหมาย → ตรวจสอบด้วยเส้นจำนวน</p>
286 </div>
287
288 <!-- แบบฝึกหัด -->
289 <div class="step-section" id="step3">
290 <h2>✏️ แบบฝึกหัด</h2>
291 <p>ใส่คำตอบเป็นจำนวนเต็ม (เช่น -5, 0, 7) แล้วกด <strong>ตรวจคำตอบ</strong></p>
292 <div class="exercise-item">
293 <span>1) (-8) + (+3) =</span>
294 <input type="number" id="ans1" placeholder="?">
295 <span class="feedback" id="fb1"></span>
296 </div>
297 <div class="exercise-item">
298 <span>2) (+15) + (-22) =</span>
299 <input type="number" id="ans2" placeholder="?">
300 <span class="feedback" id="fb2"></span>
301 </div>
302 <div class="exercise-item">
303 <span>3) (-9)+(-6)+(+4) =</span>
304 <input type="number" id="ans3" placeholder="?">
305 <span class="feedback" id="fb3"></span>
306 </div>
307 <div class="exercise-item">
308 <span>4) a=-12, b=+7, c=+5 → a+b+c =</span>
309 <input type="number" id="ans4" placeholder="?">
310 <span class="feedback" id="fb4"></span>
311 </div>
312 <div class="exercise-item">
313 <span>🏆 5) (+5)+(-8)+(+16) =</span>
314 <input type="number" id="ans5" placeholder="?">
315 <span class="feedback" id="fb5"></span>
316 </div>
317 <button class="btn-check" onclick="checkExercises()">✅ ตรวจคำตอบ</button>
318 <div class="score" id="scoreDisplay"></div>
319 </div>
320 </div>
321
322 <!-- ปุ่มนำทาง ก่อนหน้า / ถัดไป -->
323 <div class="nav-buttons">
324 <button class="nav-btn" id="prevBtn" onclick="changeStep(-1)">◀ ก่อนหน้า</button>
325 <span style="font-weight:bold;color:#d35400;" id="stepInfo">1 / 4</span>
326 <button class="nav-btn" id="nextBtn" onclick="changeStep(1)">ถัดไป ▶</button>
327 </div>
328</div>
329
330<script>
331 const totalSteps = 4;
332 let currentStep = 0; // 0-index: 0=ขั้นนำ, 1=สอน, 2=สรุป, 3=แบบฝึกหัด
333
334 function showStep(step) {
335 // ซ่อนทุกส่วน
336 document.querySelectorAll('.step-section').forEach(el => el.classList.remove('active'));
337 // แสดงส่วนที่เลือก
338 document.getElementById('step' + step).classList.add('active');
339
340 // อัปเดตตัวบ่งชี้ด้านบน
341 document.querySelectorAll('.step-dot').forEach((dot, index) => {
342 dot.classList.toggle('active', index === step);
343 });
344
345 // อัปเดตข้อความบอกขั้นตอน
346 document.getElementById('stepInfo').innerText = (step+1) + ' / ' + totalSteps;
347
348 // จัดการปุ่มก่อนหน้า/ถัดไป
349 document.getElementById('prevBtn').disabled = (step === 0);
350 document.getElementById('nextBtn').disabled = (step === totalSteps-1);
351 }
352
353 function changeStep(delta) {
354 const newStep = currentStep + delta;
355 if (newStep >= 0 && newStep < totalSteps) {
356 currentStep = newStep;
357 showStep(currentStep);
358 }
359 }
360
361 // คลิกที่จุดด้านบนเพื่อข้ามไปขั้นนั้น
362 document.querySelectorAll('.step-dot').forEach(dot => {
363 dot.addEventListener('click', function() {
364 const step = parseInt(this.getAttribute('data-step'));
365 currentStep = step;
366 showStep(currentStep);
367 });
368 });
369
370 // ตรวจแบบฝึกหัด (เฉพาะขั้นที่ 3)
371 function checkExercises() {
372 const answers = { ans1: -5, ans2: -7, ans3: -11, ans4: 0, ans5: 13 };
373 let score = 0;
374 for (let i = 1; i <= 5; i++) {
375 const id = 'ans' + i;
376 const userVal = document.getElementById(id).value;
377 const fb = document.getElementById('fb' + i);
378 if (userVal === '') {
379 fb.innerHTML = '⚠️ กรุณากรอก';
380 fb.style.color = '#e67e22';
381 continue;
382 }
383 if (Number(userVal) === answers[id]) {
384 fb.innerHTML = '✅ ถูก';
385 fb.style.color = '#27ae60';
386 score++;
387 } else {
388 fb.innerHTML = '❌ ผิด (เฉลย ' + answers[id] + ')';
389 fb.style.color = '#e74c3c';
390 }
391 }
392 const display = document.getElementById('scoreDisplay');
393 display.innerHTML = `คะแนน: ${score}/5 ${score===5?'🎉 ยอดเยี่ยม!':score>=3?'👍 ดีมาก':'📚 พยายามอีกนิด'}`;
394 }
395
396 // เริ่มต้นแสดงขั้นนำ
397 showStep(0);
398</script>
399</body>
400</html>