Billboard Ads

Cách tạo câu hỏi trắc nghiệm cho Blogspot cực kỳ đơn giản và đẹp mắt

Thành Trương Blog
Thành Trương Blog
5/17/2024 03:18:22 PM
Published 3/05/2024 10:20:00 PM
Table Of Contents
Cách tạo câu hỏi trắc nghiệm cho Blogspot cực kỳ đơn giản và đẹp mắt
Cách tạo câu hỏi trắc nghiệm cho Blogspot cực kỳ đơn giản và đẹp mắt

Ngày nay, các bài tập trắc nghiệm dần trở nên phổ biến hơn bao giờ hết. Tất cả các cấp học đều có các dạng bài câu hỏi trắc nghiệm cho các bạn học sinh, sinh viên làm. Cũng chính vì điều này, có nhiều bạn muốn tạo ra một trang web chuyên về trắc nghiệm online để cho các bạn học sinh, sinh viên có thể tham gia làm bài trực tiếp ngay trên website của mình. 

Hôm nay, mình sẽ chia sẻ cho mọi người 2 mẫu câu hỏi trắc nghiệm cho Blogspot ai cũng có thể làm được, nó cực kỳ đơn giản nhưng không kém phần đẹp mắt đâu nhé! Nói chung về cách tạo câu hỏi trắc nghiệm cho blogspot thì có khá nhiều trên mạng. Tuy nhiên, mình thuộc trường phái cầu toàn, nên thấy cái gì không hợp mắt là sửa liền. Đoạn code dưới đây là mình cũng dạo 7749 website để sáng tạo nên.

Câu hỏi trắc nghiệm là gì?

Câu hỏi trắc nghiệm là một loại câu hỏi trong đó người trả lời được yêu cầu chọn một trong số các lựa chọn được cung cấp là câu trả lời đúng. Các câu hỏi trắc nghiệm thường được sử dụng trong các bài kiểm tra, bài thi hoặc trong các khảo sát để thu thập ý kiến của mọi người. Các câu hỏi trắc nghiệm có thể có nhiều dạng khác nhau, bao gồm các câu hỏi dạng đơn lựa chọn, đa lựa chọn, kéo thả, và điền vào chỗ trống. Tuy nhiên, trong bài viết này Thành Trương Blog sẽ hướng dẫn các bạn cách tạo câu hỏi trắc nghiệm cho blogspot với dạng đơn lựa chọn. Tức là chọn một đáp án đúng trong các đáp án A, B, C, D.

Xem trước

Cách tạo câu hỏi trắc nghiệm cho Blogspot

Dạng 1

Để thực hiện tạo những câu hỏi trắc nghiệm cho Blogspot bạn cần thực hiện như sau:

  • Bước 1: Đăng nhập vào trang quản lý Blogger

  • Bước 2: Ấn vào Chủ đề ➤ Chỉnh sửa HTML

  • Bước 3: Bạn copy đoạn CSS bên dưới dán trên thẻ ]]></b:skin>
.container{display:block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}
.checkmark{position:absolute;top:0;left:0;height:25px;width:25px;background-color:#eee}
.container:hover input ~ .checkmark{background-color:#ccc}
.container input:checked ~ .checkmark{background-color:#2196F3}
.checkmark:after{content:'';position:absolute;display:none}
.container input:checked ~ .checkmark:after{display:block}
.container .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid white;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
body{max-width:100%;margin:auto}
.card-header{margin:10px 10px 10px 10px;border:3px solid #25b1b6;color:#003333;padding:10px;box-shadow:3px 3px #888888}
.card-body{margin:10px 10px 10px 10px;padding:10px}
  • Bước 4: Bạn copy đoạn js bên dưới dán trên thẻ </body>
<script>
var right=0;function ans(no,asqt,correct,more){switch(asqt){case 1:
document.getElementById("b"+no).disabled=!0;
document.getElementById("c"+no).disabled=!0;
document.getElementById("d"+no).disabled=!0;break;case 2:
document.getElementById("a"+no).disabled=!0;
document.getElementById("c"+no).disabled=!0;
document.getElementById("d"+no).disabled=!0;case 3:
document.getElementById("a"+no).disabled=!0;
document.getElementById("b"+no).disabled=!0;
document.getElementById("d"+no).disabled=!0;break;case 4:
document.getElementById("a"+no).disabled=!0;
document.getElementById("b"+no).disabled=!0;
document.getElementById("c"+no).disabled=!0;break}if(asqt==correct){right+=1}if(correct==1){
    document.getElementById("aq"+no).style.backgroundColor="#00CCCC";
document.getElementById("bq"+no).style.backgroundColor="#FF3333";
document.getElementById("cq"+no).style.backgroundColor="#FF3333";
document.getElementById("dq"+no).style.backgroundColor="#FF3333"}if(correct==2){
    document.getElementById("bq"+no).style.backgroundColor="#00CCCC";
document.getElementById("aq"+no).style.backgroundColor="#FF3333";
document.getElementById("cq"+no).style.backgroundColor="#FF3333";
document.getElementById("dq"+no).style.backgroundColor="#FF3333"}if(correct==3){
    document.getElementById("cq"+no).style.backgroundColor="#00CCCC";
document.getElementById("bq"+no).style.backgroundColor="#FF3333";
document.getElementById("aq"+no).style.backgroundColor="#FF3333";
document.getElementById("dq"+no).style.backgroundColor="#FF3333"}if(correct==4){
    document.getElementById("dq"+no).style.backgroundColor="#00CCCC";
document.getElementById("bq"+no).style.backgroundColor="#FF3333";
document.getElementById("cq"+no).style.backgroundColor="#FF3333";
document.getElementById("aq"+no).style.backgroundColor="#FF3333"}
document.getElementById("cq"+no).style.color="white";
document.getElementById("bq"+no).style.color="white";
document.getElementById("aq"+no).style.color="white";
document.getElementById("dq"+no).style.color="white";
document.getElementById("rs"+no).style.fontSize="15px";
document.getElementById("rss"+no).innerHTML="<span style='color:#00CCCC'><b>Lời giải:</b></span>";
document.getElementById("overview").innerHTML="<span style='color:#FF0000'><b>Tổng số câu đúng:</b></span>  Đúng "+right}
</script>
  • Bước 5: Bạn cần lưu ý đặt mẫu mỗi câu hỏi
<div class="card">            
<div class="card-header">                
<img src="https://i.imgur.com/wCDktfO.png" style="height: 25px; width: 25px;" />                
<span style='color:#00CCCC'><b>Câu hỏi 1:</b></span> Nội dung câu hỏi 1</div>            
<div class="card-body">              
<label class="container"><p id="aq1" style="border-radius: 4px;">    <b>A.</b> Nội dung đáp án A.</p>                    
<input id="a1" onclick="ans(1, 1, &quot;2&quot;, &quot;Chọn B&quot;)" type="checkbox" />                    
<span class="checkmark"></span></label>              
<label class="container"><p id="bq1" style="border-radius: 4px;">    <b>B.</b>  Nội dung đáp án B.</p>                    
<input id="b1" onclick="ans(1, 2, &quot;2&quot;, &quot;Chọn B&quot;)" type="checkbox" />                    
<span class="checkmark"></span></label>              
<label class="container"><p id="cq1" style="border-radius: 4px;">    <b>C.</b> Nội dung đáp án C.</p>                    
<input id="c1" onclick="ans(1, 3, &quot;2&quot;, &quot;Chọn B&quot;)" type="checkbox" />                   
<span class="checkmark"></span></label>              
<label class="container"><p id="dq1" style="border-radius: Bpx;">    <b>D.</b> Nội dung đáp án D.</p>                    
<input id="d1" onclick="ans(1, 4, &quot;2&quot;, &quot;Chọn D&quot;)" type="checkbox" />                    
<span class="checkmark"></span></label>                
<div id="rs1" style="font-size: 0px; inline: none;">
<div id="rss1"></div><b> Giải thích: </b>Nội dung lời giải chi tiết.<br>                   
<span style='color:#00CCCC'><b>Chọn đáp án đúng</b></span>                 
</div></div></div>
  • Bước 6: Bạn chỉ cần đăng bài là được.

Cấu trúc minh họa của câu đáp án trắc nghiệm: 

  • <input id="a1" onclick="ans(1, 1, &quot;2&quot;, &quot;Chọn B&quot;)" type="checkbox" />
  • <input id="b1" onclick="ans(1, 2, &quot;2&quot;, &quot;Chọn D&quot;)" type="checkbox" />
  • <input id="c1" onclick="ans(1, 3, &quot;2&quot;, &quot;Chọn D&quot;)" type="checkbox" />
  • <input id="d1" onclick="ans(1, 4, &quot;2&quot;, &quot;Chọn D&quot;)" type="checkbox" />

Giải thích các thành phần:

  • id: a1 có nghĩa là đáp án a của câu hỏi 1
  • ans(1: đây là số thứ tự câu hỏi, 1: tương ứng với đáp án A, 2: tương ứng với đáp án B và là đáp án đúng, Chọn B: là phương án bạn chọn)

Chú thích thêm: 

  • Ví dụ đáp án đúng là C bạn thay số 2 thành số 3 và Chọn B thành Chọn C là được. Những thành phần khách không cần quan tâm.
  • Để thực hiện nhanh bạn có thể sử dụng Find & Replace

Dạng 2

Tạo câu hỏi trắc nghiệm blogspot ẩn/hiện lời giải
Tạo câu hỏi trắc nghiệm blogspot ẩn/hiện lời giải

Theo như quan sát trên ảnh, các bạn cũng đã thấy chúng ta có một đoạn câu hỏi và nút ẩn/hiện lời giải kèm theo đó là một khung lời giải chi tiết. Để làm được dạng này vô cùng đơn giản, bạn chỉ cần copy đoạn code bên dưới và dán vào bài viết là được.

<div id="anhien-nd">
<div>
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Lời giải'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Lời giải'; }" style="background: #fbb600; border-radius: 9px; border: 0px; color: black;margin: 20px 0px 0px; max-width: 70px; padding: 10px; width: 100%;" type="button" value="Lời giải" />
</div>
<div>
<div style="border:1px solid #eeeeee;background:#f9f9f9;border-left: 3px solid #fbb600; display: none; margin: 10px 0px 0px; padding: 0px 15px;">
 <p>CHÈN NỘI DUNG CẦN ẨN</p>
</div>
</div>
</div>
Chú ý! Nếu bạn là một người biết một chút về code có thể tùy chỉnh css theo ý cá nhân của bạn nhé.

Kết luận

Với cách hướng dẫn trên, bạn có thể sử dụng để tạo các câu hỏi trắc nghiệm đơn giản, dễ hiểu. Điều này giúp độc giả của bạn dễ dàng trả lời câu hỏi và tăng tính tương tác của bài viết. Tuy nói rằng bài viết đơn giản và dễ hiểu nhưng có thể cũng có gặp khó khăn trong vấn đề thực hiện. Chính vì thế bạn hãy để lại bình luận bên dưới để mình hỗ trợ bạn. Tóm lại, việc tạo câu hỏi trắc nghiệm cho blogspot của bạn là một cách hiệu quả để tăng tính tương tác của độc giả và giúp họ học hỏi thêm kiến thức mới.

Read Also
Thành Trương Blog
Thành Trương Blog
Blogger tự do! Thích gì viết đó!
Follow me on: Facebook
Related Posts
Post a Comment