Introduction

This article explains how the Quiz Examples sample experience was built and how you can reuse it for your own needs. To access this sample, use the Examples tab of the Experiences panel in Composer.

This experience uses Intuiface Headless CMS (H-CMS). If you are unfamiliar with Headless CMS, we suggest you first become familiar with it - either via the Headless CMS chapter in our Help Center or the Headless CMS course in Intuiface Academy.

About the "Quiz Examples" experience

This Intuiface experience has been published as a webpage despite using the same traditional approach to experience creation that has always been possible with Intuiface. In other words, nothing special was done to this experience to make it web-ready.

Below is a live, interactive version of this experience.

You can interact with the experience below. Go ahead - tap it!

What you are seeing is the web-published experience running within an iFrame. Below is the HTML code. Note the "src" value is the URL of the published experience. Pasting that URL in a browser tab will run the experience fullscreen. Try it - if you dare!

<iframe src="https://web.intuiface.com/quiz-examples" frameborder="0" width="100%" height="auto"></iframe>

How is this experience built?

To achieve the task of building the Quiz Examples experience with a simple and advanced version of a quiz, it is built with three scenes and utilizes the H-CMS, which stores the questions and answers for both quizzes. 

Data structure of the H-CMS base

The structure of the H-CMS base for this experience is made up of three Components, one for each of the three scenes.

• Questions (Collection)
• Advanced Quiz (Group)
• Advanced Questions (Collection)

As you can see from the screenshots below, the structure is comprised of two Property types: Text, Image, and a child component.

"Questions" Data Structure

 

"Advanced Questions Group" Data Structure

 

"Advanced Questions" Data Structure (used in the "Product Results" scene)

Content of the H-CMS base

"Questions" Content

The content for the Questions component can be altered to contain any list of questions you desire, but you need to ensure all questions have the following properties - Question ID, Images, Question, Answer and Comment - within the H-CMS structure. 

"Advanced Questions Group" Content

The content for the "Advanced Questions" Group utilizes a question set mechanism. Including letters A to I is intentional, serving to randomize the questions within the advanced quiz. Without this feature, each time a new user starts the quiz, they will encounter the same questions as the previous user. This could be changed to numbers, for example, "1, 2," while maintaining the same process. We have a total of 60 questions, organized into a question set, allowing the user to access up to 6 sets of 10 questions each, but one set of 10 questions is filtered when the quiz is started.

"Advanced Questions" Content (used in the "Product Results" scene)

The content for "Advanced Questions" operates by filtering the "Question Sets" property. This process results in the quiz presenting a set of 10 questions out of a possible 60. The "Random from List" Interface Asset generates a random question set, effectively filtering the content.

Scene breakdown

The experience is comprised of three scenes, but the two we are interested in are using a Swap Collection with a data source at the center with a data template which is the backbone of the quizzes. 

 

Homepage - Choose a Quiz
Simple Quiz
Advanced Quiz

"Homepage - Choose a Quiz" Scene

The "Homepage" scene consists of several assets, including Text and Toggle Buttons. There are two Toggle Button that enable users to navigate to the 'Simple Quiz" and "Advanced Quiz" scenes.

"Simple Quiz" Scene

The "Simple quiz" scene has been built using an Swap collection with four groups and two Image Assets, two groups are used with a Toggle Button, the other two groups are used to display a message if the answer is correct or incorrect. The Image Asset is used to display the image of the question "AI or Human?" this is all held inside a Data Template with the "Questions" data source from the H-CMS base.

AI Toggle Button

Human Toggle Button

The Toggle Button options "AI" and "Human" are members of a toggle button set, allowing only one answer to be checked (Answered) to each question. Each Toggle Button contains five triggers, four of which use conditional triggers.

Both Toggle Buttons have the same conditions; they just use different values to determine which question has been answered correctly or incorrectly.

Human Toggle Button

WHEN "AI Toggle Button" is checked and IF Answer of Questions equals "AI", THEN show "Correct Group" and Add one to "Quiz Score Counter".

WHEN "AI Toggle Button" is checked and IF Answer of Questions equals "Human", THEN show "Wrong Group".

AI Toggle Button

WHEN "AI Toggle Button" is checked and IF Answer of Questions equals "Human", THEN show "Correct Group" and Add one to "Quiz Score Counter".

WHEN "AI Toggle Button" is checked and IF Answer of Questions equals "AI", THEN show "Wrong Group".

When the last two triggers are raised, there are two conditions: IF the Index of the Questions Swap collection is less than or equal to "9" THEN Next on Questions Swap. IF the index of the Questions Swap collection equals "10" THEN show "Finished Group". Both of these triggers are applied to both "AI" and "Human" Toggle Buttons. (See screenshots below for reference)

Finish Group being show based on if the Index equals 10:

"Advanced Quiz" Scene

The "Advanced Quiz" scene uses a Swap collection with a Data Template that includes four groups and two Text Assets. In contrast to the "Simple Quiz," the advanced quiz uses a more intricate mechanism to manage question sets and uses binding converters to allow each question to have up to four possible answers.

When the "Start Quiz and Timer" Toggle Button is checked, it simulates a tap on "Picks a random question," generating a random value from the list mentioned in the "Advanced Quiz Group" content. The "Random from List" Interface Asset generates a value from the possible letters specified in the H-CMS, such as "A, B, C, D, etc". Then triggers the "Chronometer" Interface Asset to start, serving as a timer to measure the time to complete the quiz.

Each button group is a member of a toggle set and uses the same triggers and actions for each Answer group, just with a different conditional value.

Each of the four button groups has the same two conditional triggers: one for displaying a popup if the answer is correct and the other for displaying a popup if the answer is wrong (for example).

1. WHEN "Answer A Toggle Button" is checked and IF Correct Answer equals "A", THEN Simulate a tap on "Correct Answer" Button.
2. WHEN "Answer A Toggle Button" is checked and IF Correct Answer does not equal "A", THEN Simulate a tap on "Wrong Answer" Button.

The other two actions involve setting the text in the "Correct" or "Wrong" group if the answer is correct or wrong, then displaying the corresponding group and changing the image to display the correct answer image in the group.

On the "Correct Answer" button, there are three triggers: one when the button is released, it adds one to the "Quiz score" Counter Interface Asset. When the last two triggers are raised, there are two conditions:

1. WHEN "Correct Answer" is released and IF the Index of the Advanced Questions Swap collection is less than or equal to "[Number of Questions]" Interface Asset THEN Next on the Advanced Questions Swap.
2. WHEN "Correct Answer" is released and IF the index of the Advanced Questions Swap collection equals "[Number of Questions]" Interface Asset THEN simulate a tap on "Quiz finished"

On the "Wrong Answer" button, there are three triggers: one, when the button is released, adds one to the "Quiz score" Counter Interface Asset. When the last two triggers are raised, there are two conditions:

1. WHEN "Wrong Answer" is released and IF the Index of the Advanced Questions Swap collection is less than or equal to "[Number of Questions]" Interface Asset THEN Next on the Advanced Questions Swap.
2. WHEN "Wrong Answer" is released and IF the index of the Advanced Questions Swap collection equals "[Number of Questions]" Interface Asset THEN simulate a tap on "Quiz finished"

When the quiz concludes, the user is presented with the "Finished Group," which includes the time taken to answer 10 questions, the score indicating the number of correctly answered questions, and a Text Input asset allowing the user to input their name. If the "Add to Leaderboard" option is checked, the user's name will be added to a leaderboard. The user also has the option to skip the leaderboard, in which case, they will be directed back to the "Homepage - Choose a Quiz" scene.

 

If the user selects "Add to Leaderboard," a POST request is sent to Airtable, storing the user's name, time, and score. It's worth noting that any CMS system can be used, but in this example, we have used Airtable.

Once the Toggle button is checked, the user will be presented with a leaderboard on which they can view the results of the quiz.

You can find out more information on how to send a POST request to Airtable from this article: Work with Intuiface & Airtable