เทคนิคการสร้างแบบทดสอบ

งานนำเสนอเรื่อง: "เทคนิคการสร้างแบบทดสอบ"— ใบสำเนางานนำเสนอ:

1 เทคนิคการสร้างแบบทดสอบ
(Quiz Test Online) บน Web ด้วยโปรแกรม Dreamweaver และ Java Script โดยนางสาวนุชสรา บุญครอง

2 หัวข้อเรื่อง รูปแบบของแบบสอบถาม
รู้จักกับเครื่องมือ Dream เพื่อการสร้างหน้า Web Browser รู้จักกับ Javascript การทำงานของ Code Javascript ที่ใช้ในการประมวลผล ตำแหน่งการวาง Code JavaScript ในหน้า Web ตัวย่าง Quiz Test Online

3 รูปแบบของแบบทดสอบ แบบเลือกตอบ Radio ตัวอย่าง File Code html
<font face="MS Sans Serif"><!-คำสั่ง Form ให้จัดส่งไปข้อมูลไปประมวลผลที่ file test.asp-> <form action=test.asp method=post> <!-Form ประเภท Hidden กำหนดตัวแปรแบบซ่อนเพื่อระบุประเภทแบบทดสอบ-> <input type=hidden name=q value=radio><br> ข้อ 1<br> = ? <!-Form ประเภท Radio กำหนดตัวแปรคำตอบ-> <br><input type=radio name=aws1 value=5000> 5000 <br><input type=radio name=aws1 value=5550> 5550 <br><input type=radio name=aws1 value=5555> 5555<br> <input type=submit > <input type=reset></form>

4 รูปแบบของแบบทดสอบ แบบเติมคำ Textbox ตัวอย่าง File Code html
<font face="MS Sans Serif"> <!-คำสั่ง Form ให้จัดส่งไปข้อมูลไปประมวลผลที่ file test.asp-> <form action=test.asp method=post> <!-Form ประเภท Hidden กำหนดตัวแปรแบบซ่อนเพื่อระบุประเภทแบบทดสอบ-> <input type=hidden name=q value=textbox><br> ข้อ 2 <br> = ? <br> <!-Form ประเภท Textbox กำหนดตัวแปรคำตอบ-> <input type=text name=aws1><br> <input type=submit > <input type=reset> </form>

5 รูปแบบของแบบทดสอบ แบบเลือกตอบ Pulldown ตัวอย่าง File Code html
<font face="MS Sans Serif"> <!-คำสั่ง Form ให้จัดส่งไปข้อมูลไปประมวลผลที่ file test.asp-> <form action=test.asp method=post> <!-Form ประเภท Hidden กำหนดตัวแปรแบบซ่อนเพื่อระบุประเภทแบบทดสอบ-> <input type=hidden name=q value=pulldown> <br> ข้อ 3 <br> = ?<br> <!-Form ประเภท Select กำหนดตัวแปรคำตอบ-> <select name= aws1> <option value=5000>5000 <option value=5550>5550 <option value=5555>5555 </select > <br> <input type=submit > <input type=reset></form>

6 รู้จักกับเครื่องมือ Dream เพื่อการสร้างหน้า Web แบบสอบถาม

7 ตัวอย่างการสร้าง Form ของแบบสอบถาม

8 รู้จักกับเครื่องมือ Dream เพื่อการสร้างหน้า Web แบบสอบถาม
การสร้าง From

9 รู้จักกับเครื่องมือ Dream เพื่อการสร้างหน้า Web แบบสอบถาม(ต่อ)
การสร้างปุ่มรับคำตอบ

10 รู้จักกับเครื่องมือ Dream เพื่อการสร้างหน้า Web แบบสอบถาม(ต่อ)
กำหนดชื่อและค่าของ RadioButton การกำหนดค่าของ Radio Button

11 รู้จักกับ Javascript เนื้อหาเรื่อง JavaScript เป็นเนื้อหาเกี่ยวกับเทคนิคในแบบ Client Script หรือสคริปต์ที่มีการทำงานในฝั่งของ User นั้นก็คือโปรแกรมที่มีการทำงานอยู่บน Web Browser ของผู้เรียกใช้งานเว็บเพจนั้น ๆ

12 การคำนวณคะแนนแบบจำนวนเต็ม การคำนวณคะแนนแบบอัตราส่วน (%)
การทำงานของ Code Javascript การคำนวณคะแนนแบบจำนวนเต็ม การคำนวณคะแนนแบบอัตราส่วน (%)

13 การทำงานของ Code Javascript ในการประมวลผลแบบคะแนนเต็ม
<script language="JavaScript"> //ประกาศภาษา <!-- var answers = new Array(5); answers[0] = "2"; answers[1] = "4"; answers[2] = "8"; answers[3] = "2"; answers[4] = "4"; 1 function getScore(form) { var score = 0; //คะแนน var numQues = 5; //จำนวนคำถาม var numChoi = 4; //จำนวนตัวเลือกในแต่ละข้อ var currElt = 0; //ตำแหน่งของ Elements var currSelection; //ตำแหน่งในแต่ละข้อ 2 คำตอบที่ถูกต้อง

14 การทำงานของ Code Javascript ในการประมวลผลแบบคะแนนเต็ม(ต่อ)
for (i=0; i<numQues; i++) {if (i==0) {currElt = 1; } else {currElt = currElt + numChoi; for (j=0; j<numChoi; j++) {currSelection = form.elements[currElt + j]; if (currSelection.checked) { if (currSelection.value == answers[i]) {score++; } } } } form.from1.value = score ; }// --> </script> 3 4

15 การทำงานของ Code Javascript ในการประมวลผลแบบคะแนน%
<script language="JavaScript"> <!-- var answers = new Array(5); answers[0] = "2"; answers[1] = "4"; answers[2] = "8"; answers[3] = "2"; answers[4] = "4"; 1 function getScore(form) { var score = 0; //คะแนน var currElt; //ตำแหน่งของ Elements var currSelection; //ตำแหน่งในแต่ละข้อ break; 2 คำตอบที่ถูกต้อง

16 การทำงานของ Code Javascriptในการประมวลผลแบบคะแนน% (ต่อ)
for (i=0; i<numQues; i++) { currElt = i*numChoi; for (j=0; j<numChoi; j++) { currSelection = form.elements[currElt + j]; if (currSelection.checked) { if (currSelection.value == answers[i]) { score++; } } } } score = Math.round(score/numQues*100); form.percentage.value = score + "%"; }}// --> </script> 3 4

17 ตำแหน่งการวาง Code JavaScript ในหน้า Web
วางระหว่างส่วน head กับ body

18 Excemple :: Quiz Test Online
หน้า Web Browser

19 Excemple :: Quiz Test Online
หน้า Code เป็น pdf ไฟล์

20 scnbk@mahidol.ac.th http://stang.sc.mahidol.ac.th/sharing/sharing.htm
Note….

21 THE END