> For the complete documentation index, see [llms.txt](https://docs.tlic.cmu.ac.th/cmucanvas-manual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tlic.cmu.ac.th/cmucanvas-manual/content-management/interactive-content/h5p-interactive-content.md).

# H5P Interactive Content

H5P (HTML5 Package) เป็นเครื่องมือสำหรับสร้างสื่อการเรียนรู้แบบโต้ตอบ (Interactive Content) ที่ช่วยให้อาจารย์สามารถออกแบบกิจกรรมการเรียนรู้ที่น่าสนใจและส่งเสริมการมีส่วนร่วมของผู้เรียนได้โดยไม่จำเป็นต้องมีทักษะด้านการเขียนโปรแกรม

H5P สามารถใช้งานร่วมกับ Mango Canvas เพื่อสร้างประสบการณ์การเรียนรู้แบบ Active Learning และสนับสนุนการเรียนการสอนในรูปแบบดิจิทัลได้อย่างมีประสิทธิภาพ

***

## H5P คืออะไร

H5P เป็นแพลตฟอร์มสำหรับสร้างเนื้อหาแบบ Interactive Learning ที่รองรับกิจกรรมหลากหลายรูปแบบ เช่น

* Interactive Video
* Course Presentation
* Quiz
* Interactive Book
* Drag and Drop
* Flashcards
* Image Hotspots
* Timeline
* Branching Scenario
* Accordion
* Interactive Image

ผู้เรียนสามารถโต้ตอบกับเนื้อหาได้โดยตรงผ่านเว็บเบราว์เซอร์ทั้งบนคอมพิวเตอร์และอุปกรณ์เคลื่อนที่

***

## ประโยชน์ของ H5P

* เพิ่มการมีส่วนร่วมของผู้เรียน
* ส่งเสริมการเรียนรู้แบบ Active Learning
* สร้างกิจกรรมการเรียนรู้ได้โดยไม่ต้องเขียนโค้ด
* รองรับการเรียนรู้แบบ Self-Paced Learning
* ใช้งานร่วมกับ Mango Canvas ได้อย่างสะดวก
* รองรับการแสดงผลบนทุกอุปกรณ์

***

## ประเภทเนื้อหาที่ได้รับความนิยม

### Interactive Video

เพิ่มคำถาม ข้อคิดเห็น หรือกิจกรรมต่าง ๆ ภายในวิดีโอ

เหมาะสำหรับ

* วิดีโอบรรยาย
* วิดีโอสาธิต
* Flipped Classroom

***

### Course Presentation

สร้างบทเรียนในรูปแบบสไลด์พร้อมกิจกรรมโต้ตอบ

สามารถเพิ่ม

* คำถาม
* รูปภาพ
* วิดีโอ
* ลิงก์
* แบบทดสอบ

ภายในสไลด์เดียวกันได้

***

### Interactive Book

รวบรวมบทเรียนหลายหัวข้อไว้ในรูปแบบหนังสืออิเล็กทรอนิกส์

เหมาะสำหรับ

* คู่มือการเรียน
* บทเรียนออนไลน์
* เนื้อหาหลายบทที่ต้องการจัดเป็นลำดับ

***

### Quiz

สร้างแบบทดสอบเพื่อประเมินความเข้าใจของผู้เรียน

รองรับรูปแบบคำถามหลายประเภท เช่น

* Multiple Choice
* True/False
* Fill in the Blank
* Drag and Drop

***

### Branching Scenario

สร้างสถานการณ์จำลองที่ผู้เรียนต้องตัดสินใจเลือกแนวทางดำเนินการ

ผลลัพธ์จะแตกต่างกันตามตัวเลือกที่ผู้เรียนเลือก

เหมาะสำหรับ

* Case Study
* Clinical Training
* Decision-Based Learning

***

## การใช้งาน H5P ใน Mango Canvas

อาจารย์สามารถเพิ่ม H5P ลงในรายวิชาได้หลายรูปแบบ เช่น

### ผ่าน Rich Content Editor

ฝัง (Embed) H5P ลงใน

* Pages
* Assignments
* Discussions
* Announcements

***

### ผ่าน Modules

เพิ่ม H5P เป็นส่วนหนึ่งของ Learning Path ภายใน Module

เช่น

1. ศึกษาเนื้อหา
2. ทำกิจกรรม H5P
3. ทำแบบทดสอบ
4. ส่ง Assignment

***

### ผ่าน External Tool (LTI)

เชื่อมต่อ H5P ผ่านระบบ LTI เพื่อจัดการเนื้อหาและติดตามผลการเรียนรู้จากภายใน Mango Canvas

***

## แนวทางการออกแบบ H5P ที่แนะนำ

#### ใช้กิจกรรมสั้นและกระชับ

เน้นการมีส่วนร่วมเป็นระยะ ๆ แทนการสร้างกิจกรรมที่ยาวเกินไป

***

#### สลับระหว่างเนื้อหาและกิจกรรม

ตัวอย่าง

* อ่านเนื้อหา
* ทำ Interactive Activity
* สรุปบทเรียน
* ทำแบบทดสอบ

***

#### ให้ Feedback ทันที

ช่วยให้ผู้เรียนทราบผลลัพธ์และเข้าใจเนื้อหาได้ดีขึ้น

***

#### เชื่อมโยงกับ Learning Outcomes

กิจกรรมทุกประเภทควรสนับสนุนผลลัพธ์การเรียนรู้ของรายวิชา

***

{% hint style="info" %}

### ข้อควรทราบ

* H5P เป็นเครื่องมือสำหรับสร้าง Interactive Content ไม่ใช่ระบบจัดการรายวิชา
* ควรทดสอบการแสดงผลบนคอมพิวเตอร์และอุปกรณ์เคลื่อนที่ก่อนเผยแพร่
* การติดตามคะแนนและผลการเรียนรู้บางประเภทอาจขึ้นอยู่กับรูปแบบการเชื่อมต่อ H5P กับ Mango Canvas
* ควรออกแบบกิจกรรมให้เหมาะสมกับวัตถุประสงค์การเรียนรู้ มากกว่ามุ่งเน้นเพียงความสวยงามหรือความซับซ้อนของเนื้อหา
  {% endhint %}

***

## ตัวอย่างการประยุกต์ใช้ในการเรียนการสอน

#### Flipped Classroom

* ผู้เรียนรับชม Interactive Video ก่อนเข้าเรียน
* ตอบคำถามระหว่างรับชม
* เตรียมความพร้อมก่อนเข้าชั้นเรียน

#### Self-Paced Learning

* เรียนรู้ผ่าน Interactive Book
* ทำกิจกรรมระหว่างบทเรียน
* ประเมินผลด้วย Quiz

#### Active Learning

* ใช้ Branching Scenario หรือ Interactive Activities
* กระตุ้นการคิดวิเคราะห์และการตัดสินใจ
* ส่งเสริมการมีส่วนร่วมในการเรียนรู้

> H5P เป็นหนึ่งในเครื่องมือสร้าง Interactive Content ที่ได้รับความนิยมสูงในระบบ LMS ทั่วโลก ช่วยให้อาจารย์สามารถพัฒนาสื่อการเรียนรู้ที่มีความน่าสนใจ ส่งเสริมการมีส่วนร่วม และสนับสนุนการเรียนรู้เชิงรุก (Active Learning) ได้อย่างมีประสิทธิภาพภายใน Mango Canvas

## การนำ H5P มาใช้งานบน Mango

สำหรับอาจารย์ที่ใช้การสร้างวิดีโอโดยตรงบนระบบของ H5P หรือมีวิดีโอในระบบอยู่แล้ว สามารถนำโค้ด Embed วิดีโอมาใส่ไว้ในคอร์ส Mango ได้เลย

<figure><img src="/files/XODe2EyKQsc6HZNSFFvm" alt=""><figcaption></figcaption></figure>

Copy Embed Code จาก H5P

<figure><img src="/files/4UbVYyVrpjBg81gwjWrI" alt=""><figcaption></figcaption></figure>

สร้าง Page ใหม่บน Mango

<figure><img src="/files/D0YPl3SUngMynefk2l2S" alt=""><figcaption></figcaption></figure>

เปิด HTML Editor

<figure><img src="/files/E7en07SRwaF2ziseBypu" alt=""><figcaption></figcaption></figure>

วางโค้ดลงไปใน Text Editor และลบข้อความหลัง \</iframe> ออกทั้งหมด

<figure><img src="/files/1kVTS73wcKNC29RrX5SJ" alt=""><figcaption></figcaption></figure>

กดกลับไปที่ Rich Text Editor เพื่อดูการแสดงผลของ Interactive Video

<figure><img src="/files/gdQCU9g5fxz4vR5t1dnM" alt=""><figcaption></figcaption></figure>

คอนเทนต์ H5P ของโค้ด Embed ที่นำมาวางจะแสดงผลใน Rich Text Editor กดทดลองเล่นได้ หรือเขียนเนื้อหาเพิ่มเติม

<figure><img src="/files/c2jiKvQR6x0NdwfHXw5x" alt=""><figcaption></figcaption></figure>

เมื่อเรียบร้อยแล้วกด Save

<figure><img src="/files/D7Q9vul26f59P6iuAofx" alt=""><figcaption></figcaption></figure>

ได้หน้า Page ที่มีวิดีโอ Interactive ฝังอยู่เพื่อให้ผู้เรียนมีส่วนร่วมกับเนื้อหาได้

## การสร้างวิดีโอ Interactive

สำหรับอาจารย์ที่ต้องการสร้างวิดีโอ Interactive หรือคอนเทนต์ Interactive อื่นๆที่สามารถใช้งานกับ Mango Canvas ได้ รวมถึงการย้ายคอนเทนต์ Interactive จากระบบ kc moodle มาใช้งานต่อบน Mango Canvas สามารถใช้งานโปรแกรม Lumi เพื่อสร้างวิดีโอ Interactive เพื่อใช้งานกับ Mango Canvas ได้

<figure><img src="/files/2u7C6cY1FsC3NRKK7Bx3" alt=""><figcaption></figcaption></figure>

ดาวน์โหลดโปรแกรม Lumi : <https://app.lumi.education/>

<figure><img src="/files/FNKao8jD873gWScL4DtN" alt=""><figcaption></figcaption></figure>

สร้างวิดีโอใหม่เลือก H5P Editor กดที่ START

<figure><img src="/files/92naPDGsXhH2ykVdyZNx" alt=""><figcaption></figcaption></figure>

สร้างวิดีโอใหม่ที่ new H5P เลือกคอนเทนท์ที่ต้องการ

<figure><img src="/files/5M9KTUthsDPneR5I8nHE" alt=""><figcaption></figcaption></figure>

อัปโหลดวิดีโอแล้วสร้าง interactions และ task ตามต้องการ

<figure><img src="/files/T3G1PwsZk5LNjQJFAgKE" alt=""><figcaption></figcaption></figure>

เมื่อสร้างวิดีโอเสร็จ กด File >> Export >> เลือก SCORM package >> EXPORT NOW

<figure><img src="/files/78hqTbfmT4onDsbFngso" alt=""><figcaption></figcaption></figure>

ไปที่คอร์ส Mango Canvas >> SCORM >> ปุ่มจุด 3 จุด >> Enable >> Save

<figure><img src="/files/O5PqVivED0PRB8TgbAE1" alt=""><figcaption></figcaption></figure>

ไปที่ SCORM ในแถบเมนูด้านซ้าย เลือก Upload

<figure><img src="/files/Aksi19NQQw9l3vdSmZ1U" alt=""><figcaption></figcaption></figure>

เลือกไฟล์ที่ Export จาก Lumi

<figure><img src="/files/Rpg6ENKE86KETl160ZQn" alt=""><figcaption></figcaption></figure>

เมื่ออัปโหลดเสร็จจะปรากฏเมนูดังภาพ เลือก Choose Import type... เพื่อนำเข้าวิดีโอสู่คอร์สในรูปแบบต่างๆ

* Import as graded assignment นำเข้าคอร์สเป็น Assignment แบบเก็บคะแนน
* Import as ungraded assignment นำเข้าคอร์สเป็น Assignment แบบไม่เก็บคะแนน
* Import as page นำเข้าคอร์สเป็น page

เมื่อเลือกแล้วกด Go ปุ่มสีเขียว

<figure><img src="/files/SDJB9gMQJJK0HtlHPzXc" alt=""><figcaption></figcaption></figure>

* รูปแบบที่ Import
* A+ กดเพื่อไปยังหน้าที่ Import ไว้ในคอร์สเพื่อแก้ไขต่อ
* Preview ดูวิดีโอนั้นๆ
* ถังขยะ ลบวิดีโอออกจากระบบ

<figure><img src="/files/SomnIfU8Lu7qRORpKErh" alt=""><figcaption></figcaption></figure>

สามารถนำวิดีโอดังกล่าวไปใช้งานบนคอร์สต่อได้ทันที