How to make a Repeat it! game in Qualifio

In this tutorial, we’ll create a Repeat it! game, a replica of the 1980s electronic game “Simon”. In this classic game, participants have to memorise and repeat a sequence of images.

How does Repeat it! work?

Repeat it! is a simple memory game. The objective is to repeat a series of random image clicks created by the game. After each round, the sequence becomes progressively longer and more complex, which makes it harder to remember.

Can you memorise the sequence? Before we start the tutorial, play a live version of the game.

Typically, you’ll have four or nine different images, each with a unique colour and sound which is activated when pressed. The sound helps the participant in remembering the sequence.

Unlock full access: The obstacle run is part of the Advanced Formats add-on, which also gives you access to the catcher, the penalty, the swap & match, the obstacle run and all of our upcoming game formats. To learn more, connect with a Qualifio specialist.

Getting started

Get your campaign ready

Step 1, let’s create your campaign:

Open Qualifio and click the Create a new campaign button.
Select Games > Repeat it!
If the participant needs to register, pick the “identified” mode. If no registration is required, select “anonymous”.
Select Create campaign.

After you create your campaign, you can start setting up the game.

Choose a game to customise

In the Game step, there are several ready-to-use games you can use as an inspiration.

Once you decide which game you want to start with, select Customise this game.

The quickest way to get started creating your own designs ⚡️

Our Figma kit for the Repeat it! includes assets such as backgrounds and other images from our ready-to-use games. Click the Get a copy button. Afterwards you can select the file you want and export it from Figma.

Note: Custom games allow you to create and save your own game templates. To save the design and gameplay mechanics as a custom game, you only need to open the editor, edit your game however you like, and then click “Save as new game”. Custom games can also be found in the Documents section under the “Advanced formats”.

Game controls and customisation

Layout

Now it’s time to start adding some custom images to your game. To design a Repeat it!, your first step will be to add a background image as well as the sound on/off buttons.

Note: To preview the most recent changes to your game, you can use the live preview feature and select Refresh.

Background image

That image is used as a background on all game pages.

Sound on/off buttons

Participants can turn audio on and off at will. The “sound off” button will mute all audio in your game, while the “sound on” button will reactivate all audio in your game.

Outline color & keyboard focus

The outline color is used to display focus when a participant navigates the game with the keyboard (tab or arrow keys).

New behaviour & defaults

Keyboard navigation focus outline: The game now shows a visible focus outline on interactive elements when navigating with the keyboard
- If you don't configure a specific color, the outline will be white by default
Watch & gameplay phases: The game now also uses your configured outline / shadows settings during the watch and gameplay phases, especially when navigating by keyboard
- If no outline or shadow is configured, we fall back on the interface outline color
Important trade-off (accessibility): Even without keyboard navigation, the watch phase will now always display an outline color when elements are being selected by the game (selection feedback). This was necessary to meet accessibility expectations and provide consistent visual feedback for all users.

Game mode

The Repeat it! has two game modes that can be played:

In the life-based mode, the participant loses a life if they mess up the sequence or forget one of the actions. Essentially, the game only ends if they make enough mistakes, so they can keep going for as long as they can!
In the time-based mode, you set a time limit and participants compete against the clock. They have to be quick to press as many images as they can, in order.

✋🏼 Optionally, in the life-based mode, you can enable a limited round time in the game. This can make the gameplay faster on the threat of losing a life: when participants fail to press in time, they’ll lose a life! The maximum initial time limit for this is 10 seconds. In each round, the time limit will be extended as the game adds an image to the sequence. To set this time limit, click Show advanced settings, then click Add a countdown timer to each round.

Accessibility recommandations for the game mode

If your goal is to make the game more inclusive, especially for screen reader users:

Prefer life-based mode, because it gives participants more time to explore the grid and re-locate elements between interactions
If you choose time-based mode, we strongly recommend setting a longer time limit to remain inclusive
We strongly discourage combining life-based gameplay with a countdown timer per round (advanced settings). Even at the maximum, the per-round timer can be too short for screen reader-dependant users to play comfortably. This remains your choice, but if accessibility is your key goal, it is not recommended.

Repeat it!

Then go to the Repeat it! section. This is where you can configure the game images.

Upload the different images that will be shown in the grid and that participants must press. The images should have a 200x200px format.

You can now add alt text for each grid element image to help screen reader users understand what each element represents. How it works?

Alt text will be read by screen readers only if no sound is configured on that element.
This avoids confusing users with two simultaneous audio outputs (the element sound + the screen reader speaking at the same time)
- However, if the sound is configured but muted, the alt text will be used
If no sound and no alt text are provided, the game uses a default naming system based on the grid position (ex.: "element 1", "element 2", ...)

First sequence length

As mentioned earlier, a round begins when the game activates one or more images in a random order and ends when the participant reproduces the order by pressing the images.

Starting with a sequence length of only one or two might seem too simple at first (all you have to do is repeat the very short sequence). But be careful, the sequence will get longer with each round.

Once the computer begins a round by activating the next sequence of images, the participant needs to end the round by repeating the pattern of image activations in the right order. If the participant repeats the correct sequence, we add 1 point to the score. If a step is missed along the way, the round ends and resets and a life is lost… in the life-based mode.

Generate a random sequence at each round

If the participant repeats the sequence correctly, on the next round, the number of images in the sequence increases by one. If you choose to enable this option, the sequence will be different each time and increase by one.

Grid layout

You can decide what the position of each object will be on the grid. You can modify, object by object where they will be located.

Panels

Panels are interactive in-game screens and are one of the principal elements of the game. They inform players or give them directions on the next move to make.

The tutorial panel shows how the game is played and opens up automatically once the game is loaded.
The transition screens (eg: when a new round starts)
The game over panel shows the participant’s score and opens up automatically once the game has ended.

Accessibility options

Repeat it! includes additional accessibility features to improve keyboard and screen reader support.

Accessibility toggle on the start screen

You can enable an accessibility toggle on the start screen. The option is enabled by default and can be turned off via the "Show advanced settings" option in the game editor.

Why does this toggle exist?

When enabled by the participant, it slows down only the in-between game phases for transition information, such as the watch phase, your turn, time remaining, lives remaining, ... so screen reader users have enough time to announce information.

It does NOT slow down the gameplay itself, so it does not create an advantage for cheating
We introduced this to avoid slowing the experience for everyone, which could make the game frustrating for participants who don't rely on screen readers

Keyboard controls

The game is now fully playable using:

Mouse clicks (already supported previously)
Keyboard arrows (for all users)

Sound effects

You can also add sound effects to your game:

Background music to set the atmosphere.
Sound effects at crucial moments or during specific actions:
- when participants click on the start button,
- when it’s game over and the game is ending.
Each image can also have a corresponding sound (maximum sound duration: 4-5 seconds).

Royalty-free sounds ⚡️
You will find here some royalty-free sounds ready to be used in your game.

Tada! Now your Repeat it! is ready to go. Remember to test it!

Publish and share your campaign

The Repeat it! is responsive and works on smartphones, tablets and computers. In a mobile device, the game has a “portrait mode” and fills the entire screen.

To ensure responsiveness on smartphones and tablets, campaign integration must be done in the following way:

Create a minisite or iframe channel.
Customise your game.
Add a mobile channel.
Make use of the minisite/iframe channel smart URL to share. To learn more, please check What is a smart URL and how to use it?

Conclusion

In this tutorial, we created a Repeat it! game in Qualifio. We hope you had a lot of fun building it. Thanks for reading, and happy repeating!