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

Back

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

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

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

Title

Description

Keyword

Detail

<div style="max-width: 850px; margin: auto; background-color: #fafafa; border: 4px solid #880E4F; border-radius: 16px; font-family: 'Sarabun', sans-serif; box-shadow: 0 10px 20px rgba(0,0,0,0.1); overflow: hidden;">
    
    <div style="background: linear-gradient(135deg, #880E4F 0%, #D81B60 100%); padding: 35px 20px; text-align: center; color: white; border-bottom: 5px solid #FFC107;">
        <div style="font-size: 60px; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">🚀 ☁️ 🤖</div>
        <h2 style="font-size: 32px; font-weight: bold; margin: 0 0 10px 0;">ภารกิจจัดระเบียบไฟล์บนก้อนเมฆ (Google Workspace)</h2>
        <p style="font-size: 18px; font-weight: bold; color: #FFCA28; margin: 0;">เตรียมสร้างแฟ้มลับและอาวุธทางปัญญาฉบับกัปตันอวกาศ!</p>
    </div>

<div style="padding: 35px;">
        
        <h3 style="color: #880E4F; font-size: 22px; border-left: 6px solid #FFC107; padding-left: 15px; margin-top: 0;">🛸 ทำความรู้จัก 3 สุดยอดอาวุธแห่ง Google Workspace</h3>
        <div style="background-color: #ffffff; padding: 20px; margin-bottom: 30px; border-radius: 8px; box-shadow: 0 3px 6px rgba(0,0,0,0.05); border: 1px solid #e0e0e0;">
            <p style="font-size: 16px; color: #333; line-height: 1.8; margin: 0;">นักเรียนรู้ไหมครับว่า นอกจากเราจะเก็บรูปภาพใน Google Drive ได้แล้ว เรายังสามารถสร้างไฟล์เอกสารเจ๋งๆ บนคลาวด์ได้ด้วย! ได้แก่ <br><br>
💙 <b>Google Docs (สีฟ้า)</b> ใช้สำหรับพิมพ์รายงาน เล่าเรื่องราว หรือเขียนบทความ<br>
💚 <b>Google Sheets (สีเขียว)</b> ใช้จัดการข้อมูล ทำตาราง และคิดเลข<br>
💛 <b>Google Slides (สีเหลือง)</b> ใช้สร้างหน้าต่างนำเสนอผลงานให้สวยงาม!</p>
        </div>

<h3 style="color: #880E4F; font-size: 22px; border-left: 6px solid #FFC107; padding-left: 15px;">📂 ภารกิจสร้างและจัดเก็บแฟ้มลับ</h3>
        <div style="background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 3px 6px rgba(0,0,0,0.05); margin-bottom: 40px; border: 1px solid #e0e0e0;">
            <p style="font-size: 16px; color: #333; line-height: 1.8; margin: 0;">เพื่อให้ฐานข้อมูลอวกาศของเราเป็นระเบียบ การสร้างและเก็บไฟล์ทำได้ง่ายๆ ดังนี้ครับ:
                </p><ul>
                    <li>เข้าไปที่ Google Drive ด้วยบัญชีของโรงเรียน (@wsst.ac.th หรือ @ms.wsst.ac.th)</li>
                    <li>คลิกที่ปุ่ม <b>+ ใหม่ (+ New)</b> ด้านซ้ายบน</li>
                    <li>เลือกประเภทไฟล์ที่ต้องการสร้าง (Docs, Sheets หรือ Slides)</li>
                    <li>เมื่อหน้าต่างใหม่เปิดขึ้น ให้ <b>ตั้งชื่อไฟล์ที่มุมซ้ายบน</b> ทันที เพื่อไม่ให้ไฟล์หลงทางในอวกาศ</li>
                    <li>ปิดไฟล์นั้น แล้วกลับมาที่หน้า Drive จากนั้นให้ <b>คลิกลากไฟล์</b> ไปใส่ในโฟลเดอร์ที่นักเรียนสร้างไว้ได้เลย!</li>
                </ul>
            <p></p>
        </div>

<div style="background-color: #FFCA28; padding: 30px; border-radius: 12px; text-align: center; border: 2px dashed #880E4F;">
            <h3 style="color: #880E4F; font-size: 24px; margin-top: 0; margin-bottom: 20px;">🎯 มินิควิซ ทดสอบไหวพริบ!</h3>
            
            
            <div class="question-item" style="background-color: #ffffff; padding: 20px; border-radius: 8px; text-align: left; margin-bottom: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-size: 16px; font-weight: bold; color: #880E4F; margin-top: 0;">ข้อที่ 1. ไฟล์ไอคอนสีฟ้า ที่มีชื่อว่า "Google Docs" มีไว้สำหรับทำอะไร?</p>
                <div class="options-container" style="display: flex; flex-direction: column; gap: 8px; margin-top: 15px;">
                    <button onclick="checkMicroQuiz(this, false, 'ผิดครับ Google Docs ไม่ได้เน้นใช้วาดรูปนะ')" style="padding: 12px; border: 1px solid #ccc; border-radius: 6px; background-color: #fafafa; font-size: 15px; cursor: pointer; text-align: left; transition: 0.3s;">ก. ใช้วาดรูประบายสี</button>
                    <button onclick="checkMicroQuiz(this, true, 'ถูกต้อง! Google Docs คือเอกสารสำหรับพิมพ์รายงานและเขียนเล่าเรื่องครับ')" style="padding: 12px; border: 1px solid #ccc; border-radius: 6px; background-color: #fafafa; font-size: 15px; cursor: pointer; text-align: left; transition: 0.3s;">ข. ใช้พิมพ์รายงานและข้อความ</button>
                    <button onclick="checkMicroQuiz(this, false, 'อันนี้ต้องใช้ Google Sheets สีเขียวครับ')" style="padding: 12px; border: 1px solid #ccc; border-radius: 6px; background-color: #fafafa; font-size: 15px; cursor: pointer; text-align: left; transition: 0.3s;">ค. ใช้ทำตารางและคำนวณตัวเลข</button>
                    <button onclick="checkMicroQuiz(this, false, 'ยังไม่ใช่ครับ การตัดต่อวิดีโอต้องใช้โปรแกรมอื่นนะ')" style="padding: 12px; border: 1px solid #ccc; border-radius: 6px; background-color: #fafafa; font-size: 15px; cursor: pointer; text-align: left; transition: 0.3s;">ง. ใช้ตัดต่อวิดีโอ</button>
                </div>
                <div class="feedback-box" style="margin-top: 15px; font-weight: bold; display: none; padding: 12px; border-radius: 8px;"></div>
            </div>

<div class="question-item" style="background-color: #ffffff; padding: 20px; border-radius: 8px; text-align: left; margin-bottom: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-size: 16px; font-weight: bold; color: #880E4F; margin-top: 0;">ข้อที่ 2. ถ้ากัปตันต้องการสร้างไฟล์เอกสารใหม่ใน Google Drive ต้องไปกดที่ปุ่มใด?</p>
                <div class="options-container" style="display: flex; flex-direction: column; gap: 8px; margin-top: 15px;">
                    <button onclick="checkMicroQuiz(this, false, 'ถังขยะเอาไว้ทิ้งไฟล์ที่ไม่ใช้แล้วครับ!')" style="padding: 12px; border: 1px solid #ccc; border-radius: 6px; background-color: #fafafa; font-size: 15px; cursor: pointer; text-align: left; transition: 0.3s;">ก. ปุ่มรูปถังขยะ</button>
                    <button onclick="checkMicroQuiz(this, false, 'ปุ่มดาวน์โหลดเอาไว้เซฟไฟล์ลงมาในเครื่องคอมพิวเตอร์ครับ')" style="padding: 12px; border: 1px solid #ccc; border-radius: 6px; background-color: #fafafa; font-size: 15px; cursor: pointer; text-align: left; transition: 0.3s;">ข. ปุ่มดาวน์โหลด</button>
                    <button onclick="checkMicroQuiz(this, true, 'เก่งมาก! ปุ่ม + ใหม่ (+ New) คือจุดเริ่มต้นของการสร้างไฟล์ทุกชนิดใน Google Drive')" style="padding: 12px; border: 1px solid #ccc; border-radius: 6px; background-color: #fafafa; font-size: 15px; cursor: pointer; text-align: left; transition: 0.3s;">ค. ปุ่ม + ใหม่ (+ New)</button>
                    <button onclick="checkMicroQuiz(this, false, 'ปุ่มแชร์มีไว้ส่งไฟล์ให้เพื่อนๆ ทำงานร่วมกันครับ')" style="padding: 12px; border: 1px solid #ccc; border-radius: 6px; background-color: #fafafa; font-size: 15px; cursor: pointer; text-align: left; transition: 0.3s;">ง. ปุ่มแชร์ (Share)</button>
                </div>
                <div class="feedback-box" style="margin-top: 15px; font-weight: bold; display: none; padding: 12px; border-radius: 8px;"></div>
            </div>

<div class="question-item" style="background-color: #ffffff; padding: 20px; border-radius: 8px; text-align: left; margin-bottom: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-size: 16px; font-weight: bold; color: #880E4F; margin-top: 0;">ข้อที่ 3. ทำไมเราจึงควรลากไฟล์ที่สร้างเสร็จแล้ว เข้าไปเก็บในโฟลเดอร์เสมอ?</p>
                <div class="options-container" style="display: flex; flex-direction: column; gap: 8px; margin-top: 15px;">
                    <button onclick="checkMicroQuiz(this, false, 'โฟลเดอร์ไม่ได้ช่วยลดขนาดของไฟล์นะครับ')" style="padding: 12px; border: 1px solid #ccc; border-radius: 6px; background-color: #fafafa; font-size: 15px; cursor: pointer; text-align: left; transition: 0.3s;">ก. เพื่อให้ไฟล์มีขนาดเล็กลง</button>
                    <button onclick="checkMicroQuiz(this, true, 'ยอดเยี่ยม! การจัดหมวดหมู่ช่วยให้เราหาไฟล์เจอได้ไวขึ้น ไม่ปะปนกับงานวิชาอื่น')" style="padding: 12px; border: 1px solid #ccc; border-radius: 6px; background-color: #fafafa; font-size: 15px; cursor: pointer; text-align: left; transition: 0.3s;">ข. เพื่อให้เป็นระเบียบและค้นหาได้ง่าย</button>
                    <button onclick="checkMicroQuiz(this, false, 'ไม่เกี่ยวนะครับ คอมพิวเตอร์ไม่ได้ทำงานเร็วขึ้นจากการย้ายไฟล์เข้าโฟลเดอร์')" style="padding: 12px; border: 1px solid #ccc; border-radius: 6px; background-color: #fafafa; font-size: 15px; cursor: pointer; text-align: left; transition: 0.3s;">ค. เพื่อให้คอมพิวเตอร์ทำงานเร็วขึ้น</button>
                    <button onclick="checkMicroQuiz(this, false, 'โฟลเดอร์ไม่สามารถเปลี่ยนสีของไฟล์เอกสารได้ครับ')" style="padding: 12px; border: 1px solid #ccc; border-radius: 6px; background-color: #fafafa; font-size: 15px; cursor: pointer; text-align: left; transition: 0.3s;">ง. เพื่อเปลี่ยนสีของไฟล์ให้สวยงาม</button>
                </div>
                <div class="feedback-box" style="margin-top: 15px; font-weight: bold; display: none; padding: 12px; border-radius: 8px;"></div>
            </div>

</div>
    </div>

<script>
        function checkMicroQuiz(btn, isCorrect, msg) {
            const optionsContainer = btn.parentElement;
            const feedbackBox = optionsContainer.nextElementSibling;
            const allButtons = optionsContainer.querySelectorAll('button');

allButtons.forEach(b => {
                b.disabled = true;
                b.style.opacity = '0.6';
                b.style.cursor = 'not-allowed';
            });

btn.style.opacity = '1';
            feedbackBox.style.display = 'block';

if(isCorrect) {
                btn.style.borderColor = '#2E7D32';
                btn.style.backgroundColor = '#E8F5E9';
                btn.style.color = '#2E7D32';
                feedbackBox.style.backgroundColor = '#E8F5E9';
                feedbackBox.style.color = '#2E7D32';
                feedbackBox.style.border = '1px solid #A5D6A7';
                feedbackBox.innerHTML = "✅ ยอดเยี่ยมมาก! " + msg;
            } else {
                btn.style.borderColor = '#C62828';
                btn.style.backgroundColor = '#FFEBEE';
                btn.style.color = '#C62828';
                feedbackBox.style.backgroundColor = '#FFEBEE';
                feedbackBox.style.color = '#C62828';
                feedbackBox.style.border = '1px solid #FFCDD2';
                feedbackBox.innerHTML = "❌ พลาดไปนิดเดียว! " + msg;
            }
        }
    </script>
</div>