2.Math Object

คำอธิบาย

1. มี 1 เพจ
2. เมื่อมีการเปลี่ยนค่าให้ตรวจคำตอบ และแสดงผลการตรวจคำตอบ

สุ่มตัวเลขระหว่าง -10 ถึง 10 ทศนิยม 2 ตำแหน่งมา 1 ค่า

และให้ผู้ใช้ป้อนค่าสัมบูรณ์ของตัวเลขที่สุ่มได้นั้น

โปรแกรมทำการตรวจคำตอบ พร้อมแสดงผลว่าถูกต้องหรือไม่

1. <style>
2. div {
3. padding : 5px;
4. margin : 5px;
5. }
6. div:hover {
7. border : 1px dotted blue;
8. }
9. .quest, .ans {
10. font-weight : bold;
11. padding : 0px 5px 0px 5px;
12. }
13. input[type="text"] {
14. border : none;
15. border-bottom : 1px dotted red;
16. text-align : right;
17. padding-right : 5px;
18. }
19. .correct {
20. color : blue;
21. }
22. .miss {
23. color : red;
24. }
25. </style>
26. <div>
27. จงหาค่าสัมบูรณ์ของ
28. <span class="quest" calculate="abs" onmouseover="rand(this,2)">
29. <span>?</span>
30. </span>
31. <input type="text" placeholder="ป้อนคำตอบ" onkeyup="check_ans(this)">
32. <span name="ans">?</span>
33. </div>
34. <div>
35. จงหาค่ายกกำลัง
36. <span class="quest" calculate="pow" onmouseover="rand(this)">
37. <span>?</span>
38. ^?
39. </span>
40. <input type="text" placeholder="ป้อนคำตอบ" onkeyup="check_ans(this)">
41. <span name="ans">?</span>
42. </div>
43. <script>
44. function check_ans(obj) {
45. var pack = obj.parentNode;
46. var s = pack.getElementsByTagName('span');
47. // หาคำตอบ
48. var cal = s[0].attributes["calculate"].value;
49. if (cal=="abs")
50. {
51. var ans = abs(s[0]);
52. } else if(cal=="pow") {
53. var ans = pow(s[0]);
54. }
56. // ตรวจคำตอบ
57. var ansUser = pack.getElementsByTagName('input')[0].value;
58. if (ans==ansUser)
59. {
60. var result = "ถูกต้อง";
61. var c = "correct"
62. } else {
63. var result = "ไม่ถูกต้อง";
64. var c = "miss"
65. }
67. // แสดงผล
68. var msg = pack.lastElementChild;
69. msg.innerHTML = result;
70. msg.className = c;
71. }
72. function abs(obj) {
73. var val = obj.getElementsByTagName('span');
74. //var val = obj.childNodes[0];
75. var v0 = Number(val[0].innerHTML);
76. return Math.abs(v0);
77. }
78. function pow(obj) {
79. var val = obj.children;
80. var v0 = Number(val[0].innerHTML);
81. var v1 = Number(val[1].innerHTML);
82. return Math.pow(v0,v1);
83. }
84. function rand(obj, fixed=0) {
85. var s = obj.children;
86. for(var i=0; i<s.length; i++) {
87. s[i].innerHTML = random(fixed);
88. }
89. var msg = obj.parentNode.lastElementChild;
90. msg.innerHTML = "?";
91. }
92. function random(fixed) {
93. var a = (2*Math.random())-1;
94. a = Math.floor(a*1000);
95. a = a/100;
96. return a.toFixed(fixed);
97. }
98. </script>

math.1