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

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, #FF0844 0%, #FFB199 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px;">
        <h2 style="margin: 0; font-size: 30px; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">🎨 Module 4: ปรับแต่งธีมให้มีเอกลักษณ์</h2>
        <p style="margin: 10px 0 0 0; font-size: 18px; color: #FFF0F5;">สร้างสไตล์ที่โดดเด่น สื่อความหมายด้วย "สี" และ "ฟอนต์" ที่ใช่</p>
    </div>

<div style="margin-bottom: 40px;">
        <h3 style="color: #D81B60; border-left: 5px solid #FF0844; padding-left: 15px; font-size: 22px;">1. จิตวิทยาการใช้สี (Color Psychology)</h3>
        <p>รู้หรือไม่ครับว่า <b>"สี"</b> สามารถสื่ออารมณ์และส่งผลต่อความรู้สึกของผู้เข้าชมเว็บไซต์ได้? การเลือกชุดสี (Color Palette) ควรเลือกให้สอดคล้องกับเนื้อหาของโครงงานครับ ลองมาดูตัวอย่างความหมายของสีกัน:</p>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 15px;">
            <div style="background: #E3F2FD; padding: 15px; border-radius: 10px; border: 1px solid #90CAF9;">
                <strong style="color: #1565C0;">🔵 สีน้ำเงิน / ฟ้า</strong>
                <p style="font-size: 14px; margin-top: 5px;">สื่อถึงความน่าเชื่อถือ เทคโนโลยี ความเป็นมืออาชีพ (เหมาะกับเว็บให้ความรู้หรือโรงเรียน)</p>
            </div>
            <div style="background: #E8F5E9; padding: 15px; border-radius: 10px; border: 1px solid #A5D6A7;">
                <strong style="color: #2E7D32;">🟢 สีเขียว</strong>
                <p style="font-size: 14px; margin-top: 5px;">สื่อถึงธรรมชาติ สิ่งแวดล้อม การเติบโต และความสงบ (เหมาะกับเว็บชีววิทยา หรือสิ่งแวดล้อม)</p>
            </div>
            <div style="background: #FFF3E0; padding: 15px; border-radius: 10px; border: 1px solid #FFCC80;">
                <strong style="color: #EF6C00;">🟠 สีส้ม / เหลือง</strong>
                <p style="font-size: 14px; margin-top: 5px;">สื่อถึงพลังงาน ความคิดสร้างสรรค์ ความสนุกสนาน (เหมาะกับเว็บศิลปะ หรือกิจกรรมเด็ก)</p>
            </div>
        </div>

<h3 style="color: #D81B60; border-left: 5px solid #FF0844; padding-left: 15px; margin-top:30px; font-size: 22px;">2. การสร้างธีมแบบกำหนดเอง (Custom Theme)</h3>
        <p>Google Sites มีธีมสำเร็จรูปให้เลือกใช้ แต่เพื่อความไม่ซ้ำใคร เราสามารถสร้าง <b>"ธีมแบบกำหนดเอง"</b> ได้ครับ โดยไปที่เมนู <b>"ธีม (Themes)"</b> แถบขวามือ แล้วคลิกที่เครื่องหมาย <b>"+" (สร้างธีม/Create theme)</b> ระบบจะให้เราตั้งชื่อธีม เลือกใส่โลโก้ เลือกชุดสีหลัก และเลือกฟอนต์ได้ตามใจชอบเลยครับ</p>
        
        <h3 style="color: #D81B60; border-left: 5px solid #FF0844; padding-left: 15px; margin-top:30px; font-size: 22px;">3. กฎการเลือกฟอนต์ (Typography Rules)</h3>
        <p>การเลือกรูปแบบตัวอักษร หรือ <b>Typography</b> มีความสำคัญไม่แพ้สีครับ กฎเหล็กที่สำคัญที่สุดคือ <b>"ความสามารถในการอ่าน (Readability)"</b></p>
        
        <ul style="list-style-type: none; padding-left: 0;">
            <li style="background: #FFF0F5; padding: 10px; border-left: 4px solid #D81B60; margin-bottom: 8px;">✨ <b>ส่วนหัวเรื่อง (Heading):</b> สามารถใช้ฟอนต์ที่มีลวดลาย หรือฟอนต์หนาๆ เพื่อดึงดูดสายตาได้</li>
            <li style="background: #FFF0F5; padding: 10px; border-left: 4px solid #D81B60; margin-bottom: 8px;">📖 <b>เนื้อหาบทความ (Body text):</b> <u>ห้าม</u>ใช้ฟอนต์ลายมือหรือฟอนต์ที่อ่านยากเด็ดขาด ควรใช้ฟอนต์มาตรฐานที่สะอาดตา (เช่น Sarabun, Prompt, Kanit) เพื่อไม่ให้ผู้อ่านปวดตาครับ</li>
        </ul>
    </div>

<div style="background: #FFEBEE; border: 2px dashed #E53935; padding: 25px; border-radius: 15px; margin-bottom: 40px;">
        <h3 style="color: #C62828; margin-top: 0; display: flex; align-items: center;">
            <span style="font-size: 30px; margin-right: 10px;">🚩</span> ภารกิจ: สไตลิสต์ประจำเว็บ
        </h3>
        <p>ให้ <b>Web Designer</b> ของกลุ่มเป็นผู้นำในการสร้าง Custom Theme ให้กับเว็บไซต์ของทีม</p>

<div style="background: white; padding: 20px; border-radius: 10px; margin-top: 15px; border: 1px solid #FFCDD2;">
            <h4 style="margin-top: 0; color: #333;">🛠 สเต็ปการทำงาน:</h4>
            <ol style="padding-left: 20px;">
                <li style="margin-bottom: 10px;">ปรึกษากันในทีมว่า "หัวข้อเว็บไซต์ของเรา สื่อถึงอารมณ์แบบไหน?" แล้วเลือกชุดสี (Color Palette) มา 2-3 สี</li>
                <li style="margin-bottom: 10px;">ไปที่แท็บ <b>"ธีม (Themes)" > "สร้างธีม (Create theme)"</b></li>
                <li style="margin-bottom: 10px;">ตั้งชื่อธีม และใส่รหัสสี หรือเลือกสีตามที่กลุ่มตกลงกันไว้</li>
                <li style="margin-bottom: 10px;">เลือก <b>"ฟอนต์ส่วนหัว"</b> และ <b>"ฟอนต์เนื้อหา"</b> (อย่าลืมกฎความอ่านง่าย!) จากนั้นกดสร้างธีมและปรับใช้กับทุกหน้าครับ</li>
            </ol>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #880E4F; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px;">✍️ แบบทดสอบประเมินตนเอง (Module 4)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.8;">ทดสอบเซนส์ด้านการออกแบบเว็บไซต์</p>
        </div>
        
        <div style="border: 2px solid #880E4F; 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: #880E4F;">ข้อที่ 1: หากโครงงานเว็บไซต์ของนักเรียนมีหัวข้อเกี่ยวกับ "นวัตกรรมลดภาวะโลกร้อนและธรรมชาติ" ควรเลือกชุดสี (Color Palette) โทนใดจึงจะเหมาะสมที่สุด?</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;">ก. โทนสีเขียว น้ำตาล หรือเอิร์ธโทน (Earth Tones)</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: #880E4F;">ข้อที่ 2: ในโปรแกรม Google Sites หากเราต้องการเปลี่ยนชุดสีหลักและรูปแบบตัวอักษรของเว็บไซต์ทั้งเว็บในครั้งเดียว ต้องไปที่เมนูใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'เมนูหน้าเว็บ (Pages) ใช้สำหรับจัดการโครงสร้าง Site Map ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เมนู "หน้าเว็บ" (Pages)</button>
                    <button onclick="checkAnswer(this, false, 'เมนูแทรก (Insert) ใช้สำหรับเพิ่มรูปภาพหรือกล่องข้อความลงในหน้าปัจจุบันครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เมนู "แทรก" (Insert)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! เมนู ธีม (Themes) จะควบคุมภาพรวมของเว็บไซต์ ทั้งสี ฟอนต์ และสไตล์การออกแบบครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เมนู "ธีม" (Themes)</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: #880E4F;">ข้อที่ 3: การเลือกใช้ฟอนต์ (Font) สำหรับส่วนที่เป็น "เนื้อหาหรือบทความยาวๆ" กฎเหล็กที่สำคัญที่สุดคือข้อใด?</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, 'ถูกต้อง! Readability หรือความสามารถในการอ่านออกได้ง่าย คือหัวใจสำคัญของเนื้อหาบทความครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ต้องเป็นฟอนต์ที่มีความเรียบง่าย สบายตา และมีความสามารถในการอ่าน (Readability) สูง</button>
                    <button onclick="checkAnswer(this, false, 'ฟอนต์ลายมือติดพัน (Script) เหมาะสำหรับตกแต่งหัวข้อสั้นๆ เท่านั้นครับ นำมาพิมพ์ย่อหน้ายาวๆ จะอ่านยากมาก')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ต้องใช้ฟอนต์ที่มีลักษณะเป็นตัวเขียน (Script) เพื่อให้ดูมีความเป็นมนุษย์</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 = '#D81B60';
        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>