ส่วนต่อประสานผู้ใช้แบบโต้ตอบอย่างง่ายสำหรับการสอนและการประเมิน: 11 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:07

โครงการนี้ได้รับการพัฒนาโดยเป็นส่วนหนึ่งของชั้นเรียนของมหาวิทยาลัย โดยมีเป้าหมายเพื่อสร้างระบบโต้ตอบเพื่อสอนและประเมินหัวข้อบางหัวข้อ สำหรับมัน เราใช้การประมวลผลบนพีซีสำหรับอินเทอร์เฟซ และ Arduino NANO สำหรับปุ่มอาร์เคดและไฟ LED ดังนั้นจึงค่อนข้างง่าย ในการสอน มันมีอินเทอร์เฟซที่แสดงแบบจำลองและผู้ใช้สามารถคลิกในแต่ละองค์ประกอบ เพื่อรับคำอธิบายข้อความของมัน อย่างไรก็ตาม ในการประเมินผู้ใช้ก็มีปัญหาเหมือนปริศนา โดยที่ผู้ใช้ต้องลากและวางแต่ละส่วนเพื่อสร้างแบบจำลองที่สอดคล้องกัน แล้วกดปุ่มเพื่อยืนยันคำตอบ จากนั้นไฟ LED บนปุ่มจะบอกผู้ใช้ ถ้าคำตอบถูกหรือไม่

ปัญหาที่พบบ่อยที่สุดที่เราพบในการทำโปรเจ็กต์นี้คือการสื่อสารระหว่างการประมวลผลและ Arduino เนื่องจากเวลาแฝงของการเชื่อมต่ออาจแตกต่างกันไปตามคอมพิวเตอร์แต่ละเครื่อง ซึ่งขัดขวางการพกพาของอุปกรณ์ นอกจากนี้ คุณต้องกำหนดพอร์ตที่ Arduino เชื่อมต่อทุกครั้ง ทำให้อุปกรณ์ USB ทุกตัวที่เชื่อมต่อมีค่า ดังนั้นคุณต้องตรวจสอบว่า COM เป็น COM ใด

ขั้นตอนที่ 1: การเขียนโปรแกรมอินเทอร์เฟซในการประมวลผล (ตั้งค่า)

เราตั้งค่าตัวแปรที่จะใช้ ตำแหน่งของชิ้นส่วนทั้งหมดเป็นอาร์เรย์ของพิกัด x และ y ตลอดจนอาร์เรย์สำหรับรูปภาพของแต่ละส่วนสำหรับเมนู Teach (imgA) และประเมิน (img) เป็นอาร์เรย์ที่ใช้ตรวจสอบว่าคำตอบนั้นถูกต้องหรือไม่ และอาร์เรย์สำหรับส่วนด้านบนและส่วนล็อค ซึ่งจะเป็นตัวกำหนดว่าเมาส์อยู่เหนือส่วนต่างๆ หรือไม่ และจะพยายามหยิบขึ้นมาหรือไม่ จากนั้นดำเนินการเริ่มต้นและเปิดพอร์ตที่อินเทอร์เฟซจะสื่อสารกับ Arduino

ขั้นตอนที่ 2: การเขียนโปรแกรมอินเทอร์เฟซในการประมวลผล (เมนูหลัก)

อย่างแรก เมนูหลักจะแสดงสองปุ่ม และเมื่อปุ่มใดปุ่มหนึ่งถูกกด โปรแกรมจะโหลดเมนู "สอน" หรือเมนู "ประเมิน"

ดังนั้นเมื่อเมาส์ถูกกดและอยู่เหนือปุ่มใดปุ่มหนึ่ง มันจะส่งตำแหน่งของส่วนต่างๆ ที่เมนูใหม่ต้องการและโหลดเมนูอื่นๆ

ขั้นตอนที่ 3: การเขียนโปรแกรมอินเทอร์เฟซในการประมวลผล (เมนู "สอน")

ในที่นี้ หากเมาส์วางเมาส์เหนือส่วนใดส่วนหนึ่ง มันจะเปิดใช้งานส่วนด้านบนที่เกี่ยวข้อง ซึ่งหากกดเมาส์ จะเป็นการเปิดใช้งานข้อความที่เกี่ยวข้องและจะแสดงข้อความนั้นบนหน้าจอ

ขั้นตอนที่ 4: การเขียนโปรแกรมอินเทอร์เฟซในการประมวลผล (เมนู "ประเมิน")

นี่ก็เหมือนกัน มันจะเปิดใช้งานส่วนด้านบน ซึ่งเมื่อกดเมาส์จะเปิดใช้งานการล็อค แต่คราวนี้แทนที่จะแสดงข้อความ มันจะลากส่วนที่เลือก (สิ่งนี้อิงตาม "ลาก วาง และโฮเวอร์ด้วยเมาส์" จาก processing.js)

ขั้นตอนที่ 5: เมื่อกดเมาส์

ตามที่ระบุไว้ก่อนหน้านี้ เมื่อเมาส์ถูกกดและโบเวอร์เป็น "จริง" มันจะเปิดใช้งานการล็อคที่สอดคล้องกัน

ขั้นตอนที่ 6: เมื่อลากเมาส์

หากลากเมาส์ เมนูจริงคือเมนูประเมิน และหนึ่งในปุ่มล็อกคือ "จริง" ซึ่งจะลากส่วนที่เกี่ยวข้องข้างๆ เมาส์

ขั้นตอนที่ 7: เมื่อปล่อยเมาส์

ดังนั้นหากปล่อยเมาส์และยังคงอยู่ในเมนู "ประเมิน" ก็จะวางส่วนที่ถูกลากไปยังจุดที่คุณต้องการสร้างแบบจำลองหากอยู่ใกล้เพียงพอและจะตรวจสอบว่าคำตอบของคุณถูกต้องหรือไม่ จากนั้นจะรีเซ็ตการล็อกและข้อความทั้งหมดเป็น "เท็จ"

ขั้นตอนที่ 8: การสื่อสารกับ Arduino

ดังนั้นตอนนี้ หากคุณกดปุ่มบน Arduino มันจะตรวจสอบว่าคุณใส่ชิ้นส่วนที่ถูกต้องทั้งหมดเข้าที่และบอกคุณว่ามันถูกหรือผิด จากนั้นส่ง "1" ถ้ามันถูกหรือ "2" ถ้ามันผิดไปที่ อาร์ดูโน

ขั้นตอนที่ 9: การตั้งค่า Arduino (โครงการ)

นี่คือโครงการที่ใช้สำหรับ Arduino แต่มีปุ่ม Arcade ดังนั้นสายสีเขียวที่ไปยังปุ่มจะไปที่ขั้วต่อด้านล่างของปุ่ม (COM) และสายสีแดงจะไปที่สายกลาง (NO) ใช้ตัวต้านทาน220Ωสำหรับ LED และ1kΩสำหรับปุ่ม

ขั้นตอนที่ 10: การเขียนโปรแกรม Arduino

ตอนนี้มันกำหนดค่าปุ่มเป็น INPUT บนพินดิจิตอล 2 และ LED เป็น OUTPUT ที่ 4, 6 และ 8 จากนั้นกำหนดค่าพอร์ตและอ่านหากได้รับ "1" (คำตอบที่ถูกต้อง) จะสว่างขึ้น 3 ไฟ LED ทีละดวงหากได้รับ "2" (คำตอบที่ผิด) ไฟจะสว่างเพียงหนึ่งในนั้น นอกจากนี้ หากกดปุ่ม ระบบจะส่ง "e" ไปยังอินเทอร์เฟซ

ขั้นตอนที่ 11: นั่นคือทั้งหมด ขอให้สนุก

นี่คือรหัสที่ใช้สำหรับโครงการนี้: