> 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-markers.md).

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