Quiz Template - Tutorial

Quiz template as basics uses two page types "Quiz Question" and "Quiz Feedback". First contains the question and several replies, the latter the correct answer and link to next question.

 - "Quiz Question" page contain inside the question itself with answer to choice. This page represent a kind of menu page with specifically items configuration.

- "Quiz Feedback" page content represent a short description or hint related to previous question.
Edit QUIZ Template:

1. Similar to other application templates from the Seattle Clouds, tab1.html page is the start page of the application. You can edit it and put your custom name, style, background, drag/move page elements e.t.c.

2. To change the name of the Buttons or change the links for them when they are pressed, go to: My applications >Your_App > Edit Pages > tab1.html - EDIT > Drag/Move Page Elements

Here you can change the position of the buttons and their style.

3. Now you can start editing question page.
Go to: My applications >Your_App > Edit Pages > your_question_page_name.html – EDIT

Field 1 - You can put your Question Text, Text Color, Background and Choose a Quiz Next Page.

Note: Quiz Next page could be a next question or a Feedback page for this question.

Field 2 -  When randomize function in enabled you can put there a name for a category quiz. So you will have one general QUIZ (questions from all categories) for example a START button and add unlimited QUIZ'es buttons by question category. 

Change in TAB's HTML for adding QUIZ buttons by category:

<div style="float:left;width:133px;">
    <a style="color:#ffffff;font-size: 18px;font-family: STHeitiTC-Light, 'Century Gothic'; 
    text-align: center; line-height: 60px; " href="Question1.html">
      <img src="start_btn.png"> </a>  </div>


<div style="float:left;width:133px;">
    <a style="color:#ffffff;font-size: 18px;font-family: STHeitiTC-Light, 'Century Gothic'; 
    text-align: center; line-height: 60px; " href="Question1.html?quizcategory=category_name">
      <img src="start_btn.png"> </a>  </div>

By default is an empty field.

Field 3 - Answers Items - you can add a new item (answer) just clicking "+"  button below the list. To delete an item, select it and click "-" button. Or, you can just to edit the current answers.

Field 4 - Item Properties - you can choose the correct answer and Item background.

4. Editing Feedback page.

Go to: My application >Your_App > Edit Pages > your_feedback_page_name.html – EDIT

Here you have the possibility to input your custom text and select The Next page in your application then “Continue” button is pressed.

**NOTE: Each feedback page should be linked to the next question page.


Your last page (Question/Feedback) should be linked to the Result.html page.

Also our new Quiz Template has randomize option (disabled by default).

To enable this option go to: My application >Your_App > Application Settings > Quiz Settings > + > Enable randomize pages > √

Here you can choose and how many question will contain your Quiz App.
Example: If you inserted 200 question but you want that your application contain only 10 question (everytime randomized) choose from “Number of random pages in quiz” drop-down number 10.


TOTAL SCORE = Correct answers given * (100 / TOTAL QUIZ questions) 

An example:

In a QUIZ of 30 questions I gave the right answer for 15 questions, the score will be: 

15 * (100/30) = 15 * 3.3(3) = 49.9(9) ~ 50