Create a shell game in Qualifio

Gamify your marketing by building your own online shell game with Qualifio. Participants are challenged to focus intensely on the game, getting their attention on your content, products and brand. In this tutorial, you’ll learn how to create a Qualifio version of the classic shell game.

Brief overview

The game has a simple concept: a “ball” (hidden object) is hidden under one of three identical “shells” or “cups”, and then these are shuffled. Once the shells or cups stop moving around, the objective of the game is to find which shell or cup is hiding the ball and click on it.

This slideshow provides easy to follow, step-by-step instructions, demonstrating how to create a shell game in Qualifio:

Step 1: Game screen

As a first step, go to your campaign > Questions.

Create your basic game question by selecting Clickable images and customise the appearance of the game by uploading your own pictures.

Once you have uploaded your images, the next step is to mark all answers as correct.

Each question will have the same text and answers, so the quick and easy way to do this is to duplicate your quiz question twice. Once duplicated, these questions can be adjusted as needed!

Managing scores

By default, the system will assign one point for each correct answer. But in the shell game, the scoring system works like this:

1. In the first question: your answers will respectively be assigned a score of 1, 2 and 3 points.
2. In the second question: your answers will respectively be assigned a score of 4, 5 and 3 points.
3. In the third question: your answers will respectively be assigned a score of 4, 2 and 6 points.

In the shell game, the hidden ball is positioned at random each time. Therefore, participants can win one day and lose the next. To make this happen, you must randomise the order of quiz questions by going to Question order and selecting “random on 1 question”.

You can make the game even more difficult by establishing a time limit for participants to locate the ball (progress bar or time indication in seconds).

Step 2: Customisation of the exit screens

In the “Exit” step you can customise the texts that will be displayed on the screen that the participants will access after completing the game.

The message at the end will change depending on whether the participant clicked on the correct shell (or cup). Click on “Add different messages based on score” and add one per score (6 in total).

1. If the score is 1, 5 or 6, the participant wins. They are redirected to a "won" page where you'll reveal the ball and display a message such as "Good job!"
2. If the score is 2, 3 or 4, the participant loses. They are redirected to a "lost" page where you won't reveal the ball.

Your final exit screens should look like these:

Let’s stop here to make a quick test and make sure that the main part of our game is working. Click to see the preview. Keep in mind that the animation of the shells (or cups) hasn’t been created yet.

Step 3: Campaign settings

In the "Settings" step, you can:

• Limit the number of participations and unique participants. Let's look at these options in a little more detail →
• Allow users to play again right from the exit screen.
• Publish a leaderboard to show the scores achieved by the best participants.

Step 4: Virality settings

This step is very important if you want the campaign to go viral. Encourage participants to share the game on social media and invite friends to play.

You can find all the information about this step here.

Step 5: Animation of the shells

Finally, an animation can be made so that the shells (or cups) perform shuffle movements. To do this, simply add these lines of code in the CSS tab of the "Look & feel" step:

/* Animation CSS*/

.answers-container #answerPicGroup { 
display: flex;
flex-direction: row;
justify-content: space-between;
}

.answerPic {
position: relative;
}

.answerPic:hover img {
animation: movehover 0.5s infinite alternate;
position: relative;
}

@keyframes movehover {
from {
bottom: 0px;
transform: rotate(0deg);
}
to {
bottom: 5px;
transform: rotate(4deg);
}
}

.answerPic:nth-child(1){
animation: move-box1 alternate 1.5s 2 ;
}

.answerPic:nth-child(2) {
animation: move-box2 alternate 1.5s 2 ;
}

.answerPic:nth-child(3){
animation: move-box3 alternate 1.5s 2 ;
}

@keyframes move-box1 {
0% {
left: 0%;
}
25% {
left: 65%;
}
50% {
left: 10%;
}
75% {
left: 50%;
}
100% {
left: 20%;
}
}

@keyframes move-box2 {
0% {
left: 0%;
}
25% {
left: -15%;
}
50% {
left: 30%;
}
75% {
left: -30%;
}
100% {
left: 5%;
}
}

@keyframes move-box3 {
0% {
left: 0%;
}
25% {
left: -40%;
}
50% {
left: -10%;
}
75% {
left: -50%;
}
100% {
left: -30%;
}
}

When the animation is complete, make a quick test to make sure everything is working as expected.

You may use the Look & feel step to customise your campaign (colours, fonts, background, etc.)

 

We hope you liked this tutorial, thank you for reading!

Have more questions? Submit a request

 

We also recommend reading these articles for extra tips:

• How can I customise my exit screen?
• How to manage your social media “virality” settings