quiz maker for blogger: quiz, How Create Free quiz questions For Blogger, how to create quiz in blogger
Join Telegram Group: Click Here
quiz maker for blogger: quiz, How Create Free quiz questions For Blogger,how to make quiz for blogger,how to create quiz in blogger,how to create a quiz website in blogger
how to create quiz in blogger
To make a quiz in blogger, you have to follow four steps.
Step 1
In step 1 I am providing you a code below which you have to copy the whole code. And you have to click on New Post in your blogger website and after selecting HTML view, you have to paste the code on the same.
Select HTML View
Select All Code & Copy
<html>
<head>
<meta charset="utf-8"> </meta>
<title>Alltechinfo_Quiz</title>
<!-- jquery for maximum compatibility -->
<!--
This is made by Alltechinfo_Quiz
Date:- 12/10/2020 (UPDATE_29/-04/2021)
Copyright:- Alltechinfo_Quiz
www.alltechinfon.xyz
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var quiztitle = "Quiz Title";
var quiz = [
{
"question" : "Q1: Type Question",
"image" : "Past Image URL ",
"choices" : [
"(a)Types options First",
"(b)Type Option Second",
"(c)Type Option Third",
"(d)Type Option Forth"
],
"correct" : "(c)Type Correct Answer",
"explanation" : "Described Correct Options",
},
{
"question" : "Q2: Type Question",
"image" : "Past Image URL ",
"choices" : [
"(a)Types options First",
"(b)Type Option Second",
"(c)Type Option Third",
"(d)Type Option Forth"
],
"correct" : "(c)Type Correct Answer",
"explanation" : "Described Correct Options",
},
{
"question" : "Q3: Type Question",
"image" : "Past Image URL ",
"choices" : [
"(a)Types options First",
"(b)Type Option Second",
"(c)Type Option Third",
"(d)Type Option Forth"
],
"correct" : "(c)Type Correct Answer",
"explanation" : "Described Correct Options",
},
];
/******* No need to edit below this line *********/
var currentquestion = 0, score = 0, submt=true, picked;
jQuery(document).ready(function($){
/**
* HTML Encoding function for alt tags and attributes to prevent messy
* data appearing inside tag attributes.
*/
function htmlEncode(value){
return $(document.createElement('div')).text(value).html();
}
/**
* This will add the individual choices for each question to the ul#choice-block
*
* @param {choices} array The choices from each question
*/
function addChoices(choices){
if(typeof choices !== "undefined" && $.type(choices) == "array"){
$('#choice-block').empty();
for(var i=0;i<choices.length; i++){
$(document.createElement('li')).addClass('choice choice-box').attr('data-index', i).text(choices[i]).appendTo('#choice-block');
}
}
}
/**
* Resets all of the fields to prepare for next question
*/
function nextQuestion(){
submt = true;
$('#explanation').empty();
$('#question').text(quiz[currentquestion]['question']);
$('#pager').text('Question ' + Number(currentquestion + 1) + ' of ' + quiz.length);
if(quiz[currentquestion].hasOwnProperty('image') && quiz[currentquestion]['image'] != ""){
if($('#question-image').length == 0){
$(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question'])).insertAfter('#question');
} else {
$('#question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question']));
}
} else {
$('#question-image').remove();
}
addChoices(quiz[currentquestion]['choices']);
setupButtons();
}
/**
* After a selection is submitted, checks if its the right answer
*
* @param {choice} number The li zero-based index of the choice picked
*/
function processQuestion(choice){
if(quiz[currentquestion]['choices'][choice] == quiz[currentquestion]['correct']){
$('.choice').eq(choice).css({'background-color':'#50D943'});
$('#explanation').html('<strong>Correct!</strong> ' + htmlEncode(quiz[currentquestion]['explanation']));
score++;
} else {
$('.choice').eq(choice).css({'background-color':'#D92623'});
$('#explanation').html('<strong>Incorrect.</strong> ' + htmlEncode(quiz[currentquestion]['explanation']));
}
currentquestion++;
$('#submitbutton').html('NEXT QUESTION »').on('click', function(){
if(currentquestion == quiz.length){
endQuiz();
} else {
$(this).text('Check Answer').css({'color':'#222'}).off('click');
nextQuestion();
}
})
}
/**
* Sets up the event listeners for each button.
*/
function setupButtons(){
$('.choice').on('mouseover', function(){
$(this).css({'background-color':'#e1e1e1'});
});
$('.choice').on('mouseout', function(){
$(this).css({'background-color':'#fff'});
})
$('.choice').on('click', function(){
picked = $(this).attr('data-index');
$('.choice').removeAttr('style').off('mouseout mouseover');
$(this).css({'border-color':'#222','font-weight':700,'background-color':'#c1c1c1'});
if(submt){
submt=false;
$('#submitbutton').css({'color':'#000'}).on('click', function(){
$('.choice').off('click');
$(this).off('click');
processQuestion(picked);
});
}
})
}
/**
* Quiz ends, display a message.
*/
function endQuiz(){
$('#explanation').empty();
$('#question').empty();
$('#choice-block').empty();
$('#submitbutton').remove();
$('#question').text("You got " + score + " out of " + quiz.length + " correct.");
$(document.createElement('h2')).css({'text-align':'center', 'font-size':'4em'}).text(Math.round(score/quiz.length * 100) + '%').insertAfter('#question');
}
/**
* Runs the first time and creates all of the elements for the quiz
*/
function init(){
//add title
if(typeof quiztitle !== "undefined" && $.type(quiztitle) === "string"){
$(document.createElement('h1')).text(quiztitle).appendTo('#frame');
} else {
$(document.createElement('h1')).text("Quiz").appendTo('#frame');
}
//add pager and questions
if(typeof quiz !== "undefined" && $.type(quiz) === "array"){
//add pager
$(document.createElement('p')).addClass('pager').attr('id','pager').text('Question 1 of ' + quiz.length).appendTo('#frame');
//add first question
$(document.createElement('h2')).addClass('question').attr('id', 'question').text(quiz[0]['question']).appendTo('#frame');
//add image if present
if(quiz[0].hasOwnProperty('image') && quiz[0]['image'] != ""){
$(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[0]['image']).attr('alt', htmlEncode(quiz[0]['question'])).appendTo('#frame');
}
$(document.createElement('p')).addClass('explanation').attr('id','explanation').html(' ').appendTo('#frame');
//questions holder
$(document.createElement('ul')).attr('id', 'choice-block').appendTo('#frame');
//add choices
addChoices(quiz[0]['choices']);
//add submit button
$(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('Check Answer').css({'font-weight':700,'color':'#222','padding':'30px 0'}).appendTo('#frame');
setupButtons();
}
}
init();
});
</script>
<style media="all" type="text/css">
/*css reset */
html,,div,span,h1,h2,h3,h4,h5,h6,p,code,small,strike,strong,sub,sup,b,u,i{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1; font:normal 0.9em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;}
strong{font-weight:700;}
#frame{max-width:620px;width:auto;border:1px solid #ccc;background:#fff;padding:10px;margin:3px;}
h1{font:normal bold 2em/1.8em "Helvetica Neue", Helvetica, Arial, sans-serif;text-align:left;border-bottom:1px solid #999;padding:0;width:auto}
h2{font:normal 1.3em/1.2em "Helvetica Neue", Helvetica, Arial, sans-serif;padding:0;text-align:center;margin:20px 0;}
p.pager{margin:5px 0 5px; font:bold 1em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;color:#999;}
img.question-image{display:block;max-width:250px;margin:10px auto;border:1px solid #ccc;width:100%;height:auto;}
#choice-block{display:block;list-style:none;margin:0;padding:0;}
#submitbutton{background:#5a6b8c;}
#submitbutton:hover{background:#7b8da6;}
#explanation{margin:0 auto;padding:20px;width:75%;}
.choice-box{display:block;text-align:center;margin:8px auto;padding:10px 0;border:1px solid #666;cursor:pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
</style>
<body>
<div id="frame" role="content"></div>
</body>
</html>Past Code
How To Add More Question
Now if you want to add more questions then all you have to do is copy this code. And now you have to paste the code as shown in the picture. Now you have to paste the code as many times as you want to add the questions.
{
"question" : "Q3: Type Question",
"image" : "Past Image URL ",
"choices" : [
"(a)Types options First",
"(b)Type Option Second",
"(c)Type Option Third",
"(d)Type Option Forth"
],
"correct" : "(c)Type Correct Answer",
"explanation" : "Described Correct Options",
},
Pest Code For Add More Questions
Thank you very much. I have implemented in my blog and successful