# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tlic.cmu.ac.th/cmumoodle-manual/quiz/creating-quiz/question-type/drag-and-drop-onto-image.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.