Quiz Component

Create your own branded quiz.

A quick, easy quiz  can add interest for your customer and deliver information for you. This component lets you set up simple branded multi-choice quizzes  with questions and images as well as  scoring and results for the answer options.

Creating a simple multi-choice quiz

Please Note:This video has been created using Umajin version 1.2.0.0 and there have been changes to the UI and naming conventions since then. The main change is that the CMS has been renamed as the Dashboard.

The Quiz component lets you set up an anonymous, multi-choice set of questions and answers, with options for correct answers and scoring results. Images can be included if desired in the question and in the answers.

  • Add a page to your App and add a Quiz component from the Forms tab.
  • In the Properties Inspector under the Data Binding heading, click the diagonal arrow to open the Dashboard. The Dashboard will open automatically at the Quiz page.In the Dashboard help tips are always available when you hover over the question mark in the black circle.
  • Click the blue ‘+’ button to add a new quiz.
  • Name your quiz ‘Basic Colors’ . This is a parent object. Leave ‘yes’ for active and click SAVE. Note that your quiz is now given a numerical ID and time and date stamped for last update.
  • Beside the heading ‘Quiz Questions’ click the ‘Add+’ button to add a question. This will be a child of the parent quiz.
  • The numerical quiz ID is displayed. You can select text_option or pic_option from the dropdown. This determines if your options/answers will show as a picture or text. In this video we are using text_option.
  • The next field is image and if you want an image from this App’s Resources folder to display along with the question on the screen, you would enter the filename it has inside the Resources folder, here. (if it is in a folder inside the Resources folder please use a forward slash to separate the folder and filename. ( sushi images/sushi1.jpg) We are not using an image in this quiz.
  • The Question field is where you type in the question-“What color is the sky?”
  • The Sort Index field sets the numerical order of your questions. We can leave this at 0 as it is our first question.
  • SAVE
  • Now we need to add our Quiz Multiple choice options. Click the ‘Add+’ button beside this Heading.
  • Now the Quiz question is the parent and the options become the children. There is no limit to the number of options per question but 8  seems to be maximum. The quiz question displays its numerical ID.
  • In Option Text field type ‘blue’.
  • In Score field type ’10’ as this is a high scoring answer. Scores can be quite variable and allow you to reward alternative answers.
  • in the Sort Index field type ‘0’ as it is the first option we are presenting.
  • SAVE
  • Add 2 other text options using the Add+ button. Type in ‘green’ and ‘red’, Score 0 and 0 and Sort Index 1 and 2 and SAVE.
  • Click the parent to go back to the question level and add a new question, “What color is the grass?” SAVE
  • Now add the options blue, green and red and score and order accordingly. SAVE
  • In the video when we return to Umajin App Creator we create the page etc but we did this initially.  Click on the Quiz component and in the Properties Inspector under the heading, Data Binding, click the folder icon to browse the Feed Picker. Select our quiz, “Basic Colors” and click the ‘Refresh’ button.
  • Use the properties to edit our the appearance of our quiz.
  • Click the x by the ‘Empty Quiz Image’ to remove the empty image.
  • Change from landscape to portrait.
  • Reduce text sizes on Heading Style, Question Style and Answer Style.
  • Hit play and run the quiz. There are lots of other properties and graphics which can be customized as you wish.

If you want to use images in your options(multiple-choice answers) you will need to have selected pic_options in the ‘Type’ dropdown when you are entering the question. Then when you are adding the options you type in the filename of the image from your ‘Resources Folder’/’images’ folder in the Option Text field. (if it is in a folder inside the Resources folder please use a forward slash to separate the folder and filename. (sushi images/sushi1.jpg)

quiz pic_option

Properties for Quiz Component

Name When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and Size Sets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height in order to create a group that will be well positioned across devices.
Data Binding Setting up links to your Dashboard where you have created your quiz.
Quiz ID Browse icon takes you to a Feed Picker which will show the quizzes that you have created. The numerical ID comes from the Dashboard.
The upward arrow Takes you out of Umajin App Creator to the Dashboard.
Refresh arrows Refreshes the feed from the Dashboard back to your quiz/survey and updates it.
Appearance Set the graphic elements for your quiz.
Layout Choose landscape or portrait orientation from the dropdown.
Tick image Browse the Resources folder for the tick image (“you are correct”) you want to use. A preset is currently in this field.
Cross image Browse the Resources folder for the cross image( “that is an error”) you want to use. A preset is currently in this field.
Empty quiz image Browse the Resources folder for a background image for the quiz in its empty state image that you may want to use. A preset is currently in this field.
Button image Browse the Resources folder for a button image you want to use. A preset is currently in this field.
Nine Slice Values The Nine Slice Sliders apply adjustments to the image used for the button.
Top Slice: Stop the top of the image from being stretched.
Bottom Slice:Stop the bottom of the image from being stretched.
Left Slice: Stop the left of the image from being stretched.
Right Slice: Stop the right of the image from being stretched.
Behavior Set how the quiz will work.
Delay time (ms) On a scale of 0 to 4000 milliseconds, set the delay time.
Number of questions Use the plus and minus buttons to set the number of questions.
Shuffle questions Checkbox for an option to shuffle up the questions.
Show answers Checkbox for an option to show answers.
Show score Checkbox for an option to show score.
Score caption There is a default message to say Score but you can also click the ‘A’ panel to bring up the Text Editor and customize your message.
Question caption There is a default message to say Question but you can also click the ‘A’ panel to bring up the Text Editor and customize your message.
Complete caption There is a default message to say Complete but you can also click the ‘A’ panel to bring up the Text Editor and customize your message.
0 to 20% message There is a default message to say ‘Score 0 to 20%’ but you can also click the ‘A’ panel to bring up the Text Editor and customize your message for this score band.
20 to 40% message There is a default message to say ‘Score 20 to 40%’ but you can also click the ‘A’ panel to bring up the Text Editor and customize your message for this score band.
40 to 60% message There is a default message to say ‘Score 40 to 60%’ but you can also click the ‘A’ panel to bring up the Text Editor and customize your message for this score band.
60 to 80% message There is a default message to say ‘Score 60 to 80%’ but you can also click the ‘A’ panel to bring up the Text Editor and customize your message for this score band.
80 to 100% message There is a default message to say ‘Score 80 to 100%’ but you can also click the ‘A’ panel to bring up the Text Editor and customize your message for this score band.
Pass % This slider can be set to the percentage considered a pass/success.
Question gap Use a slider from between 0 and 50 to set the gap between questions.
Answer gap Set a slider from 0.8 to 2 for gap between answers.
Answer size Set a slider from 0.1 to 3 for answer size.
Heading Style Set properties of all Headings and text for the Quiz. Use the Styles Inspector to set the style and appearance of your text for all these 3 categories:

  • Heading Style
  • Question Style
  • Answer Style

The Styles Inspector is accessible through the ‘pencil’ icon on the Select Style panel and from the Files Menu ‘Styles’. The Style you have selected will populate the font properties below its heading. If you alter any of the properties for a specific page, then they will show as italicized headings – clicking the refresh button will revert the style back to its original state.Use the Styles Inspector to set the style for all your headings and other text.

Font size Plus and minus buttons set font size.
Font color Use color picker to select color or type in the hex number.
Opacity Set translucency of text.
Font Select font from the drop down of fonts available.
Alignment Set alignment of text.
Tracking Use this property to adjust the distance between your text characters.
Preset A Preset is a pre-determined set of properties and files for a component. You can have a Predefined Preset (Umajin created) or a Custom Preset (custom designed by you). Where the component has a Predefined Preset it will automatically be loaded into your app as the default when you insert that component.
The ‘LOAD’ button opens the Preset Selector, which has tabs for Predefined and Custom, so you can choose which preset to load for your component.
Create your own Preset by building your assets, putting them in your Image folder and then selecting them in the Properties panel. The ’SAVE’ button will enable you to name and save your preset under the Custom tab.