Trang chủ > Thủ thuật blog > Tạo bài trắc nghiệm cho trên blog

Tạo bài trắc nghiệm cho 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.
Demo: Tại đây
Ở đâ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ẻ hoặc phía dưới thẻ

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’;
}

Code trên là để test đến câu 40 thôi, nếu bạn muốn thêm nhiều câu hơn 41, 42 câu… thì hãy thêm code tương tự trên vào sau 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″>



2. Câu hỏi 2.
<input style="visibility: hidden; width: 1px;" value=”A” id=”text2″>




3. Câu hỏi 3.
<input style="visibility: hidden; width: 1px;" value=”B” id=”text3″>




4. Câu hỏi 4.
<input style="visibility: hidden; width: 1px;" value=”A” id=”text4″>




5. Câu hỏi 5.
<input style="visibility: hidden; width: 1px;" value=”B” id=”text5″>




<input language="javascript" id="button1" onclick="button1_onclick();" value="Xem kết quả” 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“>

<input id="choice6A” value=”A” name=”choice6” type=”radio”><label id="C6A“>(A) Đáp án A
<input id="choice6B” value=”B” name=”choice6” type=”radio”><label id="C6B“>(B) Đáp án B
<input id="choice6C” value=”C” name=”choice6” type=”radio”><label id="C6C“>(C) Đáp án C
<input id="choice6D” value=”D” name=”choice6” type=”radio”><label id="C6D“>(D) Đáp án D

Hãy chỉnh sữa code màu xanh theo đúng trình tự thì nó mới test được
Chúc bạn thành công

Chuyên mục:Thủ thuật blog
  1. Chưa có phản hồi.
  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: