สร้างระบบแบบทดสอบบน YouTube ด้วย Google Apps Script และ SweetAlert2

 

DEMO

บทนำ

ในปัจจุบัน YouTube เป็นเครื่องมือที่มีประโยชน์สำหรับการเรียนรู้แบบออนไลน์ แต่เพื่อเพิ่มประสิทธิภาพของการเรียนรู้ การเพิ่มแบบทดสอบในวิดีโอสามารถช่วยให้ผู้เรียนมีส่วนร่วมมากขึ้น บทความนี้จะอธิบายวิธีการสร้างระบบแบบทดสอบบน YouTube โดยใช้ Google Apps Script, YouTube IFrame API และ SweetAlert2 ซึ่งสามารถดึงข้อมูลแบบทดสอบจาก Google Sheets และบันทึกคะแนนของผู้เรียนได้

---

ฟีเจอร์ของระบบ

1. เล่นวิดีโอ YouTube พร้อมตรวจจับเหตุการณ์ขณะเล่น
2. แสดงคำถามแบบป๊อปอัป ในช่วงเวลาที่กำหนด
3. บังคับให้ผู้เรียนตอบคำถาม ก่อนดูวิดีโอต่อ
4. ป้องกันการข้ามช่วงวิดีโอ เพื่อให้เรียนครบทุกช่วง
5. บันทึกข้อมูลผู้เรียนและคะแนน ลงใน Google Sheets

---

เครื่องมือและเทคโนโลยีที่ใช้

• Google Apps Script สำหรับเชื่อมต่อกับ Google Sheets
• YouTube IFrame API สำหรับฝังวิดีโอและตรวจสอบสถานะการเล่น
• SweetAlert2 สำหรับสร้างป๊อปอัปแบบอินเทอร์แอคทีฟ
• Bootstrap 5 สำหรับออกแบบ UI
• HTML, CSS, JavaScript

---

โครงสร้าง Google Sheet

Sheets Data

Sheets Users

---

โครงสร้างโค้ดหลัก

1. โหลดวิดีโอจาก Google Sheets

ใช้ Google Apps Script เพื่อดึง videoId จาก Google Sheets และฝังวิดีโอในหน้าเว็บ

window.addEventListener("load", () => {
  google.script.run.withSuccessHandler((data) => {
    if (data) {
      player = new YT.Player('player', {
        height: '315', width: '560', videoId: data,
        playerVars: { 'autoplay': 1, 'controls': 1 },
        events: { 'onStateChange': onPlayerStateChange }
      });
    }
  }).getIdVDO();
});

2. ดึงข้อมูลแบบทดสอบจาก Google Sheets

function fetchQuizData() {
  google.script.run.withSuccessHandler((data) => {
    data.forEach(item => {
      quizData[item.time] = item;
    });
  }).getQuizData();
}

3. ตรวจจับสถานะการเล่นของวิดีโอ และป้องกันการข้ามช่วง

function onPlayerStateChange(event) {
  if (event.data === YT.PlayerState.PLAYING) {
    setInterval(() => {
      let currentTime = player.getCurrentTime();
      if (currentTime > lastTime + 2) {
        player.seekTo(lastTime, true);
      } else {
        lastTime = currentTime;
      }
    }, 1000);
  }
}

4. แสดงแบบทดสอบเป็นป๊อปอัป และตรวจสอบคำตอบ

function showQuizPopup(quiz) {
  player.pauseVideo();
  let choicesHtml = quiz.choices.map((choice, index) => `
    <div>
      <label class="bar">
        <input type="radio" name="quizOption" value="${index + 1}"> ${choice}
      </label>
    </div>
  `).join("");

  Swal.fire({
    html: `<h4>${quiz.question}</h4>${choicesHtml}`,
    confirmButtonText: "ส่งคำตอบ",
    preConfirm: () => {
      let selectedOption = document.querySelector('input[name="quizOption"]:checked');
      if (!selectedOption) return Swal.showValidationMessage("โปรดเลือกคำตอบ!");
      return selectedOption.value;
    },
  }).then((result) => {
    if (result.isConfirmed) {
      let selectedAnswer = quiz.choices[result.value - 1];
      if (selectedAnswer === quiz.answer) {
        Swal.fire("✅ ถูกต้อง!", "คุณตอบถูก!", "success").then(() => player.playVideo());
      } else {
        Swal.fire("❌ ผิด!", `คำตอบที่ถูกต้องคือ: ${quiz.answer}`, "error").then(() => player.playVideo());
      }
    }
  });
}

5. บันทึกข้อมูลผู้เรียน

function saveUserData(userID, userName) {
  google.script.run.withSuccessHandler(() => {
    Swal.fire("✅ บันทึกสำเร็จ!", "ข้อมูลของคุณถูกบันทึกลงในระบบ", "success");
  }).saveToSheet(userID, userName, score);
}

6. ส่วน HTML

  <div id="player"></div>

7. Google appscript

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function getIdVDO(){
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("data");
  const data = sheet.getRange(1, 2).getValue();
  return data
}
function getQuizData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("data");
  const data = sheet.getRange(3, 1, sheet.getLastRow() - 1, 7).getValues();
  
  const quizData = data.map(row => ({
    time: row[0],  // วินาทีที่ต้องแสดง
    question: row[1], // คำถาม
    choices: [row[2], row[3], row[4], row[5]], // ตัวเลือก 4 ข้อ
    answer: row[6]  // คำตอบที่ถูกต้อง
  }));
  return quizData;
}
function saveToSheet(userID, userName, score) {
    let sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("users");
    sheet.appendRow([new Date(), userID, userName, score]);
}

📌 วิธีใช้งาน

1. ไปที่ Google Apps Script
2. ไปที่ Deploy > Manage deployments
3. เลือก Web App > Deploy as Web App
4. เลือก "Execute as: Me"
5. เลือก "Who has access: Anyone"
6. คลิก Deploy

✅ สรุป

ระบบนี้ช่วยให้ผู้เรียนโต้ตอบกับเนื้อหาได้มากขึ้นโดยการ บังคับให้ตอบคำถามก่อนเล่นวิดีโอต่อ รวมถึงการ บันทึกผลคะแนน ซึ่งสามารถนำไปใช้ในการเรียนการสอนได้จริง หวังว่าบทความนี้จะเป็นแนวทางสำหรับการพัฒนา สื่อการสอนแบบโต้ตอบ บน YouTube 🚀

Download

🎯 ฟีเจอร์ทั้งหมดของ playerVars

1️⃣ การควบคุมการเล่นวิดีโอ

Key	ค่า (Value)	คำอธิบาย
autoplay	0 (default) / 1	เริ่มเล่นอัตโนมัติเมื่อโหลดหน้าเว็บ
controls	0 / 1 (default)	แสดงปุ่มควบคุม (เล่น, หยุด, ปรับเสียง ฯลฯ)
disablekb	0 (default) / 1	ปิดการควบคุมวิดีโอด้วยคีย์บอร์ด
fs	0 / 1 (default)	ปิด/เปิดปุ่มขยายเต็มจอ
loop	0 (default) / 1	เล่นวิดีโอซ้ำ (ต้องใช้ playlist)
modestbranding	0 (default) / 1	ซ่อนโลโก้ YouTube
playsinline	0 (default) / 1	เล่นวิดีโอในแอป iOS แทนการเปิดแอป YouTube

---

2️⃣ การควบคุม UI และฟีเจอร์

Key	ค่า (Value)	คำอธิบาย
rel	0 / 1 (default)	ปิด/เปิดวิดีโอแนะนำตอนจบ
showinfo	0 (default) / 1	แสดงชื่อวิดีโอและช่องบนตัวเล่น (ปัจจุบันไม่ได้ใช้แล้ว)
iv_load_policy	1 / 3	ปิด/เปิด annotation (ข้อความบนวิดีโอ)
cc_load_policy	0 / 1	เปิดคำบรรยายอัตโนมัติ
cc_lang_pref	"en", "th", etc.	เลือกภาษาคำบรรยายที่แสดง

---

3️⃣ กำหนดจุดเริ่มต้นและสิ้นสุดของวิดีโอ

Key	ค่า (Value)	คำอธิบาย
start	เวลาวินาที	กำหนดให้เริ่มเล่นที่วินาทีที่กำหนด
end	เวลาวินาที	กำหนดให้วิดีโอหยุดเล่นที่วินาทีที่กำหนด

---

4️⃣ การเล่นหลายวิดีโอ

Key	ค่า (Value)	คำอธิบาย
playlist	"video_id1,video_id2"	เล่นหลายวิดีโอต่อเนื่อง
origin	"https://example.com"	ป้องกันปัญหา Cross-Origin

---

🎯 ตัวอย่างการใช้ playerVars

player = new YT.Player('player', {
    height: '315',
    width: '560',
    videoId: 'IyJ6Q1vvkSU',
    playerVars: {
        'autoplay': 1,       // เล่นอัตโนมัติ
        'controls': 0,       // ซ่อนปุ่มควบคุม
        'rel': 0,            // ปิดวิดีโอแนะนำ
        'modestbranding': 1, // ซ่อนโลโก้ YouTube
        'fs': 0,             // ปิดปุ่มขยายเต็มจอ
        'start': 30,         // เริ่มเล่นที่ 30 วินาที
        'end': 90,           // หยุดเล่นที่ 90 วินาที
        'playlist': 'VIDEO_ID_2,VIDEO_ID_3' // เล่นหลายวิดีโอ
    }
});

✅ ใช้ฟีเจอร์เหล่านี้เพื่อปรับแต่งวิดีโอให้ตรงกับความต้องการของคุณได้เลยครับ! 🚀