VDO บทที่ 18 – สร้างแอพแบบทดสอบ
คุณสมบัติของแอพ
ในบทนี้ สอนสร้างแอพแบบทดสอบ โดยนักเรียนต้องป้อนชื่อในตอนเริ่มต้น จากนั้นแอพก็จะแสดงโจทย์ พร้อม 5 ตัวเลือก (multiple choice) เมื่อนักเรียนเลือกคำตอบ แอพก็จะแสดงคำตอบที่ถูกด้วยสีเขียว และหากนักเรียนเลือกผิด ตัวเลือกนั้นก็จะเป็นสีแดงที่ด้านบนของแอพ จะแสดงคะแนนที่ได้จากการตอบคำถามถูก หมายเลขข้อของโจทย์ที่กำลังทำ และมีปุ่ม Next เพื่อไปยังโจทย์ข้อต่อไป
แอพนี้มีหลักการทำงาน ดังนี้
- เราจะต้องเตรียมโจทย์ พร้อมตัวเลือก และเฉลย เป็นไฟล์ csv (comma separated value) ตามรูปแบบที่กำหนด จากนั้น อัพโหลดขึ้นไปไว้ใน project
- แอพจะใช้คอมโพเนนต์ File เพื่ออ่านแบบทดสอบจากไฟล์ csv นั้น แล้วแปลงเป็น list แบบ 2 มิติ จากนั้นก็แสดงไดอะล็อก ShowTextDialog เพื่อให้นักเรียนกรอกชื่อ นามสกุล
- เมื่อกรอกชื่อเรียบร้อยแล้ว ก็จะแสดงโจทย์ และตัวเลือกทั้ง 5 ข้อ พร้อมกับกำหนดสีของปุ่มตัวเลือกให้เป็นสีเทา จากนั้นรอให้นักเรียนเลือกคำตอบ
- เมื่อมีการคลิ้กปุ่มตัวเลือกใด ก็จะตรวจว่านักเรียนเลือกคำตอบถูกหรือไม่ โดยเทียบกับเฉลย
- หากตอบ ถูก ก็จะบวกคะแนนเพิ่มอีก 1 และกำหนดสีปุ่มที่เลือกเป็นสีเขียว
- หากตอบ ผิด ก็จะกำหนดสีปุ่มที่เลือกเป็นสีแดง และให้ปุ่มตัวเลือกที่ถูกเป็นสีเขียว
- และเมื่อนักเรียนคลิ้กปุ่ม Next เพื่อไปยังข้อต่อไป หมายเลขข้อก็จะเพิ่มขึ้น แล้วแสดงโจทย์ข้อต่อไป
- หากเป็นโจทย์ข้อสุดท้าย แอพก็จะแสดง ShowMessageDialog เพื่อบอกว่านักเรียนทำได้กี่คะแนน แล้วจบการทำงาน
คอมโพเนนต์ที่กล่าวถึง
- File ใช้อ่านข้อมูลแบบทดสอบจากไฟล์ csv
- Notifier ในบทนี้มีการใช้ ShowTextDialog เพื่อแสดงไดอะล็อกให้นักเรียนกรอกชื่อนามสกุล
- Vertical Scroll Arrangement เป็นคอมโพเนนต์แบบเดียวกับ Vertical Arrangement คือ ใช้ในการจัดเรียงคอมโพเนนต์ตามแนวตั้ง แต่จุดที่ต่าง คือ หากคอมโพเนนต์มีมากจนเลยความสูงของ VSA ผู้ใช้ก็สามารถจะเลื่อน หรือ scroll ขึ้นลงได้ จึงใช้ VSA สำหรับแสดงโจทย์ และตัวเลือก เนื่องจาก เราไม่รู้ว่าโจทย์ และตัวเลือกจะยาวจนล้นจอหรือไม่
บล็อกที่สำคัญ
- File ReadFrom ใช้อ่านข้อมูลจากไฟล์ text
- File GotText เป็นอีเวนต์ที่เกิดขึ้นเมื่ออ่านข้อมูลจากไฟล์ text ได้
- ShowTextDialog ใช้แสดงไดอะล็อกแบบที่มีช่องให้ผู้ใช้ใส่ข้อความได้
- AfterTextInput เป็นอีเวนต์ที่เกิดขึ้นเมื่อผู้ใช้ใส่ข้อความลงในไดอะล็อกแล้ว
- create empty list ใช้สร้าง list ว่างๆ ที่ไม่มีข้อมูลอะไรอยู่เลย
- make a list ใช้สร้าง list โดยที่มีการใส่ข้อมูลเอาไว้ด้วย
- list from csv table ใช้แปลงข้อมูลแบบ csv table ให้เป็น list แบบ 2 มิติ
- length of list ใช้หาจำนวนข้อมูลที่มีอยู่ใน list เราใช้บล็อกนี้ เพื่อหาจำนวนโจทย์ว่ามีกี่ข้อ
- select list item ใช้สำหรับเลือกข้อมูลจากใน list โดยกำหนด index หรือลำดับของข้อมูลใน list
- replace list item ใช้แทนที่ข้อมูลใน list ด้วยข้อมูลใหม่ ตาม index ที่กำหนด
ความรู้อื่นๆ
- ความรู้เกี่ยวกับ list และบล็อกที่ใช้จัดการกับ list
- แอพนี้ สาธิตเทคนิคการเขียน code โดยประยุกต์ใช้ list เช่น
- การใช้ list แบบ 2 มิติ เพื่อเก็บข้อมูลโจทย์ นำโจทย์มาแสดงผล และตรวจคำตอบ ซึ่งการใช้ list ทำให้การเขียน code เป็นระบบ สามารถรองรับโจทย์ได้หลายข้อตามต้องการ โดยไม่ต้องเขียน code ใหม่
- การใช้ list เพื่อกำหนดสีของปุ่ม ให้เป็นสีที่แตกต่างกัน
แก้ไขบั๊กในบทที่ 18
เนื่องจากแอพในบทที่ 18 มี bug และผู้เรียนมีปัญหาในการสร้างแบบทดสอบ ดังนั้น ผมจึงจัดทำ VDO เสริมบทที่ 18+ ขึ้นมาเพื่อสอนแก้ปัญหารายละเอียดของเนื้อหาใน VDO บทที่ 18+ มีดังนี้
ปัญหาที่ 1 การเตรียมไฟล์แบบทดสอบไม่ถูกต้อง
แบบทดสอบแต่ละข้อ จะต้องอยู่ในบรรทัดเดียวกัน ซึ่งก็มักจะพบว่า ในแบบทดสอบข้อหนึ่งๆ มีการเผลอกด Enter ขึ้นบรรทัดใหม่เพื่อให้เห็นได้ง่ายว่ามีการขึ้นบรรทัดใหม่หรือไม่ ในโปรแกรม Notepad ให้เราคลิ้กเมนู format แล้วคลิ้กเพื่อเอาเครื่องหมายถูกหน้าช่อง word wrap ออก โปรแกรมก็จะไม่ตัดคำ
ปัญหาที่ 2 แบบทดสอบไม่สามารถแสดงภาษาไทยได้
ปัญหานี้เกิดกับผู้ที่เตรียมแบบทดสอบด้วยโปรแกรม Notepad ซึ่งเมื่อสั่ง Save ไฟล์ โปรแกรมจะเข้ารหัสเป็น ANSI ซึ่งไม่ยอมรับตัวอักษรไทย ทำให้ข้อความภาษาไทยผิดเพี้ยนหมดวิธีแก้ไข คือ ก่อนที่จะ Save ให้ดูที่ช่อง Encoding แล้วคลิ้กเลือกเป็น UTF-8 จากนั้น จึงคลิ้กปุ่ม Save
ขอแนะนำให้ใช้โปรแกรฟรีอื่นแทน Notepad เช่น โปรแกรม Notepad++ แทน
ปัญหาที่ 3 bug ในแอพ
ลักษณะของปัญหา คือ เมื่อผู้ใช้เลือกคำตอบแล้ว แอพก็จะแสดงเฉลย ความจริงเมื่อถึงตรงนี้ ผู้ใช้จะต้องเปลี่ยนคำตอบไม่ได้ แต่ bug ตรงนี้ ทำให้ ผู้ใช้สามารถเปลี่ยนคำตอบได้เรื่อยๆ และหากกดคำตอบที่ถูกซ้ำ ก็จะได้คะแนนเพิ่มด้วยวิธีแก้ คือ สร้าง procedure นี้ขึ้นมา
จากน้้นนำไปใช้ในอีเวนต์ Click ของปุ่ม B_next
และในตอนท้ายของ procedure checkAnswer ก็ให้เพิ่ม procedure EnableButton ไว้ด้วย
Comments
Post a Comment