# Drag and drop markers

![](/files/JvcaisRuwcPpfWf9ZRqF)

โจทย์ประเภทนี้จะเป็นข้อสอบที่ให้น.ศ.วางเครื่องหมาย(marker)ลงบนพื้นที่ในภาพ ซึ่งจะมีความแตกต่างกับ Drag and drop onto image ตรงที่จะไม่มีการกำหนดพื้นที่วางเครื่องหมายให้กับน.ศ.

![ฟังก์ชั่นไฮไลต์พื้นที่ที่น.ศ.ทำเครื่องหมายไปแล้วไม่มีคำตอบที่ถูก](/files/PzmpdEUhCXyHw8DXKaq0)

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

![ตัวอย่างการอัปโหลดภาพเพื่อใช้เป็นโจทย์](/files/bq9XU03kcGnAVmYnYAIA)

{% hint style="info" %}
ขนาดของภาพที่เหมาะสมคือ 600\*400 pixel 
{% endhint %}

### Markers

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

* Shuffle drag items each time question is attempted เมื่อเปิดฟังก์ชั่นนี้ตัวเลือกที่ใช้ลากวางจะถูกสุ่มสลับตำแหน่งทุกครั้ง
* Marker เป็นช่องสำหรับเติมคำที่ต้องการให้น.ศ.ลากลงไปวางในพื้นที่ที่อาจารย์ต้องการ
* Number จะมีลักษณะเป็น dropdown list ซึ่งกำหนดจำนวนครั้งที่เครื่องหมายดังกล่าวสามารถใช้งานได้ เช่น "1" หมายความว่าสามารถใช้ได้ 1 ครั้ง เมื่อถูกลากไปวางแล้ว เครื่องหมายดังกล่าวจะหายไปจาก list อาจตั้งค่าเป็น Infinite ได้ เพื่อให้เครื่องหมายยังคงอยู่ใน list เมื่อถูกใช้ไปแล้ว

### Drop zones

![ตัวอย่างหน้าต่างการตั้งค่า Drop zones](/files/u48CLvtQSpkKzXNfa6X9)

* Drop zone จะเป็นการตั้งค่าส่วนของพื้นที่ในภาพที่อัปโหลดไว้ที่จะให้น.ศ.ลากเครื่องหมายมาวาง 
* Shape เลือกรูปทรงของพื้นที่ (วงกลม,สามเหลี่ยม,โพลีก้อน) เมื่อกำหนดแล้ว drop zone ที่มีรูปร่างตามที่ตั้งค่าไว้จะปรากฏบนมุมซ้ายของภาพที่ preview ไว้ เพื่อใช้แก้ไขย่อขยายพื้นที่ให้เหมาะสมกับรูปภาพ 
  * สามารถแก้ไขรูปทรงได้โดยการคลิกบนรูปทรงใน preview จะปรากฏปุ่มแก้ไขขึ้นมาเพื่อให้สามารถปรับเปลี่ยนรูปทรงได้ตามต้องการ
  * การแก้ไขรูปทรงแบบโพลีก้อนให้กดปุ่ม ctrl(mac os = command) ค้างพร้อมคลิกเม้าส์จะเป็นการเพิ่มจุด vertax เพื่อสร้างรูปทรง แนะนำให้สร้างรูปร่างที่ไม่ซับซ้อนจนเกินไปและไม่มีเส้นที่ซ้อนทับกัน
* Marker เครื่องหมายและคำตอบที่ได้ตั้งค่าไว้ที่แถบ Marker
* Coordinates พิกัดของรูปทรงที่สร้างบนภาพ
  * วงกลม: จุดกึ่งกลาง x , จุดกึ่งกลาง y ; รัศมีวงกลม เช่น 80, 100;50
  * สี่เหลี่ยม: จุดสูงสุดด้านซ้าย x , จุดสูงสุดด้านซ้าย y ; ความกว้าง , ความสูง เช่น 20, 60;80,40
  * โพลีก้อน: x1, y1;x2,y2;...;xn,yn เช่น 20,60;100,60;20,100

![ตัวอย่างการสร้าง Drop zones ที่จะปรากฏขึ้นในส่วนของ Preview เมื่อตั้งค่าที่ Drop zones แล้ว](/files/jFAaDj5SiXAyU6iUprtz)

![ตัวอย่างข้อสอบที่น.ศ.จะเห็น](/files/nqJQg0rzFAacU6889IFz)


---

# 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-markers.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.