Drag and drop markers

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

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
ตัวอย่างการอัปโหลดภาพเพื่อใช้เป็นโจทย์
ขนาดของภาพที่เหมาะสมคือ 600*400 pixel

Markers

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

Drop zones

ตัวอย่างหน้าต่างการตั้งค่า Drop zones
  • 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 แล้ว
ตัวอย่างข้อสอบที่น.ศ.จะเห็น