[ 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.org
Xem 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> :

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.

30

: 1 thủ thuật hữu ích cho những trang blog chuyên về trắc nghiệm. T đang làm 1 trang blog cho lớp sư phạm. Chắc chắn sẽ xử dụng bài này. ^.^
: đúng như mọi người nói..thời kỳ hoang kim vủa bác dũng đến rùi :D
: Bởi thế anh đang chuẩn bị tuyển nhân sự đây :D
: có yêu cầu gì ko để em còn biết đường đăng ký :D
: ờ :D, có chút thôi, để anh soạn sau
: Bạn thật tuyệt vời, xin cảm ơn Bạn rất nhiều.
Liệu với blogspot mình có thể tạo dạng trắc nghiệm giống với luyentienganh.com không Bạn, hình như cái đó phải có 2 trang phải không Bạn?
: hay qua hen
: chắc a Dũng định mở blog ôn luyện thi ;))
: @Hoàng Long : trang luyentienganh.com sao mình vô ko đc.

- còn với trang luyenthianhvan.org thì nó cũng là blogspot như của tụi mình, đều có thể làm thủ thuật này trên blogspot.
: @Phan Dũng: Sao bạn lại không vô được nhỉ? Nó giống hệt như cái này nè Dũng ơi, http://englishenglish.com/englishtest.htm
Bạn thử xem liệu có thực hiện được trên blogspot ko nhé!
Thanks Bạn nhiều
: @Hoàng Long : sorry mình vô đc rồi, tại ko gõ www nó ko chịu vào.

Cái này không biết có làm được ko nữa, tại bên trang luyentienganh.com nó sử dụng ngôn ngữ php chứ không phải html như mình.
: Bạn cố gắng xem hộ mình xem với Dũng nhé, Cảm ơn nhiều
: Chắc mấy hôm nay Dũng đang bận rồi, Mình luôn chờ sự trợ giúp của Bạn!
Xin cảm ơn nhiều!
: Sorry Long nha, mình sẽ sớm test cho bạn
: @Long :Mình đã test cho bạn, nhưng đang gặp 1 lỗi nhỏ chưa giải quyết được.

Nhưng theo mình thấy, nếu bạn dùng cách này, thì 1 bài test bạn sẽ phải có tới 2 file HTML, rồi mỗi bài phải tạo lại 1 file JS riêng nữa.

Như vậy sẽ cực vô cùng, và phải sử dụng rất nhiều file JS.

Theo mình thấy bạn cứ xài theo cách kia, đơn giản hơn, và cũng nhẹ hơn nhiều.
: anh Phan Dũng , cho em xin file trac-nghiem.js với , bây giờ e mới biết cách làm này, k biết có muộn k
: anh phan dung oi
có thể chỉnh sửa cho nó như này k
những câu sai thì to màu đỏ và những câu đúng thì tô màu xanh
như vậy nó dễ nhìn hơn
: Anh PD ơi lúc e đăng bài nó báo thẻ Input bị hỏng là sao zậy anh
: Dũng ơi cái này có thêm bộ đếm thời gian được không dũng...

Giống trang này nè

http://www.phathoc.net/giao-duc/trac-nghiem/525459.aspx
: Dũng ơi tham khảo cái này nhé, mình thấy rất hay ... nếu làm được cái này nữa thì tuyệt vời lắm đó...
http://www.gdpthoaihai.org/vi/taotracnghiem/index.html

có gì email cho mình nha nguoiaolam@yahoo.com
: hay quá anh Dũng ơi
: sao em đưa vào k được vậy anh? hướng dẫn cho em với
: Anh Dũng ơi, làm thế nào để nick của anh có chữ "ADMIN" mỗi khi bình luận vậy, chỉ dạy em với nhé. Thanks anh nhiều
: bạn gửi hộ file vào mail dc không : daytoan2011@gmail.com
: Cho mình xin file với Ad ơi. Thank add nhiều.
Mail mình: lenam.math@gmail.com
: file trac-nghiem.js die rồi ạ
: File .js bị die rồi. Mình làm được bài trắc nghiệm nhưng ko hiện àu đỏ mà hiện kq ở dưới, ai cần comment nhé. còn ai down được file js rồi thì share đi ạ. Thanks
http://www.hoctiengtrungmoingay.com/2017/08/phan-biet-yidian-va-youdian-test-01.html
: [quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
: mình có js, bạn nào cần liên hệ huongtamky1996@gmail.com
: Đã nhận folder của Hương tk nhưng không biết dùng file nào đây: basic, calendar, dropzon, jquery. Đã upload lên Dropbox jquery để lấy file js nhưng nội dung không có phần nào giống như hướng dẫn của Fandung.