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.

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.

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.

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.

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!