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

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, #00838F 0%, #26C6DA 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #006064;">
        <h2 style="margin: 0; font-size: 30px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #E0F7FA;">💻 ขั้นตอนที่ 5: กำเนิดโปรแกรมเมอร์</h2>
        <p style="margin: 10px 0 0 0; font-size: 18px; color: #B2EBF2;">(สรุปผลการแก้ปัญหาและลงมือเขียนโปรแกรม)</p>
    </div>

<div style="background: #E0F7FA; border: 2px dashed #00ACC1; padding: 25px; border-radius: 15px; margin-bottom: 40px;">
        <h3 style="color: #00838F; margin-top: 0; display: flex; align-items: center;">
            <span style="font-size: 30px; margin-right: 10px;">🎯</span> ภารกิจของเรา
        </h3>
        <p style="font-size: 18px; margin-bottom: 0;">เปลี่ยนจาก <b>"นักออกแบบ"</b> มาเป็น <b>"โปรแกรมเมอร์"</b> อย่างเต็มตัว! นำพิมพ์เขียวที่วาดไว้มาต่อบล็อกคำสั่งในโปรแกรม Scratch ทดสอบจนสำเร็จ แล้วนำโค้ดมาส่งคุณครู</p>
    </div>

<div style="margin-bottom: 40px;">
        <h3 style="color: #006064; border-left: 5px solid #00838F; padding-left: 15px; font-size: 22px;">1. จากกระดาษ สู่หน้าจอ (From Blueprint to Code)</h3>
        <p>มาถึงขั้นตอนนี้ น้องๆ มีแผนที่นำทาง (ผังงาน/Flowchart) อยู่ในมือแล้ว สิ่งที่ต้องทำต่อไปคือการเข้าไปที่เว็บไซต์ <b>Scratch Online</b> แล้วต่อบล็อกคำสั่งตามผังงานที่วาดไว้ทีละขั้นตอนครับ</p>
        <p><i>💡 <b>เคล็ดลับ:</b> วางผังงานไว้ข้างๆ หน้าจอคอมพิวเตอร์ แล้วค่อยๆ ต่อบล็อกไล่ไปทีละสัญลักษณ์ จะช่วยให้ไม่หลงลืมคำสั่งสำคัญครับ!</i></p>
        
        <h3 style="color: #006064; border-left: 5px solid #00838F; padding-left: 15px; margin-top:30px; font-size: 22px;">2. วิธีก๊อปปี้โค้ดมาส่งงาน (How to Embed)</h3>
        <p>เมื่อทดสอบโปรแกรมจนทำงานได้สมบูรณ์แบบแล้ว เราจะมาส่งผลงานกันครับ แต่ช้าก่อน! เราไม่ได้ส่งแค่ลิงก์ URL ธรรมดานะครับ แต่เราจะฝัง <b>"โค้ด Iframe"</b> เพื่อให้เพื่อนๆ เล่นเกมของเราได้บนเว็บไซต์นี้เลย! ทำตามขั้นตอนนี้ได้เลย:</p>
        
        <div style="background: #F5F5F5; padding: 20px; border-radius: 10px; border: 1px solid #E0E0E0; margin-top: 15px;">
            <ol style="margin: 0; padding-left: 20px; line-height: 1.8;">
                <li>ตรวจสอบให้แน่ใจว่าน้องๆ กดปุ่ม <b>"Share" (แชร์)</b> โปรเจกต์ใน Scratch แล้ว (ปุ่มสีส้มด้านบน)</li>
                <li>คลิกที่ปุ่ม <b>"Copy Link"</b> (คัดลอกลิงก์) ที่อยู่ด้านล่างขวาของหน้าจอโปรเจกต์</li>
                <li>มองหาหัวข้อที่เขียนว่า <b>"Copy embed" (คัดลอกรหัสฝัง)</b> แล้วกดปุ่มคัดลอก (โค้ดจะยาวๆ และขึ้นต้นด้วยคำว่า <code><iframe...</code>)</li>
                <li>กลับมาที่เว็บไซต์ SmartyQuizKids วางโค้ดที่คัดลอกมาลงในช่องส่งงาน แล้วกด <b>"บันทึก"</b> เป็นอันเสร็จสิ้น!</li>
            </ol>
            
            <div style="background: #282C34; color: #ABB2BF; padding: 15px; border-radius: 8px; margin-top: 15px; font-family: monospace; font-size: 13px; border-left: 4px solid #61AFEF;">
                <b>ตัวอย่างหน้าตาโค้ดที่ถูกต้อง:</b><br>
                <span style="color: #E06C75;"><iframe</span> src="https://scratch.mit.edu/projects/12345/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen<span style="color: #E06C75;">></iframe></span>
            </div>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #00838F; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #E0F7FA;">✍️ มินิควิซ ทบทวนความรู้ (ขั้นตอนที่ 5)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.9;">เช็คความพร้อม ก่อนไปลุยเขียนโค้ดของจริง!</p>
        </div>
        
        <div style="border: 2px solid #00838F; 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: #006064;">ข้อที่ 1: ก่อนที่จะเริ่มเขียนโปรแกรมต่อบล็อกคำสั่งใน Scratch สิ่งที่น้องๆ ควรทำคือข้อใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'การใส่สีฉากหลังเป็นเรื่องของความสวยงามครับ ควรทำหลักจากที่โปรแกรมทำงานได้ถูกต้องแล้วนะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ก. เลือกสีฉากหลังที่สวยที่สุดก่อน</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! การกางผังงานออกมาดู จะทำให้เรามีแผนที่นำทางและไม่หลงลืมขั้นตอนสำคัญไปครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ข. นำผังงาน (Flowchart) ที่ออกแบบไว้มากางดูเป็นแผนที่นำทาง</button>
                    <button onclick="checkAnswer(this, false, 'ถ้าเราแค่ก๊อปปี้บล็อกคนอื่นมาต่อ เราจะไม่ได้ฝึกกระบวนการคิดแก้ปัญหาของตัวเองเลยครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ค. คัดลอกบล็อกคำสั่งจากผลงานของเพื่อนมาต่อโดยไม่อ่าน</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: #006064;">ข้อที่ 2: ก่อนที่น้องๆ จะสามารถคัดลอกโค้ดลิงก์มาส่งงานได้ ต้องทำสิ่งใดเป็นอันดับแรกในเว็บ Scratch?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้องเป๊ะ! ถ้าไม่กด Share (แชร์) ก่อน คุณครูและเพื่อนๆ ก็จะไม่สามารถเข้ามาดูผลงานของเราได้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ก. กดปุ่ม Share (แชร์) ผลงานให้เป็นสาธารณะก่อน</button>
                    <button onclick="checkAnswer(this, false, 'การเปลี่ยนภาษาไม่ได้มีผลกับการส่งงานครับผม')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ข. เปลี่ยนภาษาเมนูเป็นภาษาอังกฤษ</button>
                    <button onclick="checkAnswer(this, false, 'ถึงเราจะเพิ่มตัวละครเป็นสิบตัว แต่ถ้าไม่กดแชร์ ก็ไม่มีใครเห็นผลงานเราอยู่ดีครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ค. เพิ่มจำนวนตัวละครให้เยอะที่สุด</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: #006064;">ข้อที่ 3: โค้ดที่ถูกต้องสำหรับการนำมาวางส่งงานในหน้าเว็บนี้ ควรมีหน้าตาเริ่มต้นคล้ายกับข้อใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'อันนี้เป็นแค่ URL หรือลิงก์เว็บไซต์ธรรมดาครับ ระบบอาจจะไม่แสดงหน้าจอเกมให้เราเห็นนะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ก. https://scratch.mit.edu/projects/12345</button>
                    <button onclick="checkAnswer(this, false, 'อันนี้ไม่ใช่รหัสฝังผลงานครับผม')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ข. <scratch game> 12345</button>
                    <button onclick="checkAnswer(this, true, 'สุดยอดครับ! โค้ดที่นำมาฝังหน้าเว็บ (Embed code) จะต้องเริ่มต้นด้วยแท็ก <iframe> เสมอ เพื่อจำลองหน้าจอเกมมาไว้บนเว็บของเราครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ค. <iframe src="https://scratch.mit.edu/..."></iframe></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 = '#E0F7FA';
        btn.style.borderColor = '#00ACC1';
        btn.style.color = '#006064';
        btn.style.opacity = '1';
        feedback.style.background = '#E0F7FA';
        feedback.style.color = '#006064';
        feedback.innerHTML = "✅ ถูกต้องครับ! " + msg;
    } else {
        btn.style.background = '#FFEBEE';
        btn.style.borderColor = '#F44336';
        btn.style.color = '#C62828';
        btn.style.opacity = '1';
        feedback.style.background = '#FFEBEE';
        feedback.style.color = '#C62828';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>