Trắc nghiệm

Tạo bảng trắc nghiệm với các lựa chọn bằng javascript

by baivong

HTML

<form id="q_a">
  <h2>Trắc nghiệm</h2>
  <div id="answers"></div>
  <hr />
  <input id="checkResult" type="submit" value="Xác nhận" />
  <input id="resetResult" type="button" value="Làm lại" />
</form>
<div id="result"></div>
<button id="showResult">Xem đáp án</button>

CSS

#showResult,
#resetResult {
  display: none;
}

input[type="submit"],
input[type="button"],
button {
  cursor: pointer;
}

.qContent {
  counter-increment: qIndex;
  font-weight: bold;
  color: #444;
}

.qContent:before {
  content: "Q" counter(qIndex)". ";
  color: #888;
}

.qContent:after {
  content: " ?";
}

li {
  list-style-type: lower-alpha;
  cursor: pointer;
  line-height: 22px;
  height: 22px;
}

.items {
  display: none;
}

.items + label:after {
  content: " ";
  display: block;
  position: absolute;
  height: 20px;
  width: 20px;
  border: 1px solid white;
  margin: 0;
  padding: 0;
  top: 1px;
  left: -26px;
  border-radius: 50%;
}

li:hover label:after {
  border-color: orange;
}

li:hover input:disabled + label:after {
  border-color: white;
}

.items:checked + label {
  color: #0093FC;
}

.items:checked + label:after {
  border-color: #0093FC;
}

.correct .items:checked + label {
  color: green;
}

.correct .items:checked + label:after {
  border-color: green;
}

.wrong .items:checked + label {
  color: red;
}

.wrong .items:checked + label:after {
  border-color: red;
}

.items.key + label {
  color: #B500FF;
}

.items.key + label:after {
  border-color: #B500FF;
}

label {
  display: block;
  position: relative;
  cursor: pointer;
}

#checkResult {
  color: #0093FC;
}

#resetResult {
  color: red;
}

#showResult {
  color: #B500FF;
}

JavaScript

// Q&A by Zzbaivong (devs.forumvi.com)
(function($) {
  "use strict";

  var data = [{
    "question": "q1q1q1q1q1q1q1",
    "options": ["aaaaaaaaaa", "bbbbbbbbbb", "cccccccccc", "1111111111"],
    "answer": "3"
  }, {
    "question": "q2q2q2q2q2q2q2",
    "options": ["2222222222", "bbbbbbbbbb", "cccccccccc", "dddddddddd"],
    "answer": "0"
  }, {
    "question": "q3q3q3q3q3q3q3",
    "options": ["aaaaaaaaaa", "3333333333", "cccccccccc", "dddddddddd"],
    "answer": "1"
  }, {
    "question": "q4q4q4q4q4q4q4",
    "options": ["aaaaaaaaaa", "bbbbbbbbbb", "4444444444", "dddddddddd"],
    "answer": "2"
  }];

  var $form = $("#q_a"),
    $answers = $("#answers"),
    $result = $("#result"),
    $checkResult = $("#checkResult"),
    $showResult = $("#showResult"),
    $reset = $("#resetResult"),
    reset = true,
    $group, $item;

  // Tạo bảng trắc nghiệm
  $.each(data, function(index, value) {

    $group = $("<ul>", {
      "id": "q" + index,
      "class": "question"
    }).appendTo($answers);

    // Nội dung câu hỏi
    $group.before('<p class="qContent">' + value.question + '</p>');

    // Tạo danh sách các lựa chọn
    $item = [];
    $.each(value.options, function(sub_index, sub_value) {
      $item[sub_index] = '<li><input id="q' + index + 'a' + sub_index + '" class="items" type="radio" name="answer' + index + '" value="' + sub_index + '"><label for="q' + index + 'a' + sub_index + '">' + sub_value + '</label></li>';
    });
    $group.html($item.join(""));

  });

  // Hiển thị kết quả
  $form.on("submit", function(e) {
    e.preventDefault();
    // Kiểm tra các đáp án đã chọn
    $.each($(this).serializeArray(), function(index, value) {

      var check = value.name.match(/\d/)[0],
        $q = $("#q" + check);

      $q.removeClass("wrong correct");
      if (data[check].answer !== value.value) {
        $q.addClass("wrong");
      } else {
        $q.addClass("correct");
      }

    });

    // Hiển thị các thông số đánh giá kết quả
    var wrong =...