Làm trắc nghiệm bằng web
Việc kiểm tra bằng phương pháp trắc nghiệm ngày càng phổ biến. Trên thị trường đã xuất hiện không ít chương trình tạo đề thi trắc nghiệm, các chương trình thương mại thường không rẻ chút nào và có thể có nhiều tính năng phức tạp gây bối rối cho người dùng.
Ở đây tôi xin giới thiệu một công cụ trắc nghiệm đơn giản được thiết kế trên web với phần mềm Dreamweaver DMX (phần mềm thiết kế web phổ biến hiện nay), toàn bộ mã nguồn có thể tải về ở website TGVT-PCWVN, bạn có thể tự do chỉnh sửa theo ý mình.
Đầu tiên, bạn khởi động DMX và chọn File/New, bảng New Document sẽ hiện ra. Ở khung Category bạn chọn Other, sau đó chuyển qua khung Other chọn JavaScript rồi nhấn Create. Bạn nhập đoạn mã nguồn 1 vào cửa sổ JS mà bạn vừa mới tạo.
Khi sử dụng bạn nên xem kỹ chức năng của từng đoạn mã và thay đổi thông số tùy thích ở những nơi mà tôi đã có chú thích. Xong, bạn hãy lưu vào một thư mục nhất định dưới cái tên Ketqua.js. Đến đây bạn đã đi được 1/3 đoạn đường rồi đấy.
Tiếp theo chúng ta tạo phần câu hỏi trắc nghiệm và phần tự động tính điểm. Cũng như lần trước, bạn vào DMX và chọn File/New, nhưng lần này ở khung Category bạn chọn Basic Page và trong khung Basic Page bạn chọn HTML rồi nhấn Create.
Lúc này trong DMX xuất hiện một trang mới, bạn cần tạo một form chung để tiện sau này đưa các phần tử chọn vào. Ở chế độ code bạn chèn dòng sau vào ngay sau thẻ <body>:
<p align="center">
<form method="POST" name="myquiz">
</form>
Sau đó bạn chuyển trỏ chuột vào trong form vừa được tạo (lưu ý form bây giờ hiển thị dưới các nét chấm gạch), dòng đầu tiên bạn nhập tiêu đề của bài trắc nghiệm và trình bày theo ý bạn. Dòng thứ hai bạn nhập câu hỏi đầu tiên, để thực hiện bạn chuyển sang chế độ làm việc với code (nhấn View/Code), sau đó bạn xuống một hàng so với dòng đầu tiên rồi nhập đoạn mã sau (lưu ý, bạn phải chèn đoạn mã trước thẻ </form>).
<div class="qheader">
1) Seagame22 tổ chức ở :</div>
//Câu hỏi được đặt trong thẻ <div>, bạn có thể nhập tiếng Việt bình thường, DMX sẽ tự chuyển qua mã cho bạn.
Ở dòng thứ ba mọi chuyện bắt đầu trở nên phức tạp hơn, bạn phải tạo bảng chọn và câu trả lời đúng hoặc sai? Bạn đừng vội lo lắng, chúng ta tiếp tục làm việc với code, nhập đoạn mã sau vào sau đoạn code trước (chèn trước thẻ </form>).
<div class="qselections">
<input type="radio" value="a" name="question1">a) Trung Quốc<br>
<input type="radio" value="b" name="question1">b) Nga<br>
<input type="radio" value="c" name="question1">c) Việt Nam<br>
<input type="radio" value="d" name="question1">d) Canada<br>
</div>
<br>
// 4 dòng <input> trên hiển thị phần chọn và câu đáp án kế phần chọn.
Bạn tiếp tục thực hiện hai bước trên một cách tuần tự cho đến khi đủ số câu hỏi mà bạn đã khai báo ở file Ketqua.js đã tạo ban đầu. Nhớ thay đổi số thứ tự của từng câu trong phần name="question?" và nội dung trả lời.
Sau khi tạo xong các câu hỏi bạn phải làm thêm hai công đoạn nữa, công đoạn 1 là lồng file Ketqua.js vào trang này. Để thực hiện bạn chỉ cần gõ đoạn code dưới đây vào sau thẻ <head>:
<style>
.qheader{
font:bold 14px Arial;
}
.qselections{
font:normal 13px Arial;
}
</style>
<script src="Ketqua.js"> // Nơi lồng file Ketqua.js
</script>
<script>
var actualchoices=new Array()
document.cookie="ready=yes"
</script>
Công đoạn 2 là bạn phải làm một button để chuyển qua trang tính điểm và button cho phép bạn xóa đi làm lại. Để thực hiện điều này bạn cần gõ đoạn code sau vào sau thẻ </form>.
<form>
<div align="center">
<input type="button" value="Xem kết quả" name="B1" onClick="gradeit()">
<input type="button" value="Làm lại" name="B2" onClick="document.myquiz.reset()">
</div>
</form>
Đoạn code trên có chức năng tạo thêm một form và đặt hai button vào trong đó, button xem kết quả sẽ thực hiện liên kết với trang đáp án dựa vào trang Ketqua.js mà ta tạo ở trên, button còn lại có chức năng bỏ tất cả dấu chọn. Cuối cùng bạn lưu lại với tên file Baikiemtra.htm.
Bây giờ bạn đã đi được 2/3 quãng đường. Như trên, bạn tiếp tục tạo một trang HTML khác để đi tiếp 1/3 quãng đường còn lại. Tạo một trang mới (giống như tạo trang Baikiemtra.htm), sau đó ở chế độ code, bạn chèn đoạn mã nguồn 2 vào sau thẻ <body>.
Sau đó bạn chuyển lại chế độ Design để tinh chỉnh các dòng chữ giới thiệu như ý bạn muốn. Cuối cùng bạn lưu trang này lại với tên file Dapan.htm.
Công cụ trắc nghiệm được thiết kế ở đây là sự hòa quyện giữa ngôn ngữ web và ngôn ngữ kịch bản (script). Nếu có thêm kỹ năng về Javascript, bạn cũng có thể tự tạo thêm những tính năng khác như đặt chế độ định thời nhảy trang chẳng hạn. Khác hẳn với sự cứng nhắc của các phần mềm thương mại, công cụ trắc nghiệm này cho phép bạn tự tinh chỉnh theo ý riêng của mình.
MÃ NGUỒN 1
var totalquestions=10
// Dòng trên khai báo số câu hỏi trong bài trắc nghiệm
var correctchoices=new Array()
correctchoices[1]='c'
correctchoices[2]='a'
correctchoices[3]='c'
correctchoices[4]='c'
correctchoices[5]='c'
correctchoices[6]='c'
correctchoices[7]='b'
correctchoices[8]='b'
correctchoices[9]='c'
correctchoices[10]='b'
// Những dòng correctchoices như cái tên của nó là đáp án. Nếu bạn muốn thêm những câu hỏi trắc nghiệm khác thì phải làm hai việc. Ví dụ bạn muốn có tổng cộng 11 câu hỏi trắc nghiệm thì cần khai báo var totalquestions=11 và tạo thêm một dòng correctchoices[11]='đáp án'.
function gradeit(){
var incorrect=null
for (q=1;q<=totalquestions;q++){
var thequestion=eval("document.myquiz.question"+q)
for (c=0;c<thequestion.length;c++){
if (thequestion[c].checked==true)
actualchoices[q]=thequestion[c].value
}
if (actualchoices[q]!=correctchoices[q]){
if (incorrect==null)
incorrect=q
else
incorrect+="/"+q
}
}
if (incorrect==null)
incorrect="a/b"
document.cookie='q='+incorrect
if (document.cookie=='')
alert("Your browser does not accept cookies. Please adjust your browser settings.")
else
window.location="Dapan.htm" //Dòng này là nơi thực hiện liên kết của trang trắc nghiệm mà ta sắp thực hiện với trang đáp án
} function showsolution(){
var win2=window.open("","win2","width=200,height=350, scrollbars") //Dòng này thể hiện kích cỡ cửa sổ của phần xem đáp án và bạn có thể tăng dài (height) rộng (width) tùy ý nhưng phải nhớ rằng kích thước của chúng tính bằng đơn vị pixel.
win2.focus()
win2.document.open()
win2.document.write('<title>Kết quả</title>')
win2.document.write('<body bgcolor="#FFFFFF">') //Dòng này là thông số của màu nền trang đáp án, bạn có thể gọi hẳn tên chúng cũng được (như white chẳng hạn) nhưng nên nhớ phải xóa # và đặt trong nháy kép.
win2.document.write('<center><h3>Kết quả</h3></center>')
win2.document.write('<center><font face="Arial">') // Dòng này khai báo font chữ sẽ được sử dụng trong cửa sổ đáp án, khi chèn font khác bạn nên nhớ đặt trong nháy kép.
for (i=1;i<=totalquestions;i++){
for (temp=0;temp<incorrect.length;temp++){
if (i==incorrect[temp])
wrong=1
}
if (wrong==1){
win2.document.write("Question "+i+"="+correctchoices
.fontcolor("red")+"<br>") //Dòng này là phần hiển thị màu cho những câu mà bạn chọn sau đáp án ,những câu đúng sẽ theo màu đen vốn có còn những câu sai đáp án sẽ là màu đỏ (red) nhằm nhấn mạnh những lỗi sai.
wrong=0
}
else
win2.document.write("Question "+i+"="+correctchoices+"<br>")
}
win2.document.write('</center></font>')
win2.document.write("<h5>Sau đây là những câu trả lời chính xác .</h5><p align='center'><small><a href='mailto:gelukrait@yahoo.com' target='_new'>GeluKrait</a></small>")
win2.document.close()
}
MÃ NGUỒN 2
<p align="center"><strong><font face="Arial">
<script src="Ketqua.js">
</script> //Đoạn này có chức năng chèn file Ketqua.js mà đầu tiên ta đã tạo
<u><font size="5" color="#000080">Kết quả của bạn</font></u></font></strong></p>
<div align="center"><center> //Dòng chữ này là tiêu đề của trang
<table border="0" cellspacing="0" cellpadding="0"> //Chèn khung
<tr>
<td width="100%"><form method="POST" name="result"><table border="0" width="100%" cellpadding="0" height="116"> //Thông số của khung
<tr>
<td height="25" bgcolor="#D3FFA8"> //Chiều cao và màu nền của khung trong khung chèn ở trên
<p align="right"><strong><font face="Arial" color="#006600">Số câu bạn trả lời đúng:</font></strong></td> //Thông số dòng chữ ,bạn có thể chỉnh sửa ở chế độ Design
<td height="25"><p><input type="text" name="p" size="24"></td>
</tr>
<tr>
<td height="17" bgcolor="#D3FFA8"> //Tương tự ở trên
<p align="right"><strong><font face="Arial" color="#006600">Những câu bị sai:</font></strong></td>
<td height="17"><p><textarea name="T2" rows="3" cols="24" wrap="virtual"></textarea></td>
</tr>
<tr>
<td height="25" bgcolor="#D3FFA8">
<p align="right"><strong><font face="Arial"> <font color="#006600">Tỉ lệ phần trăm mà
bạn
đạt:</font></font></strong></td>
<td height="25"><input type="text" name="q" size="8"></td>
</tr> </table>
</form>
</td>
</tr>
</table>
</center></div>
<form method="POST"><div align="center"><center><p> //Tạo form chứa hai button làm lại và button hiển thị kết quả
<script>
var wrong=0
for (e=0;e<=2;e++)
document.result[e].value=""
var results=document.cookie.split(";")
for (n=0;n<=results.length-1;n++){
if (results[n].charAt(1)=='q')
parse=n
}
var incorrect=results[parse].split("=")
incorrect=incorrect[1].split("/")
if (incorrect[incorrect.length-1]=='b')
incorrect=""
document.result[0].value=totalquestions-incorrect.length+" out of "+totalquestions
document.result[2].value=(totalquestions-incorrect.length)/totalquestions*100+"%"
for (temp=0;temp<incorrect.length;temp++)
document.result[1].value+=incorrect[temp]+", "
</script>
//Đoạn script trên giúp hiển thị tỉ lệ % bạn trả lời đúng
<input type="button" value="Làm lại" name="B1" onClick="history.go(-1)"> //Chèn button làm lại
<input type="button" value="Kết quả" name="B2" onClick="showsolution()"></p> //Chèn button thực hiện lệnh mở bảng kết quả
</center></div>
</form>
<p id="footnote" align="center">
Giao diện chính của "Bài tập" (khi chạy tập tin A: oanhonhopxacdinhthanhphanhonhop2kimloai.htm)
Khi nhấn nút "*"
Khi nhấn nút "Show Answer"
Chúcd Vui!!!!
Theo bantincongnghe