HTML and JavaScript Quiz Template code

HTML and JavaScript Quiz Template code

Using HTML and JavaScript, you can create beautiful Quiz Template code which can be used to create a Quiz website. We used to play different types of websites but today we will provide codes for how to create a website in a normal process. This template is made up of full HTML CSS and JavaScript. Hope this tutorial will be good for everyone. This template has the facility of viewing photos, gifs, and last results. The exact answer that is correct is shown at the very end. If the answer to this tablet's question is wrong, then see the correct answer and then go to the next question. Ads Size 720 - 20 px. WhatsApp share is shared on the footer side.

HTML and JavaScript Quiz



HTML and JavaScript Quiz Image .

Rosalo-Quiz
Rosalo Quiz Template
Full Responsive Mobile friendly Template. See All Responsive layout.


Quiz Template source code

         
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Rosalo Quiz</title>

<!-- Your Meta tags--> 
    
   <link rel="icon" type="image/png" sizes="32x32" href=" Your favicon.icon url ">                       
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<style>
.footerbtn {
  display: block;
  line-height: 15px;
  left:0px;
  bottom:0px;
  height:40px;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 5px;
  background:#34af23;
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  width:95%;
  margin-left:10px;
  margin-right:30px;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .3);
  animation: footer infinite linear 1s;
  -webkit-transform: translate3d(30%,0,0);
  transform: translate3d(30%,0,0);
}
.footerbtn :active {
            box-shadow: none
        }
@-webkit-keyframes footer {
            from {
-webkit-transform: rotateZ(0)
            }
            25% {
-webkit-transform: rotateZ(1.5deg)
            }
            50% {
-webkit-transform: rotateZ(0deg)
            }
            75% {
-webkit-transform: rotateZ(-1.5deg)
            }
            to {
-webkit-transform: rotateZ(0)
            }}
</style>
<style type="text/css" media="all">
        /*css reset */
        html,body,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;}
        ol,ul{list-style:none;}
        strong{font-weight:700;}
        #frame{max-width:100%;width:auto;border:1px solid #01e5f9;background:#f5f3f3;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:italic bold 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 #01e5f9;width:100%;height:auto;}
        #choice-block{display:block;list-style:none;margin:0;padding:0;}
        #submitbutton{background:#b9caec;}
        #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 #0023ff;cursor:pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
</style>
</head>
<body>

<!--Ads no.2 -->

<!--Ads no.2 -->

<div id="frame" role="content">
   <script>
    /*Designed by -  Labnole.com */
    /*Author: Sheikh Saddam */
 var quiztitle = "Rosalo Quiz";
 var quiz = [
         {
             "question"      :   "Q1: What is the name of this person?",
             "image"         :   "http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Albert_Einstein_Head.jpg/220px-Albert_Einstein_Head.jpg",
             "choices"       :   [
                                     "Sir Isaac Newton",
                                     "Nicolaus Copernicus",
                                     "Albert Einstein",
                                     "Ralph Waldo Emmerson"
                                 ],
             "correct"       :   "Albert Einstein",
             "explanation"   :   "yes this picture is Albert Einstein ",
         },

       /*USER CAN CHANGE- question,image,correct answer, explanation*/

         {
             "question"      :   "Q2: What is the name of this fruit?",
             "image"         :   "http://bit.ly/2LTWiW6",
             "choices"       :   [
                                     "Banana",
                                     "Mango",
                                     "Strawberry",
                                     "Other"
                                 ],
             "correct"       :   "Mango",
             "explanation"   :   "Yes,Mango.",
         },
         /*USER CAN CHANGE- question,image,correct answer, explanation*/

         {
             "question"      :   "Q3: What is the name of this fruit?",
             "image"         :   "http://bit.ly/2skyYIt",
             "choices"       :   [
                                     "Mango",
                                     "Banana",
                                     "Strawberry",
                                     "Other"
                                 ],
             "correct"       :   "Banana",
             "explanation"   :   "Yes,Banana.",
         },
         /*USER CAN CHANGE- question,image,correct answer, explanation*/

     ];

     var currentquestion = 0, score = 0, submt=true, picked;

     jQuery(document).ready(function($){

         function htmlEncode(value){
           return $(document.createElement('div')).text(value).html();
         }
          /**
          * @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');
                 }
             }
         }
         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();
         }/**
          * @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 &raquo;').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('&nbsp;').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>
</div>
<!--Ads no.2 -->

<!--Ads no.2 -->
<center>
<a class="footerbtn" href="whatsapp://send?text=Touch this line and play quiz game 👉 www.Yoururl.com">
<img width="23px" height="23px" src=" WhatsApp icon URL"/><b style="font-size: 15px;"> Click to Share on Whatsapp</b> <img width="23px" height="23px" src=" WhatsApp icon URL "/></a>
</center>
     
</body>
</html>



Paste your code editor and every step following. After all, all the steps in the code are given, the Quiz template will be all set up.

If you like this tutorial, Please subscribe to share and don't forget to comment.

Post a Comment

1 Comments

  1. Super Sir, very nice tutorial.
    I love your website.

    ReplyDelete