QuizckQuiz 1.3.4 - Documentation

The documentation is on one single HTML page, so you can use Ctrl+F or ⌘+F to search any feature.

Table of contents


QuickQuiz is a simple and powerful test and/or survey creator which resulting product can be published in an HTML page (it is not a WordPress plugin).

Here are some of its most outstanding features:

  • Ten types of questions: single answer, multiple answer, sequence, pairing, long answer, short answer, scales, rating, matrix with radio buttons and matrix with rating.
  • Different answer formats depending on the type of question: buttons, checkboxes, radio, select, sliders, tables...
  • Several display options: Number of buttons per row, aside or background images, main color, etc.
  • Pages. We can create the entire quiz in either one or several pages, selecting the number of questions in each one.
  • Video and audio. We can create a page with video or audio with questions displayed at certain times of the playback. This option only works properly in the latest browsers and is powered by Videogular library.
  • Several types of quizzes. The quiz can be exam, self-assessment, survey, weighted or personality quiz.
  • Final message and/or feedback. We can display different messages or images on the final page depending on the number of points, the percentage of right answers, etc. We can also show messages that can be displayed next to the question in relation to the user's answers.
  • Database. The results can be sent to a MySQL database (new!) or a database created with parse.com (deprecated).
  • Online builder. The final quiz is generated from two JSON files, one for general settings and the other for the questions that make up the test. This package includes access to the builder to make easier the creation of the JSON files.

First steps #back to top

In addition to the folder containing this documentation, the file you've downloaded have the examples folder and the quickquiz folder, which contains our final quiz.

To make easier the creation of the JSON files you can access to the online builder. To access you need your purchase code.

A web server is needed both to run the examples or to display the resulting quiz. To run the quiz locally, we must have a local server. We also have the option to use the quiz without web server but is not recommended as there are several limitations and is more difficult to modify.

If we need to test sending to database we can install WAMP (Windows), MAMP (Mac OS X), or any other local werver with PHP and MySQL. If we don't need this feature (because we don't send the data to a MySQL database) I recommend installing the server Fenix as it is the easiest.

Step 1. Login in http://fenixwebserver.com/. Download, install and run.

Step 2. Create a new server.
- Web Servers -> New
- We assign a name, such as QQ, and we choose the main folder containing examples and quickquiz.
- Click Create

Step 3. To start the server put the cursor on its name and press play, or select Web Servers -> Start All.

Step 4. We click on the server name to open the main folder. We can choose our quickquiz folder or any other example.

QuickQuiz Builder #back to top

QuickQuiz Builder is an application that we can use to generate the two JSON files we need to create our quiz: the config.json file and the questions.json file. The following sections will explain the different options of this builder.

The application has four main areas:

  • Settings. Contains the sections: general settings, labels, score and database. Using these sections, we can configure the general characteristics of the quiz, and the result is displayed in the config.json file.
  • Quiz. Here, we will create the pages and questions that our quiz will contain, generating the questions.json file that our application need.
  • Preview. In this tab we can preview the test we are creating.
  • Download generated code. Here, we can see and download the generated json files.

General settings #back to top Builder - Settings - General settings


Type of quizzes

We have to choose between different types of quizzes available. Not to select any be deemed to be of type survey. According to choose one or another type of quiz different options may be available, so it is important to make this selection as soon as possible to avoid possible errors.

If in a quiz we use questions that are not available on the selected test (eg rating in a personality quiz), those questions will be displayed as survey (no points in this case).

  • Graded: Select graded if at least one of the questions have answers type right / wrong and you want to automatically correct it. The questions that allow assess whether the answer is correct or incorrect are: single answer, multiple answer, sequence, matching pairs, short answer and matrix - radio.

    Click here to see an example of a graded quiz.


  • Weighted: Select weighted if the answers are not right or wrong, but each answer choice has a different value that will be added to obtain the final score. The questions where every answer can be worth different amounts of points are single answer, multiple answer, matrix, likert scale y rating.

    Click here to see an example of a weighted quiz.


  • Personality: Select personality if it is a personality quiz (BuzzFeed style). In these quizzes we have to add the possible personalities or categories as final outcome, and each user answer will rate in one category or another. The end result is the personality or category that has scored more points. In case of a tie the first of the winning personality will be shown as the winner. For this type of test we can use multiple-choice questions: single answer y multiple answer.

    Click here to see an example of a personality quiz.


  • Survey: Select survey if you will not make any automatic evaluation. In this type of test we generally send the results to a database and manually evaluate the answers given. For this type of test we can use any type of question.

    Click here to see an example of a survey quiz.


Whiteframe

Shows the quiz within a white frame with shade.


Toolbar

Shows the main titles within a colored bar.


Page number

Shows the page number and total pages at the bottom of the quiz.


Progress bar

Shows a progress bar at the bottom that refers to the page number where we are regarding the total.


Question number

Automatically display the number of questions before the statement.


Show points Option enabled if graded is selected.

Shows the point value of each question next to the statement.


Redo button

Show a button to redo the quiz on the score or thanks page. If we try this option in the builder the answers given will remain, but in our final project the user answers will be deleted, unless you have selected save localstorage (below).


Options for required questions

  • All required questions

    Select only if ALL questions are required. If this option is not select we can make it compulsory each question individually.

  • Show asterisk

    Show an asterisk next to the statement if the questions is required.

  • Unanswered action
    • - Show alert. Shows an alert when the user presses the next/submit button and there is some unanswered required questions in the current page.
    • - Hide next or submit button. Hides the button to continue while there is some required question unanswered in the current page. If there are any alerts selected, it will be displayed by default until the user answers.

  • Show global alert

    Show an alert at the bottom near to the next/submit buttons if there are any required questions unanswered.

  • Show question alert

    Show an alert below the statement if the user try to go to the next page or submit the quiz and the question is required and unanswered.


Options for Local Storage

  • Save LocalStorage

    Save the users' answers locally so they can continue the quiz in other moment. Thus, when the user returns to the quiz it can show his/her answers and continue from the point where he/she was.

  • Ask the user

    Shows a pop-up window in which the user is asked if he/she wants to load his/her previous answers or if he/she prefer to start the test from scratch. If we don't ask the user and select Save LocalStorage, his/her answers will be loaded automatically.

  • Refresh browser

    Refresh the browser on page changes. Only available if we have select Save LocalStorage and Ask the user is not selected.


Auto advance

Automatically go to the next question/page when the user answers. Only works properly if we have one question per page (or all questions are required) and don't use input text or multiple answers questions.


Hide nav buttons

Hide the navigation buttons (previous, next, finish). Only available if we have selected Auto advance.


Page transition

Optional transition animation between pages. We can choose a fade and/or slide animation.


Timer

We can set a maximum time in seconds. When the time has elapsed it will either go directly to the final score page, or the results will be sent directly to the database if we selected submit from the last page.

Leave the value to zero if you don't want a timer.

Labels #back to top Builder - Settings - Labels


The basic labels of the test: titles, buttons, messages, etc., are shown in this section. Some of them appear with a default text that can be easily changed. It isn't necessary to remove the texts that we will not show (for example, if we don't send the results to a database, we don't show feedback, we don't show some messages on the score page, etc.).


Home page

  1. Start Quiz Button

    Label for the start button.

  2. Home title

    Title for the home page.

  3. Home Description

    Optional home page description. Supports plain text or basic HTML tags. If we want to include advanced HTML code, we can edit the templates/home.html file.


Quiz page

  1. Main title

    Title for the pages with questions. Leave the field blank if we want this title to be different on each page.

  2. Points text

    Word that appears after the number of points for each question.

  3. Previous button

    Text for the previous page button.

  4. Next button

    Text for the next page button if we are not on the last page.

  5. Finish button

    Text for the next button if we are on the last quiz page.

  6. Feedback button

    Text to show the feedback if we have selected feedback with button.

  7. Feedback window Ok button

    Text for the button to close the feedback window.

  8. Feedback window title

    Optional title for the feedback window.

  9. Image popup window CLOSE button

    Text for the button to close the aside image popup.

  10. Required global alert

    Text for the global alert at the bottom page if we have selected Show global alert.

  11. Required question alert

    Text for the alert below to the question statement if we have selected Show question alert


Send to database

  1. Submit button

    Text for the button to send the answers to the database.

  2. Sent success

    Automatic text message that will appear if the data has been successfully submitted.

  3. Sent error

    Automatic text message that appears if there has been a problem in sending the data.

  4. Send form title

    Title for the sending data section if it includes a form.

  5. Send form name input text

    Name for the username field.

  6. Sent form email input text

    Name for the email field

  7. Form required field error

    Error that appears when the 'submit' button has been pressed but a field hasn't been filled out.

  8. Form email error

    An Error that appears if we are in an email field and it is wrong.


Score page

The score page may show very different messages. In the next score tab, we will choose which of these messages are going to be displayed.

  1. Score title

    Title for the score page.

  2. Score description

    Optional description for the score page. If we want to include advanced HTML code, we can edit the templates/score.html file.

  3. Unanswered question

    Text that appears in unanswered questions.

  4. Answer previous text

    Text that appears before the user's response. Leave this blank if we don't want a previous text.

  5. Solution previous text

    Text that appears before the solution. If we choose to show only the solutions, it's recommended to remove this text.

  6. Correct

    Text to show the number of questions answered correctly.

  7. Incorrect

    Text to show the number of questions answered incorrectly.

  8. Left blank

    Text to show the number of unanswered questions.

  9. Points scored

    Text to show the points scored.

  10. Percentage scored

    Text to show the percentage based on number of correct answers on regards to the total number of questions.

  11. Breakpoints by points

    Here, we can create different messages which are shown according to the points scored. We can include as many breakpoints as needed.

  12. Breakpoints by percentage

    Here, we can create different messages which are shown based on the percentage of correct answers. We can include as many breakpoints as needed.

  13. Assign messages according to the winning personality

    In the personality quiz we can add messages that are displayed depending on the winning personality.

  14. Redo button

    Text for the button that allows redo the test.


Thanks page

This page is similar to the home page, and will only be shown if we have selected the quiz to be sent to a database, and then being redirected to the thanks page.

  1. Thanks title

    Title for the thanks page.

  2. Thanks Description

    Optional description for the thanks page. Supports plain text or basic HTML tags. If we want to include advanced HTML code, we can edit the templates/thank-you.html file.


Local Storage

  1. Pop-up asking the users if they want to load their previous answers

    Text for the pop-up asking the users it they want to load their previous answers. This pop-up will be only shown if General Settings - Ask the user are selected.

  2. Load previous answers

    Text for the button to load answers saved locally, Yes by default.

  3. Don't load previous answers

    Text for the button to start the quiz from scratch, without load the stored answers.

Score #back to top Builder - Settings - Score


  1. Total quiz points

    The total points will be divided among all scoring questions, that is, the ones that have the graded option on. If we want to assign different values ​​to any question, then we should set this value to zero, and points are then allocated using the options of each question.

    If we do not want to show the points scored but only the percentage of correct answers or feedback, it is not necessary to assign total points nor points in each question.

  2. Penalty points

    Penalty points for each scoring question answered incorrectly. Set this value to zero if we want to assign different penalties to each question, or if the errors are not penalized.

  3. Decimal places

    Maximum number of decimal places to be displayed if either the percentage or scored points is not an integer value.

  4. Show message

    Show a final message highlighted on the score page. In the following points of this list (5 to 10) we will select what is going to be shown in this message.

  5. Points

    Show scored points.

  6. Maximum points

    Shows the total points that could have been obtained if we are showing the scored points.

  7. Points message

    Shows a different message based on the points scored. Breakpoints and their corresponding messages can be created in the labels tab.

  8. Percentage

    Show the proportion of the questions answered correctly in regards to the total. This message doesn't depend on the points scored, but simply the proportion of correct answers.

  9. Percentage message

    Shows a different message according to the obtained percentage. Cut-offs points and their corresponding messages can be created in the labels tab.

  10. Summary

    Shows a message showing the number of correct answers, incorrect answers and unanswered questions.

  11. Background and text color

    Background and text color for the highlight message in the score page. If we remove these colors, the message will have the same color as the main color of the quiz.

  12. Show quiz

    Shows all the questions. We can show the user's answers and/or solutions according to what we select in the following sections.

  13. User answers

    Shows the answers given by the user. We can remove the messages previous to answers in the labels tab.

  14. Right/wrong icons

    Shows either the 'correct' or 'wrong' icon according to the user's answers.

  15. Solution

    Shows the solution to the question in case that the user chose the wrong answer, or if we aren't showing the user's answers.

  16. Personality message

    It shows a different message according to the winning personality. The corresponding messages can be created in the labels tab.

  17. Options about SHOW CUSTOM IMAGES on the score page

    In this section we can assign custom images on the page score depending on the winning personality or points or percentage obtained (depending on the type of quiz.

  18. Options about SHARE ON SOCIAL MEDIA on the score page

    In this section we can choose whether we want to appear icons to share on social networks (twitter, facebook, google plus, linkedin). We can assign different pages for each score or obtained personality, and we can customize the message and image to will be shared on social networks.

    In the case of twitter, although changes in the metadata are displayed on the twitter card, we must change the text that is shared in the file templates/score.html (around line 182).

    If we want to share only the home page of the quiz must modify the metadata of our index.html. As seen in the example of personality quiz included in this item, we recommend creating different pages for each possible outcome (are in the Share folder) and those pages automatically redirect to the home page. In this way we benefit from having custom metadata to share, but they all lead to the home page of the test.

    In the Share folder in our QuickQuiz we can find a basic template (exampleShare.html) that we fill with our data and duplicate as many times as necessary.

Database #back to top Builder - Settings - Database


We can send user responses and/or its score to a  MySQL database or use Parse (not recommended, because recently they announced its closure).

In the database tab of the builder we have the following options:

  1. Send to database

    If we select MySQL or Parse other options on this tab will be enabled<./p>

  2. Parse Application ID and Parse Javascript Key

    These options only appear if we have selected Parse. In this case we copy these keys in our application.

  3. Table name

    Assign a name to the table that will store all data received. We can create a separate table for each test we create.

  4. Submit button

    Choose where do we want the button to send the test to show up: in the score page or at the end of the quiz, after the last question.

  5. Send user data

    Choose whether we want to send the name and/or email along with the data. You will can choose where to show the form.

  6. Send quiz data

    Select which part of the test data do we want to be sent: percentage, points, winning personality and/or user answers.

  7. Show success

    Show pop up message informing the data are been successfully inserted into database.

  8. After sending go to

    Select to which page do we want the user to be redirected once the quiz is sent.

Instructions for MySQL

In the quickquiz/php/ folder there are two PHP files thant need to modify with our server data.

The sendMySQL.php file is used to send de data to the MySQL database. The table name is on file config.json generated, but we have to change other server data within the php file::
$servername = "localhost";
$username = "yourUsername";
$password = "yourPassword";
$database = "yourDatabase";

The showMySQL.php file is optional. It's just an example to show web data stored in our database. In this case we also need to assign here the name of our table:
$table = "yourTable";

Instructions for Parse

To see the answers received, go to the core menu (1) in our application (2) and click the name of our table (3).

If we want to import the table into other applications, export it from Parse (4), and we will receive a zip file through email with the table data in JSON format. We can directly import this zip in http://json-csv.com/ and then click on download to download the table in CSV format.

To improve the security of Parse, I recommend the following steps:
  1. Send a test quiz answering all the questions of your test to generate classes and columns / fields that need.
  2. App Setting -> Security and Keys -> App Permissions -> Allow client class creation -> No so they can not create new tables. Remember enable it again if you create a new quiz.
  3. On your table select Security -> Permissions -> Advanced and deselect Read (Get and Find), Write (Update and Delete) y Add Field. Remember do it after receiving at least one test data with all questions answered, so that your table has all the required fields.

Pages#back to top Builder - Quiz - Pages

On the right side of the quiz tab, we can find the pages section, from which we can create and delete pages. Questions and options refer to the page that is currently selected.

Page options #back to top Builder - Quiz - Page options

Title

Optional title for the current page. If we have left Settings- Labels - Main title blank, then this title will appear in the top bar of the current page. If there were a main title, the title page would appear below that top bar.


Description

Optional description that appears on the top of the current page.


Add video/audio source

We can add a video or audio which will appear on top of the current page. If the page contains audio or video, we can select at which point of the playback each question of that page is displayed. The video playback stops when each question is displayed.

If the questions are required, when a question is displayed disappear the controls to play the video until the user has answered.

The application allows us to choose between a YouTube video or an audio or video file in mp4, ogg, webm, mp3 (mpeg) or wav formats.

If we use a video or audio file we must select what type of file it is. We can include multiple sources for the same media in different formats. The browser will use the first format it can play.

In the Autoplay section we have the option to select the video to play automatically when the user has answered the current question or when his answer is correct. If there is a question in the second 0 it is possible that autoplay not work on mobile devices.

If we use YouTube videos must bear in mind that it may not work properly in IE10.

Questions - Types #back to top Builder - Questions

When we add a question we can choose the type of question. Depending on the type of question that we select, we will later have different options to choose from. All available options are explained in a later section.

Once we have created a question we can create new ones from scratch or by copying a question.


Multiple choice - Single answer

The user can choose one answer from among several possible. This is probably the most common type of question. The true/false questions are also created using this type, since it is a simple answer between two options.

The options can be displayed as normal buttons, radio type buttons, selecting from a drop down list or image buttons.


Multiple choice - Multiple answer

The user can select more than one answer from several possible.

The options can be displayed as normal buttons, checkboxes or images buttons.


Sequence

The user has to sort a list of options. The options are displayed as a drop-down list with the position number


Matching pairs

The user has to match two lists of items.

The match options can be displayed as two lists of buttons, having to match those on the left with the right, or as drop-down lists (select) with fixed elements.


Short answer

The user has to write a short answer to a question.


Long answer

The user can type an answer longer than one line for a question.


Likert scale

The user must select a value on a numerical scale. The scale can be displayed as buttons or slider.


Rating

Traditional rating system, where the user gives an assessment selecting a number of stars, hearts or thumbs up.


Matrix - Radio

Table in which the user can select one of several options for the statement or word of each row. Some of the common uses are tables true-false or opinion scale tables.


Matrix - Rating

Ratings table, where the user gives his rate by selecting a number of stars, hearts or thumbs up for each row.

Questions - Basic and advanced options #back to top Builder - Questions

From the questions tab we can open or close the panel of each question with the pencil-shaped icon.

To delete a question, we use the x shaped icon.

At the bottom, we have the option to add a new question or copy a previous question. The copy another question option can be useful if they are similar.

After adding a question of a certain type we will see the options available for that question. The available options vary depending on the type of question used and on what options we have selected in the general settings.

Cuepoint Available for every question if we have chosen a video or audio file in the page options.

Time in seconds of the video or audio in which we want this question to appear. At that point of the video, playback will stop and the question appear. If we had selected required questions in the general settings, the video controls will disappear until the user answers the question.


Statement Available on all questions.

Wording of the question.


Description Available on all questions.

Optional description that would appear under the statement of the question. This field supports both plain text and basic html.


ID Available on all questions

Optional ID name. Only supports one word without whitespaces (not numbers).

If we send the answers to a database, this ID will be the column name for the current question in the database. If there is not an ID, the name will be the letter q followed by the question number.

This ID can also be usefull to identify a question in multiple cases (conditional paths available coming soon, customized messages in the score, etc.)


Header Available on matrix - rating.

Optional header for the rating column.


Graded Available on single answer, multiple answer, sequence, matching pairs, short answer and matrix - radio, if General Settings - Graded is selected.

Select if the question is scoring (if the user's answer will be automatically evaluated).

If the question is graded we must assign a solution for the correct functioning of the quiz.


Weighted Available on single answer, multiple answer, matrix, likert scale y rating if General Settings - Weighted are selected.

If we are in a weighted quiz and in a question where this option is available, we can decide if that question will be weighted. If so, we can assign different number of points for each possible answer.

In the case of rating, the points scored correspond to the selected rating (if selected 3 star, will add 3 for the final score). To likert scale will be similar by default, but also have the option to assign custom values, ie, assign points that do not correspond to the selected value of the scale.


Personality points Available on single answer and multiple answer if General Settings - Personality are selected.

Here we can assign different points to each personality or category depending on the choice selected. One answer can score in different categories.


Image question Available on multiple choice questions: single answer and multiple answer.

Select if the answer options will be images instead of text.


Left and right images Available on matching pairs.

Select if the answer options on the right and/or left will be images instead of text.


Left and right choices Available on matching pairs.

Write the list of the first choices of each pair in the list on the left and hit enter to add it. In the list of the right type their partners in the order we want them to appear. We must have the same number of options on the left and right.

If we had selected images left o images right, the corresponding options will be the absolute url to each image.


Choices Available on single answer, multiple answer, sequence and matrix - radio.

Write each answer alternative in the order we want it to appear and press enter to add it. If we had selected image question the text will be the relative or absolute path to each image.

If it is a matrix - radio question each choice corresponds to a column of the table.


Rows Available on matrix - radio and matrix - rating.

Write each sentence o word for warch row and press enter to add it.


Rows ID Available on matrix - radio and matrix - rating if Settings - Database - Send to database (MySQL or Parse) are selected

Optional row ID. Only supports one word without whitespaces. The column name for the current row in the database will be QuestionID_RowID. If there is not a row ID, the name will be the row number.


Other choice Available on single answer - radio buttons and multiple answer - checkbox if it's a survey question.

Create one last other option in wich we can select a custom answer through a text input.

  • Other option text. Text for the other option.
  • Other placeholder. Default text for the input text field if the user select the other option.
  • Input position. Position for the input text. If we put the input in the right, we can adjust the margin on line 32 on css/quickquiz.css file.

Solution Available on single answer, multiple answer, sequence, matching pairs and matrix - radio if the question is graded.

This option appears if the question is graded and we have set at least two possible answers. The type of format to select the correct answer depends on the type of question we are using.

If the question is graded we must assign a solution for the correct functioning of the quiz.


Choices type Available on single answer, multiple answer and matching pairs.

Depending on the type of question we have different formats available to show the options:

  • Button. Buttons to click avalable on single answer, multiple answer and matching pairs questions. If we've selected image question, the button will be an image.
  • Radio. Radio buttons available on single answer questions.
  • Checkbox. Multiple selection boxes available on multiple answer questions.
  • Select. Drop-down list available on single answer and matching pairs questions.

Placeholder Available on short answer, long answer, or if we selected select in choices type.

Default text that appears in place of text input if it is a short answer or long answer question, or at the start of a drop-down list if we have chosen a select type.


Possible solutions Available on short answer if the question is graded.

Here, we will write all possible correct answers to the question. The first answer we write will be considered the best, which means that if the user does not enter any of the solutions considered correct, then this will be the solution to be shown on the score page. Capital letters are not taken into account when considering whether the answer is correct or not.


Sample solution Available on long answer.

Although it is not possible to automatically correct a long answer question, so it can't be graded, we can show a sample solution in the score page to these kind of questions.


Points - Penalty Points Available if the question is graded and if Settings - Score - Total quiz points is zero.

Here, we will write down how many points is the question worth, and whether we apply penalty points if the user answers incorrectly. If we globally assigned a value of total points to quiz, then that quiz value will be split among all the graded questions.


Feedback Available on all questions except matrix.

Feedback refers to the comments regarding the user answers. It is widely used in self-assessment test. There are several types of feedback available, depending on the type of question we are using.

If the feedback selected is right/wrong, option, partial or basic to the comments will be shown below to the question each time the user makes a response. If the feedback selected is score - right/wrong or score - basic, this text will be shown on the score page.

  • None. Select none if we do not want to show any feedback.
  • Right/Wrong. In this case, we will show different comments depending on whether the user answered correctly or incorrectly. Available if the question is graded (except matrix).
  • Option. Here, we show different feedbacks for each possible answer. Available if the question is single answer.
  • Partial. This feedback allows us to display different comments depending on the proportion of correct answers in the multiple answer type questions.
  • Basic. If we select basic we can show the same comment if the user has answered the question, regardless of the answer.
  • Score - Right/Wrong. This feedback will be shown on the final score page as a solution according to whether the answer is right or wrong.
  • Score - Basic. This feedback will be shown on the final screen score as a solution regardless of whether the user has failed, it has been right or left blank the question.

Depending on the selected feedback, a Feedback text field will appear, and we can write comments for each event will appear. It isn't necessary to fill in all fields: for example, we can show a comment if the answer is wrong, but not showing anything if the answer is right.

Finally, if we have selected a feedback shown below the question, a field called Feedback class will appear in which we can choose how we want to show the aforementioned feedback: through a button or directly showing the comment under the question.


Top text Available on likert scale.

Texts that appear at the top of the scale questions. We can display text on the left and right ends, and optionally add a central text.


Scale type Available on likert scale.

We can choose whether we want the scale to be shown as a row of numbered buttons or as a slider.


Minimum value and Maximum value Available on likert scale.

Here, we will assign the minimum and maximum values ​​of the scale.


Default value and Show number Available on likert scale if it's shown as a slider.

We can assign a default value in the slider. This will allow the slider to be controlled with the arrow keys. The disadvantage is that if the user does not respond, the default value is assigned as answer.

Another option available on the slider is to show the value of the scale when the user selects it.


Select icon and Number Available on rating and matrix - rating.

In rating questions we can select between three types of icons: stars, thumbs up and hearts.

We can also select how many of these icons do we want to appear, ie, what will be the maximum value.


Required Available if Settings - General Settings - All required questions is not selected.

Select this option if you want this question is required.


Random Available on single answer, multiple answer, sequence, matching pairs, matrix - radio y matrix - rating.

This option enables the display answer choices (rows if it's a matrix question) in random order.


Border color Disponible en matching pairs.

Shows a different border color for each pair that the user has selected.


Aside image Available on all questions.

Displays an image beside the answer choices. We can see the image in a popup if we click on it.

In image path we will write the URL for each image.

In Image position we can choose whether the image is displayed on the left or right of the answer choices. The image will fill half the available space.

In SHow in the score we can select if want to show the aside image also on the score page (always in the right).


Background image Available on all questions.

Allows to set a background image to the answer choices area. The image will cover all the available space in the answers area, and it is therefore possible that some parts of the image will be trimmed.

In BG image path we will write the URL for each image.

In Minimum height we can determine the minimum height in pixels for the background image. Leave this field blank if we do not need the image to be bigger than the answer area.


Width 50% Available on all questions.

Select this option if we want the answers to occupy half the available space, and not 100% of the width.


Options for buttons Available if the answer choices are buttons.

  • Items per row.

    Number of buttons in each row. The buttons will grow up to fit the number of items selected by row.

  • Keep width.

    If we activate this option, the same number of buttons per row is displayed on both desktop and mobile. Is recommended to only activate it if the button text is small. If the option is disabled, we will only see one button per row in mobile.

  • Item separation.

    Separation between the buttons. If disabled, there's not going to be any gap between the buttons.

  • No border.

    This option is available only if there is a question with images as answer choices. If we select no border, there will be no visual clue as to whether an image has been selected.

  • Semitransparent.

    It allows to slightly see the image behind the buttons. We may want to activate the semi-transparency in questions that have a background image.

  • Text left.

    By default, the button text is centered. If we want the text to be aligned to the left, we must select this option. This option is not available if the answer choices are images.

Preview #back to top Builder - Preview

In the preview tab we can preview the quiz with the settings and questions we have created. We need to have at least one question to be correctly displayed. We also need to have a text assigned to the start quiz button.

Download generated code #back to top Builder - Download generated code

Once our quiz was created, we can preview and download the required code to publish it using the download generated code tab.

We must download and save in the quickquiz/data folder both the config.json and the questions.json files. It is important to NOT rename these files.

If we want to use this app without a web server we must save the file data.js that we can download through a button at the bottom of this tab. In this case is important to read the Publication - Using the quiz withour web server section in the documentation, as there are several limitations and considerations to take into account in this case. It is not recommended to use this option if we can publish the test on a web server.

Keep in mind that the builder data is lost once we exit the application. If we are creating a very extensive test, it is advisable to download and save the questions as we create them, and when we create new ones, we simply copy the new code and paste it in the previous questions.json file that we had downloaded.

In the Code - JSON section of this tutorial, I explain the structure of these files in case we want to manually add new questions. This will be particularly useful in extensive tests or if we have a lot of questions with similar characteristics.

Main color #back to top

To change the main color of the application (title bar, buttons, etc.), we must open the quickquiz/js/quickquiz.js file. On the 25th line of the file we will find the code shown in the image on the right.

First we can rename the color, teal by default, to any of these colors: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, white, blue-white.

We can also change the tone number, 500 by default, to the one that suits our needs the most.

On the site http://www.google.com/design/spec/style/color.html#color-color-palette there is a reference to the colors and tones available.

Publication #back to top

The folder we are going to publish is the quickquiz one, and the boot file is index.html. It is important to remember that it is not a WordPress plugin.

Once we have downloaded the corresponding JSON files we will have the quiz ready to publish.

If we want to include this quiz on another website we must take into account that it should be able to load all the necessary files.

In the image on the left, which is the index.html file in the quickquiz folder, we see the files that must be loaded for the quiz to work: first, the CSS files in the header (lines 11-13), and second, the javascript files before closing the body tag (lines 39-40).

The quiz itself is in the lines 28-34. If we put this piece of code in a web, whenever we have the rest of the files on the same relative path (data, templates, etc.), the quiz will work properly. Depending on what part of the page you insert this div you may have to remove the line autoscroll="true".

We can also add other html tags before or after the div containing the quiz, as we would in any other web page.

Using the quiz without web server

If we need to use the quiz without access to a web server, we have to delete the comments in lines 37 and 38 in the index.html file, deleting <!-- at the beginning of the line 37 and --> at the end of the line 38. In this way we will read the data.js file instead the config.json and questions.json files (we can download it in the download generated code tab). On the other hand, the HTML templates are read from the templates.js file.

We must bear in mind that in this case if we need to make any changes in the config, questions or HTML, we must do this changes in these files, which are more complicated than edit the JSON or HTML files (especially in the case of HTML , which it is now a JavaScript string). Also, if we do not have a server we can't send the answers to a database. Therefore, whenever possible we recommend leaving these two lines commented and publish the quiz on a web server.

It works with all kinds of questions except with rating and matrix-rating

Code - HTML#back to top

| - quickquiz
|   | - templates
|   |   | - question-types
|   |   | - home.html
|   |   | - main.html
|   |   | - quiz-question.html
|   |   | - score.html
|   |   | - templates.js
|   |   | - thank-you.html
|   | - index.html
				        

It isn't necessary to modify the HTML files so that the test would function properly. However, I will explain the structure of HTML files in case we need to make a change and we are not familiar with AngularJS applications.

On the left we can see the structure of the folder containing the most relevant HTML files. Inside the questions-types folder are the HTML files for each type of question, but its less likely that we need to make changes to any of these files.

In the code of all these files we can find some common elements.

  • The symbols {{ }} are AngularJS variables drawn from the JSON files or from the user answers.
  • The attributes that begin with ng- are angular directives. One of the most used in this application is ng-if, which evaluates a condition to create or delete the HTML element in which it is located.
  • Layout related attributes and the ones starting with md- are used to create components based on the Angular Material library.

As a general rule, we can add our own HTML fragments in any of the files without affecting the proper functioning of the application. We can also delete entire HTML fragments if we are sure we will never use them. The application automatically deletes all HTML elements that we are not using anyway, so it is not necessary to remove them manually.

We can also rearrange the HTML elements according to our preferences.

The index.html file, explained in the publication section, is the starting point of the application. Inside the main div, with id quickquiz, all the different HTML elements that the application requires will be loaded, and we can find them in the templates folder.

Important: If we are using the application without web server (not recommended), all HTML files in this section are in the file templates/templates.js as a string.


HOME.HTML

This is the home page of the quiz. Remember that we can add or remove HTML elements according to our needs. We have four main sections:

  • Home title. Title for the home page.
  • Home description. Optional description.
  • Start button. It's the most important part of this page, as it is what allows to access the quiz.
  • Form. Form which will only be shown if we have chose the data to be sent to a database in the builder, we want to include the user name and/or email, and also want it to be sent from the home page.

MAIN.HTML

Quiz container, including page navigation buttons. These are the main sections of this file:

  • Timer. Timer to be displayed outside of the quiz frame container.
  • Main title. Optional generic title for all the quiz pages.
  • Questions. Here, the quiz-questions.html (explained in the next section) file will be loaded.
  • Page number y progress bar. Optional sections to show the current page and progress.
  • Global alert. Alert in the footer if required questions unanswered.
  • Page buttons. Navigation buttons which may vary depending on which page we are at and how many pages the quiz has.

QUIZ-QUESTION.HTML

This file contains the main elements of a page as well as the questions contained in each.

  • Main page title. It will be shown if we have not selected a generic title for the quiz.
  • Secondary page title The title of the page will appear as a secondary one if there was a general title for the quiz.
  • Page description. Optional page description.
  • Video. Section where the player will appear if the current page has a video or audio associated.
  • Questions statement and points. Wording of each question and optional text with its points value.
  • Question required alert. Alert if the question is required and it's unaswered.
  • Question description.Optional question description.
  • Question answer container. If any, the aside image will be shown here, as well as the anwers options for each question. Depending on the type of question that is being shown, its respective HTML template will be loaded.
  • Questions feedback. Section where the feedback associated with each question is shown.

SCORE.HTML

Final page, with options to show different messages related to the score, right and wrong answers, etc. The sections of this page that are going to be displayed depend on the options we've set in the builder.

  • Main title. Title for the score page.
  • Score description. Optional description for this page.
  • Message. Area with a colored background in which all the messages we have selected will appear: points earned, message related to the points earned, percentage of correct answers, message related to the percentage obtained and/or a summary with the number of correct, incorrect and unanswered questions.
  • Show quiz. Area where the test questions are shown, with the option of showing the user's answers and/or the solution to the questions.
  • Send answers to a database. If we have selected the quiz to be sent to a database from the score page, either the submit button or a fillable form asking for name or email will appear here.

THANK-YOU.HTML

Optional page to which the user can be redirected once the quiz is sent to a database.

  • Main title. Title for the thanks page.
  • Page description. We can directly add here all the HTML we need.

Code - CSS#back to top

The main elements of the interface are created using a Material Design implementation.

If we need to customize some elements, we can add the classes we need in the corresponding HTML, and assign its properties in the css/quickquiz.css file.

The css/quickquiz.css file properties more likely to be changed are at the beginning of the code.

  • We can remove or replace the line pattern background we have assigned to the html tag.
  • In the lines 15 and 16 we can change the font and the maximum width of the quiz.
  • If we want the icons of the rating type questions to have a specific color when selected, instead of the main color of the test, we can assign the color in the line 27. For this we must remove the comments on that line (/* */), and write the new color code.

Code - JSON#back to top

We are going to save the JSON files we have generated in the quickquiz/data folder. If we need to modify any of these files, such as adding a question similar to one already created, we can directly modify the JSON files. To do so, I will briefly explain its structure.

If we make any changes, it is advisable to use tools such as http://jsonlint.com/ to check if our JSON has any error.

Important: If we are using the application without web server (not recommended), all JSON files in this section are in the file data/data.js.


CONFIG.JSON

This file is divided into four parts, each of which corresponds to one of the tabs of the builder Settings section: general settings, labels, score y database.

If we have already created a config.json file but want to change any options, the easiest way is to select the change in the builder and search the appropriate row or rows in the generated code that have changed, and then copy those lines in its corresponding place in our JSON.

This JSON is very intuitive anyway, and we will often be able to make changes without entering the builder.


QUESTIONS.JSON

To understand the questions.json file structure, let's take a look at the example on the right.

This test has two pages: the first one is delimited by the curly braces in lines 3 and 21, and the second between lines 22 and 42 (this page has the title science). All closing page curly braces will have a comma after it, unless it's the last page. In this case, we see that the comma is after the close of the first page.

The first page has two questions: one from the lines 5 to 13 (with a comma after the close of the question), and another one between the lines 14 and 19 (this time without a comma, since this is the last question in this page). The second page has only one question, which is between the lines 25 and 40.

Some general issues to consider:

  • A comma goes after each property-value pair, except after the last property of each question.
  • The solution is generally a number signifying the position number of the correct answer, counting the first position as 0. Therefore, if the correct answer is the third option, the solution would be number 2. This can vary depending on the selected question.
  • If we want to add a question that does not have exactly the same characteristics as a previously created one, it is convenient to copy the code of the question generated in the builder.

Código - PHP#back to top

In the quickquiz/php/ folder there are two PHP files thant need to modify with our server data.

The sendMySQL.php file is used to send de data to the MySQL database. The table name is on file config.json generated, but we have to change other server data within the php file::
$servername = "localhost";
$username = "yourUsername";
$password = "yourPassword";
$database = "yourDatabase";

The showMySQL.php file is optional. It's just an example to show web data stored in our database. In this case we also need to assign here the name of our table:
$table = "yourTable";

Tips and tricks#back to top

Remove the home page and start the test on the first question page

In our quickquiz/js/quickquiz.js file comment the line 105 adding two slashes and delete the comment in the line 106 as shown in the image.


Delete the last button of the test to not go to the score page

In quickquiz/js/quickquiz.js comment the line 242 as shown in the image.


Add a video or audio to a page

We can add a video or audio from the page options tab. The process is explained in the Builder - Quiz - Page options section.


Relative paths

Although we can not use relative paths to images or videos on the builder, we can replace the path in the questions.json file. When adding a relative path to an image or a video, we have to keep in mind that the file considered as the basis for the routes is quickquiz/index.html. Therefore, if for example we put pictures on the quickquiz/img folder, the path to access them will be img/yourimagename.png.


Show the correct answers after the user submitted it to the database

If we want the user to be able to see the score page only after submitting the test, just follow these two steps:

  • On the Settings - Database tab of the builder, select Submit button - Send after the last questions so that the submit button will appear after the last test question.
  • After sending go to - Score so that, once submitted, the user can see the score.

Show custom messages according to the score

In the templates/score.html file there is a sample div commented that show an HTML fragment on the score page if the score is greater than 10 and less than 50. To use it just delete <!-- before the div and --> after the div. Also we will modify the sample values in the conditional (10 and 50) by the values we need. We can duplicate the whole div every time we need to display messages according to each condition. If we want to work with percentage instead of points we must change scorePointsRounded for scorePercentageRounded.

This will only be useful if we want to show something more complex than plain text (images, links, etc). If we just want to display a simple text message in the message area we don't need to do this step, because we can select in the configuration to show a custom text according to points or percentage, and set our custom messages in the labels section in the builder.


Autohide the video player bar

To automatically hide the video playback bar we must assign the value true to autohide attribute on line 31 of the quickquiz/templates/quiz-question.html file.

Libraries and images used#back to top

Changelog#back to top

 v1.3.5 – 2016/08/16
    Bug fixes and improvements:
        Improvements in feedback on the score page
        Fixed bug on the button to download the code in the builder in firefox
        Fixed bug loading the css for video and audio

 v1.3.4 – 2016/07/21
    New features:
        For personality quizzes, option to send the winning personality and frequency to the database

 v1.3.3 – 2016/07/06
    Bug fixes:
        Don't reset the quiz after submit the data if you send the user to the score page

 v1.3.2– 2016/06/30
    New features:
        You can choose to display the form on the last page, in addition to the home or the score
    Bug fixes and improvements:
        Improvements showing errors in the form (name and email)
        Fixed a little bug with the redirection after submit the quiz for Firefox and Safari.

 v1.3.2 – 2016/06/21
     Fixed a litlle bug with the "redo" button for Firefox and Safari.

 v1.3.1 - 2015/20/06
    Bug fixes: Fixed some problems with the redo button for Firefox and Safari

 v1.3.0 - 2016/16/06
    New features:
        Weighted quiz (different points for each choice) available with single answer, multiple answer, matrix, likert scale and rating questions
        BuzzFeed-style quizzes (personality quizzes) available with multiple choice questions (single answer and multiple answers)
        Social share (twitter, facebook, linkedin and google+)
        Show custom images on the score page regarding the points scored
        Optional automatic advance
        Option to run the quiz without web server (but not recommended). See the Publication section in the documentation.
        Option to save the current users' answers in their local storage so they can continue their quiz in other moment.
        Option to refresh the browser on page changes
        Option to show the aside images of the questions also in the score
        New feedback options: We can add a custom text for each solution on the score page
        Optional button to redo the quiz
    Bug fixes and improvements:
        Some basic HTML tags for questions statements and choices are now allowed, like strong, em, h1, p, br, sup, code, etc.
        Reset the quiz after submit the data
        Added a custom div example regarding the points scored on the score page
        Fixed error in the media player for audio files
        Fixed error showing images for matching pairs questions in the score page
        Fixed error with timer
        Fixed error in the showMySQL.php file
        Some minor fixes

 v1.2.0 - 2016/02/18
    New features:
         Send to MySQL Database
    Bug fixes:
        Show solution for unanswered matrix questions in the score page
        Prevent send twice to database
        Some minor fixes

 v1.1.0 - 2016/01/09
    New features:
         New questions: matrix with radio buttons and matrix with rating
         Required questions: optional alerts and required by question
         "Other" option for no graded multiple choice questions (single and multiple answer)
         Optional random for choices and rows within a question
         Border colors for matching pairs
         Optional autoplay for video quizzes
         Aside images can be displayed in a popup
    Bug fixes:
        Fixed some problems with the long answer textarea autogrow

 v1.0.1 - 2015/11/17
    Bug fixes: Fixed some problems with youtube plugin

 v1.0.0 - 2015/11/14
    Initial release