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

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

รูปแบบของแบบทดสอบ แบบเลือกตอบ 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>5000+550 = ? <!-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>

รูปแบบของแบบทดสอบ แบบเติมคำ 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> 5000+550 = ? <br> <!-Form ประเภท Textbox กำหนดตัวแปรคำตอบ-> <input type=text name=aws1><br> <input type=submit > <input type=reset> </form>

รูปแบบของแบบทดสอบ แบบเลือกตอบ 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>5000+550 = ?<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>

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

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

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

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

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

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

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

การทำงานของ 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 คำตอบที่ถูกต้อง

การทำงานของ 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

การทำงานของ 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 คำตอบที่ถูกต้อง

การทำงานของ 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

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

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

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

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

THE END