แก้ไขบทเรียน

Back

รูปสินค้า (850 x 600 / .jpg , .png) *

ประเภทบทเรียน

ประเภทบทเรียนย่อย

Title

Description

Keyword

Detail

<div class="lesson-container" style="font-family: 'Sarabun', 'Prompt', sans-serif; line-height: 1.6; color: #333; max-width: 900px; margin: auto; background: #ffffff; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
    
    <div style="background: linear-gradient(135deg, #1976D2 0%, #00BCD4 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #0D47A1;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #FFF;">📦 หน่วยที่ 2 EP.3 กล่องเก็บข้อมูลอัจฉริยะ</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #E0F7FA; font-weight: bold;">ตัวแปร ชนิดข้อมูล และการคำนวณใน Python</p>
    </div>

<div style="margin-bottom: 40px;">
        
        <p style="font-size: 18px;">เวลาเราเล่นเกม คะแนนสะสม พลังชีวิต หรือชื่อตัวละคร ข้อมูลพวกนี้คอมพิวเตอร์เอาไปเก็บไว้ที่ไหน? คำตอบคือเก็บไว้ใน <strong>"ตัวแปร (Variable)"</strong> ครับ! ใน EP นี้เราจะมาสร้างกล่องเก็บข้อมูลและสั่งให้คอมพิวเตอร์คิดเลขกัน!</p>

<h3 style="color: #1565C0; border-left: 5px solid #00BCD4; padding-left: 15px; font-size: 22px; margin-top: 30px;">🏷️ 1. ตัวแปร (Variables) คืออะไร?</h3>
        <p>ตัวแปร เปรียบเสมือน <strong>"กล่อง"</strong> ที่เราเอาไว้เก็บข้อมูล โดยเราต้อง <strong>"แปะป้ายชื่อ"</strong> ให้กล่องนั้นด้วย เพื่อจะได้เรียกใช้ถูกกล่องครับ ใน Python เราสร้างกล่องได้ง่ายๆ แบบนี้เลย:</p>
        
        <div style="background: #263238; color: #82AAFF; padding: 20px; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 18px; margin-top: 15px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);">
            score = <span style="color: #F78C6C;">100</span><br>
            name = <span style="color: #C3E88D;">"Somchai"</span>
        </div>

<div style="background: #FFF3E0; padding: 15px; border-radius: 8px; margin-top: 15px; border-left: 4px solid #FF9800;">
            <strong style="color: #E65100;">🚨 กฎเหล็กการตั้งชื่อตัวแปร:</strong>
            <ul style="margin-top: 5px; color: #555;">
                <li>ต้องขึ้นต้นด้วย <strong>ตัวอักษรภาษาอังกฤษ</strong> หรือเครื่องหมายขีดล่าง <code>_</code> เท่านั้น</li>
                <li><strong>ห้าม</strong> ขึ้นต้นด้วยตัวเลข (แต่มีตัวเลขอยู่ตรงกลางหรือท้ายได้ เช่น <code>player1</code>)</li>
                <li><strong>ห้าม</strong> เว้นวรรค และ <strong>ห้าม</strong> ใช้สัญลักษณ์พิเศษ (เช่น @, #, $, %)</li>
                <li>ตัวพิมพ์เล็ก-พิมพ์ใหญ่ มีค่าต่างกัน (Case Sensitive) เช่น <code>Age</code> กับ <code>age</code> ถือเป็นคนละกล่องกัน!</li>
            </ul>
        </div>

<h3 style="color: #1565C0; border-left: 5px solid #00BCD4; padding-left: 15px; font-size: 22px; margin-top: 35px;">🗂️ 2. ชนิดข้อมูลพื้นฐาน (Data Types)</h3>
        <p>ข้อมูลที่เราใส่ลงในกล่อง มีหลายประเภทครับ คอมพิวเตอร์จะได้รู้ว่าต้องเอาไปประมวลผลแบบไหน (ตัวอักษรเอาไปบวกกันไม่ได้นะ!)</p>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px;">
            <div style="background: #E3F2FD; padding: 15px; border-radius: 8px; text-align: center;">
                <strong style="color: #1565C0; font-size: 18px;">int (Integer)</strong><br>
                <span style="font-size: 14px;">จำนวนเต็ม ไม่มีทศนิยม</span><br>
                <code style="background: #fff; padding: 2px 6px; border-radius: 4px; color: #D32F2F;">5, -10, 2024</code>
            </div>
            <div style="background: #E3F2FD; padding: 15px; border-radius: 8px; text-align: center;">
                <strong style="color: #1565C0; font-size: 18px;">float (Float)</strong><br>
                <span style="font-size: 14px;">จำนวนจริง มีจุดทศนิยม</span><br>
                <code style="background: #fff; padding: 2px 6px; border-radius: 4px; color: #D32F2F;">3.14, 99.99, -0.5</code>
            </div>
            <div style="background: #E3F2FD; padding: 15px; border-radius: 8px; text-align: center;">
                <strong style="color: #1565C0; font-size: 18px;">str (String)</strong><br>
                <span style="font-size: 14px;">ข้อความ (ต้องอยู่ใน " ")</span><br>
                <code style="background: #fff; padding: 2px 6px; border-radius: 4px; color: #D32F2F;">"Hello", "ม.2", "123"</code>
            </div>
            <div style="background: #E3F2FD; padding: 15px; border-radius: 8px; text-align: center;">
                <strong style="color: #1565C0; font-size: 18px;">bool (Boolean)</strong><br>
                <span style="font-size: 14px;">ค่าความจริงทางตรรกศาสตร์</span><br>
                <code style="background: #fff; padding: 2px 6px; border-radius: 4px; color: #D32F2F;">True, False</code>
            </div>
        </div>

<h3 style="color: #1565C0; border-left: 5px solid #00BCD4; padding-left: 15px; font-size: 22px; margin-top: 35px;">🧮 3. ตัวดำเนินการทางคณิตศาสตร์ (Operators)</h3>
        <p>นอกจากการบวก ลบ คูณ หาร ปกติแล้ว ในคอมพิวเตอร์ยังมีสัญลักษณ์พิเศษที่ช่วยให้เราคำนวณได้เจ๋งขึ้นด้วยครับ:</p>

<table style="width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 16px;">
            <tbody><tr style="background-color: #00BCD4; color: white;">
                <th style="padding: 10px; border: 1px solid #ddd;">เครื่องหมาย</th>
                <th style="padding: 10px; border: 1px solid #ddd;">ความหมาย</th>
                <th style="padding: 10px; border: 1px solid #ddd;">ตัวอย่าง</th>
                <th style="padding: 10px; border: 1px solid #ddd;">ผลลัพธ์</th>
            </tr>
            <tr>
                <td style="padding: 10px; border: 1px solid #ddd; text-align: center; font-weight: bold;">+ , - , * , /</td>
                <td style="padding: 10px; border: 1px solid #ddd;">บวก, ลบ, คูณ, หาร (ปกติ)</td>
                <td style="padding: 10px; border: 1px solid #ddd; text-align: center;"><code>10 / 2</code></td>
                <td style="padding: 10px; border: 1px solid #ddd; text-align: center; color: #D32F2F;">5.0</td>
            </tr>
            <tr style="background-color: #F5F5F5;">
                <td style="padding: 10px; border: 1px solid #ddd; text-align: center; font-weight: bold; font-size: 20px;">//</td>
                <td style="padding: 10px; border: 1px solid #ddd;"><strong>หารปัดเศษทิ้ง</strong> (เอาแต่จำนวนเต็ม)</td>
                <td style="padding: 10px; border: 1px solid #ddd; text-align: center;"><code>10 // 3</code></td>
                <td style="padding: 10px; border: 1px solid #ddd; text-align: center; color: #D32F2F;">3</td>
            </tr>
            <tr>
                <td style="padding: 10px; border: 1px solid #ddd; text-align: center; font-weight: bold; font-size: 20px;">%</td>
                <td style="padding: 10px; border: 1px solid #ddd;"><strong>หารเอาเศษ</strong> (Modulo - มอดูโล)</td>
                <td style="padding: 10px; border: 1px solid #ddd; text-align: center;"><code>10 % 3</code></td>
                <td style="padding: 10px; border: 1px solid #ddd; text-align: center; color: #D32F2F;">1</td>
            </tr>
            <tr style="background-color: #F5F5F5;">
                <td style="padding: 10px; border: 1px solid #ddd; text-align: center; font-weight: bold; font-size: 20px;">**</td>
                <td style="padding: 10px; border: 1px solid #ddd;"><strong>ยกกำลัง</strong></td>
                <td style="padding: 10px; border: 1px solid #ddd; text-align: center;"><code>2 ** 3</code></td>
                <td style="padding: 10px; border: 1px solid #ddd; text-align: center; color: #D32F2F;">8</td>
            </tr>
        </tbody></table>
        <p style="font-size: 14px; color: #888; margin-top: 5px;">*หมายเหตุ: ในการทำคณิตศาสตร์ คอมพิวเตอร์จะทำ คูณ/หาร ก่อน บวก/ลบ เสมอ หากต้องการให้ทำอันไหนก่อนต้องใส่ <strong>วงเล็บ ()</strong> ครอบไว้ครับ</p>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #1565C0; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #81D4FA;">✍️ มินิควิซ ทบทวนความรู้ (EP.3)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #E3F2FD;">มาทดสอบการสร้างกล่องข้อมูลและการคิดเลขกัน!</p>
        </div>
        
        <div style="border: 2px solid #1565C0; border-top: none; padding: 25px; border-radius: 0 0 12px 12px; background: #fafafa;">
            
            <div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #1565C0;">ข้อที่ 1: การตั้งชื่อตัวแปรในข้อใด "ผิดกฎ" ของภาษา Python?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'player_score ถูกกฎครับ ใช้เครื่องหมาย _ เชื่อมคำได้')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. player_score</button>
                    <button onclick="checkAnswer(this, false, 'score1 ถูกกฎครับ ตัวเลขอยู่ด้านหลังได้')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. score1</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องที่ตอบข้อนี้! ตัวแปรห้ามขึ้นต้นด้วยตัวเลขครับ (1st_player จึงผิดกฎ)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. 1st_player</button>
                    <button onclick="checkAnswer(this, false, 'MyAge ถูกกฎครับ แต่ใน Python แนะนำให้ขึ้นต้นด้วยตัวพิมพ์เล็กจะดีกว่าครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. MyAge</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #1565C0;">ข้อที่ 2: ข้อมูล "1500" จัดอยู่ในชนิดข้อมูล (Data Type) ใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Integer คือจำนวนเต็มครับ แต่นี่มีเครื่องหมายคำพูดครอบอยู่ หมายความว่าคอมพิวเตอร์มองเป็นข้อความครับ!')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. int (Integer)</button>
                    <button onclick="checkAnswer(this, false, 'Float คือทศนิยมครับ เช่น 1500.0')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. float (Float)</button>
                    <button onclick="checkAnswer(this, true, 'เฉียบขาด! แม้จะเป็นตัวเลข แต่ถ้าถูกครอบด้วย เครื่องหมายคำพูด (\'\') คอมพิวเตอร์จะมองว่าเป็น ข้อความ (String) ทันทีครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. str (String)</button>
                    <button onclick="checkAnswer(this, false, 'Boolean มีแค่ True กับ False ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. bool (Boolean)</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 0; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #1565C0;">ข้อที่ 3: หากเราพิมพ์คำสั่ง print( 15 % 4 ) ผลลัพธ์ที่แสดงบนหน้าจอคือเท่าใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, '3.75 คือผลจากการหารปกติ ( / ) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. 3.75</button>
                    <button onclick="checkAnswer(this, false, '3 คือผลจากการหารปัดเศษทิ้ง ( // ) ครับ (4 คูณ 3 ได้ 12)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. 3</button>
                    <button onclick="checkAnswer(this, true, 'เป๊ะมาก! เครื่องหมาย % คือหารเอาเศษ (15 หาร 4 ได้ 3 เศษ 3) ผลลัพธ์จึงออกมาเป็น 3 ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. 3 (เศษ)</button>
                    <button onclick="checkAnswer(this, false, 'เครื่องหมาย % ไม่ใช่การหาเปอร์เซ็นต์แบบในเครื่องคิดเลขปกตินะครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. 15%</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

</div>
    </div>

</div>

buttons.forEach(b => {
        b.disabled = true;
        b.style.opacity = '0.6';
    });

feedback.style.display = 'block';
    feedback.style.padding = '12px';
    feedback.style.borderRadius = '8px';
    feedback.style.marginTop = '15px';

if(isCorrect) {
        btn.style.background = '#E1F5FE';
        btn.style.borderColor = '#0288D1';
        btn.style.color = '#01579B';
        btn.style.opacity = '1';
        feedback.style.background = '#E1F5FE';
        feedback.style.color = '#0288D1';
        feedback.innerHTML = "✅ ถูกต้องครับ! " + msg;
    } else {
        btn.style.background = '#FFEBEE';
        btn.style.borderColor = '#C62828';
        btn.style.color = '#B71C1C';
        btn.style.opacity = '1';
        feedback.style.background = '#FFEBEE';
        feedback.style.color = '#B71C1C';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>