Gamification

With PandaSuite you can create fun and interactive applications: you can create custom game modules, interactive content, set up a score in your application...

Create a game

There are many examples of games and interactive content that you can make with PandaSuite to engage your users. Here are some of the best known:

Quizz

🤷 The quiz allows to test the knowledge via a questionnaire proposing true or false answers.

1: To create a quiz, prepare the design of your question & answer screen. Insert your content and graphic elements.

2: Choose how to inform your users if the answer is correct or wrong: make visual information appear on the screen by creating new states or use two Pop-up components to display a message above your screen.

3: Select each answer and create the corresponding action ( Change screen or Interact with a component > Pop up).

Puzzle

🤷 The puzzle allows by a drag and drop action to drop an object in the right place.

1: To create a puzzle, insert several Drag-and-drop components: you need one component per draggable object and one component per drop zone. Inside your drag-and-drop components, insert your visual elements (for example a puzzle piece .

2: In the Properties window for each component, choose whether it is a draggable object or a drop zone. For each drop zone, associate the draggable component that has the right to be placed there.

Image with hotspots

🤷 An image with hotspots includes bullets (hotspots), visible or not to the user, that must be clicked on to access additional information in the form of text, images or videos.

1: To create hotspots on top of an image, insert this image in your application.

2: For each hotspot, insert a Pop-up component and place it over the area. The pop-up will open automatically when you click on the zone. Choose the content of your pop-up (text, images, videos).

Text input

🤷 Text input allows the user to type a text into an input field. It can be an answer to a quiz or a password to retrieve.

1: Prepare the design of your question & answer screen. Insert your content and graphical elements and a Text input component.

2: Choose how to inform your users if the answer is correct or wrong: use two Pop-up components to display a message above your screen.

3: Insert a Condition component to trigger the opening of the right pop up depending on the text entered. You need to create 2 conditions and assign actions accordingly.

Create a score

Whatever the type of game, the score allows you to count the user's points and to trigger actions based on this value.

The score variable can be created in different data sources. In order to know the right source for your needs, you have to ask yourself about the use of this score and its storage mode:

Option 1: The score is displayed only on the user's device (local storage). This is a way to engage your user within your but this value is not centralized. For this, create your score from the Data Provider.
Option 2: the score is centralized on an external database, without a user account. You can send the data to an API via the HTTP component.
Option 3: the score is associated with a user account and it must be centralized on a common database. We recommend you to use the Authentication component (Firebase) and to create the score property in Firestore.

For each correct answer, you need to create an action to increment the score value.

Click on Actions. Choose the action Interact with a component, select the data source (Data provider, Authentication, external (HTTP component) and the action Modify data.

You can retrieve the score value to display in your application. You can also create a condition to trigger an action based on the score.