"Thủ thuật tạo bài trắc nghiệm trên blog"
Một ứng dụng khá hay cho các blogger dùng để thiết kế bài test trong học tập mà mình học được từ Fandung, đó là thiết kế một bài trắc nghiệm với 4 đáp án để chọn. Đặc biệt với thủ thuật này thì các bạn có thể check đáp án ngay trên đó, số đáp án đúng sẽ hiện ra ngay trên blog giống như bạn làm bài tiếng anh trên trang tienganhhangngay.Ở đây mặc định thiết lập câu hỏi dạng có 4 đáp án để chọn A, B, C, D cho một câu hỏi, tuy nhiên bạn cũng có thể thiết kế câu hỏi dạng ít đáp án hơn hoặc nhiều đáp án hơn bằng cách giảm bớt hay tăng thêm số câu hỏi trong file Javascript (trac-nghiem1.js)
Hình minh họa
Và sau khi bạn chọn đáp án xong, bạn nhấn "Xem đáp án" để kiểm tra đáp án thì hộp thoại số đáp án đúng của bạn hiện ra như dưới
Trong đó số đáp án đúng là những câu có màu đỏ
☼ Các bước để thực hiện thủ thuật này:
1. Đăng nhập và vào bố cục blog
2. Chọn chỉnh sữa HTML (Edit HTML)
3. Hãy dán đoạn code sau lên trên thẻ </head> hoặc phía dưới thẻ <head>
<script language="javascript" src="http://data-traidatmui.appspot.com/scripts/trac_nghiem.js"></script>
4. Save template lại
5. Tùy chỉnh File Javascript
Ở đây file Javascript trac-nghiem1.js của mình chỉ cho phép trắc nghiệm dưới 40 câu, nếu các bạn muốn thiết kế nhiều câu hỏi hơn thì hãy vào đây download file Javascript về và dùng notepad mở lên, tiếp đó tìm đến code như dưới và tiến hành điều chỉnh lại. Bạn tìm đến code sau và chỉnh sửa
oElement = document.getElementById("choice40A");
if (oElement) {
Total=Total+1
document.getElementById("choice40A").disabled=true;
if ((document.getElementById("choice40A").value==document.getElementById("text40").value)&&(document.getElementById("choice40A").checked)) correct=correct+1;
document.getElementById("choice40B").disabled=true;
if ((document.getElementById("choice40B").value==document.getElementById("text40").value)&&(document.getElementById("choice40B").checked)) correct=correct+1;
document.getElementById("choice40C").disabled=true;
if ((document.getElementById("choice40C").value==document.getElementById("text40").value)&&(document.getElementById("choice40C").checked)) correct=correct+1;
document.getElementById("choice40D").disabled=true;
if ((document.getElementById("choice40D").value==document.getElementById("text40").value)&&(document.getElementById("choice40D").checked)) correct=correct+1;
if ((document.getElementById("choice40A").value==document.getElementById("text40").value)) document.getElementById("C40A").style.color='red';
if ((document.getElementById("choice40B").value==document.getElementById("text40").value)) document.getElementById("C40B").style.color='red';
if ((document.getElementById("choice40C").value==document.getElementById("text40").value)) document.getElementById("C40C").style.color='red';
if ((document.getElementById("choice40D").value==document.getElementById("text40").value)) document.getElementById("C40D").style.color='red';
}
if (oElement) {
Total=Total+1
document.getElementById("choice40A").disabled=true;
if ((document.getElementById("choice40A").value==document.getElementById("text40").value)&&(document.getElementById("choice40A").checked)) correct=correct+1;
document.getElementById("choice40B").disabled=true;
if ((document.getElementById("choice40B").value==document.getElementById("text40").value)&&(document.getElementById("choice40B").checked)) correct=correct+1;
document.getElementById("choice40C").disabled=true;
if ((document.getElementById("choice40C").value==document.getElementById("text40").value)&&(document.getElementById("choice40C").checked)) correct=correct+1;
document.getElementById("choice40D").disabled=true;
if ((document.getElementById("choice40D").value==document.getElementById("text40").value)&&(document.getElementById("choice40D").checked)) correct=correct+1;
if ((document.getElementById("choice40A").value==document.getElementById("text40").value)) document.getElementById("C40A").style.color='red';
if ((document.getElementById("choice40B").value==document.getElementById("text40").value)) document.getElementById("C40B").style.color='red';
if ((document.getElementById("choice40C").value==document.getElementById("text40").value)) document.getElementById("C40C").style.color='red';
if ((document.getElementById("choice40D").value==document.getElementById("text40").value)) document.getElementById("C40D").style.color='red';
}
Code trên là để test đến câu 40 hỏi thôi, nếu bạn muốn thêm nhiều câu hơn 40 câu: 41, 42 câu... thì hãy thêm code tương tự trên vào sau code trên và điều chỉnh số 40 thành 41, 42 ...bao nhiêu tùy bạn, chỉ nên chỉnh số các phần còn lại giữ nguyên, mỗi câu là một đoạn. Ở đây không phải số câu trong file javascript phải bằng với số câu hỏi bạn thiết lập mà bạn sử dụng bao nhiêu cũng được nhưng phải nhỏ hơn số câu trong file Javascript thì mới test được.
6. Tiếp theo là phần thiết kế câu hỏi
Bạn hãy vào phần soạn thảo và tiến hành làm bài trắc nghiệm, bạn dán code bên dưới vào khung nội dung soạn thảo và chỉnh sửa lại nội dung cho đúng với bài trắc nghiệm của bạn.
1. Câu hỏi 1.
<input style="visibility: hidden; width: 1px;" value="D" id="text1">
<input id="choice1A" value="A" name="choice1" type="radio"><label id="C1A">(A) Đáp án A</label>
<input id="choice1B" value="B" name="choice1" type="radio"><label id="C1B">(B) Đáp án B</label>
<input id="choice1C" value="C" name="choice1" type="radio"><label id="C1C">(C) Đáp án n C</label>
<input id="choice1D" value="D" name="choice1" type="radio"><label id="C1D">(D) Đáp án D</label>
2. Câu hỏi 2.
<input style="visibility: hidden; width: 1px;" value="A" id="text2"><br>
<input id="choice2A" value="A" name="choice2" type="radio"><label id="C2A">(A) Đáp án A</label>
<input id="choice2B" value="B" name="choice2" type="radio"><label id="C2B">(B) Đáp án B</label>
<input id="choice2C" value="C" name="choice2" type="radio"><label id="C2C">(C) Đáp án C</label>
<input id="choice2D" value="D" name="choice2" type="radio"><label id="C2D">(D) Đáp án D</label>
3. Câu hỏi 3.
<input style="visibility: hidden; width: 1px;" value="B" id="text3"><br>
<input id="choice3A" value="A" name="choice3" type="radio"><label id="C3A">(A) Đáp án A</label>
<input id="choice3B" value="B" name="choice3" type="radio"><label id="C3B">(B) Đáp án B</label>
<input id="choice3C" value="C" name="choice3" type="radio"><label id="C3C">(C) Đáp án C</label>
<input id="choice3D" value="D" name="choice3" type="radio"><label id="C3D">(D) Đáp án D</label>
4. Câu hỏi 4.
<input style="visibility: hidden; width: 1px;" value="A" id="text4"><br>
<input id="choice4A" value="A" name="choice4" type="radio"><label id="C4A">(A) Đáp án A</label>
<input id="choice4B" value="B" name="choice4" type="radio"><label id="C4B">(B) Đáp án B</label>
<input id="choice4C" value="C" name="choice4" type="radio"><label id="C4C">(C) Đáp án C</label>
<input id="choice4D" value="D" name="choice4" type="radio"><label id="C4D">(D) Đáp án D</label>
5. Câu hỏi 5.
<input style="visibility: hidden; width: 1px;" value="B" id="text5"><br>
<input id="choice5A" value="A" name="choice5" type="radio"><label id="C5A">(A) Đáp án A</label>
<input id="choice5B" value="B" name="choice5" type="radio"><label id="C5B">(B) Đáp án B</label>
<input id="choice5C" value="C" name="choice5" type="radio"><label id="C5C">(C) Đáp án C</label>
<input id="choice5D" value="D" name="choice5" type="radio"><label id="C5D">(D) Đáp án D</label>
<input language="javascript" id="button1" onclick="button1_onclick();" value="Xem đáp án" name="button1" type="button">
<input style="visibility: hidden; width: 1px;" value="D" id="text1">
<input id="choice1A" value="A" name="choice1" type="radio"><label id="C1A">(A) Đáp án A</label>
<input id="choice1B" value="B" name="choice1" type="radio"><label id="C1B">(B) Đáp án B</label>
<input id="choice1C" value="C" name="choice1" type="radio"><label id="C1C">(C) Đáp án n C</label>
<input id="choice1D" value="D" name="choice1" type="radio"><label id="C1D">(D) Đáp án D</label>
2. Câu hỏi 2.
<input style="visibility: hidden; width: 1px;" value="A" id="text2"><br>
<input id="choice2A" value="A" name="choice2" type="radio"><label id="C2A">(A) Đáp án A</label>
<input id="choice2B" value="B" name="choice2" type="radio"><label id="C2B">(B) Đáp án B</label>
<input id="choice2C" value="C" name="choice2" type="radio"><label id="C2C">(C) Đáp án C</label>
<input id="choice2D" value="D" name="choice2" type="radio"><label id="C2D">(D) Đáp án D</label>
3. Câu hỏi 3.
<input style="visibility: hidden; width: 1px;" value="B" id="text3"><br>
<input id="choice3A" value="A" name="choice3" type="radio"><label id="C3A">(A) Đáp án A</label>
<input id="choice3B" value="B" name="choice3" type="radio"><label id="C3B">(B) Đáp án B</label>
<input id="choice3C" value="C" name="choice3" type="radio"><label id="C3C">(C) Đáp án C</label>
<input id="choice3D" value="D" name="choice3" type="radio"><label id="C3D">(D) Đáp án D</label>
4. Câu hỏi 4.
<input style="visibility: hidden; width: 1px;" value="A" id="text4"><br>
<input id="choice4A" value="A" name="choice4" type="radio"><label id="C4A">(A) Đáp án A</label>
<input id="choice4B" value="B" name="choice4" type="radio"><label id="C4B">(B) Đáp án B</label>
<input id="choice4C" value="C" name="choice4" type="radio"><label id="C4C">(C) Đáp án C</label>
<input id="choice4D" value="D" name="choice4" type="radio"><label id="C4D">(D) Đáp án D</label>
5. Câu hỏi 5.
<input style="visibility: hidden; width: 1px;" value="B" id="text5"><br>
<input id="choice5A" value="A" name="choice5" type="radio"><label id="C5A">(A) Đáp án A</label>
<input id="choice5B" value="B" name="choice5" type="radio"><label id="C5B">(B) Đáp án B</label>
<input id="choice5C" value="C" name="choice5" type="radio"><label id="C5C">(C) Đáp án C</label>
<input id="choice5D" value="D" name="choice5" type="radio"><label id="C5D">(D) Đáp án D</label>
<input language="javascript" id="button1" onclick="button1_onclick();" value="Xem đáp án" name="button1" type="button">
Các code màu đỏ đậm ở trên chính là đáp án đúng của câu hỏi đó. Ở đây chỉ có 5 câu hỏi nếu bạn muốn thêm nhiều câu hỏi nữa thì hãy thêm các code tương tự như dưới vào sau câu hỏi 5 trên và chỉnh sửa lại như sau.
6. Câu hỏi 6.
<input style="visibility: hidden; width: 1px;" value="C" id="text6"><br>
<input id="choice6A" value="A" name="choice6" type="radio"><label id="C6A">(A) Đáp án A</label>
<input id="choice6B" value="B" name="choice6" type="radio"><label id="C6B">(B) Đáp án B</label>
<input id="choice6C" value="C" name="choice6" type="radio"><label id="C6C">(C) Đáp án C</label>
<input id="choice6D" value="D" name="choice6" type="radio"><label id="C6D">(D) Đáp án D</label>
<input style="visibility: hidden; width: 1px;" value="C" id="text6"><br>
<input id="choice6A" value="A" name="choice6" type="radio"><label id="C6A">(A) Đáp án A</label>
<input id="choice6B" value="B" name="choice6" type="radio"><label id="C6B">(B) Đáp án B</label>
<input id="choice6C" value="C" name="choice6" type="radio"><label id="C6C">(C) Đáp án C</label>
<input id="choice6D" value="D" name="choice6" type="radio"><label id="C6D">(D) Đáp án D</label>
Hãy chỉnh sữa code màu xám theo đúng trình tự thì nó mới test được, ví dụ: nếu câu hỏi đó là câu thứ 6 thì chỉnh chúng lại giống như trên, còn nếu nó là câu số 7 , 8... thì chỉnh các code màu xám trên thành số 7, 8 ...
Chúc bạn thành công
0 nhận xét:
Đăng nhận xét