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
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
<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
Tuyet voi
ok