Chia sẻ tiện ích blog và kiến thức xây dựng
Trang chủ
Blogger

Tiện ích tạo câu hỏi và trả lời trắc nghiệm trên Blogger

Tạo câu hỏi và trả lời trắc nghiệm
·
Vui lòng chờ 0 giây...
Cuộn xuống hoặc nhấp vào đây để chuyển đến liên kết
Chúc mừng! Liên kết được tạo

Nhân dịp này mình sẽ chia sẻ mã nguồn làm các câu hỏi trắc nghiệm sử dụng CSS, HTML, Javascript. Mình đã thiết kế giao diện giống như mô hình câu hỏi và trả lời đáp án có các tính năng sau:

  • Có khung nhập họ tên và lớp giống như hướng dẫn làm bài trắc nghiệm
  • Có bộ đếm thời gian dựa trên giờ với định dạng giờ, phút, giây
  • Hiển thị câu hỏi bằng mô hình trình chiếu để tối giản hơn
  • Có menu số câu hỏi giúp bạn dễ dàng xem các câu hỏi chưa được làm
Tiện ích tạo câu hỏi và trả lời trắc nghiệm trên Blogger
Tiện ích tạo câu hỏi và trả lời trắc nghiệm trên Blogger

Bạn có thể làm theo hướng dẫn dưới đây:

Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'TÙY CHỈNH'.

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> và dán các mã CSS sau ngay trên vào nó.

/* Multiple choice questions and answers by Giahuy.net */
.center{text-align:center}
#question-bank,.question-box{display:none}
button#start-button{width:100%;max-width:300px;padding:10px 15px;margin:20px 0;background-color:#ce2c90;color:#fff;font-size:16px;font-weight:600;border:0;outline:0;border-radius:3px;cursor:pointer}
#input-data .input-data{position:relative;padding:10px 15px;margin:25px auto;width:100%;max-width:640px;background-color:#fff;box-shadow:1px 1px 10px 1px rgb(0 0 0 / 15%);border-radius:3px;text-align:center}
#input-data .input-data input{position:relative;display:block;width:100%;padding:15px 10px;margin:15px 0;color:#444;border:1px solid #ff6bb0;border-radius:5px;outline:none}
button#start-exam{width:100%;padding:10px 15px;margin:10px 0;background-color:#ce2c90;color:#fff;font-size:14px;font-weight:600;border:0;outline:0;border-radius:5px;cursor:pointer}
.time-wrapper{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;background:#ce2c90;color:#fff;padding:15px;margin:0 auto;width:100%;font-size:14px;transition:all 0.5s}
.time-wrapper .participant-data,.time-wrapper #question-time{-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 auto;width:50%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;overflow:hidden;white-space:normal}
.time-wrapper .participant-data{text-align:left}
.time-wrapper #question-time{text-align:right}
.question-bank-wrapper{position:relative;display:block;padding:10px;border:1px solid #ddd}
.question-box{min-height:275px;-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}
.question-box form label{position:relative;display:block;margin-bottom:3px;vertical-align:middle}
.question-box form label:nth-child(1):before{position:absolute;content:"A";font-size:12px;top:5px;left:16.5px;z-index:3}
.question-box form label:nth-child(2):before{position:absolute;content:"B";font-size:12px;top:5px;left:16.5px;z-index:3}
.question-box form label:nth-child(3):before{position:absolute;content:"C";font-size:12px;top:5px;left:16.5px;z-index:3}
.question-box form label:nth-child(4):before{position:absolute;content:"D";font-size:12px;top:5px;left:16.5px;z-index:3}
.question-box form label:nth-child(5):before{position:absolute;content:"E";font-size:12px;top:5px;left:16.5px;z-index:3}
.question-box form label input{position:relative;display:inline-block;background:#fff;color:#444;width:20px;height:20px;margin:5px 10px;vertical-align:middle;border:2px solid #ce2c90;appearance:none;border-radius:50%;transition:all ease-in 0.2s}
.question-box form label input:checked{background:#ce2c90;color:#fff;transition:all ease-in 0.2s}
#show-hide-question-box::-webkit-scrollbar{width:7px;background-color:#00f7ca}
#show-hide-question-box::-webkit-scrollbar-thumb{background-color:#91979d;border-radius:5px}
#show-hide-question-box{position:absolute;display:none;background:#fff;top:0;right:0;width:100%;max-width:300px;height:100%;max-height:300px;padding:10px;overflow:hidden;overflow-y:auto;margin:0;min-height:275px;z-index:9;-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}
#show-hide-question-box.active{display:block}
.toggle-button{position:relative;display:block;background:#c1c1c1;color:#fff;padding:3px 10px;cursor:pointer}
.question-button-menu .question-button{position:relative;display:inline-block;background:#ff6bb0;color:#fff;padding:10px 15px;margin:7px 2px;cursor:pointer}
.question-button-menu .question-button.active{background:#a7a3a3}
#question-menu,.next-prev-question{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;background:#ce2c90;color:#fff;padding:15px;margin:0 auto;width:100%;font-size:14px;transition:all 0.5s}
#question-menu .next-prev-question,#question-menu .question-options,#question-menu .finish-button{-webkit-box-flex:1;-ms-flex:1 1 33%;flex:1 1 auto;width:33%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0 auto;overflow:hidden;white-space:normal}
#prev-question,#next-question{-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 auto;width:50%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;overflow:hidden;white-space:normal;cursor:pointer}
#prev-question svg,#next-question svg{width:35px;height:35px;display:inline-block;vertical-align:middle}
#prev-question svg path,#next-question svg path{fill:#fff}
button#view-questions,button#finish-questions{width:100%;max-width:300px;padding:10px 15px;margin:0 10px;background-color:#ff6bb0;color:#fff;font-size:16px;font-weight:600;border:0;outline:0;border-radius:3px;cursor:pointer}
#view-results{position:relative;display:none;padding:10px 15px;margin:25px auto;width:100%;max-width:640px;background-color:#fff;box-shadow:1px 1px 10px 1px rgb(0 0 0 / 15%);border-radius:3px;text-align:left}
#view-results .result-info{font-size:12px;font-weight:500}
@media screen and (max-width:800px){#question-menu .next-prev-question span{display:none}#question-menu .next-prev-question{margin:0 auto;text-align:center}button#view-questions,button#finish-questions{width:calc(100% - 10px);max-width:300px;padding:10px;margin:0 10px;font-size:14px}}
@-webkit-keyframes fade{from{opacity:.4}to{opacity:1}}
@keyframes fade{from{opacity:.4}to{opacity:1}}
.center{text-align:center}
#question-bank,.question-box{display:none}
button#start-button{width:100%;max-width:300px;padding:10px 15px;margin:20px 0;background-color:#ce2c90;color:#fff;font-size:16px;font-weight:600;border:0;outline:0;border-radius:3px;cursor:pointer}
#input-data .input-data{position:relative;padding:10px 15px;margin:25px auto;width:100%;max-width:640px;background-color:#fff;box-shadow:1px 1px 10px 1px rgb(0 0 0 / 15%);border-radius:3px;text-align:center}
#input-data .input-data input{position:relative;display:block;width:100%;padding:15px 10px;margin:15px 0;color:#444;border:1px solid #ff6bb0;border-radius:5px;outline:none}
button#start-exam{width:100%;padding:10px 15px;margin:10px 0;background-color:#ce2c90;color:#fff;font-size:14px;font-weight:600;border:0;outline:0;border-radius:5px;cursor:pointer}
.time-wrapper{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;background:#ce2c90;color:#fff;padding:15px;margin:0 auto;width:100%;font-size:14px;transition:all 0.5s}
.time-wrapper .participant-data,.time-wrapper #question-time{-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 auto;width:50%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;overflow:hidden;white-space:normal}
.time-wrapper .participant-data{text-align:left}
.time-wrapper #question-time{text-align:right}
.question-bank-wrapper{position:relative;display:block;padding:10px;border:1px solid #ddd}
.question-box{min-height:275px;-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}
.question-box form label{position:relative;display:block;margin-bottom:3px;vertical-align:middle}
.question-box form label:nth-child(1):before{position:absolute;content:"A";font-size:12px;top:5px;left:16.5px;z-index:3}
.question-box form label:nth-child(2):before{position:absolute;content:"B";font-size:12px;top:5px;left:16.5px;z-index:3}
.question-box form label:nth-child(3):before{position:absolute;content:"C";font-size:12px;top:5px;left:16.5px;z-index:3}
.question-box form label:nth-child(4):before{position:absolute;content:"D";font-size:12px;top:5px;left:16.5px;z-index:3}
.question-box form label:nth-child(5):before{position:absolute;content:"E";font-size:12px;top:5px;left:16.5px;z-index:3}
.question-box form label input{position:relative;display:inline-block;background:#fff;color:#444;width:20px;height:20px;margin:5px 10px;vertical-align:middle;border:2px solid #ce2c90;appearance:none;border-radius:50%;transition:all ease-in 0.2s}
.question-box form label input:checked{background:#ce2c90;color:#fff;transition:all ease-in 0.2s}
#show-hide-question-box::-webkit-scrollbar{width:7px;background-color:#00f7ca}
#show-hide-question-box::-webkit-scrollbar-thumb{background-color:#91979d;border-radius:5px}
#show-hide-question-box{position:absolute;display:none;background:#fff;top:0;right:0;width:100%;max-width:300px;height:100%;max-height:300px;padding:10px;overflow:hidden;overflow-y:auto;margin:0;min-height:275px;z-index:9;-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}
#show-hide-question-box.active{display:block}
.toggle-button{position:relative;display:block;background:#c1c1c1;color:#fff;padding:3px 10px;cursor:pointer}
.question-button-menu .question-button{position:relative;display:inline-block;background:#096a72;color:#fff;padding:10px 15px;margin:7px 2px;cursor:pointer}
.question-button-menu .question-button.active{background:#a7a3a3}
#question-menu,.next-prev-question{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;background:#ce2c90;color:#fff;padding:15px;margin:0 auto;width:100%;font-size:14px;transition:all 0.5s}
#question-menu .next-prev-question,#question-menu .question-options,#question-menu .finish-button{-webkit-box-flex:1;-ms-flex:1 1 33%;flex:1 1 auto;width:33%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0 auto;overflow:hidden;white-space:normal}
#prev-question,#next-question{-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 auto;width:50%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;overflow:hidden;white-space:normal;cursor:pointer}
#prev-question svg,#next-question svg{width:35px;height:35px;display:inline-block;vertical-align:middle}
#prev-question svg path,#next-question svg path{fill:#fff}
button#view-questions,button#finish-questions{width:100%;max-width:300px;padding:10px 15px;margin:0 10px;background-color:#ce2c90;color:#fff;font-size:16px;font-weight:600;border:0;outline:0;border-radius:3px;cursor:pointer}
#view-results{position:relative;display:none;padding:10px 15px;margin:25px auto;width:100%;max-width:640px;background-color:#fff;box-shadow:1px 1px 10px 1px rgb(0 0 0 / 15%);border-radius:3px;text-align:left}
#view-results .result-info{font-size:12px;font-weight:500}
@media screen and (max-width:800px){#question-menu .next-prev-question span{display:none}#question-menu .next-prev-question{margin:0 auto;text-align:center}button#view-questions,button#finish-questions{width:calc(100% - 10px);max-width:300px;padding:10px;margin:0 10px;font-size:14px}}
@-webkit-keyframes fade{from{opacity:.4}to{opacity:1}}
@keyframes fade{from{opacity:.4}to{opacity:1}}

Bước 6: Tiếp tục hãy thêm JavaScript sau ngay bên trên vào thẻ </body>. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp &lt;/body&gt;.

<!--[ Multiple choice questions and answers by Giahuy.net ]-->
<script>
  //<![CDATA[
  var htmlTimeData = document.getElementById("question-time");
  var htmlTotalQuestions = document.querySelector(".question-bank-wrapper");
  if (htmlTimeData != null){
    var time = htmlTimeData.getAttribute("data-time");
    var currentTime = new Date().getTime();
    var setTime = currentTime + (time * 3600000);
    var timeStart = setTime - new Date().getTime();
    var totalQuestions = htmlTotalQuestions.getAttribute("data-questions");
  }
  var correctAnswers = 0;
  var wrongAnswers = 0;
  var unanswered = 0;
  var timeInterval;
  var startButton = document.getElementById("start-button");
  if (startButton != null){
    startButton.onclick = inputData;
  }
  function inputData(){
    var htmlData = "";
    htmlData += "<div class='input-data'>";
    htmlData += "<form>";
    htmlData += "<label for='name'><input id='name' placeholder='Họ tên:' type='text' autocomplete='off'/></label>";
    htmlData += "<label for='class'><input id='class' placeholder='Lớp học:' type='text' autocomplete='off'/></label>";
    htmlData += "</form>";
    htmlData += "<button id='start-exam'>Làm bài</button>";
    htmlData += "</div>";
    document.getElementById("start-button").style.display = "none";
    document.getElementById("input-data").innerHTML = htmlData;
    var startExam = document.getElementById("start-exam");
    if (startExam != null){
      startExam.onclick = function(){
        if (document.getElementById("name").value == ""){
          document.getElementById("name").focus();
          return false;
        } else if (document.getElementById("class").value == ""){
          document.getElementById("class").focus();
          return false;
        } else {
          document.getElementById("input-data").style.display = "none";
          document.getElementById("question-bank").style.display = "block";
          document.querySelector(".participant-name").innerHTML = "<b>Tên:</b> " + document.getElementById("name").value;
          document.querySelector(".participant-class").innerHTML = "<b>Lớp:</b> " + document.getElementById("class").value;
          start();
          return false;
        }
      }
    }
  }
  function start() {
    timeInterval = setInterval(timerGo, 1000);
  }
  function finish(){
    clearInterval(timeInterval);
    console.log(clearInterval(timeInterval));
  }
  function timerGo() {
    timeStart -= 1e3;
    var d = Math.floor(timeStart / 864e5),
        h = Math.floor((timeStart % 864e5) / 36e5),
        m = Math.floor((timeStart % 36e5) / 6e4),
        s = Math.floor((timeStart / 1e3) % 60);
    if (timeStart > 0){
      document.querySelector("#question-time").innerHTML = "<b>Thời gian còn lại:</b> " + ("0" + h).slice(-2) + ":" + ("0" + m).slice(-2) + ":" + ("0" + s).slice(-2);
    } else if (timeStart < 0 || timeStart === 0) {
      document.querySelector("#question-time").innerHTML = "<b>Đã hết giờ</b>";
      document.querySelector(".time-wrapper").style.display = "none";
      document.querySelector(".question-bank-wrapper").style.display = "none";
      document.getElementById("question-menu").style.display = "none";
      document.getElementById("view-results").style.display = "block";
      viewResults();
      finish();
    }
  }
  function viewResults(){
    var htmlResults = "";
    var score = ((correctAnswers / totalQuestions) * 100);
    var name = document.getElementById("name").value + " (" + document.getElementById("class").value + ")";
    htmlResults += "<h3>Cảm ơn " + name + ", đây là điểm của bạn.</h3>";
    htmlResults += "<p>Câu trả lời đúng: " + correctAnswers + "</p>";
    htmlResults += "<p>Câu trả lời sai: " + wrongAnswers + "</p>";
    htmlResults += "<p>Chưa được trả lời: " + unanswered + "</p>";
    htmlResults += "<p>Điểm: " + score + "</p>";
    var htmlAnswer = document.getElementById("exam-results");
    if (htmlAnswer != null){
      htmlAnswer.innerHTML = htmlResults;
    }
  }
  function done(){
    document.querySelector(".time-wrapper").style.display = "none";
    document.querySelector(".question-bank-wrapper").style.display = "none";
    document.getElementById("question-menu").style.display = "none";
    document.getElementById("view-results").style.display = "block";
    viewResults();
    finish();
  }
  var toggleQuestionButtons = document.querySelectorAll(".view-questions");
  if (toggleQuestionButtons != null){
    for (var i = 0; i < toggleQuestionButtons.length; i++) {
      toggleQuestionButtons[i].addEventListener( "click", function() {
        document.getElementById("show-hide-question-box").classList.toggle("active");
      });
    }
  }
  var finishButton = document.getElementById("finish-questions");
  if (finishButton != null){
    finishButton.onclick = done;
  }
  var multipleChoice = document.querySelectorAll("input[type=radio]");
  if (multipleChoice != null){
    for (var i = 0; i < multipleChoice.length; i++) {
      multipleChoice[i].addEventListener( "change", function() {
        correctAnswers = document.querySelectorAll("input[value=correct]:checked").length;
        wrongAnswers = document.querySelectorAll("input[value=wrong]:checked").length;
        unanswered = totalQuestions - (correctAnswers + wrongAnswers);
      });
    }
  }
  var slideQuestionIndex = 1;
  showQuestionSlide(slideQuestionIndex);
  function nextprevQuestion(n) {
    showQuestionSlide(slideQuestionIndex += n);
  }
  function showQuestionButton(n) {
    showQuestionSlide(slideQuestionIndex = n);
  }
  function showQuestionSlide(n) {
    var i;
    var slides = document.getElementsByClassName("question-box");
    var dots = document.getElementsByClassName("question-button");
    if (n > slides.length) {slideQuestionIndex = 1}    
    if (n < 1) {slideQuestionIndex = slides.length;}
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideQuestionIndex - 1].style.display = "block";  
    dots[slideQuestionIndex - 1].className += " active";
  }
  document.getElementById("prev-question").onclick = function(){
    nextprevQuestion(-1);
  }
  document.getElementById("next-question").onclick = function(){
    nextprevQuestion(1);
  }
    var questionButtons = document.querySelectorAll(".question-button");
  for (var i = 0; i < questionButtons.length; i++) {
    questionButtons[i].addEventListener( "click", function() {
      var questionNumber = this.getAttribute("data-number");
      showQuestionButton(questionNumber);
    });
  }
//]]>
</script>

Bước 7: Lưu các thay đổi bằng cách nhấp vào biểu tượng này .

Bước 8: Vậy là xong! Thêm các mã HTML sau vào Bài đăng trên Blog của bạn thông qua Chế độ xem HTML để hiển thị hộp câu hỏi và trả lời trắc nghiệm.

<!-- Start Button -->
<div class='center'>
  <button id='start-button'>Bắt đầu</button>
</div>
<!-- Input Name and Class Box -->
<div id='input-data'></div>
<!-- Question Box -->
<div id='question-bank'>
  <div class='time-wrapper'>
    <div class='participant-data'>
      <div class='participant-name'></div>
      <div class='participant-class'></div>
    </div>
    <!-- Question Time, Change based on hours -->
    <div id='question-time' data-time='1'></div>
  </div>
  <!-- Total Questions, Change based on number of questions -->
  <div class='question-bank-wrapper' data-questions='3'>
    <!-- Questions and Answers -->
    <div class='question-box'>
      <p>1. Ví dụ 1</p>
      <form class='answers'>
        <label><input name='radio' type='radio' value='wrong'/>Câu trả lời a</label>
        <label><input name='radio' type='radio' value='wrong'/>Câu trả lời b</label>
        <label><input name='radio' type='radio' value='wrong'/>Câu trả lời c</label>
        <label><input name='radio' type='radio' value='correct' />Câu trả lời d</label>
      </form>
    </div>
    <!-- End of question and answer code -->
    <div class='question-box'>
      <p>2. Ví dụ 2</p>
      <form class='answers'>
        <label><input name='radio' type='radio' value='wrong'/>Câu trả lời a</label>
        <label><input name='radio' type='radio' value='wrong'/>Câu trả lời b</label>
        <label><input name='radio' type='radio' value='wrong'/>Câu trả lời c</label>
        <label><input name='radio' type='radio' value='correct' />Câu trả lời d</label>
      </form>
    </div>
    <div class='question-box'>
      <p>3. Ví dụ 3</p>
      <form class='answers'>
        <label><input name='radio' type='radio' value='wrong'/>Câu trả lời a</label>
        <label><input name='radio' type='radio' value='wrong'/>Câu trả lời b</label>
        <label><input name='radio' type='radio' value='wrong'/>Câu trả lời c</label>
        <label><input name='radio' type='radio' value='correct' />Câu trả lời d</label>
      </form>
    </div>
    <!-- Question Buttons, Adjust according to the number of questions -->
    <div id='show-hide-question-box'>
      <div class='toggle-button view-questions'>
        <span>Đóng</span>
      </div>
      <div class='question-button-menu'>
        <div class='question-button' data-number='1'>1</div>
        <div class='question-button' data-number='2'>2</div>
        <div class='question-button' data-number='3'>3</div>
      </div>
    </div>
  </div>
  <div id='question-menu'>
    <div class='next-prev-question'>
      <div id='prev-question' class='prev'>
        <svg viewBox='0 0 24 24'>
          <path d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z' fill='#000000'></path>
        </svg>
        <span>Trước đó</span>
      </div>
      <div id='next-question' class='next'>
        <span>Kế tiếp</span>
        <svg viewBox='0 0 24 24'>
          <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'></path>
        </svg>
      </div>
    </div>
    <div class='question-options'>
      <button id='view-questions' class='view-questions'>Danh sách câu hỏi</button>
    </div>
    <div class='finish-button'>
      <button id='finish-questions'>Hoàn thành</button>
    </div>
  </div>
  <div id='view-results'>
    <div id='exam-results'></div>
    <p class='result-info'>*Gửi điểm của bạn qua Email, nếu khắc phục được bạn có thể làm lại bài kiểm tra bằng cách nhấp vào <a href='#'>bắt đầu</a></p>
  </div>
</div>
Đánh dấu Thông tin
data-time='1' Thời gian làm bài: 1=60phút, 0,5=30phút, 1,5=90phút..., sử dụng dấu phẩy.
value='wrong' Nêu đáp án Sai điền:wrong, đáp án Đúng điền correct.
data-number='3' Số lượng câu hỏi, ví dụ 10 câu hỏi ta thêm data-number='10'>10.

Code để tạo câu hỏi

Thêm số lượng câu hỏi:

<div class='question-button' data-number='4'>4</div>

Chú ý:
- Bạn sao chép đoạn mã trên và thêm dưới đoạn mã:
<div class='question-button' data-number='3'>3</div>.
- Số câu hỏi tương đương với số đoạn mã trên.

<!-- Questions and Answers -->
    <div class='question-box'>
      <p>4. Ví dụ 4</p>
      <form class='answers'>
        <label><input name='radio' type='radio' value='wrong'/>Câu trả lời a</label>
        <label><input name='radio' type='radio' value='wrong'/>Câu trả lời b</label>
        <label><input name='radio' type='radio' value='wrong'/>Câu trả lời c</label>
        <label><input name='radio' type='radio' value='correct' />Câu trả lời d</label>
      </form>
    </div>

Sử dụng đoạn mã trên để tạo một câu hỏi mới. Mặc định đã có sẵn 3 câu hỏi, bạn chỉ cần thêm lại dưới câu hỏi trước.

Trên đây là hướng dẫn cách tạo câu hỏi và trả lời trắc nghiệm trên Blogger.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé!

Copyright © www.azid45.web.id

Chuyển đến liên kết
Tôi là Nhật Nguyễn, một kỹ sư xây dựng. Nhưng thích tìm hiểu về mã nguồn lập trình web ☏.