แจกโค้ดทำข้อสอบออนไลน์ ทำเสร็จแล้วตรวจคำตอบได้พร้อมเฉลย

บทความเกี่ยวกัยคอมพิวเตอร์

แจกโค้ดทำข้อสอบออนไลน์ ทำเสร็จแล้วตรวจคำตอบได้พร้อมเฉลย

โพสต์โดย phaisan2006 » ศุกร์ 20 ต.ค. 2017 12:41 pm

โครงสร้างของโค้ดทำข้อสอบออนไลน์จะประกอบไฟล์ 2 ไฟล์ด้วยกันคือ ไฟล์แรกจะไฟล์ตัวข้อสอบ ทำด้วย html ส่วนไฟล์ที่ 2 จะเป็นไฟล์สำหรับตรวจข้อสอบและเฉลย ทำด้วยจาวาสคริปต์
ตัวอย่างโค้ดไฟล์ตัวข้อสอบ
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-874">
<title>แบบทดสอบออนไลน์</title>
<SCRIPT LANGUAGE="JavaScript" src="file:///J|/onlinetest/onlinetest.js"></SCRIPT>
</head>
<body bgcolor=#6C7B8B>
<font face="MS Sans Serif" size=3>
<center>
<table width=95% border=0>
<tr><td bgcolor=#9FB6CD>
<p align=center>
<font color=white><b>
<div align="center"><font color="#000000">ข้อสอบวิชา<font size="3" face="MS Sans Serif">คอมพิวเคอร์</font></font><br>
<font color="#000000">คำสั่ง เลือกคำตอบที่ถูกที่สุดเพียงข้อละคำตอบเดียว</font> </b></font>
</center>
</div></td>
</tr>
<tr><td bgcolor=#9FB6CD>
<form name="quiz">
1. ข้อสอบข้อที่ 1<br>
<input type="radio" name="q1" value="1">a<br>
<input type="radio" name="q1" value="2">b<br>
<input type="radio" name="q1" value="3">c<br>
<input type="radio" name="q1" value="4">d<br>
<p>

2. ข้อสอบข้อที่ 2<br>
<input type="radio" name="q2" value="1">a<br>
<input type="radio" name="q2" value="2">b<br>
<input type="radio" name="q2" value="3">c<br>
<input type="radio" name="q2" value="4">d<br>
<p>

3. ข้อสอบข้อที่ 3<br>
<input type="radio" name="q3" value="1">a<br>
<input type="radio" name="q3" value="2">b<br>
<input type="radio" name="q3" value="3">c<br>
<input type="radio" name="q3" value="4">d<br>
<p>

4. ข้อสอบข้อที่ 4<br>
<input type="radio" name="q4" value="1">a<br>
<input type="radio" name="q4" value="2">b<br>
<input type="radio" name="q4" value="3">c<br>
<input type="radio" name="q4" value="4">d<br>
<p>

5. ข้อสอบข้อที่ 5<br>
<input type="radio" name="q5" value="1">a<br>
<input type="radio" name="q5" value="2">b<br>
<input type="radio" name="q5" value="3">c<br>
<input type="radio" name="q5" value="4">d<br>
<p>

6. ข้อสอบข้อที่ 6<br>
<input type="radio" name="q6" value="1">a<br>
<input type="radio" name="q6" value="2">b<br>
<input type="radio" name="q6" value="3">c<br>
<input type="radio" name="q6" value="4">d<br>
<p>

7. ข้อสอบข้อที่ 7<br>
<input type="radio" name="q7" value="1">a<br>
<input type="radio" name="q7" value="2">b<br>
<input type="radio" name="q7" value="3">c<br>
<input type="radio" name="q7" value="4">d<br>
<p>

8. ข้อสอบข้อที่ 8<br>
<input type="radio" name="q8" value="1">a<br>
<input type="radio" name="q8" value="2">b<br>
<input type="radio" name="q8" value="3">c<br>
<input type="radio" name="q8" value="4">d<br>
<p>

9. ข้อสอบข้อที่ 9<br>
<input type="radio" name="q9" value="1">a<br>
<input type="radio" name="q9" value="2">b<br>
<input type="radio" name="q9" value="3">c<br>
<input type="radio" name="q9" value="4">d<br>
<p>

10. ข้อสอบข้อที่ 10<br>
<input type="radio" name="q10" value="1">a<br>
<input type="radio" name="q10" value="2">b<br>
<input type="radio" name="q10" value="3">c<br>
<input type="radio" name="q10" value="4">d<br>
<p>
<p>

<input type="button" value="ดูผลคะแนน" onClick="getScore(this.form)">
<input type="reset" value="ยกเลิก"><p>
ผลคะแนน = <input type=text size=15 name="percentage"><br>
เฉลยคำตอบ:<br>
<textarea name="solutions" wrap="virtual" rows="4" cols="80"></textarea>
</form>

</td></tr>
</table>
</center>
</font>
</body>
</html>
ซึ่งเมื่อรันด้วยโปรแกรม Adobe Dreamweaver แล้วจะมีหน้าตาเป็นแบบไฟล์ที่แนบมานี้

วิธีการทำ
1. เปิดไฟล์ตัวข้อสอบด้วยโปรแกรม Adobe Dreamweaver แล้วพิมพ์ข้อสอบที่ต้องการลงไปในโปรแกรม ตัวอย่างเช่น

ให้ดูจากไฟล์ที่ 2 ที่แนบมานี้


เมื่อพิมพ์โจทย์และตัวเลือกเสร็จแต่ละข้อแล้ว ให้กำหนดคำตอบลงในเมนูคำสั่ง Properties เมื่อพิมพ์ครบทุกข้อที่ต้องการแล้ว ให้บันทึกแฟ้ม

ให้ดูจากไฟล์ที่ 3 ที่แนบมานี้

2. เปิดไฟล์จาวาสคริปต์ที่เป็นตัวตรวจข้อสอบและเฉลยด้วยโปรแกรม Adobe Dreamweaver หรือโปรแกรม EditPlus ก็ได้เช่นเดียวกัน แล้วแก้ไขคำตอบ จำนวนข้อให้ตรงกันกับที่เป็นไฟล์ html ตัวอย่างเช่น ข้อสอบชุดนี้มี 40 ข้อ มี 4 ตัวเลือก answers[0] = "4"; ก็คือข้อ 1 คำตอบคือ 4 answers[1] = "1"; ก็คือข้อ 2 คำตอบคือ 2 เป็นต้น เมื่อแก้ไขเสร็จแล้วให้บันทึกไฟล์ ซึ่งทั้ง 2 ไฟล์นี้จะต้องอยู่ในโฟลเดอร์เดียวกัน ถ้าข้อสอบมีรูปภาพประกอบ จะมีโฟลเดอร์เฉพาะของรูปภาพด้วยก็ได้
ให้ดูจากไฟล์ที่ 4 ที่แนบมานี้
สำหรับโฟลเดอร์ online_e-testing1 จะประกอบด้วยไฟล์ที่เป็นโครงสร้างตัวข้อสอบ และไฟล์สำหรับตรวจคำตอบพร้อมเฉลย ส่วนโฟล์เดอร์ online_e-testing2 จะประกอบด้วยไฟล์ข้อสอบที่ทำเสร็จแล้วและไฟล์สำหรับตรวจข้อสอบพร้อมเฉลย
สำหรับท่านใดที่ลองดาวน์โหลดไปทดลองทำดูแล้ว ยังไม่เข้าใจขั้นตอนใด สามารถอีเมล์มาสอบถามได้ ที่ phaisan2006@gmail.com sphaisan@hotmail.com phaisan_2006@yanoo.com
⅍⅍⅍⅍⅍⅍⅍⅍⅍⅍⅍⅍⅍
ผู้เขียน นายไพศาล สืบสาย
ที่อยู่ 32 ถนนชื่นมรรคา ตําบลสุไหงโก-ลก อําเภอสุไหงโก-ลก จังหวัดนราธิวาส
โทรศัพท์เคลื่อนที่ 08-7397-3533
อีเมล์ phaisan2006@gmail.com, phaisan_2000@yahoo.com, phaisan@hotmail.com
แนบไฟล์
2017-10-18_173516.jpg
2017-10-18_173516.jpg (218.18 KiB) เปิดดู 189 ครั้ง
2017-10-18_173240.jpg
2017-10-18_173240.jpg (915.65 KiB) เปิดดู 189 ครั้ง
2017-10-19_085319.jpg
2017-10-19_085319.jpg (231.24 KiB) เปิดดู 189 ครั้ง
2017-10-18_173641.jpg
2017-10-18_173641.jpg (98.88 KiB) เปิดดู 189 ครั้ง
phaisan2006
Administrator
 
โพสต์: 11
ลงทะเบียนเมื่อ: อาทิตย์ 03 ก.ย. 2017 1:34 pm

ย้อนกลับไปยัง หมวดหมู่บทความอิเล็กทรอนิกส์

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และ บุคคลทั่วไป 1 ท่าน

cron