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âu hỏi trắc nghiệm blogspot, cách tạo câu hỏi trắc nghiệm blogger, tạo trắc nghiệm blogspot, tạo trắc nghiệm trên blogger, tạo bài trắc nghiệm

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.

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, "2", "Chọn B")" type="checkbox" />
<input id="b1" onclick="ans(1, 2, "2", "Chọn D")" type="checkbox" />
<input id="c1" onclick="ans(1, 3, "2", "Chọn D")" type="checkbox" />
<input id="d1" onclick="ans(1, 4, "2", "Chọn D")" 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

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>

Ví dụ minh họa

Câu 1: Đường kinh tuyến đối diện với đường kinh tuyến gốc là:

A. 60^o

B. 30^o

C.90^o

D. 180^o

Chọn D

Câu 2: Trái đất có dạng hình gì?

A. Hình tròn

B. Hình vuông

C. Hình cầu

D. Hình bầu dục

Chọn C

Câu 3: Kinh tuyến Tây là:

A.Là kinh tuyến nằm bên trái của kinh tuyến gốc.

B. Là kinh tuyến nằm bên phải của kinh tuyến gốc.

C. Nằm phía dưới xích đạo.

D. Nằm phía trên xích đạo.

Chọn A

Câu 4: Kinh tuyến đi qua đài thiên văn Grin-uýt ở ngoại ô thành phố Luân Đôn (nước Anh) gọi là:

A.Kinh tuyến Đông.

B.Kinh tuyến Tây.

C. Kinh tuyến 180^o.

D. Kinh tuyến gốc.

Chọn D

Câu 5: Nếu cách 1^o ở tâm thì trên bề mặt của quả Địa Cầu từ cực Nam đến cực Bắc có bao nhiêu vĩ tuyến?

A. 181

B. 182

C. 180

D.179

Chọn A

Câu 6: Nếu cách 1^o ở tâm thì trên bề mặt của quả Địa Cầu sẽ có bao nhiêu kinh tuyến?

A. 360

B. 361

C. 180

D. 181

Chọn A

Câu 7: Trong hệ Mặt Trời, Trái Đất ở vị trí nào theo thứ tự xa dần Mặt Trời?

A.Vị trí thứ 3

B. Vị trí thứ 5

C. Vị trí thứ 9

D. Vị trí thứ 9

Chọn A

Câu 8: Trên Địa Cầu, nước ta nằm ở:

A. Nửa cầu Bắc và nửa cầu Tây

B. Nửa cầu Nam và nửa cầu Đông

C. Nửa cầu Bắc và nửa cầu Đông.

D. Nửa cầu Nam và nửa cầu Tây

Chọn C

Câu 9: Các đường nối liền hai điểm cực Bắc và cực Nam trên bề mặt quả Địa Cầu là những đường:

A. Kinh tuyến.

B. Kinh tuyến gốc.

C. Vĩ tuyến.

D.Vĩ tuyến gốc.

Chọn A

Câu 10: Những vòng tròn trên quả Địa Cầu vuông góc với các kinh tuyến là những đường:

A. Kinh tuyến.

B. Kinh tuyến gốc.

C. Vĩ tuyến.

D. Vĩ tuyến gốc.

Chọn C

Câu 11: Những vòng tròn trên quả Địa Cầu vuông góc với các kinh tuyến là những đường:

A. 0^o

B. 30^o

C. 90^o

D. 180^o

Chọn A

Câu 12: Các đường kinh tuyến trên quả Địa cầu có chiều dài

A. Nhỏ dần từ Tây sang Đông

B. Lớn dần từ Đông sang Tây

C. Đều bằng nhau

D. Tất cả đều sai

Chọn C

Tổng số câu đúng: Đúng 0 câu

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.

Thông tin liên hệ:

Thành Trương Blog

Chịu trách nhiệm nội dung: Nguyễn Thành Trương

Địa chỉ: Xã Tân Thành, Huyện Bình Tân, Tỉnh Vĩnh Long

Email: thanhtruongblog@gmail.com

Số điện thoại: 0973.898.830

Website: https://www.thanhtruongblog.com/

Nguồn: https://www.thanhtruongblog.com/2024/03/cach-tao-cau-hoi-trac-nghiem-cho-blogspot.html

Bài viết liên quan:

Blogger tự do!

Thành Trương Blog

Thông báo

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âu hỏi trắc nghiệm là gì?

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

Dạng 1

Dạng 2

Ví dụ minh họa

Kết luận

Chia sẻ cách tạo hiệu ứng các hạt chuyển động bằng thư viện Particles.js

Cách tạo khung ghi chú cho blogspot đơn giản bằng CSS

Median UI Version Thành Trương Blog

Hướng dẫn cách thay đổi con trỏ chuột và thêm hiệu ứng gợn nhấp cho Blogger/Website

Chia sẻ template Median UI V1.7 Premium blogger miễn phí mới nhất 2024

THÀNH TRƯƠNG BLOG

Partner

Tools

Main category

Sub category

Bình luận

Thông báo

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âu hỏi trắc nghiệm là gì?

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

Dạng 1

Dạng 2

Ví dụ minh họa

Kết luận

Join the conversation

Bình luận