Quiza - Multistep Quiz Form

Welcome To Quiza UI Kit - Creative HTML5 Template Documentation.

Firstly, thanks for purchasing Quiza. We really appriceate your support.

In this document, we have tried to cover all the things related to this template. Here, you will find the full installation guide and how do you will use this anywhere and some common issues with its solution - read this document minutely if you are experiencing any difficulties. If you need any help that are beyond the scope of this document, you can reach us at,

  • userthemes@gmail.com

    • Template Features

    • Clean & Simple Design
    • HTML5 & CSS3
    • Quiz Form
    • jQuery Validation
    • Fully Responsive Design
    • All files are well commented
    • Cross Browser Compatible with Brave, Firefox, Safari, Opera, Chrome, Edge
    • Extensive Documentation

    Quiza - Multistep Quiz Form

    Installing Template.

    1. After unzip the download pack, you'll found a Template Folder with all the files.
    2. You can view this Template in any browser, you can display or edit the Template without an internet connection.(May not work fonts and google map).
    3. Now go to your cpanel or open your FTP Client (like Filezilla) and upload the content of the Template on your server root.
    4. Once the files are done uploading go to www.yourdomainname.com/index.html

    Template Structure

    All information within the main content area is nested within a body tag. The general template structure is pretty the same throughout the template. Here is the general structure of main page (index.html).

    CSS Files and Structure

    These are the css files that are loaded into templates in Head Section.

    Google Web Fonts

    By default, the template loads this font from Google Web Font Services, you can change the font in style.css file with the one that suits you best.

    						
                        @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sen:wght@400;700;800&display=swap');

    Remember to change the font into style.css

    Placing Form or Template

    For better work progress, we've added a code snippet here. Suppose, you want to place a form to different HTML template; So, here's the example of how you will do that.
    Note: Any step you copy must be placed inside form tag 

    						
                    
            
            
    
                
                
    
                  Which Former Britishcolony was Given Back to China in 1997?
                
    
  
                
                Question

    Javascript Files and Structure

    These are the list of Javascript files that are loaded into templates in end of the Body Section.

    jQuery Validation

    Every step is checked when next button is clicked.

    radiovalidate(step number). this funciton will validate and return true if the condition is met. 

    
                    // quiz validation
                var checkedradio = false;

                function radiovalidate(stepnumber)
                {
                    var checkradio = $("#step"+stepnumber+" input").map(function()
                    {
                    if($(this).is(':checked'))
                    {
                        return true;
                    }
                    else
                    {
                        return false;
                    }
                    }).get();

                    checkedradio = checkradio.some(Boolean);
                }

    to validate the inputs inside form,div or fieldset or any other element which contains an input or set of inputs. the id should be like this id="step1" or id="step10" of that parent element. 

    
                    
    
                        
                    
    
                    
    
                        
                        
                    
    

                    
                    // check step10
                    $("#step10btn").on('click', function()
                    {
                        radiiovalidate(10); 
                        
                
                        if(inputschecked == false)
                        {
                            radiiovalidate(10);
                        }
                        else
                        {
                            next();
                        }
                    })

    Correct Answers Validation

    Correct Answers of every step should be stored in an array which is given below 

    
                    var correct_answers = ['Hong Kong','All of the above','Zoroastrianism','Gen. K.M. Cariappa', 'Zinc', '//increase if steps are more'];

    Complete Structure of how each option is checked and find the right one. 

    
                    //correct answers
                    var correct_answers = [
                      "Hong Kong",
                      "All of the above",
                      "Zoroastrianism",
                      "Gen. K.M. Cariappa",
                      "Zinc",
                    ];
                    
                    // user answers
                    let correct = 0;
                    
                    var steps = $("fieldset").length;
                    
                    console.log(steps);
                    function countresult(resultnumber) {
                      $("#step" + resultnumber + " input").each(function () {
                        for (var i = 0; i <= correct_answers.length; i++) {
                          if ($(this).is(":checked")) {
                            if ($(this).val() == correct_answers[i]) {
                              correct++;
                    
                              break;
                            }
                          }
                        }
                      });
                    
                      var correctprcnt = (correct / steps) * 100;
                    
                      $(".u_prcnt").html(correctprcnt + "%");
                      $(".u_result span").html(correctprcnt + " Points");
                    
                      if (correctprcnt >= 80) {
                        $(".pass_check").html(' You Passed!');
                        $(".result_msg").html("You passed the test!");
                      }
                    }

    Source and Credit