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 Marketplace 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.
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. The magic is our use of Player Next Gen.
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>
To achieve the task of building the Quiz Examples experience with a simple and advanced version of a quiz 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 below screenshots, 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
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 Questions 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. The inclusion of 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 compared to 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 a 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 is utilized to generate a random question set, effectively filtering the content.
The experience is comprised of three scene, 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
"Homepage - Choose a Quiz" Scene
The "Homepage" scene consists of several assets, including Text, Toggle Buttons. There is two Toggle Button that enables users to navigate to the 'Simple Quiz" and "Advanced Quiz" scene.
"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
With each Toggle Button "AI" and "Human" they are a member of a toggle button set allowing only one answer to be checked (Answered) to each question. Each Toggle Button contains five triggers four of the triggers use conditional triggers.
Since both Toggle Buttons follow the same condition triggers just 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 which 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 is constructed using 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 a possible four 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 taken 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).
- WHEN "Answer A Toggle Button" is checked and IF Correct Answer equals "A", THEN Simulate a tap on "Correct Answer" Button.
- 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 which are two conditions:
- 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.
- 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 it adds one to the "Quiz score" Counter Interface Asset. When the last two triggers are raised which are two conditions:
- 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.
- 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 result 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