คู่มือ H5P

คู่มือการใช้งาน

H5P
ผ่านระบบ CMU ONLINE (KC MOODLE)

หน่วยนวัตกรรมการศึกษา
คณะเภสัชศาสตร์ มหาวิทยาลัยเชียงใหม่

H5P คืออะไร?
H5P ย่อมาจาก HTML5 Package เป็นเครื่องมือสำหรับสร้าง Interactive Video
โดยใส่เนื้อหาเพื่อดึงดูดความสนใจของผู้เรียนและทำให้ผู้เรียนได้มีส่วนร่วม
มีปฏิสัมพันธ์ หรือทำปฏิกิริยาโต้ตอบกลับได้ โดยผู้สอนสามารสร้าง Interactive
VDO ที่มีคำถามได้หลายรูปแบบ เช่น Multiple Choices, Fill in the Blanks หรือ
Memory Game และ Find the Hotspot เป็นต้น โดยสามารถสร้างเนื้อหาดังกล่าว
ได้ทั้งบนเว็บไซต์ h5p.com, LUMI ซึ่งเป็นแอพพลิเคชั่นหนึ่งบนคอมพิวเตอร์
หรือบน Content bank ของ Moodle เช่น KC Moodle ที่คณะฯ ได้ใช้อยู่ในปัจจุบัน

ข้อดี

VDO รองรับการแสดงผลบนหน้าจอของทุกอุปกรณ์
ทั้ง Smartphone, Tablet และ คอมพิวเตอร์ Desktop

สร้าง Interactive video ที่มาพร้อมกับคำถามหรือ
แทรกเนื้อหาได้หลากหลายรูปแบบ เช่น Multiple choice,
Fill in the bank, แทรกตาราง, แทรกข้อความ,
การเขียนเรียงความ, ลากวาง และ แบบสอบถาม เป็นต้น

ใช้งานฟรี ไม่มีค่าใช้จ่าย

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

อ้างอิง : https://www.gotoknow.org/posts/75754

2

การสร้าง Interactive VDO

บน Content bank ของ CMU Online

1. เข้ากล่องกระบวนวิชาที่ต้องการสร้าง VDO
2. กด Add an activity or resource
3. เลือก Activity คือ H5P Interactive Content
4. กด Add

2

3

4

2

5. จะปรากฏชนิดของเนื้อหา ให้กดเลือก “Interactive Video”
6. จะปรากฏหน้าจอดังภาพ

5

Step 1 1. ใส่ชื่อVDO

2. กด + เพื่ออัพโหลด VDO
3. อัพโหลดไฟล์ VDO หรือใส่ Link จาก Youtube
หากอัพโหลดไฟล์จากคอมพิวเตอร์ จะต้องมีขนาดของ
VDO ไม่เกิน 150 MB

4. กด Insert

1

2 4

3

เมื่อแนบไฟล์ VDO หรือ Link
จาก Youtube เรียบร้อยแล้ว

จะขึ้นดังภาพ

6

Step 2 การเพิ่มคำถามใน VDO

1. กด Step 2 Add Interactions

2. หน้าจอจะแสดง VDO และแถบเมนูคำถามต่างๆ

รูปแบบ Label Single Choice Set Drag and Drop
คำถามต่างๆ Text Multiple Choice Mark the Words
Table True/False Drag Text
Link Question Crossroads
Image Fill in the Blanks Navigation
Statements More elements

7

Single Choice Set

คำถามที่มีคำตอบที่ถูกเพียงข้อเดียว

1. เลื่อน VDO ไปจุดที่ต้องการเพิ่มคำถาม
2. เลือกเมนู Single Choice Set
3. ใส่หัวข้อ "Title" (ชื่อหัวข้อหรือชื่อเรื่องของคำถาม)

2

1

3 หากต้องการให้ VDO หยุดเมื่อ Interaction ปรากฎให้คลิกเลือก Pause video
รูปแบบของ Interaction ที่ต้องการให้นักศึกษาเห็น
8 Button : รูปมือ
Poster : รูปภาพ

Title - ใส่หัวข้อ /เรื่อง

4. Question* = ใส่คำถาม
5. ใส่คำตอบที่ถูกต้องในช่อง Alternative ช่องที่ 1
6. ใส่คำตอบที่ไม่ถูกต้องลงในช่อง Alternative ถัดไป
7. กด Done

4
5

6

7

8

Multiple Choice

1. เลื่อน VDO ไปจุดที่ต้องการเพิ่มคำถาม
2. เลือกเมนู Multiple Choice
3. ใส่หัวข้อ "Title" (ชื่อหัวข้อหรือชื่อเรื่องของคำถาม)

2

1

3 หากต้องการให้ VDO หยุดเมื่อ Interaction ปรากฎให้คลิกเลือก Pause video
รูปแบบของ Interaction ที่ต้องการให้นักศึกษาเห็น
9 Button : รูปมือ
Poster : รูปภาพ

Title - ใส่หัวข้อ /เรื่อง

4

5

6

7

8
4. Question* = ใส่คำถาม
5. ใส่คำตอบที่ถูกต้องในช่อง Avaliable options* คำตอบที่ถูกต้อง

ให้เลือก Correct ( ไม่จำเป็นต้องอยู่ข้อแรก)
6. ใส่ตัวเลือกที่ไม่ถูกต้องเพิ่มเติม
7. หากต้องการเพิ่มตัวเลือก กดที่ ADD OPTION ตามจำนวนที่ต้องการเพิ่ม
8. กด Done

10

Ture/False 1. เลื่อน VDO ไปจุดที่ต้องการเพิ่มคำถาม
2. เลือกเมนู T/F
3. ใส่หัวข้อ "Title" (ชื่อหัวข้อหรือชื่อเรื่องของคำถาม)
4. ใส่คำถาม
5. ใส่เฉลย Ture / Flase
6. กด Done

2

1

หากต้องการให้ VDO หยุดเมื่อ Interaction ปรากฎให้คลิกเลือก Pause video
รูปแบบของ Interaction ที่ต้องการให้นักศึกษาเห็น
Button : รูปมือ
Poster : รูปภาพ

3Title - ใส่หัวข้อ /เรื่อง

คำถาม 4
เฉลย 5

11 6

Fill in the blanks

1. เลื่อน VDO ไปจุดที่ต้องการเพิ่มคำถาม
2. เลือกเมนู Fill in the blanks
3. ใส่หัวข้อ "Title" (ชื่อหัวข้อหรือชื่อเรื่องของคำถาม)

2

1

หากต้องการให้ VDO หยุดเมื่อ Interaction ปรากฎให้คลิกเลือก Pause video

รูปแบบของ Interaction ที่ต้องการให้นักศึกษาเห็น
Button : รูปมือ
Poster : รูปภาพ

Title - ใส่หัวข้อ /เรื่อง 3

12

4. ใส่คำสั่ง เช่น จงเติมคำตอบในช่องว่าง หรือ Fill in the missing words
5. ใส่คำถาม และใส่คำตอบโดยใส่เครื่องหมาย * ไว้หน้าและหลังของคำตอบ

เช่น คณะเภสัชศาสตร์ มช. มี 2 ภาควิชา คือ *ภาควิชาบริบาลเภสัชกรรม*
และ*ภาควิชาวิทยาศาสตร์เภสัชกรรม* หากมีคำตอบที่ถูกมากกว่า 1 คำตอบ
ให้ใส่เครื่องหมาย / ระหว่างคำตอบ
6. กด Done เมื่อเรียบร้อยแล้ว

4

5

6

13

Step 3

กดบันทึกเพื่อกลับไปที่ กดบันทึกเพื่อดู VDO
หน้าแรกของ

กล่องกระบวนวิชา

14

การแสดงผลในระบบ CMU Online

15

ตัวอย่าง
VDO

Single Choice Set

Multiple Choice

True/False
Question

Fill in the blanks

16

วิธีการ Import Activity H5P จากคอร์สเดิม

ในระบบ CMU Online

อาจารย์สามารถเปิดกระบวนวิชาใหม่แล้วนำเข้าข้อมูลทั้งหมดจากคอร์ส
ต้นแบบ(คอร์สเดิมที่มีอยู่ในระบบ) หรือ เลือกนำเข้าข้อมูลเพียงบางส่วนได้
ซึ่งวิธีนี้จะช่วยประหยัดเวลาในการสร้าง Activities ต่างๆ ในคอร์ส

1.เข้ากล่องคอร์สใหม่ที่ต้องการจะ Import Activity H5P กดสัญลักษณ์ฟันเฟืองมุมขวาบน
ดังภาพ และ เลือกเมนู "Import"

2.ระบบจะพาไปยังหน้า Import ให้เลือกคอร์สที่ต้องการดึงข้อมูล จากนั้นกด Continue

1

สามารถพิมพ์ค้นหา
จากชื่อกระบวนวิชาได้

2

17

3.ส่วนนี้จะเป็นส่วนของการตั้งค่าหลักในคอร์สสามารถเลือกเฉพาะส่วนที่ท่านต้องการได้
แต่แนะนำให้เลือกไว้ทั้งหมดและค่อยเลือกส่วนย่อยในหัวข้อถัดไป

กด Next
4. ระบบจะแสดงหัวข้อทั้งหมดในคอร์สเก่าที่เลือก

5. เลือกหัวข้อ H5P ที่ต้องการ Import
(หัวข้ออื่นๆ ให้นำเครื่องหมายถูกออก)
จากนั้น กด Next
6. ระบบจะแสดงหัวข้อที่เลือกอีกครั้ง จากนั้นกด Perform import

18

7. ระบบจะแสดงสถานะการนำเข้าข้อมูลเป็น % ดังภาพ
8. เมื่อนำเข้าสำเร็จ ระบบจะแสดงข้อความดังภาพ สามารถกลับไปยังหน้าแรกของคอร์ส
ได้ทันที

19

หน่วยนวัตกรรมการศึกษา
คณะเภสัชศาสตร์ มหาวิทยาลัยเชียงใหม่

โทร. 053 944383