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