Transcript งานนำเสนอ PowerPoint

เทคนิคการสร้างแบบทดสอบ
(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"> 1
//ประกาศภาษา
<!-var answers = new Array(5);
answers[0] = "2";
answers[1] = "4";
คาตอบที่ถูกต้ อง
answers[2] = "8";
answers[3] = "2";
answers[4] = "4";
function getScore(form) {
2
var score = 0; //คะแนน
var numQues = 5; //จานวนคาถาม
var numChoi = 4;
//จานวนตัวเลือกในแต่ ละข้ อ
var currElt = 0;
//ตาแหน่ งของ Elements
var currSelection;
//ตาแหน่ งในแต่ ละข้ อ
การทางานของ Code Javascript ในการประมวลผลแบบคะแนนเต็ม(ต่ อ)
for (i=0; i<numQues; i++)
{if (i==0) {currElt = 1;
3
}
else
{currElt = currElt + numChoi;
}
for (j=0; j<numChoi; j++) 4
{currSelection =
form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value ==
answers[i]) {score++;
} } }
}
form.from1.value = score ;
}// -->
</script>
การทางานของ Code Javascript ในการประมวลผลแบบคะแนน%
<script language="JavaScript"> 1
<!-var answers = new Array(5);
answers[0] = "2";
answers[1] = "4";
answers[2] = "8";
คาตอบที่ถูกต้ อง
answers[3] = "2";
answers[4] = "4";
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++;
} } }}
3
4
score =
Math.round(score/numQues*100);
form.percentage.value = score + "%";
}}// -->
</script>
ตาแหน่ งการวาง Code JavaScript ในหน้ า Web
วางระหว่ างส่ วน head กับ body
Excemple :: Quiz Test Online
หน้า Web Browser
Excemple :: Quiz Test Online
หน้า Code เป็ น pdf ไฟล์
Note….
http://stang.sc.mahidol.ac.th/sharing/sharing.htm
[email protected]
THE END