[ Yêu cầu ] : Tạo bài trắc nghiệm đơn giản cho blog
Theo yêu cầu của bạn Hoàng Long[FD's BlOg] - Bài viết này sẽ hướng dẫn các bạn tạo các bài trắc nghiệm đơn giản cho blogspot, với việc trắc nghiệm và check kết quả trực tiếp trên blog.
Tham khảo từ blog : luyenthianhvan.orgXem demo : LIVE DEMO
Mặc định thủ thuật này sẽ chỉ có 4 đáp án (A, B, C, D ) cho 1 câu hỏi. Để đồng nhất thì ta nên để mặc định như vậy, tức là các câu hỏi có số đáp án để chọn là giống nhau, như thế ta có thể dùng cho nhiều bài trắc nghiệm khác nhau. Tuy nhiên bạn cũng có thể thêm hoặc bớt số đáp án (tùy chỉnh trong file Javascript : trac-nghiem.js)
Hình ảnh minh họa :
Sau khi chọn xong nhấp vào button "Show Answers" và sẽ nhận được hộp thoại thông báo số câu trả lời đúng của bạn:
Và các đáp án đúng sẽ là các đáp án màu đỏ (sau khi đã nhấp chọn xem kết quả)
☼ Sau đây là các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào sau thẻ <head> hoặc trước thẻ </head> :
<script language="javascript" src="http://data.fandung.com/blog/demo/trac-nghiem/trac-nghiem.js"></script>
4. Save template.
Lưu ý: trong file JS trên, chỉ cho phép trắc nghiệm dưới 20 câu, nếu nhiều hơn 20 câu thì nó sẽ chỉ test được tới câu 20, muốn thêm số câu hỏi thì bạn phải thêm các đoạn code tương tự vào file JS ở trên.
- Muốn thêm thành 30 câu hoặc 40 câu thì các bạn làm như sau :
+ dùng NotePad mở file trac-nghiem.js lên, cuối đoạn code của file bạn sẽ thấy dòng code này :
oElement = document.getElementById("choice20A");
if (oElement) {
Total=Total+1
document.getElementById("choice20A").disabled=true;
if ((document.getElementById("choice20A").value==document.getElementById("text20").value)&&(document.getElementById("choice20A").checked)) correct=correct+1;
document.getElementById("choice20B").disabled=true;
if ((document.getElementById("choice20B").value==document.getElementById("text20").value)&&(document.getElementById("choice20B").checked)) correct=correct+1;
document.getElementById("choice20C").disabled=true;
if ((document.getElementById("choice20C").value==document.getElementById("text20").value)&&(document.getElementById("choice20C").checked)) correct=correct+1;
document.getElementById("choice20D").disabled=true;
if ((document.getElementById("choice20D").value==document.getElementById("text20").value)&&(document.getElementById("choice20D").checked)) correct=correct+1;
if ((document.getElementById("choice20A").value==document.getElementById("text20").value)) document.getElementById("C20A").style.color='red';
if ((document.getElementById("choice20B").value==document.getElementById("text20").value)) document.getElementById("C20B").style.color='red';
if ((document.getElementById("choice20C").value==document.getElementById("text20").value)) document.getElementById("C20C").style.color='red';
if ((document.getElementById("choice20D").value==document.getElementById("text20").value)) document.getElementById("C20D").style.color='red';
}
+ dòng code trên là để kiểm tra câu hỏi số 20, bây giờ nếu bạn muốn thêm thành 21 câu hoặc 22 câu thì các bạn thêm đoạn code tương tự như trên vào ngày sau đoạn code của câu 20, và sửa số 20 thành 21, 22,... 30, ..., ...40,... mỗi câu là 1 đoạn. Như thế ta sẽ có 1 thư viện test cho tới câu 30 hoặc 40 tùy theo bạn thêm vào.
+ Không phải ta thêm trong file JS tới câu 40 là bắt buộc ở phần bài trắc nghiệm cũng phải 40 câu hỏi, bao nhiêu câu trong bài test đều được, nhưng phải nhỏ hơn số câu trong thư viện file trac-nghiem.js .
- Một điều lưu ý nữa là : host 110mb.com của mình sắp hết bandwith (hiện tại đã hơn 50%) vì thế cho chắc ăn các bạn nên download file trac-nghiem.js về và up lên host riêng của mình.
5. Sau khi thực hiện xong các bước ở trên , bạn vào phần soạn thảo bài viết và dán code bên dưới vào để thực hiện 1 bài trắc nghiệm :
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 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 kết quả" name="button1" type="button">
- Chú ý : các code màu đỏ chính là code xác định đáp án đúng cho câu hỏi đó.
- Trên đó mình chỉ đưa ra 5 câu, muốn thêm vào nữa thì các bạn cứ thêm các code tương tự như bên dưới :
6. Câu hỏi 6.
<input style="visibility: hidden; width: 1px;" value="B" 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>
- Chú ý code màu xanh, thay đổi nó tuần tự theo câu các câu mà bạn thêm vào.
Chúc các bạn thành công.
Comments[ 0 ]
Đăng nhận xét