Cách Tạo Câu Hỏi Trắc Nghiệm Đáp Án Cho Blogger


Cách Tạo Câu Hỏi Trắc Nghiệm Đáp Án Cho Blogger

Lời nói đầu:

Chào các bạn đọc giả của VeoSpot.Com, hôm nay admin chia sẻ một bộ code rất hữu ích trên Blogger, bạn có thể dùng bộ code này làm câu hỏi trắc nghiệm, trò chơi, đố vui, trên website blog của bạn.

- Nếu bạn chưa có ý tưởng viết blog thì có thể đây cũng là một ý tưởng hay để bạn bắt đầu viết blog câu hỏi đố vặt cho khán giả trả lời, đặc biệt những câu hỏi vui, liên quan đến giới trẻ như chuyện tỉnh, tâm sự, chuyện gia đình,...vv

Hướng dẫn các bước tạo câu hỏi trắc nghiệm, câu trả lời đáp án và kết quả chung cho tất cả câu trả lời đơn giản và dễ thực hiện cho Blogspot

Bạn đang có một Blog viết về chủ đề học tâp, tư vấn, khảo sát, đố vui,.v.v.., trong đó đa số phải dùng mẫu câu trắc nghiệm cho mỗi bài viết để độc giả chọn câu trả lời dựa trên câu trả lời mà bạn đã đặt.

Bài hôm nay mình làm một tips đơn giản về cách tạo câu hỏi trắc nghiệm, đáp án và kết quả cho blogspot và style của mẫu câu hỏi này đang được trang báo zing.vn sử dụng.

Các bước thực hiện như sau:

Bước 1: Chèn css và script trong chỉnh sửa chủ đề HTML của theme

 Chèn CSS trước thẻ đóng </head>
<b:tag name='style'>/* <![CDATA[ */
.box-question{float:left;width:100%;font-family:Roboto,Arial,sans-serif;font-size:1rem;color:#333}
.box-question h2,.box-question h3{margin-bottom:20px!important;cursor:default}
.box-question h2{font-size:1.3rem!important}
.box-question h3{font-size:1.2rem!important;font-weight:normal!important}
table.picture{width:100%;border-collapse:collapse;border-spacing:0;margin:18px 0;border-radius:5px;background:#FFEB00;overflow:hidden;line-height:1.5}
table.picture+.picture{margin-top:22px}
table.picture td{position:relative;cursor:default}
table.picture img{max-width:100%;width:100%;height:auto;display:block}
table.picture td.caption{padding:20px 20px 0 20px!important;color:#000}
.question ul{margin:10px 0 20px!important;list-style:none;padding:0!important}
.question ul>li{float:left;width:100%;background:rgba(0,0,0,0.05);padding:15px 10px 15px 50px;margin-bottom:5px;position:relative;font-weight:bold!important;border-radius:30px;list-style-type:none!important;line-height:1.6}
.question ul>li:before{display:block;position:absolute;top:13px;left:10px;width:30px;height:30px;border-radius:100%;background:rgba(0,0,0,0.1);text-align:center;line-height:30px}
.question ul>li:first-child:before{content:"A"}
.question ul>li:nth-child(2):before{content:"B"}
.question ul>li:nth-child(3):before{content:"C"}
.question ul>li:nth-child(4):before{content:"D"}
.question ul>li:nth-child(5):before{content:"E"}
.question ul>li:nth-child(6):before{content:"F"}
.question ul>li:nth-child(7):before{content:"G"}
.question ul>li:nth-child(8):before{content:"H"}
.question ul>li>span,.question ul>li>strong{color:#000!important;font-weight:bold!important}
.question ul.answered>li:not(.selected):not(.correct){opacity:0.4}
.question ul.answered>li.selected{opacity:1;border-radius:5px}
.question ul.answered>li.selected:not(.correct){background:#f16464}
.question ul.answered>li.correct{background:#55d000}
.question ul+p:not(.explaination){display:none;margin:15px 0}
.question ul>li>p.explaination{margin:0;color:#fff;font-weight:normal}
.question+.result{float:left;width:100%;margin:20px 0;position:relative;background:#f3f3f3;font-weight:300;text-align:center;font-size:1.8rem;padding:20px 10px 25px;line-height:1.1}
.question+.result:before{content:"Kết quả";color:#888;text-align:center;margin-right:10px;display:block;font-size:0.8em;border-bottom:1px solid #ddd;padding-bottom:20px;margin-bottom:30px}
.question+.result>.message{display:block;margin:15px 0}
.question+.result>.correct{color:#55d000;font-weight:bold;font-size:2em}
.question+.result>.total{font-size:2em;color:#f16464}
.question+.result>.total:before{content:"/"}
@media(min-width:1025px){.question ul:not(.answered)>li{cursor:pointer}.question ul.answered>li{cursor:default;pointer-events:none}}
/* ]]> */</b:tag>

Nếu bạn chỉ dụng trong bài viết thôi thì đặt css trong điều kiện

Điều kiện cho post + page (Bài đăng và trang)

<b:if cond='data:view.isSingleItem'>

</b:if>

Điều kiện cho post (Bài đăng)

<b:if cond='data:view.isPost'>

</b:if>

Điều kiện cho page (Trang bài viết)

<b:if cond='data:view.isPage'>

</b:if>

 Chèn script trước thẻ đóng </body>

<script>//<![CDATA[
window.addEventListener('load',function(){
  var q=$('.question'),
  w=["Bạn là thần đồng","Bạn rất suất xắc","Kiến thức của bạn khá tốt","Bạn có thể làm tốt hơn thế"]
  $(q).each(function(n){
    var ul=$(q[n]).find('ul'),mes=$(q[n]).parent().find('.message')
    console.log(mes)
    $(ul).each(function(i,v){
      var li=$(ul[i]).find('li'),p=$(ul[i]).next('p'),cor=$(ul[i]).find('li.correct')
      $(li).one('click',function(){
        $(this).parent().addClass('answered')
        $(this).addClass('selected')
        $(p).appendTo($(cor)).addClass('explaination')
        if(i==ul.length-1){
          var corr=$(ul).find('li.correct.selected').length,
          s=corr*100/ul.length-1
          v='<span class="correct">'+corr+'</span><span class="total">'+ul.length+'</span>',
          $(v).insertAfter($(mes))
          w.forEach(function(){
            if(s==100)$(mes).html(w[0])
            else if(s>=80)$(mes).html(w[1])
            else if(s>=50)$(mes).html(w[2])
            else $(mes).html(w[3])
          })
        }
      })
    })
  })
})
//]]></script>

Lưu ý: Trong chủ đề theme cần chèn trước thư viện link jquery nhé, các bạn nếu chưa chèn thì đọc tham khảo bài viết Cách thêm thuộc tính async hoặc defer vào thẻ script jquery.js.

Ngoài ra nếu bạn có sử dụng điều kiện css ở trên thì cũng nên sử dụng điều kiện cho script luôn nhé.

Bước 2: Chèn mẫu câu hỏi trong bài viết

Khi soạn thảo bài mới hay chỉnh sửa lại bài cũ, các bạn chèn mẫu câu trả lời vào vị trí muốn hiển thị nhưng nhớ là chèn bên tab HTML của bài đang soạn hay chỉnh sửa nhé.

Câu hỏi không có ảnh

<div class="box-question">
  <h2>Tiêu đề chung của của các câu hỏi</h2>
  <div class="question">
    <h3>Câu hỏi 1?</h3>
    <ul>
      <li>Câu trả lời</li>
      <li>Câu trả lời</li>
      <li>Câu trả lời</li>
      <li class="correct"><strong>Câu trả lời đúng</strong></li>
    </ul>
    <p>Viết mô tả cho câu trả lời đúng cho câu hỏi 1</p>
    <h3>Câu hỏi 2?</h3>
    <ul>
      <li>Câu trả lời</li>
      <li class="correct"><strong>Câu trả lời đúng</strong></li>
      <li>Câu trả lời</li>
      <li>Câu trả lời</li>
    </ul>
    <p>Viết mô tả cho câu trả lời đúng cho câu hỏi 2</p>
    <h3>Câu hỏi n?</h3>
    <ul>
      <li class="correct"><strong>Câu trả lời đúng</strong></li>
      <li>Câu trả lời</li>
      <li>Câu trả lời</li>
      <li>Câu trả lời</li>
    </ul>
    <p>Viết mô tả cho câu trả lời đúng cho câu hỏi n</p>
  </div>
  <div class="result"><span class="message">Hãy trả lời các câu hỏi để biết kết quả của bạn</span></div>
</div>

Câu hỏi có hình ảnh

<div class="box-question">
  <h2>Tiêu đề chung của của các câu hỏi</h2>
  <div class="question">
    <table class="picture" align="center">
      <tbody>
        <tr>
          <td class="pic"><img alt="" width="" height="" loading="lazy" src="link ảnh"></td>
        </tr>
        <tr>
          <td class="caption">
            <h3>Câu hỏi 1?</h3>
            <ul>
              <li>Câu trả lời</li>
              <li>Câu trả lời</li>
              <li>Câu trả lời</li>
              <li class="correct"><strong>Câu trả lời đúng</strong></li>
            </ul>
            <p>Viết mô tả cho câu trả lời đúng cho câu hỏi 1</p>
          </td>
        </tr>
      </tbody>
    </table>
    <table class="picture" align="center">
      <tbody>
        <tr>
          <td class="pic"><img alt="" width="" height="" loading="lazy" src="link ảnh"></td>
        </tr>
        <tr>
          <td class="caption">
            <h3>Câu hỏi 2?</h3>
            <ul>
              <li>Câu trả lời</li>
              <li>Câu trả lời</li>
              <li>Câu trả lời</li>
              <li class="correct"><strong>Câu trả lời đúng</strong></li>
            </ul>
           <p>Viết mô tả cho câu trả lời đúng cho câu hỏi 2</p>
          </td>
        </tr>
      </tbody>
    </table>
    <table class="picture" align="center">
      <tbody>
        <tr>
          <td class="pic"><img alt="" width="" height="" loading="lazy" src="link ảnh"></td>
        </tr>
        <tr>
          <td class="caption">
            <h3>Câu hỏi n?</h3>
            <ul>
              <li>Câu trả lời</li>
              <li>Câu trả lời</li>
              <li>Câu trả lời</li>
              <li class="correct"><strong>Câu trả lời đúng</strong></li>
            </ul>
            <p>Viết mô tả cho câu trả lời đúng cho câu hỏi n</p>
          </td>
        </tr>
      </tbody>
  </div>
  <div class="result"><span class="message">Hãy trả lời các câu hỏi để biết kết quả của bạn</span></div>
</div>

Bạn cần lưu ý đặt mẫu mỗi câu hỏi

Thẻ h3 là tiêu đề của một câu hỏi

Mỗi thẻ li trong thẻ ul là một câu trả lời đúng hoặc sai trong đó chỉ có duy nhất một câu trả lời đúng còn lại là sai

Câu trả lời đúng được thêm class="correct" bên trong thẻ li

Thẻ p viết giải thích cho câu trả lời đúng

 Chúc bạn thành công !

Copyright: Veospot.com

Share by: Blogcuatruc

2 Nhận xét

Mới hơn Cũ hơn