2.การจับลากและปล่อย

คำอธิบาย

1. มี 1 เพจ
2. เมื่อมีการจับลากวัตถุและปล่อยลงในตำแหน่งที่ต้องการได้
3. ตรวจคำตอบได้

รายการตัวเลือก ตู่ ตู ตู้

จงเติมคำลงในช่องว่างให้ถูกต้อง

น้อง ว่า ที่มีข้าว เป็นของเขา

1. <style>
2. div {
3. padding : 5px;
4. }
5. .droptarget {
6. padding : 0px 20px;
7. border-bottom : 1px dotted #aaaaaa;
8. min-height : 100px;
9. }
10. [draggable]:nth-child(even) {
11. background-color: #66ffff;
12. }
13. [draggable]:nth-child(odd) {
14. background-color: #ccffff;
15. margin : 0px 5px;
16. }
17. #selected [draggable]:nth-child(even) {
18. background-color: #ffaaff;
19. }
20. #selected [draggable]:nth-child(odd) {
21. background-color: #ffccff;
22. }
23. .correct {
24. background-image: url("http://w3c-web.appspot.com/images/marker.gif");
25. background-repeat: no-repeat;
26. background-position: right top;
27. }
28. </style>
29. <div class="droptarget" id="menu">
30. รายการตัวเลือก
31. <span draggable="true" id="drag1">ตู่</span>
32. <span draggable="true" id="drag2">ตู</span>
33. <span draggable="true" id="drag3">They</span>
34. <span draggable="true" id="drag4">ตู้</span>
35. <span draggable="true" id="drag5">going</span>
36. <span draggable="true" id="drag6">concert</span>
37. </div>
38. จงเติมคำลงในช่องว่างให้ถูกต้อง<br>
39. <div id="q1">
40. น้อง
41. <span class="droptarget" id="bank1"></span>ว่า
42. <span class="droptarget" id="bank2"></span>ที่มีข้าว
43. <span class="droptarget" id="bank3"></span>เป็นของเขา
44. </div>
45. <div id="q2">
46. <span class="droptarget" id="2a"></span>are
47. <span class="droptarget" id="2b"></span>to the
48. <span class="droptarget" id="2c"></span>.
49. </div>
50. <input type="button" value="ตรวจประโยค" onclick="check()">
51. <input type="button" value="ตรวจคำ" onclick="check_word()">
52. <div id="out1"></div>
53. <script>
54. function check() {
55. var x = document.getElementById("q1");
56. var y = document.getElementById("out1");
57. var c = (x.innerText == "น้อง ตู่ว่า ตู้ที่มีข้าว ตูเป็นของเขา");
58. if (c)
59. {
60. y.innerHTML = "ถูกต้อง";
61. x.className = "correct";
62. } else {
63. y.innerHTML = "คุณทำผิด ";
64. x.className = "";
65. }
66. }
67. function check_word() {
68. var x = document.getElementById("q2");
69. var y = x.getElementsByClassName("droptarget");
70. word(y, 0, "They");
71. word(y, 1, "going");
72. word(y, 2, "concert");
73. }
74. function word(elem, idx, w) {
75. if (elem[idx].innerText==w)
76. {
77. elem[idx].className += " correct";
78. } else {
79. elem[idx].className = "droptarget";
80. }
82. }
83. var m = document.getElementById("menu");
84. var s = m.getElementsByTagName("span");
85. for(var i=0; i<s.length; i++) {
86. var r = Math.floor((Math.random()*100)%s.length);
87. m.appendChild(s[r]);
88. }
89. </script>
90. <script>
91. function found(a,b) {
92. return (a.search(b) != -1);
93. }
94. document.addEventListener(
95. "dragstart",
96. function(event)
97. {
98. event.dataTransfer.setData("Text", event.target.id);
99. }
100. );
101. document.addEventListener(
102. "drag",
103. function(event)
104. {
105. event.target.style.opacity = "0.4";
106. event.target.style.color = "red";
107. }
108. );
109. document.addEventListener(
110. "dragend",
111. function(event)
112. {
113. event.target.style.opacity = "1";
114. event.target.style.color = "";
115. }
116. );
117. document.addEventListener(
118. "dragenter",
119. function(event)
120. {
121. // if ( event.target.className == "droptarget" )
122. if ( found(event.target.className,"droptarget" ) )
123. event.target.style.border = "3px dotted red";
124. }
125. );
126. document.addEventListener(
127. "dragover",
128. function(event)
129. {
130. event.preventDefault();
131. }
132. );
133. document.addEventListener(
134. "dragleave",
135. function(event)
136. {
137. // if ( event.target.className == "droptarget" )
138. if ( found(event.target.className,"droptarget" ) )
139. event.target.style.border = "";
140. }
141. );
142. document.addEventListener(
143. "drop",
144. function(event)
145. {
146. event.preventDefault();
147. // if ( event.target.className == "droptarget" )
148. if ( found(event.target.className,"droptarget" ) )
149. {
150. event.target.style.border = "";
151. var data = event.dataTransfer.getData("Text");
152. event.target.appendChild(
153. document.getElementById(data)
154. );
155. }
156. }
157. );
158. </script>
159. โจทย์เติมคำ 3 ข้อ ข้อละ 3 ช่องว่าง
160. มีปุ่มตรวจคำตอบ
161. ตรวจคำตอบแต่ละข้อ พร้อมแสดงผลว่าแต่ละข้อตอบถูกหรือไม่
162. โจทย์เติมคำ 3 ข้อ ข้อละ 3 ช่องว่าง
163. มีปุ่มตรวจคำตอบ
164. ตรวจคำตอบแต่ละคำ
     • คำใดตอบถูก แสดงเครื่องหมายถูก
     • คำใดตอบผิด แสดงเครื่องหมายผิด

“เดือนกว่าแล้วที่ฉันนั่งๆ นอนๆ อยู่บนเตียงคนป่วย แถมมีแววว่าจะพิการเดินไม่ได้ตลอดชีวิต สาเหตุเพราะคนขับรถบัสเมายาบ้า ขับรถมาชนรถรับส่งนักเรียนด้านที่ฉันโดยสารมาอย่างจัง รถพังยับเยิน”

ตัวเลือก

• ขา แขน มือ หู
• ครู นักเรียน คนขับรถ พ่อแม่
• รถคว่ำ ตกรถบัส เดินข้ามถนน คนเมายาบ้าขับรถชนรถรับส่งนักเรียน
• บ้าน โรงเรียน โรงแรม โรงพยาบาล

คำถาม

1. อวัยวะส่วนใดของผู้ป่วยที่อาจพิการได้
2. ฉัน ในที่นี้น่าจะหมายถึงใคร
3. สาเหตุที่ทำให้ฉันกลายเป็นคนป่วย คือข้อใด
4. ในขณะนี้ ฉัน อยู่ที่ไหน

ที่มา: http://www.trueplookpanya.com/examination/doexam/1653