> For the complete documentation index, see [llms.txt](https://docs.tlic.cmu.ac.th/cmumoodle-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/cmumoodle-manual/quiz/creating-quiz/question-type/drag-and-drop-onto-image.md).

# Drag and drop onto image

![](/files/xYz3ZIcgmywQvnR90eBl)

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

### Preview

![ตัวอย่างหน้าต่าง Preview](/files/wNvFguagszO8OjvVFmCD)

* เลือกภาพที่ต้องการใช้เป็นโจทย์
* 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](/files/6XaIQagPGFBgtu8YGGoG)

* 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](/files/3rutsohAs87G8eBlmqpW)

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

![ตัวอย่างการสร้าง Drop zones และ Draggable text](/files/6fUjbhwHdzHbIk0OQ018)

![ตัวอย่างโจทย์ Drag and drop onto image แบบ Draggable text](/files/qzU1waK5MnTVHUZqwC1H)