Drag and drop onto image

โจทย์ประเภทนี้จะเป็นการสร้างข้อสอบที่สามารถลากรูปภาพหรือตัวเลือกไปวางไว้บนพื้นที่(Drop zones) หรือรูปภาพใหญ่ภาพนึงได้

Preview

ตัวอย่างหน้าต่าง Preview

• เลือกภาพที่ต้องการใช้เป็นโจทย์

• Refresh preview ปุ่มสำหรับรีโหลดภาพเพื่อตรวจสอบความถูกต้อง

• Background image

  • Choose a file... ปุ่มสำหรับอัปโหลดไฟล์ภาพที่จะใช้ในโจทย์ (ขนาดไฟล์สูงสุดที่ 80MB) หรือภาพลากลงในช่อง You can drag and drop files here to add them.

• Accepted file types : รูปแบบไฟล์ที่รองรับ

  • ไฟล์ภาพ (GIF) .gif

  • ไฟล์ภาพ (JPEG) .jpe .jpeg .jpg

  • ไฟล์ภาพ (PNG) .png

  • ไฟล์ภาพ (SVG+XML) .svg .svgz

Draggable items

ตัวอย่างหน้าต่าง Draggable items

• Shuffle drag items each time question is attempted เมื่อเปิดฟังก์ชั่นนี้ตัวเลือกที่ใช้ลากวางจะถูกสุ่มสลับตำแหน่งทุกครั้ง

• Draggable item คือสิ่งที่น.ศ.จะสามารถลากไปวางได้

  • Type ประเภทของตัวเลือก มีอยู่ 2 แบบ คือ Draggable image = รูปภาพ และ Draggable text = ตัวหนังสือ

  • Group ใช้สำหรับตั้งค่ากลุ่มของคำตอบ คำตอบที่อยู่ในกลุ่มเดียวกันจะมีกรอบตัวเลือกและช่องว่างที่เป็นสีเดียวกัน

  • Unlimited ข้อที่เปิดฟังก์ชั่นส่วนนี้ไว้จะสามารถลากไปวางในช่องว่างได้มากกว่า 1 ช่อง(ใช้ในการตอบได้มากกว่า 1 ครั้ง)

  • Choose a file... ปุ่มสำหรับอัปโหลดไฟล์ภาพที่จะใช้ในโจทย์ (ขนาดไฟล์สูงสุดที่ 80MB) หรือภาพลากลงในช่อง You can drag and drop files here to add them.

  • Accepted file types : รูปแบบไฟล์ที่รองรับ

    • ไฟล์ภาพ (GIF) .gif

    • ไฟล์ภาพ (JPEG) .jpe .jpeg .jpg

    • ไฟล์ภาพ (PNG) .png

    • ไฟล์ภาพ (SVG+XML) .svg .svgz

  • Text ช่องสำหรับใส่ตัวอักษร ใช้กับกรณีที่เลือก Draggable text

Drop zones

ตัวอย่างหน้าต่าง Drop zones

เมื่อกำหนดตัวเลือกใน Draggable items แล้ว ให้มาตั้งค่าที่ Drop zones โดยเลือกที่ Draggable items ในช่อง Dropdown list จะทำให้ Draggable items ที่เลือกไว้ปรากฏอยู่ใต้ภาพที่อัปโหลดไว้เพื่อเป็นโจทย์

ตัวอย่างการสร้าง Drop zones และ Draggable text

ตัวอย่างโจทย์ Drag and drop onto image แบบ Draggable text