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

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, #1B5E20 0%, #2E7D32 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #003300;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #FFF;">📗 หน่วยที่ 4 EP.2: ประมวลผลข้อมูลฉบับโปร</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #C8E6C9; font-weight: bold;">Data Processing with Google Sheets</p>
    </div>

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

<h3 style="color: #2E7D32; border-left: 5px solid #4CAF50; padding-left: 15px; font-size: 22px; margin-top: 30px;">📑 1. กฎเหล็ก: แยก "ข้อมูลดิบ" ออกจาก "ข้อมูลประมวลผล"</h3>
        <p>เพื่อป้องกันไม่ให้ข้อมูลต้นฉบับที่เราเหนื่อยไปเก็บมาต้องสูญหายหรือพังจากการเผลอลบ เราจะต้องสร้าง <strong>Tab (แผ่นงาน)</strong> ขึ้นมาใหม่เสมอครับ</p>
        
        <div style="background: #E8F5E9; padding: 15px; border-radius: 12px; border-left: 6px solid #4CAF50; margin-top: 15px;">
            <ul style="margin-top: 5px; margin-bottom: 0; font-size: 15px; color: #333; line-height: 1.8;">
                <li><strong>แผ่นงานที่ 1 (ข้อมูลดิบ):</strong> คือหน้าต่างที่ดึงข้อมูลมาจาก Forms ให้เราเปลี่ยนชื่อ Tab นี้ว่า "ข้อมูลดิบ" และ <em>ห้ามไปแก้ไขข้อมูลใดๆ ในหน้านี้เด็ดขาด!</em></li>
                <li><strong>แผ่นงานที่ 2 (พื้นที่ทำงาน):</strong> กดเครื่องหมายบวก <strong>(+)</strong> มุมซ้ายล่างเพื่อสร้าง Tab ใหม่สำหรับใช้คำนวณ</li>
                <li><strong>การดึงข้อมูลข้าม Tab:</strong> ในหน้าแผ่นงานใหม่ หากเราพิมพ์สูตร <code>='ข้อมูลดิบ'!A1</code> โปรแกรมจะไปดูดข้อมูลจากช่อง A1 ในหน้าข้อมูลดิบมาแสดงให้เราทันที!</li>
            </ul>
        </div>

<h3 style="color: #2E7D32; border-left: 5px solid #4CAF50; padding-left: 15px; font-size: 22px; margin-top: 35px;">✨ 2. Data Cleansing: แปลงข้อความให้เป็นตัวเลข</h3>
        <p>ในแบบสอบถาม หากเราถามว่า <em>"คุณมีความพึงพอใจระดับใด?"</em> ผู้ตอบอาจจะเลือกคำว่า "พอใจ", "เฉยๆ", "ไม่ค่อยชอบ" ซึ่งคำเหล่านี้เป็น <strong>ข้อมูลเชิงคุณภาพ</strong> คอมพิวเตอร์เอาไปบวกลบหรือหาค่าเฉลี่ยไม่ได้ครับ เราจึงต้องแปลงมันเป็น <strong>ข้อมูลเชิงปริมาณ (ตัวเลข)</strong> เสียก่อน!</p>
        
        <div style="display: flex; flex-direction: column; gap: 15px; margin-top: 15px;">
            <div style="background: #FAFAFA; padding: 20px; border-radius: 12px; border: 1px solid #E0E0E0;">
                <strong style="color: #1B5E20; font-size: 18px;">💡 พระเอกของเราคือ "สูตร IF (ถ้า...แล้ว...)"</strong><br>
                <p style="font-size: 15px; margin-top: 10px; margin-bottom: 10px;">เราสามารถสั่งคอมพิวเตอร์ว่า: <em>"ถ้าช่องนี้เขียนว่า 'พอใจ' ให้เปลี่ยนเป็นเลข 3 แต่ถ้าเขียนว่า 'เฉยๆ' ให้เปลี่ยนเป็นเลข 2"</em></p>
                <div style="background: #212121; color: #69F0AE; padding: 15px; border-radius: 8px; font-family: monospace; font-size: 14px; overflow-x: auto;">
                    =IF('ข้อมูลดิบ'!C2="พอใจ", 3, IF('ข้อมูลดิบ'!C2="เฉยๆ", 2, 1))
                </div>
                <p style="font-size: 14px; margin-top: 10px; margin-bottom: 0; color: #555;"><strong>อธิบายสูตร:</strong> หากข้อมูลในช่อง C2 คือคำว่า พอใจ ให้แสดงค่าเลข 3, ถ้าเป็นคำว่า เฉยๆ ให้แสดงเลข 2, แต่ถ้าไม่ใช่ทั้งสองคำนี้ (หมายถึง ไม่ค่อยชอบ) ให้แสดงเลข 1</p>
            </div>
        </div>

<h3 style="color: #2E7D32; border-left: 5px solid #4CAF50; padding-left: 15px; font-size: 22px; margin-top: 35px;">☁️ 3. ข้อดีของการประมวลผลบน Cloud</h3>
        <p>โปรแกรมอย่าง Google Sheets เป็นการประมวลผลแบบออนไลน์ (Online Processing) ซึ่งมีข้อดีกว่าการลงโปรแกรมในเครื่องตรงที่:</p>
        <ul style="margin-top: 10px; margin-bottom: 0; font-size: 15px; color: #333; line-height: 1.8;">
            <li><strong>Auto-Save:</strong> พิมพ์ปุ๊บ บันทึกปั๊บ ไฟดับงานก็ไม่หาย</li>
            <li><strong>Collaboration:</strong> สามารถแชร์ลิงก์ให้เพื่อนๆ ในกลุ่มเข้ามาช่วยกันพิมพ์ ช่วยกันแก้สูตรได้พร้อมกันแบบ Real-time</li>
            <li><strong>Anywhere, Anytime:</strong> ขอแค่มีอินเทอร์เน็ต จะเปิดทำในคอมพิวเตอร์โรงเรียน หรือกลับไปทำต่อบนไอแพดที่บ้าน ข้อมูลก็เชื่อมถึงกันหมด!</li>
        </ul>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #2E7D32; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">✍️ มินิควิซ ทบทวนความรู้ EP.2</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #C8E6C9;">ทดสอบความเข้าใจเรื่องการจัดการแผ่นงานและการใช้สูตร IF</p>
        </div>
        
        <div style="border: 2px solid #2E7D32; 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: #1B5E20;">ข้อที่ 1: ทำไมเราจึงควรสร้าง Tab (แผ่นงาน) ขึ้นมาใหม่สำหรับการคำนวณ แทนที่จะพิมพ์สูตรลงไปใน Tab ข้อมูลดิบโดยตรง?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'ไม่ใช่นะครับ Tab เดียวก็ใส่สีได้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เพราะ Google Sheets บังคับว่าหนึ่ง Tab จะใส่สีได้แค่สีเดียวเท่านั้น</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! เพื่อเป็นการสำรองข้อมูลต้นฉบับไว้ ป้องกันการเผลอลบหรือเปลี่ยนแปลงข้อมูลดิบที่อุตส่าห์ไปเก็บรวบรวมมาครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เพื่อป้องกันความผิดพลาดและการสูญหายของข้อมูลต้นฉบับ (Raw Data)</button>
                    <button onclick="checkAnswer(this, false, 'Google Sheets มีพื้นที่เยอะมากครับ ไม่ได้จำกัดแค่ 100 บรรทัด')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เพราะ Tab ข้อมูลดิบจะรับข้อมูลได้สูงสุดแค่ 100 บรรทัดเท่านั้น</button>
                    <button onclick="checkAnswer(this, false, 'การใส่รหัสผ่านล็อคสามารถทำได้ทุก Tab ครับ ไม่จำเป็นต้องสร้างใหม่')" 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: #1B5E20;">ข้อที่ 2: หากนักเรียนพิมพ์สูตร <code>='ข้อมูลดิบ'!A1</code> ลงในช่องว่าง สูตรนี้จะทำหน้าที่อะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! เครื่องหมาย ! (อัศเจรีย์) ใช้สำหรับการอ้างอิงข้อมูลข้ามแผ่นงาน (Cross-Tab) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ทำการดึงข้อมูลจากช่อง A1 ในแผ่นงานที่ชื่อว่า "ข้อมูลดิบ" มาแสดงผล</button>
                    <button onclick="checkAnswer(this, false, 'ถ้าจะคำนวณจำนวนคำต้องใช้สูตรจำพวก LEN หรือ COUNT ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ทำการนับจำนวนตัวอักษรของคำว่า "ข้อมูลดิบ" ในช่อง A1</button>
                    <button onclick="checkAnswer(this, false, 'การเปลี่ยนชื่อ Tab ต้องไปคลิกขวาที่ชื่อ Tab ด้านล่างครับ ใช้สูตรเปลี่ยนไม่ได้')" 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;">ง. เป็นการสั่งให้ระบบสร้างไฟล์สำรอง (Backup) ไว้ใน Google Drive อัตโนมัติ</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: #1B5E20;">ข้อที่ 3: เป้าหมายหลักของการใช้ "สูตร IF" (IF Function) ในขั้นตอนการประมวลผลข้อมูลคืออะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'การหาผลรวมตัวเลขทั้งหมด ต้องใช้สูตร SUM ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เพื่อใช้หาผลรวมของตัวเลขทั้งหมดในคอลัมน์นั้น</button>
                    <button onclick="checkAnswer(this, true, 'ใช่เลยครับ! สูตร IF ช่วยให้เราแปลงข้อมูลข้อความ (เช่น ชาย/หญิง, พอใจ/ไม่พอใจ) ให้กลายเป็นตัวเลข (1, 2, 3) เพื่อนำไปคำนวณทางสถิติต่อได้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เพื่อแปลงข้อมูลเชิงคุณภาพ (ข้อความ) ให้กลายเป็นข้อมูลเชิงปริมาณ (ตัวเลข)</button>
                    <button onclick="checkAnswer(this, false, 'สูตร IF ไม่สามารถแปลภาษาได้ครับ ต้องใช้ GOOGLETRANSLATE')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เพื่อช่วยแปลภาษาในแบบสอบถามจากภาษาไทยเป็นภาษาอังกฤษ</button>
                    <button onclick="checkAnswer(this, false, 'การใส่สีตามข้อความ ต้องใช้เครื่องมือ Conditional Formatting ครับ')" 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: #1B5E20;">ข้อที่ 4: หากช่อง B2 มีคำว่า "ชาย" หรือ "หญิง" ถ้านักเรียนต้องการแปลงคำว่า "ชาย" ให้แสดงเป็นเลข 1 และ "หญิง" ให้แสดงเป็นเลข 2 จะต้องเขียนสูตรอย่างไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้องเป๊ะเลยครับ! โครงสร้างคือ IF(เซลล์=\" คำ\",="" ค่าที่ต้องการถ้าจริง,="" ค่าที่ต้องการถ้าเท็จ)')"="" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. =IF(B2="ชาย", 1, 2)</button>
                    <button onclick="checkAnswer(this, false, 'สูตรสลับกันครับ แบบนี้ ชาย จะกลายเป็น 2 และ หญิง จะกลายเป็น 1')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. =IF(B2="ชาย", 2, 1)</button>
                    <button onclick="checkAnswer(this, false, 'การใช้ + แบบนี้ผิดไวยากรณ์ (Syntax) ของสูตร IF ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. =IF(B2="ชาย"+1, "หญิง"+2)</button>
                    <button onclick="checkAnswer(this, false, 'เราไม่สามารถใช้เครื่องหมายเท่ากับ (=) ซ้อนกันในลักษณะนี้ได้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. =IF(B2="ชาย"=1, B2="หญิง"=2)</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: #1B5E20;">ข้อที่ 5: ข้อใดคือประโยชน์เด่นชัดที่สุดของการใช้ Google Sheets ซึ่งเป็นการทำงานบนระบบคลาวด์ (Cloud-based)?</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, false, 'Google Sheets จะทำงานได้อย่างเต็มประสิทธิภาพเมื่อมีอินเทอร์เน็ตครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. สามารถทำงานได้รวดเร็วที่สุดเมื่อไม่มีการเชื่อมต่ออินเทอร์เน็ต</button>
                    <button onclick="checkAnswer(this, false, 'ระบบไม่ได้ทำงานแทนเรา 100% ครับ เรายังต้องคิดและเขียนสูตรเองอยู่')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. โปรแกรมจะสร้างสูตรคำนวณและสรุปผลให้เองทั้งหมดโดยที่นักเรียนไม่ต้องพิมพ์อะไรเลย</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องที่สุดครับ! การแชร์ลิงก์ให้เข้ามาทำงานร่วมกัน (Collaboration) ในเวลาเดียวกันได้ คือจุดแข็งของการทำงานบน Cloud ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. สมาชิกในกลุ่มทุกคนสามารถแชร์ไฟล์และเข้ามาช่วยกันพิมพ์งานได้พร้อมกันในเวลาเดียว (Real-time)</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 = '#E8F5E9';
        btn.style.borderColor = '#4CAF50';
        btn.style.color = '#1B5E20';
        btn.style.opacity = '1';
        feedback.style.background = '#E8F5E9';
        feedback.style.color = '#2E7D32';
        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>