class quizcodingcsshtmlinteractive quizjavascriptquizsimplesimple html quiz

How to Make a Simple HTML Quiz | Develop a Class Quiz with Little Coding

There are many apps, software and tools in the online world that help teachers to generate quizzes for the young learners. Online quizzes are one of the best approaches of getting children more eager to learn; and this can be one of the most significant teaching learning activities. Please follow simple and powerful html codes given below for your thirst of the easiest and the most beautiful and responsive quiz that can be conducted with your students.

How to Develop a Simple HTML Quiz in Your Blog / Website

We have found an Open Source Quiz (built on HTML, Javascript and CSS) that is visually more appealing and does not have junk codes that would otherwise problematise the process. The developers call themselves ‘The regents of University of California’ and have made the code available in the internet so that people (in our case, we teachers) can use the same for their purposes of developing and conducting quizzes.

Related Articles

You need to understand HTML to some extent. If you understand CSS and Javascript, hosting the files and so on; you will be able to make more stable framework.

As we are writing in July 2021, the code works as given below. Please find the source code little further below.

Quiz

Now, please have a look at the code below. You can easily change the questions and multiple choice options. You can also add images to the contexts of the questions and adjust the number of questions. For this, you need to play with little coding. Copy the code below and paste in your blog post or website. You can then work further to engage the students with interactive quizzes.

<!DOCTYPE html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>Quiz</title>
    <!– jquery for maximum compatibility –>
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
    <script>
    /** Simple JavaScript Quiz
     * version 0.1.0
     * http://journalism.berkeley.edu
     * created by: Jeremy Rue @jrue
     *
     * Copyright (c) 2013 The Regents of the University of California
     * Released under the GPL Version 2 license
     * http://www.opensource.org/licenses/gpl-2.0.php
     * This program is distributed in the hope that it will be useful, but
     * WITHOUT ANY WARRANTY; without even the implied warranty of
     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
     */
    var quiztitle = “Quiz Title”;
    /**
    * Set the information about your questions here. The correct answer string needs to match
    * the correct choice exactly, as it does string matching. (case sensitive)
    *
    */
    var quiz = [
        {
            “question”      :   “Q1: Who came up with the theory of relativity?”,
            “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”   :   “Albert Einstein drafted the special theory of relativity in 1905.”,
        },
        {
            “question”      :   “Q2: Who is on the two dollar bill?”,
            “image”         :   “http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/US_%242_obverse-high.jpg/320px-US_%242_obverse-high.jpg”,
            “choices”       :   [
                                    “Thomas Jefferson”,
                                    “Dwight D. Eisenhower”,
                                    “Benjamin Franklin”,
                                    “Abraham Lincoln”
                                ],
            “correct”       :   “Thomas Jefferson”,
            “explanation”   :   “The two dollar bill is seldom seen in circulation. As a result, some businesses are confused when presented with the note.”,
        },
        {
            “question”      :   “Q3: What event began on April 12, 1861?”,
            “image”         :   “”,
            “choices”       :   [
                                    “First manned flight”,
                                    “California became a state”,
                                    “American Civil War began”,
                                    “Declaration of Independence”
                                ],
            “correct”       :   “American Civil War began”,
            “explanation”   :   “South Carolina came under attack when Confederate soldiers attacked Fort Sumter. The war lasted until April 9th 1865.”,
        },
    ];
    /******* 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 &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>
    <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: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: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 #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>
</head>
<body>
    <div id=”frame” role=”content”></div>
</body>
</html>{codeBox}

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button