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

Back

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

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

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

Title

Description

Keyword

Detail

<div class="lesson-container" style="font-family: 'Sarabun', 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.05);">
    
    <div style="background: linear-gradient(135deg, #FF512F 0%, #DD2476 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px;">
        <h2 style="margin: 0; font-size: 30px; font-weight: bold;">🛠️ Module 5: ลงมือสร้างสรรค์ ตอนที่ 1 (Drafting)</h2>
        <p style="margin: 10px 0 0 0; opacity: 0.9; font-size: 18px;">จากไอเดียในกระดาษ สู่การประกอบร่างจริงบนหน้าจอ</p>
    </div>

<div style="margin-bottom: 40px;">
        <h3 style="color: #DD2476; border-left: 5px solid #DD2476; padding-left: 15px; font-size: 22px;">1. สร้างฉากหลัง (Background) ที่ไม่แย่งซีน</h3>
        <p>หลักการสำคัญของการวาดการ์ตูนคือ <b>"ตัวละครต้องเด่นที่สุด"</b> หากฉากหลังของคุณมีรายละเอียดเยอะเกินไป สีสดเกินไป ผู้อ่านจะโฟกัสผิดจุดครับ เทคนิคใน Canva ที่ช่วยได้คือ:</p>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 15px;">
            <div style="background: #FFF0F5; padding: 15px; border-radius: 10px; border: 1px solid #F8BBD0;">
                <strong style="color: #C2185B;">🌫️ ลดความโปร่งใส (Transparency)</strong>
                <p style="font-size: 14px; margin-top: 5px;">ปรับค่าความโปร่งใสของฉากหลังลงเหลือประมาณ 60-80% เพื่อให้สีจางลงและตัวละครดูเด้งขึ้นมา</p>
            </div>
            <div style="background: #FFF0F5; padding: 15px; border-radius: 10px; border: 1px solid #F8BBD0;">
                <strong style="color: #C2185B;">💧 เบลอฉากหลัง (Blur Effect)</strong>
                <p style="font-size: 14px; margin-top: 5px;">ไปที่ Edit Photo > Effects > Blur การเบลอฉากหลังจะสร้างมิติความตื้นลึก (Depth of Field) เหมือนถ่ายด้วยกล้องโปร</p>
            </div>
        </div>

<h3 style="color: #DD2476; border-left: 5px solid #DD2476; padding-left: 15px; margin-top:30px; font-size: 22px;">2. คาถาคู่ใจนักจัดหน้า: ล็อก (Lock) และ จัดกลุ่ม (Group)</h3>
        <p>เมื่อมีองค์ประกอบเยอะขึ้น คุณจะเจอปัญหา "จะขยับตัวละคร แต่เผลอไปขยับโดนฉากหลัง" ให้ใช้ 2 เครื่องมือนี้ครับ:</p>
        <ul style="list-style-type: none; padding-left: 0;">
            <li style="background: #FAFAFA; padding: 12px; border-radius: 8px; margin-bottom: 8px; border-left: 4px solid #FF512F;">🔒 <b>การล็อก (Lock):</b> คลิกขวาที่ฉากหลัง เลือก "Lock" ทีนี้ฉากหลังจะถูกตรึงไว้กับที่ ขยับเมาส์พลาดก็ไม่สะเทือน! (กดปลดล็อกได้เสมอ)</li>
            <li style="background: #FAFAFA; padding: 12px; border-radius: 8px; margin-bottom: 8px; border-left: 4px solid #FF512F;">🔗 <b>การจัดกลุ่ม (Group):</b> คลุมดำชิ้นส่วนที่เกี่ยวข้องกัน (เช่น ตัวละคร + หมวก + กระเป๋า) แล้วกด <b>Ctrl+G (หรือ Cmd+G)</b> เพื่อมัดรวมกัน เวลาลากไปไหนก็จะไปด้วยกันทั้งหมด</li>
        </ul>
    </div>

<div style="background: #FEF9E7; border: 2px dashed #F39C12; padding: 25px; border-radius: 15px; margin-bottom: 40px;">
        <h3 style="color: #D35400; margin-top: 0; display: flex; align-items: center;">
            <span style="font-size: 30px; margin-right: 10px;">🚩</span> ภารกิจ: ประกอบร่างช่องแรก
        </h3>
        <p>ให้นักเรียนนำสตอรี่บอร์ดช่องแรกของตัวเองมาทำเป็นภาพดิจิทัลใน Canva ตามสเต็ปนี้:</p>

<div style="background: white; padding: 20px; border-radius: 10px; margin-top: 15px; border: 1px solid #FAD7A1;">
            <h4 style="margin-top: 0; color: #333;">🛠 สเต็ปการทำงาน:</h4>
            <ol style="padding-left: 20px;">
                <li style="margin-bottom: 10px;">นำ <b>Grid (เส้นตาราง)</b> มาวางเพื่อสร้างกรอบ Panel</li>
                <li style="margin-bottom: 10px;">ใส่ <b>ฉากหลัง (Background)</b> เข้าไปใน Grid จากนั้นปรับความโปร่งใสลงเล็กน้อย หรือใส่ Effect เบลอ</li>
                <li style="margin-bottom: 10px;"><b>ล็อก (Lock)</b> ฉากหลังไว้เพื่อความปลอดภัย</li>
                <li style="margin-bottom: 10px;">นำ <b>ตัวละคร (Character)</b> เข้ามาวาง จัดขนาดตามมุมกล้องที่ออกแบบไว้ หากมีพร็อพประกอบ (เช่น แว่นตา) ให้ <b>จัดกลุ่ม (Group)</b> ไว้ด้วยกัน</li>
            </ol>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #2C3E50; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px;">✍️ แบบทดสอบประเมินตนเอง (Module 5)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.8;">มาทบทวนเทคนิคการประกอบร่างการ์ตูนกันครับ</p>
        </div>
        
        <div style="border: 2px solid #2C3E50; 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: #2C3E50;">ข้อที่ 1: เหตุผลหลักที่เราควรใช้คำสั่ง "ล็อก (Lock)" กับฉากหลังของการ์ตูนคืออะไร?</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;">ก. เพื่อให้ฉากหลังเปลี่ยนสีไปมาไม่ได้</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, 'การลดขนาดไฟล์ตอนบันทึกขึ้นอยู่กับการตั้งค่าตอน Export ครับ')" 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: #2C3E50;">ข้อที่ 2: หากฉากหลังมีรายละเอียดและสีสันสดใสมากเกินไปจนกลืนไปกับตัวละคร นักเรียนควรแก้ไขอย่างไร?</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;">ก. ใช้เอฟเฟกต์ทำภาพเบลอ หรือลดความโปร่งใส (Transparency) ของฉากหลังลง</button>
                    <button onclick="checkAnswer(this, false, 'วิธีนี้ไม่ช่วยแก้ปัญหา เพราะขนาดตัวละครไม่ได้ทำให้ฉากหลังรกน้อยลงครับ')" 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;">ค. เพิ่มความสว่างของฉากหลังให้แสบตามากขึ้น</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: #2C3E50;">ข้อที่ 3: คำสั่ง "จัดกลุ่ม (Group)" เหมาะสำหรับใช้งานในสถานการณ์ใดมากที่สุด?</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;">ก. เมื่อนำตัวละครกับสิ่งของหลายชิ้นมาประกอบกัน และต้องการขยับไปพร้อมๆ กัน</button>
                    <button onclick="checkAnswer(this, false, 'นั่นคือหน้าที่ของเครื่องมือ Layers (Send to back) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เมื่อต้องการส่งตัวละครไปอยู่หลังสุดของฉาก</button>
                    <button onclick="checkAnswer(this, false, 'การใส่เสียงใช้แถบ Audio ไม่เกี่ยวกับการจัดกลุ่มครับ')" 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>
    </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 = '#fce4ec';
        btn.style.borderColor = '#c2185b';
        btn.style.color = '#880e4f';
        btn.style.opacity = '1';
        feedback.style.background = '#fce4ec';
        feedback.style.color = '#880e4f';
        feedback.innerHTML = "✅ ยอดเยี่ยม! " + msg;
    } else {
        btn.style.background = '#fff3e0';
        btn.style.borderColor = '#ff9800';
        btn.style.color = '#e65100';
        btn.style.opacity = '1';
        feedback.style.background = '#fff3e0';
        feedback.style.color = '#e65100';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>