Introduction

This article explains how the Scratch Card 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 - before proceeding with this article.

About the "Scratch Card Examples" experience

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

We've published our sample experience to the web so you can try it. What you are seeing above is this web-published experience running within an iFrame. Below is the HTML code. Note that the "src" value is the URL of the published experience. Pasting that URL into a browser tab will run the experience in full screen. (Feel free to try it!)

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

How is this experience built?

This experience uses a variety of out-of-the-box Interface Assets - Global Variables, Simple Counter, Random From List, Random Number Generator and Three Value Comparison - to bring its content to life.

The following stylesheet, located above the canvas in every scene, serves as the primary resource for defining the background, button release states, font colors, and fonts. If you modify the fonts and colors here, the changes will be reflected throughout the experience.

Scene breakdown

"Home" scene

The "Home" scene includes Text, Image, and Button assets, which permits users to navigate to each of the three Scratch Card examples.

"Prize Reveal" scene

Within the "Prize Reveal" scene, you are presented with a Group Collection that contains a scratch card and three text assets - "You Win", the point value, and "Points" - used to display the result. Among the other assets in the scene, there is a Linear Gauge that visually tracks the scratch progress and a "Try Again" button to select a random point value and reset the scratch card.

When you enter the scene, the "Random From List - Prize Reveal" Interface Asset selects a random value from a predefined list of possible scores. This value is then used to populate the text displayed beneath the scratch card.

As you interact with the scratch card, the hidden prize is gradually revealed. The Linear Gauge, bound to the scratch percentage, updates in response to the scratching, providing visual feedback on progress.

Each time you play the game, a new prize is selected to ensure a different outcome with every attempt.

"Match Game" scene

Within the "Match Game" scene, an Asset Grid is used to display eight scratch cards, arranged in two rows of four. Each card hides a value, and the goal is to reveal three matching values.

When a card is scratched and reaches at least 40% revealed (this value has been chosen as a balance between scratch area and card size, and can be adjusted on the scratch card asset to your preferred percentage), a Simulate Button action is used to trigger the Conditional Button. The latter button does two things: 1) it evaluates a set of conditional triggers that control the game logic, and 2) it increments "Simple Counter - Match Game" Interface Asset to track how many cards have been revealed.

This is the conditional logic evaluated by the Conditional Button trigger:

• If the counter equals 1, the revealed value is assigned to Value A in the "Three Value Comparison – Match Game" Interface Asset, and the counter is incremented.
• If the counter equals 2, the next revealed value is assigned to Value B, and the counter is incremented.
• If the counter equals 3, the next revealed value is assigned to Value C, and the counter is incremented.

When the Simple Counter reaches 4, two conditional triggers are evaluated:

• If the result of the "Three Value Comparison - Match Game" is true, the scratch cards are disabled, and the True Finish Group is displayed.
• If the result is false, the False Finish Group is displayed.

A result of true indicates that three matching values have been revealed, while false indicates that the revealed cards do not match.

When the game is reset, a random number is generated to generate a new set of cards from the card sets within the H-CMS base "Scratch Card - Match Game".

"Answer Reveal" scene

Within the "Answer Reveal" scene, you are presented with a swap collection called "Question Swap" used to display the question, along with a Group containing another swap collection that displays the answer beneath the scratch card asset.

The scene includes a question display, the scratch card, and navigation buttons such as "Next Question" and "Home" Button.

When the scene is entered, a question is shown on screen while the answer remains hidden beneath the scratch card. As you scratch the card, the answer is gradually revealed.

Once the answer has been revealed, you can press the "Next Question" button to swap to a new question and repeat the experience.

How to reuse this experience

The easiest way to reuse these experiences is to carry out the following steps:

1. Open the "Scratch Card Examples" experience in Composer.
2. Use "Save as" to create a copy of the experience with a custom name.
3. When you use "Save As," Composer will ask if you want to duplicate the Headless CMS Base. Select "Duplicate". (You don't want to have to create it yourself!)
4. Customize the experience to suit your needs by altering the stylesheet or content within the Headless CMS base.

Data Structure of the H-CMS base

The structure of the H-CMS base for this experience is made up of four Components, which are used throughout the experience in the various scenes.

• Miscellaneous - Text & Imagery: Contains text and images used throughout the experience
• Scratch Card - Prize Reveal: Contains the scores used in the reveal prize game.
• Scratch Card - Match Game: Contains the card sets used in the match game.
• Scratch Card - Answer Reveal: Contains the questions and answers used in the answer reveal game.

Content of the H-CMS base

"Miscellaneous - Text & Imagery" Content

The content of the "Miscellaneous - Text & Imagery" component can be customized to include text used throughout the experience, as well as scratch card images, panels, and text assets shared across all three examples.

"Scratch Card - Prize Reveal" Content

The "Scratch Card - Prize Reveal" component can be customized to include any scores used in the reveal game.

"Scratch Card - Match Game" Content

The content of the "Scratch Card - Match Game" collection contains 80 items, representing 10 sets of 8 cards. These sets define the possible card combinations, allowing you to control which cards match with each other.

You can customize these sets by changing the card images and names to create different winning or losing scratch card board combinations.

"Scratch Card - Answer Reveal" Content

The content of the "Scratch Card - Answer Reveal" collection contains a set of question-and-answer pairs used in the answer reveal experience.

Each item includes a question, an image, and the corresponding answer. This content can be customized to create different quiz-style experiences by updating the questions, images, and answers shown beneath the scratch card.