1.โจทย์ตัวเลือก

1. <style>
2. div#quest{
3. font-weight : bold;
4. color : blue;
5. }
6. input:checked+label {
7. background-color : yellow;
8. }
9. </style>
10. <input type="button" value="แสดงโจทย์" onclick="disp_question()"><br>
11. <div id="quest">โจทย์</div>
12. <input type="radio" id="r1" name="choice"><label id="c1" for="r1">ตัวเลือก 1</label><br>
13. <input type="radio" id="r2" name="choice"><label id="c2" for="r2">ตัวเลือก 2</label><br>
14. <input type="radio" id="r3" name="choice"><label id="c3" for="r3">ตัวเลือก 3</label><br>
15. <input type="radio" id="r4" name="choice"><label id="c4" for="r4">ตัวเลือก 4</label><br>
16. <input type="button" value="ตรวจคำตอบ" onclick="check_ans()">
17. <div id="out">แสดงผลคำตอบ</div>
18. <script>
19. var q = {
20. "question": "ให้นักเรียนนำเงิน ๑๕๐ บาท ค่าเรียนว่ายน้ำมาให้ครูทุกคน ประโยคนี้หมายความว่าอย่างไร",
21. "choice" : [
22. "นักเรียนมีคนเดียว แต่มีครูหลายคน",
23. "มีครูคนเดียว แต่มีนักเรียนหลายคน",
24. "มีนักเรียนหลายคน และมีครูหลายคน",
25. "มีนักเรียนคนเดียวและมีครูคนเดียว"
26. ],
27. "answer" : 0
28. }
30. function disp_question() {
31. var a = document.getElementById("quest");
32. a.innerHTML = q.question;
33. }
35. function check_ans() {
36. var out = document.getElementById("out");
37. out.innerHTML = "ถูกต้อง หรือ ไม่ถูก ยังไม่รู้ต้องลองทำดู";
38. }
39. </script>

โจทย์ตัวเลือก

ข้อกำหนดเพิ่มเติม

1. กำหนดให้ 2 โจทย์
2. ปุ่มตรวจคำตอบ
   1. ออกแบบให้มีปุ่มตรวจคำตอบของแต่ละโจทย์ คือ มีปุ่มตรวจคำตอบทุกๆโจทย์
   2. หรือ มีปุ่มตรวจคำตอบเพียงปุ่มเดียว แต่ตรวจทุกโจทย์

หมายเหตุ:

• ในเบื้องต้นกำหนดให้ 2 โจทย์ ซึ่งควรออกแบบให้รองรับจำนวนคำถาม 5-10 โจทย์ โดยเพิ่มเพียงข้อมูลของโจทย์ ไม่ต้องแก้ไขโปรแกรม หรือแก้เพียงเล็กน้อย

ปัญหาที่พบ

A

• ถ้าคลิกแสดงโจทย์ 1 แล้วมาคลิกตรวจคำตอบโจทย์ 2 จะไม่ถูกต้อง (ใช่หรือไม่)
• ถ้าใช่ เป็นความผิดของใคร ป้องกันได้หรือไม่?

A -ไม่ควรมีคำว่า ตัวเลือก 1 2 3 หรือ 4

K -กดเปลี่ยนโจทย์

ฺเมื่อกดเปลี่ยนโจทย์

B -ตัวเลือกที่เลือกอยู่ต้องหายไป ไม่ถูกเลือก

C -คำที่แสดง จากการตรวจคำตอบข้อที่แล้ว ควรถูกยกเลิก เปลี่ยนเป็นคำใหม่ที่เหมาะสม

ต้องมีการย่อหน้าคำสั่ง เพื่อทำให้อ่าน ทำความเข้าใจคำสั่งได้ง่าย

คำแนะนำ

A -เมื่อคลิกตรวจคำตอบ จะมี 3 กรณี คือ

1. ยังไม่ได้เลือกคำตอบ
2. เลือกคำตอบแล้ว แต่เป็นคำตอบที่ผิด
3. เลือกคำตอบแล้ว เป็นคำตอบที่ถูก