ThichCode.NET: Thuật toán làm bài trắc nghiệm đơn giản với Javascript + HTML ThichCode.NET: Thuật toán làm bài trắc nghiệm đơn giản với Javascript + HTML
ThichCode.NET

My blog

articles about technology, tricks, programming, ... from practical experience.
Thuật toán làm bài trắc nghiệm đơn giản với Javascript + HTML

Thuật toán làm bài trắc nghiệm đơn giản với Javascript + HTML

Chào các bạn, lâu quá mình không viết bài mới. Hôm nay mình sẽ viết bài viết chia sẻ thủ thuật làm trắc nghiệm đơn giản với javascript + html vì có bạn inbox hỏi mình cách làm đơn giản nhất (ở đây mình chuyên dùng jquery vì nó như là tất yếu, các bạn nếu không muốn nhúng jquery mà chỉ dùng javascript thì để lại bình luận bên dưới nhé).

Chào các bạn, lâu quá mình không viết bài mới. Hôm nay mình sẽ viết bài viết chia sẻ thủ thuật làm trắc nghiệm đơn giản với javascript + html vì có bạn inbox hỏi mình cách làm ĐƠN GIẢN NHẤT  (ở đây mình chuyên dùng jquery vì nó như là tất yếu, các bạn nếu không muốn nhúng jquery mà chỉ dùng javascript thì để lại bình luận bên dưới nhé).

PHÂN TÍCH : Mình dùng một chuỗi bao gồm câu hỏi và câu trả lời, trong đó các câu hỏi tách nhau bởi ký tự |, trong khi đó trong câu hỏi có các câu trả lời sẽ được tách nhau bởi dấu ; (trong đó câu trả lời đúng sẽ có ký tự [ ở đầu câu). Với câu trúc như vậy, bạn có thể cho bao nhiêu câu hỏi và bao nhiêu câu trả lời cũng được. Các bạn có thể soi code sẽ hiểu. Tương tự, nếu áp dụng cho trắc nghiệm với TOÁN - LÝ - HÓA, các bạn có thể dùng hình ảnh bằng câu trả lời thì sẽ ra được bố cục đẹp hơn. Mình thấy cái này đơn giản nên không code thêm. Bạn nào mà không làm được thì để lại bình luận bên dưới nhé. CHÚC CÁC BẠN THÀNH CÔNG !

P/S : Màu vàng là câu trả lời của bạn. Màu đỏ là câu trả lời đúng.

17 comments:

  1. ban oi huong dan minh nhung voi duoc kg
    cam on

    ReplyDelete
  2. cảm ơn bạn đã chia sẻ!

    ReplyDelete
  3. He he. Bạn chọn tất cả, kiểu gì cũng đúng cả câu

    ReplyDelete
  4. co the lam cho no chi chon 1 dap an trong 4 dap an duoc kg ad

    ReplyDelete
  5. em đang tâp làm 1 trang web trắc nghiệm tính cách nhưng em không thể viết đươc code này. Em mày mò thì em lam được code trắc nghiệm IQ đúng sai còn code trắc nghiệm này thì em không thể nào làm được. Em mong anh giúp em :
    anh viết dùm em code php hay html thành 1 bài hoành chỉnh luôn nhé!
    em định làm trang như sau:
    câu hỏi:
    1.bạn thích màu gì?
    a.đỏ
    b.đen
    c. trắng
    d. hồng
    2. bạn thích hoa gi?
    a. hoa hồng.
    b.hoa bụt
    c. hoa loa kèn
    d.hoa cúc

    kết quả

    đóa là câu hỏi và câu trả lời
    nếu chọn a thì được 1 điểm chon b thì được 2 điểm c 3 điểm d 4 điểm..
    ở mỗi câu trả lời có nút chọn.sau khi chọn song nhấn vào kết quả
    nếu tổng số điểm nhỏ hơn hoặc bằng 2 thì đưa ra đáp án z
    nếu lớn hơn 2 nhỏ hơn hoặc bang 4 thi ra ket quả x
    nếu lớn hơn 4 nhỏ hơn hoặc bằng 6 thì ra kết quả v
    nếu lớn hơn 6 thì ra kết b
    trong đóa z là bạn là người cá tính
    x bạn là người độc lập
    v ban la người cô độc
    b bạn là người chính chắn
    các kết quả đua ra màng hình

    thật sự em rất đam mê về cái này.. nhưng kiến thức của em không thể lam được mong giúp em!em cảm ơn anh vô cùng
    các anh cứ viết bai hoành chỉnh. anh chạy thử luôn nhé!
    em xin cảm ơn

    ReplyDelete
    Replies
    1. Bạn copy nguyên đoạn code bên dưới rồi dán vào http://www.thichcode.net/p/test-javascrip-online.html để test với chấm điểm nhé. Ở đây mình mạc định A - B - C - D lần lượt là 1 - 2 - 3 - 4 điểm. Code có thêm biến là tong_so_diem. code khá đơn giản, bạn soi code ko hiểu thì inbox trực tiếp cho mình :)

      //Code by ThichCode.NET
      <div id="noi_dung_de" style='display:none;'>
      Nội dung nào sau đây thể hiện quyền bình đẳng trong lĩnh vực hôn nhân và gia đình;[Cùng đóng góp công sức để duy trì đời sống phù hợp với khả năng của mình;Tự do lựa chọn nghề nghiệp phù phợp với khả năng của mình;Thực hiện đúng các giao kết trong hợp đồng lao động;Đảm bảo quyền lợi hợp pháp của người lao động.|
      Điều nào sau đây không phải là mục dích của hôn nhân:;xây dựng gia đình hạnh phúc;củng cố tình yêu lứa đôi;tổ chức đời sống vật chất của gia đình;[thực hiện đúng nghĩa vụ của công dân đối với đất nước
      </div>
      <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
      <script>
      //CODE BY THICHCODE.NET
      var nd = $("#noi_dung_de").html();
      var cau_hoi = nd.split('|');
      var html = ""; var tra_loi_dung = 0;
      for(var i = 0;i<cau_hoi.length;i++)
      {
      var chi_tiet = cau_hoi[i].split(';');
      //alert(chi_tiet[i]);
      for(var j=0;j<chi_tiet.length;j++)
      {

      if (j==0) html += "<tr><td><b>Câu " + (i+1) + ":</b></td><td> <b>" + chi_tiet[j].trim() + "</b></td></tr>";
      else
      {
      html += "<tr><td></td><td id='" + (i + 1 + String.fromCharCode(64 + j)) + "'><input type='checkbox' name='" + (i + 1 + String.fromCharCode(64 + j)) + "' value='" + chi_tiet[j].trim() +"'> " + String.fromCharCode(64 + j) + ". " + chi_tiet[j].replace("[","").trim() + "</td></tr>";
      }
      }
      }

      $("#noi_dung_de").empty().append("<table>" + html + "</table><input type='submit' value='Trả lời xong' id='tra_loi_xong'>").fadeIn();
      $("#noi_dung_de input").click(function(){
      //Lấy tên của checkbox
      var id = $(this).attr("name");

      //Đổi màu nền câu trả lời

      if ($(this).is(":checked")) $("td#" + id).css("background-color","yellow");
      else $("td#" + id).css("background-color","");
      });

      var tong_so_diem = 0;
      $("#tra_loi_xong").click(function(){
      $('#noi_dung_de input').each(function () {
      var id = $(this).attr("name");
      var ctl = $(this).val();

      //Hiển thị câu đúng với nền là màu đỏ
      if (ctl[0] == '[')
      {
      //alert($("td#" + id).css("background-color"));
      if ($("td#" + id).css("background-color") == "rgb(255, 255, 0)")
      {
      tra_loi_dung++;
      var char_first = $("td#" + id).text().trim().substring(0,1);
      switch(char_first)
      {
      case 'A': {tong_so_diem += 1; break; }
      case 'B': {tong_so_diem += 2; break; }
      case 'C': {tong_so_diem += 3; break; }
      case 'D': {tong_so_diem += 4; break; }
      default: {break;}
      }
      }
      else
      {
      $("td#" + id).css("background-color","red");
      }
      }
      });
      $("#noi_dung_de").append("<p>Trả lời đúng :" + (tra_loi_dung < 0 ? "0" : tra_loi_dung) + " câu</p>");
      $("#noi_dung_de").append("<p>Số điểm của bạn là : " + tong_so_diem + "</p>");
      $("#tra_loi_xong").fadeOut();
      });
      </script>

      Delete
  6. cho mình hỏi cách nhúng nó vào 1 trang mới trong blogspot thì làm thế nào ak!

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Try to use the Dịch Vụ Làm Visa Trọn Gói Viseca offers a wide selection of Mastercard and Visa credit cards. Read more online now and make a free comparison.

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Code hay tuyệt. Bạn giúp cho code thêm các tính năng:
    1. Mỗi câu hỏi chỉ có 1 phương án đúng, nếu chọn từ 2 phương án trở lên là bị loại ( 0 điểm )
    2. Thêm giới hạn thời gian, chẳng hạn hết 45 phút thì báo hết giờ, không cho trả lời nữa

    Xem Demo của mình vì môn toán nên phải dùng hình ảnh bị lặp "Câu số" http://anhlevan.weebly.com/gt12c3_de01.html

    ReplyDelete
  11. Mong bạn giúp gởi code qua email này

    ReplyDelete
  12. bạn ơi nếu ko nhúng jquery mà chỉ dùng javascript thì làm sao ạ

    ReplyDelete
  13. Bác cho em hỏi, giờ em muốn làm bài trác nghiệm theo form của bác, nhưng muốn ẩn đáp án ở dưới mỗi câu hỏi, sau khi người làm ấn trả lời xong Đáp án mới hiện ra thì làm như nào ạ? Với cả nếu muốn chọn mỗi câu chỉ được chọn 1 đáp án thì sẽ làm như nào vậy ạ?
    Em cảm ơn trước!

    ReplyDelete
  14. tạo trắc nghiệm html tại https://huonghaphoi.blogspot.com/2018/11/tao-trac-nghiem.html

    ReplyDelete

Most read

Latest