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

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, #4169E1 0%, #FF8C00 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 2: สถาปนิกข้อมูล & Site Mapping</h2>
        <p style="margin: 10px 0 0 0; font-size: 18px; color: #f8f9fa;">ออกแบบประสบการณ์ผู้ใช้ และวาดพิมพ์เขียวก่อนสร้างเว็บจริง</p>
    </div>

<div style="margin-bottom: 40px;">
        <h3 style="color: #4169E1; border-left: 5px solid #FF8C00; padding-left: 15px; font-size: 22px;">1. ประสบการณ์ผู้ใช้ (User Experience - UX) คืออะไร?</h3>
        <p>เคยเข้าเว็บไซต์ไหนแล้วหาปุ่มเมนูไม่เจอ หรืออ่านตัวหนังสือไม่ออกไหมครับ? นั่นแหละครับคือตัวอย่างของ UX ที่ไม่ดี! <b>User Experience (UX)</b> คือการออกแบบเว็บไซต์โดยนึกถึง "ความรู้สึกและความสะดวกสบายของคนใช้งานเป็นหลัก" เว็บที่ดีต้อง: <b>"หาง่าย อ่านง่าย และโหลดไว"</b></p>
        
        <h3 style="color: #4169E1; border-left: 5px solid #FF8C00; padding-left: 15px; margin-top:30px; font-size: 22px;">2. Site Map: พิมพ์เขียวของเว็บไซต์</h3>
        <p>ก่อนช่างจะสร้างบ้าน ต้องมี "พิมพ์เขียว" ก่อนเราจะสร้างเว็บ ก็ต้องมี <b>"Site Map (แผนผังเว็บไซต์)"</b> เช่นกันครับ Site Map คือแผนภาพที่แสดงให้เห็นว่าเว็บไซต์ของเรามีกี่หน้า และแต่ละหน้าเชื่อมโยงกันอย่างไร</p>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 15px;">
            <div style="background: #FFF3E0; padding: 15px; border-radius: 10px; border: 1px solid #FFE0B2;">
                <strong style="color: #E65100;">🏠 ระดับที่ 1: หน้าแรก (Home)</strong>
                <p style="font-size: 14px; margin-top: 5px;">หน้าประตูบานแรกที่ทุกคนต้องเจอ ควรมีภาพรวมและเมนูหลักที่ชัดเจน</p>
            </div>
            <div style="background: #E8EAF6; padding: 15px; border-radius: 10px; border: 1px solid #C5CAE9;">
                <strong style="color: #1A237E;">📂 ระดับที่ 2: หมวดหมู่หลัก (Categories)</strong>
                <p style="font-size: 14px; margin-top: 5px;">หน้าย่อยที่แยกตามหัวข้อ เช่น บทเรียน, แบบทดสอบ, แหล่งอ้างอิง, ผู้จัดทำ</p>
            </div>
        </div>

<h3 style="color: #4169E1; border-left: 5px solid #FF8C00; padding-left: 15px; margin-top:30px; font-size: 22px;">3. สถาปัตยกรรมข้อมูล (Information Architecture)</h3>
        <p>การเป็น "สถาปนิกข้อมูล" คือการรู้จักจัดกลุ่มเนื้อหาที่เกี่ยวข้องกันไว้ด้วยกัน (Categorization) กฎเหล็กคือ: <b>อย่าเอาทุกอย่างไปสุมไว้ในหน้าเดียว!</b> ลองใช้กระดาษโพสต์อิท (Post-it) เขียนหัวข้อย่อยๆ แล้วนำมาจัดกลุ่มดู จะช่วยให้เห็นภาพรวมได้ชัดเจนขึ้นมากครับ</p>
    </div>

<div style="background: #F5F5F5; border: 2px dashed #9E9E9E; padding: 25px; border-radius: 15px; margin-bottom: 40px;">
        <h3 style="color: #424242; margin-top: 0; display: flex; align-items: center;">
            <span style="font-size: 30px; margin-right: 10px;">🚩</span> ภารกิจ: สถาปนิกน้อยนักออกแบบ
        </h3>
        <p>ให้นักเรียนแต่ละกลุ่มนำ "หัวข้อโครงงาน" ที่ได้รับอนุมัติจาก Module 1 มาสร้าง Site Map</p>

<div style="background: white; padding: 20px; border-radius: 10px; margin-top: 15px; border: 1px solid #E0E0E0;">
            <h4 style="margin-top: 0; color: #333;">🛠 สเต็ปการทำงาน:</h4>
            <ol style="padding-left: 20px;">
                <li style="margin-bottom: 10px;">เตรียมกระดาษ A4 หรือแอปพลิเคชันวาดรูป (เช่น Goodnotes, Miro)</li>
                <li style="margin-bottom: 10px;">วาดกล่องบนสุดเป็น <b>"หน้าแรก (Home)"</b></li>
                <li style="margin-bottom: 10px;">วาดเส้นเชื่อมโยงลงมายังหมวดหมู่หลักอย่างน้อย <b>3-4 หน้า</b> (ต้องมีหน้า "ผู้จัดทำ" ด้วย)</li>
                <li style="margin-bottom: 10px;">ตรวจสอบว่า Site Map นี้ <i>เข้าถึงข้อมูลง่าย และไม่ลึกจนเกินไป</i> หรือไม่ จากนั้นนำเสนอคุณครู</li>
            </ol>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #1A237E; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px;">✍️ แบบทดสอบประเมินตนเอง (Module 2)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.8;">ทดสอบความเข้าใจเรื่องการออกแบบและ Site Map</p>
        </div>
        
        <div style="border: 2px solid #1A237E; 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: #1A237E;">ข้อที่ 1: "Site Map" หรือ แผนผังเว็บไซต์ มีหน้าที่หลักคืออะไรในการทำโครงงานพัฒนาเว็บไซต์?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'โค้ดแอนิเมชันไม่เกี่ยวข้องกับ Site Map ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เป็นเครื่องมือสำหรับเขียนโค้ดเพื่อสร้างแอนิเมชันให้หน้าเว็บ</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! Site Map คือพิมพ์เขียวที่แสดงโครงสร้างและจำนวนหน้าเว็บทั้งหมด ช่วยให้เราไม่หลงทางเวลาสร้างเว็บจริง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เป็นแผนผังแสดงโครงสร้างและความเชื่อมโยงของหน้าเว็บทั้งหมด เพื่อให้เห็นภาพรวม</button>
                    <button onclick="checkAnswer(this, false, 'นี่คือเรื่องของการออกแบบ UI (User Interface) ครับ')" 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: #1A237E;">ข้อที่ 2: ประโยชน์สูงสุดของการออกแบบประสบการณ์ผู้ใช้ (User Experience - UX) ที่ดี คืออะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'การอยู่หน้าแรก Google เป็นเรื่องของ SEO (Search Engine Optimization) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ทำให้เว็บไซต์ค้นหาเจอบนหน้าแรกของ Google เสมอ</button>
                    <button onclick="checkAnswer(this, false, 'ลิขสิทธิ์ภาพเป็นเรื่องของกฎหมาย ไม่เกี่ยวกับ UX ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ทำให้สามารถใช้เนื้อหาที่มีลิขสิทธิ์ของผู้อื่นได้ฟรี</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! UX คือการออกแบบให้ผู้เข้าชมเว็บไซต์สามารถใช้งานได้ง่าย ค้นหาข้อมูลเจอไว และเกิดความรู้สึกที่ดีต่อเว็บของเรา')" 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: #1A237E;">ข้อที่ 3: การจัดหมวดหมู่เนื้อหา (Categorization) ที่ดีใน Site Map ควรมีลักษณะอย่างไร?</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, 'ถูกต้อง! การจัดกลุ่มเรื่องที่เหมือนกันไว้ด้วยกัน และตั้งชื่อเมนูให้ชัดเจน คือหัวใจสำคัญของ Information Architecture')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. จัดกลุ่มเนื้อหาที่เกี่ยวข้องกันไว้ด้วยกัน และตั้งชื่อเมนูให้เข้าใจง่าย</button>
                    <button onclick="checkAnswer(this, false, 'เมนูนำทาง (Navigation) ควรอยู่ในตำแหน่งที่เห็นได้ชัดเจนที่สุดครับ')" 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 = '#E3F2FD';
        btn.style.borderColor = '#1E88E5';
        btn.style.color = '#0D47A1';
        btn.style.opacity = '1';
        feedback.style.background = '#E3F2FD';
        feedback.style.color = '#0D47A1';
        feedback.innerHTML = "✅ ยอดเยี่ยม! " + msg;
    } else {
        btn.style.background = '#FBE9E7';
        btn.style.borderColor = '#FF5722';
        btn.style.color = '#BF360C';
        btn.style.opacity = '1';
        feedback.style.background = '#FBE9E7';
        feedback.style.color = '#BF360C';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>