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

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, #FF6D00 0%, #FF9100 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #FFC107;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #FFEB3B;">🐱 หน่วยที่ 4: โครงงานแอนิเมชันและเกมด้วย Scratch</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FFFFFF; font-weight: bold;">EP.3 ตัวแปร... กล่องเก็บความจำ (Variables)</p>
    </div>

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

<h3 style="color: #E65100; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">📦 1. ตัวแปรคืออะไร?</h3>
        <p>ใน Scratch <strong>ตัวแปร</strong> เปรียบเสมือน "กล่องเก็บของ" ที่เราสามารถตั้งชื่อให้มัน และนำข้อมูล (เช่น ตัวเลข หรือ ข้อความ) ใส่เข้าไปเก็บไว้ เพื่อนำออกมาใช้หรือเปลี่ยนแปลงค่าได้ตลอดเวลา โดยบล็อกคำสั่งกลุ่มตัวแปร (Variables) จะเป็น <strong>สีส้มเข้ม</strong> ครับ</p>

<h3 style="color: #E65100; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🛠️ 2. วิธีสร้างตัวแปร (Make a Variable)</h3>
        <p>เมื่อเราคลิกที่ปุ่ม <strong>Make a Variable</strong> โปรแกรมจะให้เราตั้งชื่อกล่อง และเลือกขอบเขตการใช้งาน 2 แบบ คือ:</p>
        <div style="background: #FFF3E0; padding: 20px; border-radius: 10px; border-left: 5px solid #FF9800; margin-bottom: 20px;">
            <ul style="margin: 0; padding-left: 20px; line-height: 1.8; font-size: 16px;">
                <li><strong>For all sprites:</strong> ตัวละครทุกตัวในโปรเจกต์นี้ สามารถแอบดูและหยิบข้อมูลในกล่องนี้ไปใช้ได้ (เหมือนของส่วนรวม)</li>
                <li><strong>For this sprite only:</strong> เป็นความลับส่วนตัว! มีแค่ตัวละครนี้ตัวเดียวที่ใช้งานกล่องนี้ได้ (เหมือนของส่วนตัว)</li>
            </ul>
        </div>

<h3 style="color: #E65100; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">📍 3. ถ่ายทอดค่าพิกัดลงในตัวแปร</h3>
        <p>เราสามารถดึงข้อมูล "ตำแหน่งพิกัด x (x position)" ของตัวละคร มาเก็บไว้ในตัวแปรที่เราสร้างขึ้น (เช่น สมมติว่าตั้งชื่อตัวแปรว่า <code>positionX</code>) ได้แบบนี้ครับ:</p>
        <div style="background-color: #f4f4f4; padding: 20px; border-radius: 10px; border-left: 5px solid #FF6D00; margin: 20px 0; line-height: 2.2;">
            <span style="background-color: #ff8c1a; color: white; padding: 6px 12px; border-radius: 5px; font-weight: bold; font-family: 'Arial', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">set [positionX v] to <span style="background-color: #4c97ff; padding: 2px 8px; border-radius: 10px; margin-left: 5px;">(x position)</span></span><br>
            <em style="color: #666; font-size: 14px;">(นำค่าพิกัด x ปัจจุบัน ไปใส่เก็บไว้ในกล่องชื่อ positionX)</em>
        </div>

<h3 style="color: #E65100; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🔗 4. คำสั่ง Join... นักเชื่อมประโยค</h3>
        <p>ถ้าเราอยากให้ตัวละครพูดว่า <strong>"positionX = (ตามด้วยค่าพิกัดจริงๆ)"</strong> เราไม่สามารถพิมพ์เข้าไปดื้อๆ ได้ เราต้องใช้บล็อก <strong><span style="background-color: #59c059; color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold; font-family: 'Arial', sans-serif;">join [apple] [banana]</span></strong> (สีเขียว หมวด Operators) เพื่อนำ "ข้อความ" มาต่อกับ "ตัวแปร" ครับ</p>
        
        <div style="background-color: #f4f4f4; padding: 20px; border-radius: 10px; border-left: 5px solid #FF6D00; margin: 20px 0; line-height: 2.2;">
            <span style="background-color: #9966ff; color: white; padding: 6px 12px; border-radius: 5px; font-weight: bold; font-family: 'Arial', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">say <span style="background-color: #59c059; padding: 2px 8px; border-radius: 10px; margin-left: 5px;">join [positionX = ] <span style="background-color: #ff8c1a; padding: 1px 6px; border-radius: 10px;">(positionX)</span></span></span><br>
            <em style="color: #666; font-size: 14px;">(ผลลัพธ์: ตัวละครจะพูดความลับออกมา เช่น "positionX = 150")</em>
        </div>
        
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #FF6D00; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFFFFF;">✍️ มินิควิซ ประเมินตนเอง</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #FFE0B2;">ทดสอบความเข้าใจเรื่องตัวแปร Scratch! (ไม่เก็บคะแนน)</p>
        </div>
        
        <div style="border: 2px solid #FF6D00; 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: #E65100;">ข้อที่ 1: ความหมายของ "ตัวแปร (Variable)" ในโปรแกรม Scratch เปรียบเสมือนสิ่งใดมากที่สุด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'รีโมตคือตัวควบคุม (Control) จ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. รีโมตคอนโทรลสำหรับบังคับตัวละคร</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! ตัวแปรเปรียบเสมือนกล่องเปล่าที่เราตั้งชื่อไว้สำหรับเก็บข้อมูลต่างๆ เช่น คะแนน หรือเวลา')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. กล่องสำหรับเก็บข้อมูลเพื่อนำไปใช้งานหรือเปลี่ยนแปลงค่าได้</button>
                    <button onclick="checkAnswer(this, false, 'นั่นคือบล็อกเปลี่ยนชุด (Next Costume) จ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ตู้เสื้อผ้าสำหรับเปลี่ยนชุดให้ตัวละคร</button>
                    <button onclick="checkAnswer(this, false, 'นั่นคือหมวด Sound จ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. เครื่องดนตรีสำหรับสร้างเสียง</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: #E65100;">ข้อที่ 2: การสร้างตัวแปรแบบ "For this sprite only" หมายความว่าอย่างไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! เป็นตัวแปรส่วนตัวที่ใช้ได้เฉพาะกับตัวละครที่เรากำลังเขียนโค้ดให้อยู่เท่านั้น')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ตัวแปรนี้สามารถใช้งานได้เฉพาะกับตัวละคร (Sprite) ปัจจุบันเท่านั้น</button>
                    <button onclick="checkAnswer(this, false, 'ถ้าอยากให้ทุกตัวใช้ได้ต้องเลือก For all sprites จ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ตัวละครทุกตัวในโปรเจกต์สามารถใช้งานตัวแปรนี้ร่วมกันได้</button>
                    <button onclick="checkAnswer(this, false, 'ใช้ได้ตลอดไปจนกว่าจะลบโปรเจกต์ทิ้งจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ตัวแปรนี้จะใช้งานได้เพียง 1 ครั้งแล้วหายไป</button>
                    <button onclick="checkAnswer(this, false, 'ตัวแปรเก็บข้อมูลได้หลายแบบ ไม่ใช่แค่ข้อความจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ตัวแปรนี้จะเก็บได้เฉพาะข้อมูลที่เป็นข้อความเท่านั้น</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: #E65100;">ข้อที่ 3: กลุ่มบล็อกคำสั่ง Variables (ตัวแปร) ในโปรแกรม Scratch ใช้สีอะไรเป็นสัญลักษณ์?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'สีเขียวคือหมวด Operators (ตัวดำเนินการ) จ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. สีเขียว (Green)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! บล็อกหมวดตัวแปร (Variables) ใน Scratch จะเป็นสีส้มเข้ม (Dark Orange)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. สีส้มเข้ม (Dark Orange)</button>
                    <button onclick="checkAnswer(this, false, 'สีฟ้าคือหมวด Motion (การเคลื่อนที่) จ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. สีฟ้า (Blue)</button>
                    <button onclick="checkAnswer(this, false, 'สีเหลืองคือหมวด Events (เหตุการณ์) จ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. สีเหลือง (Yellow)</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: #E65100;">ข้อที่ 4: หากนักเรียนต้องการให้ตัวละครพูดประโยคที่เกิดจาก "ข้อความ" รวมกับ "ค่าในตัวแปร" ต้องใช้บล็อกคำสั่งใดมาช่วยเชื่อมต่อ?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! บล็อก join (สีเขียว) ใช้สำหรับนำข้อความและตัวแปรมาเชื่อมต่อเป็นประโยคเดียวกัน')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. บล็อก join</button>
                    <button onclick="checkAnswer(this, false, 'บล็อก set ใช้สำหรับกำหนดค่าเริ่มต้นให้ตัวแปรจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. บล็อก set ... to</button>
                    <button onclick="checkAnswer(this, false, 'บล็อก change ใช้สำหรับเพิ่ม/ลดค่าในตัวแปรจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. บล็อก change ... by</button>
                    <button onclick="checkAnswer(this, false, 'บล็อก repeat ใช้สำหรับสั่งทำงานซ้ำจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. บล็อก repeat</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 = '#FFF3E0';
        btn.style.borderColor = '#FF6D00';
        btn.style.color = '#E65100';
        btn.style.opacity = '1';
        feedback.style.background = '#FFF3E0';
        feedback.style.color = '#E65100';
        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>