# 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?

                        France

                        Egypt

                        Vatican City

                        Russia

## 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

- jQuery
- Bootstrap5 Framework

## Copyright

Thanks to all our UI Experts and the Developers. Quiza made with ❤️ by User Themes | Copyright ©️2021-2023