How to Create a MCQ Quiz on Blogger?
Want to integrate MCQ quizzes on your Blogger site? Follow these simple setup instructions and engage your audience effectively.
Are you considering making an MCQ quiz for your website to evaluate your users' knowledge? You can create and share a multiple-choice quiz with several questions on your blogger website for free and without the need for any third-party resources. Here's a simple guide to help you get started.
In this article, I will show you how to effortlessly create and add an MCQ quiz to your blogger. I have successfully implemented this technique on various websites and received positive feedback from users. It's a simple method that doesn't necessitate the use of any third-party applications or websites. Simply follow the steps below and you'll be all set.
Once you complete the steps, you will have the ability to create a quiz similar to the one shown in the picture above. Users can attempt to answer the questions and upon selecting an option, the correct response will be displayed automatically. You have the flexibility to include as many questions as you desire in the quiz.
Let's begin. Our quiz system employs a small amount of JavaScript. If you are unfamiliar with HTML, CSS, or JavaScript, don't worry. I will provide you with the complete code. Simply follow each step closely.
HTML Code
You have to add this HTML code to the body part of the post.
<div class="quizContainer container-fluid well well-lg">
<div class="quiz-container">
<div class="question-number">
<h3>
Question <span class="question-num-value"></span> of <span class="total-question"></span></h3>
</div>
<div class="question">
</div>
<div class="options">
<div class="option1" id="1" onclick="check(this)">
</div>
<div class="option2" id="2" onclick="check(this)">
</div>
<div class="option3" id="3" onclick="check(this)">
</div>
<div class="option4" id="4" onclick="check(this)">
</div>
</div>
<div class="button">
<button class="btn" onclick="next()" type="button">Next</button>
</div>
<div class="answers-tracker">
</div>
</div>
<div class="quiz-over">
<div class="box">
<h1>
Good Try!<br />
You Got <span class="correct-answers"></span> out of <span class="total-question2"></span> answers correct! <br />
That's <span class="percentage"></span>
</h1>
<button onclick="tryAgain()" type="button">TryAgain</button>
</div>
</div>
This is the structure of your quiz. After this, you have to add the CSS and JavaScript to make it work.
CSS Code
Here's the CSS code. You can either directly paste it before the </style> part in your theme's HTML code. Or, you can directly use it in the post itself in the HTML view.
body{
margin:0;
background-color:#d9cdcd;
font-family: sans-serif;
}
*{
box-sizing: border-box;
}
.quiz-container{
max-width: 700px;
min-height:500px;
background-color: #ffffff;
margin:40px auto;
border-radius:10px;
padding:30px;
}
.quiz-container::after,.quiz-container::before{
content: '';
clear: both;
display: table;
}
.question-number,
.question,
.options,
.button,
.answers-tracker{
float: left;
width: 100%;
}
.question-number h3{
color:#009688;
border-bottom: 1px solid #ccc;
margin:0;
padding-bottom:10px;
}
.question {
font-size:22px;
color:000000;
padding:20px 0;
}
.options div{
background-color: #fff;
font-size: 16px;
color: 000000;
margin-bottom: 10px;
border-radius: 5px;
border: solid 1px darkgray;
padding: 15px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.options div.disabled{
pointer-events: none;
}
.options div.correct{
z-index: 1;
color: #fff;
}
.options div.correct::before{
content: '';
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
background-color: #09d209;
border: solid 1px #09d209;
z-index: -1;
animation: animateBackground 1s ease;
animation-fill-mode: forwards;
}
@keyframes animateBackground{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(0%);
}
}
.options div.wrong{
z-index: 1;
color: #fff;
}
.options div.wrong::before{
content: '';
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
background-color:red;
border: solid 1px red;
z-index: -1;
animation: animateBackground 1s ease;
animation-fill-mode: forwards;
}
@keyframes animateBackground{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(0%);
}
}
.button .btn{
padding:15px 50px;
border-radius:5px;
cursor: pointer;
background-color:#00a0d2;
font-size:16px;
color:#ffffff;
border: none;
display: inline-block;
margin:15px 0 20px;
}
.answers-tracker{
border-top:1px solid #ccc;
padding-top: 15px;
}
.answers-tracker div{
height: 40px;
width: 40px;
background-color: #cccccc;
display: inline-block;
border-radius: 50%;
margin-right:5px;
margin: 3px;
}
.answers-tracker div.correct{
background-color: #fff;
background-image: url(https://blogger.googleusercontent.com/img/a/AVvXsEhTysieJiTOusKu2d4WGG0VFMvT99fkqenqY30J-PYQXPkLQzShjoiqTA8uQ3pLvxx7LXuLoDh8AD-jO9NdxVHNDX4IKJT75tdxc_6J4z4jZQu7z3ky3ctWMKTmzAVpTTDoDb2jcjXAbis79ee6T-sAYeMGCtYPAU1_0PuPrjABMqICygN2KOFu33up=s833);
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
border: dashed 1px gray;
margin: 3px;
}
.answers-tracker div.wrong{
background-color: #fff;
border: dashed 1px gray; background-image:url('https://blogger.googleusercontent.com/img/a/AVvXsEikNX-7_M_M4rqYR0K5JiEHEsIRAx0wMTMdYx9REWw_wm-tdGzPnvSI4VtucGmDc_T4N50WXzMn_Pl6Qok3Y90nOwTqIzoyrsqjJy6VvZYu68ThaurV5UHUHetQfVhzsvlemmgxOP8Dbk9darCC9l4j1DYEHd1uLArCUtJFaZuqHvdNBCMS7z3j61dJ=s708');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
margin: 3px;
}
.quiz-over{
position: fixed;
left:0;
top:0;
width: 90%;
height: 100%;
background-color:rgba(0,0,0,0.9);
z-index: 10;
display: none;
align-items: center;
justify-content: center;
}
.quiz-over.show{
display: flex;
}
.quiz-over .box{
background-color:#34a9d2;
padding:30px;
border-radius:10px;
text-align: center;
flex-basis: 700px;
max-width:700px;
color:#ffffff;
}
.quiz-over .box h1{
font-size:30px;
margin:0 0 20px;
}
.quiz-over .box button{
padding:15px 50px;
border:none;
background-color:#FF9800;
border-radius:5px;
font-size:16px;
margin:15px 0 20px;
color:#ffffff;
}
You can simply play with the CSS and change the look of your quiz.
JavaScript Code
The main part of the code is JavaScript. Here's the code.
const options=document.querySelector(".options").children;
const answerTrackerContainer=document.querySelector(".answers-tracker");
const questionNumberSpan=document.querySelector(".question-num-value");
const totalQuestionSpan=document.querySelector(".total-question");
const correctAnswerSpan=document.querySelector(".correct-answers");
const totalQuestionSpan2=document.querySelector(".total-question2");
const percentage=document.querySelector(".percentage");
const question=document.querySelector(".question");
const op1=document.querySelector(".option1");
const op2=document.querySelector(".option2");
const op3=document.querySelector(".option3");
const op4=document.querySelector(".option4");
let questionIndex;
let index=0;
let myArray=[];
let myArr=[];
let score=0;
// questions and options and answers
const questions=[
{
q:'Enter Your Question Here',
options:['A. Option 1','B.Option 2','C. Option 3','D. Option 4'],
answer:4
},
{
q:'Enter Your Question Here',
options:['A. Option 1','B.Option 2','C. Option 3','D. Option 4'],
answer:2
}
]
// set questions and options and question number
totalQuestionSpan.innerHTML=questions.length;
function load(){
questionNumberSpan.innerHTML=index+1;
question.innerHTML=questions[questionIndex].q;
op1.innerHTML=questions[questionIndex].options[0];
op2.innerHTML=questions[questionIndex].options[1];
op3.innerHTML=questions[questionIndex].options[2];
op4.innerHTML=questions[questionIndex].options[3];
index++;
}
function check(element){
if(element.id==questions[questionIndex].answer){
element.classList.add("correct");
updateAnswerTracker("correct")
score++;
console.log("score:"+score)
}
else{
element.classList.add("wrong");
updateAnswerTracker("wrong")
}
disabledOptions()
}
function disabledOptions(){
for(let i=0; i<options.length; i++) {
options[i].classList.add("disabled");
if(options[i].id==questions[questionIndex].answer){
options[i].classList.add("correct");
}
}
}
function enableOptions(){
for(let i=0; i<options.length; i++) {
options[i].classList.remove("disabled","correct","wrong");
}
}
function validate(){
if(!options[0].classList.contains("disabled")){
alert("Please Selecto one option")
}
else{
enableOptions();
randomQuestion();
}
}
function next(){
validate();
}
function randomQuestion(){
let randomNumber=Math.floor(Math.random()*questions.length);
let hitDuplicate=0;
if(index==questions.length){
quizOver();
}
else{
if(myArray.length>0){
for(let i=0; i<myArray.length; i++){
if(myArray[i]==randomNumber){
hitDuplicate=1;
break;
}
}
if(hitDuplicate==1){
randomQuestion();
}
else{
questionIndex=randomNumber;
load();
myArr.push(questionIndex);
}
}
if(myArray.length==0){
questionIndex=randomNumber;
load();
myArr.push(questionIndex);
}
myArray.push(randomNumber);
}
}
function answerTrakcer(){
for(let i=0; i<questions.length; i++){
const div=document.createElement("div")
answerTrackerContainer.appendChild(div);
}
}
function updateAnswerTracker(classNam){
answerTrackerContainer.children[index-1].classList.add(classNam);
}
function quizOver(){
document.querySelector(".quiz-over").classList.add("show");
correctAnswerSpan.innerHTML=score;
totalQuestionSpan2.innerHTML=questions.length;
percentage.innerHTML=(score/questions.length)*100 + "%";
}
function tryAgain(){
window.location.reload();
}
window.onload=function(){
randomQuestion();
answerTrakcer();
}
Here you just have to modify the " questions and options and answers" part in the code. Add your Questions, options and answer in the code. You can repeat the same format for as many questions as you want.
And that's it. Once you publish it. Your quiz will be ready with full functionality.
Total Code for MCQ Quiz
If the above steps seem somewhat difficult to you, then I have another solution for you. Just copy the code from below and paste it directly into the HTML section of your post. Remember to change the Question, options and answer at the end of the code.
<style>
body{
margin:0;
background-color:#d9cdcd;
font-family: sans-serif;
}
*{
box-sizing: border-box;
}
.quiz-container{
max-width: 700px;
min-height:500px;
background-color: #ffffff;
margin:40px auto;
border-radius:10px;
padding:30px;
}
.quiz-container::after,.quiz-container::before{
content: '';
clear: both;
display: table;
}
.question-number,
.question,
.options,
.button,
.answers-tracker{
float: left;
width: 100%;
}
.question-number h3{
color:#009688;
border-bottom: 1px solid #ccc;
margin:0;
padding-bottom:10px;
}
.question {
font-size:22px;
color:000000;
padding:20px 0;
}
.options div{
background-color: #fff;
font-size: 16px;
color: 000000;
margin-bottom: 10px;
border-radius: 5px;
border: solid 1px darkgray;
padding: 15px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.options div.disabled{
pointer-events: none;
}
.options div.correct{
z-index: 1;
color: #fff;
}
.options div.correct::before{
content: '';
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
background-color: #09d209;
border: solid 1px #09d209;
z-index: -1;
animation: animateBackground 1s ease;
animation-fill-mode: forwards;
}
@keyframes animateBackground{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(0%);
}
}
.options div.wrong{
z-index: 1;
color: #fff;
}
.options div.wrong::before{
content: '';
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
background-color:red;
border: solid 1px red;
z-index: -1;
animation: animateBackground 1s ease;
animation-fill-mode: forwards;
}
@keyframes animateBackground{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(0%);
}
}
.button .btn{
padding:15px 50px;
border-radius:5px;
cursor: pointer;
background-color:#00a0d2;
font-size:16px;
color:#ffffff;
border: none;
display: inline-block;
margin:15px 0 20px;
}
.answers-tracker{
border-top:1px solid #ccc;
padding-top: 15px;
}
.answers-tracker div{
height: 40px;
width: 40px;
background-color: #cccccc;
display: inline-block;
border-radius: 50%;
margin-right:5px;
margin: 3px;
}
.answers-tracker div.correct{
background-color: #fff;
background-image: url(https://blogger.googleusercontent.com/img/a/AVvXsEhTysieJiTOusKu2d4WGG0VFMvT99fkqenqY30J-PYQXPkLQzShjoiqTA8uQ3pLvxx7LXuLoDh8AD-jO9NdxVHNDX4IKJT75tdxc_6J4z4jZQu7z3ky3ctWMKTmzAVpTTDoDb2jcjXAbis79ee6T-sAYeMGCtYPAU1_0PuPrjABMqICygN2KOFu33up=s833);
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
border: dashed 1px gray;
margin: 3px;
}
.answers-tracker div.wrong{
background-color: #fff;
border: dashed 1px gray; background-image:url('https://blogger.googleusercontent.com/img/a/AVvXsEikNX-7_M_M4rqYR0K5JiEHEsIRAx0wMTMdYx9REWw_wm-tdGzPnvSI4VtucGmDc_T4N50WXzMn_Pl6Qok3Y90nOwTqIzoyrsqjJy6VvZYu68ThaurV5UHUHetQfVhzsvlemmgxOP8Dbk9darCC9l4j1DYEHd1uLArCUtJFaZuqHvdNBCMS7z3j61dJ=s708');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
margin: 3px;
}
.quiz-over{
position: fixed;
left:0;
top:0;
width: 90%;
height: 100%;
background-color:rgba(0,0,0,0.9);
z-index: 10;
display: none;
align-items: center;
justify-content: center;
}
.quiz-over.show{
display: flex;
}
.quiz-over .box{
background-color:#34a9d2;
padding:30px;
border-radius:10px;
text-align: center;
flex-basis: 700px;
max-width:700px;
color:#ffffff;
}
.quiz-over .box h1{
font-size:30px;
margin:0 0 20px;
}
.quiz-over .box button{
padding:15px 50px;
border:none;
background-color:#FF9800;
border-radius:5px;
font-size:16px;
margin:15px 0 20px;
color:#ffffff;
}
.advt{
align-items: center;
}
</style>
<br />
<div class="quizContainer container-fluid well well-lg">
<div class="quiz-container">
<div class="question-number">
<h3>
Question <span class="question-num-value"></span> of <span class="total-question"></span></h3>
</div>
<div class="advt"><img src="https://www.wordstreamcdn.com/wp-content/uploads/2021/07/banner-ads-examples-ncino.jpg"><div>
<div class="question">
</div>
<div class="options">
<div class="option1" id="1" onclick="check(this)">
</div>
<div class="option2" id="2" onclick="check(this)">
</div>
<div class="option3" id="3" onclick="check(this)">
</div>
<div class="option4" id="4" onclick="check(this)">
</div>
</div>
<div class="button">
<button class="btn" onclick="next()" type="button">Next</button>
</div>
<div class="answers-tracker">
</div>
</div>
<div class="quiz-over">
<div class="box">
<h1>
Good Try!<br />
You Got <span class="correct-answers"></span> out of <span class="total-question2"></span> answers correct! <br />
That's <span class="percentage"></span>
</h1>
<button onclick="tryAgain()" type="button">TryAgain</button>
</div>
</div>
<script src="script.js"></script>
<script>
const options=document.querySelector(".options").children;
const answerTrackerContainer=document.querySelector(".answers-tracker");
const questionNumberSpan=document.querySelector(".question-num-value");
const totalQuestionSpan=document.querySelector(".total-question");
const correctAnswerSpan=document.querySelector(".correct-answers");
const totalQuestionSpan2=document.querySelector(".total-question2");
const percentage=document.querySelector(".percentage");
const question=document.querySelector(".question");
const op1=document.querySelector(".option1");
const op2=document.querySelector(".option2");
const op3=document.querySelector(".option3");
const op4=document.querySelector(".option4");
let questionIndex;
let index=0;
let myArray=[];
let myArr=[];
let score=0;
// questions and options and answers
const questions=[
{
q:'Enter Your Question Here',
options:['A. Option 1','B.Option 2','C. Option 3','D. Option 4'],
answer:4
},
{
q:'Enter Your Question Here',
options:['A. Option 1','B.Option 2','C. Option 3','D. Option 4'],
answer:2
}
]
// set questions and options and question number
totalQuestionSpan.innerHTML=questions.length;
function load(){
questionNumberSpan.innerHTML=index+1;
question.innerHTML=questions[questionIndex].q;
op1.innerHTML=questions[questionIndex].options[0];
op2.innerHTML=questions[questionIndex].options[1];
op3.innerHTML=questions[questionIndex].options[2];
op4.innerHTML=questions[questionIndex].options[3];
index++;
}
function check(element){
if(element.id==questions[questionIndex].answer){
element.classList.add("correct");
updateAnswerTracker("correct")
score++;
console.log("score:"+score)
}
else{
element.classList.add("wrong");
updateAnswerTracker("wrong")
}
disabledOptions()
}
function disabledOptions(){
for(let i=0; i<options.length; i++) {
options[i].classList.add("disabled");
if(options[i].id==questions[questionIndex].answer){
options[i].classList.add("correct");
}
}
}
function enableOptions(){
for(let i=0; i<options.length; i++) {
options[i].classList.remove("disabled","correct","wrong");
}
}
function validate(){
if(!options[0].classList.contains("disabled")){
alert("Please Selecto one option")
}
else{
enableOptions();
randomQuestion();
}
}
function next(){
validate();
}
function randomQuestion(){
let randomNumber=Math.floor(Math.random()*questions.length);
let hitDuplicate=0;
if(index==questions.length){
quizOver();
}
else{
if(myArray.length>0){
for(let i=0; i<myArray.length; i++){
if(myArray[i]==randomNumber){
hitDuplicate=1;
break;
}
}
if(hitDuplicate==1){
randomQuestion();
}
else{
questionIndex=randomNumber;
load();
myArr.push(questionIndex);
}
}
if(myArray.length==0){
questionIndex=randomNumber;
load();
myArr.push(questionIndex);
}
myArray.push(randomNumber);
}
}
function answerTrakcer(){
for(let i=0; i<questions.length; i++){
const div=document.createElement("div")
answerTrackerContainer.appendChild(div);
}
}
function updateAnswerTracker(classNam){
answerTrackerContainer.children[index-1].classList.add(classNam);
}
function quizOver(){
document.querySelector(".quiz-over").classList.add("show");
correctAnswerSpan.innerHTML=score;
totalQuestionSpan2.innerHTML=questions.length;
percentage.innerHTML=(score/questions.length)*100 + "%";
}
function tryAgain(){
window.location.reload();
}
window.onload=function(){
randomQuestion();
answerTrakcer();
}
</script>
</div>
I have provided you with a complete guide that will assist you in creating a more engaging MCQ quiz for your website. If you have any remaining doubts, please feel free to leave a comment.
Post a Comment