Create Shape Patterns Game in ActivePresenter 8

Last Updated On: October 28, 2021

As you may know, you can find many articles about how to create eLearning content on our tutorial page. Each one provides you with detailed steps to work with a single feature in ActivePresenter 8. Once you understand these features, you can combine them to create eye-catching games or online lectures. Today’s blog post is an example of this combination. In detail, you will use Drop Area and Multiple Choice Question to create an exciting game for kids. The game is called Shape Patterns. It is another logic pattern game, along with the Color Patterns Game described in this post. 

This article covers:

1. How to Play?

2. How to Create?

• Prepare Necessary Resources
• Create Score Boxes Using Variables
• Use Drop Areas to Create Shape Patterns Game
• Use Multiple Choice Questions to Create Shape Patterns Game

3. How to Deliver the Game?

How to Play Shape Patterns Game?

Shape Patterns Game is designed for kindergarteners. Similar to Color Patterns, this game asks players to identify a repeating pattern of various objects. They can be shapes, icons, images, etc. After recognizing a repeating pattern, players need to continue it by:

• Dragging an object into a drop area: 

• Selecting an object and clicking the Submit button:

If the dragged/ selected object is correct, they will get 1 point, updated on the laurel wreath.

You can download the Shape Patterns Game project from this link.

How to Create the Game?

From the game description above, let’s make use of Drop Area and Multiple Choice Question in ActivePresenter 8 to create this exciting game. If you already know how to use both of them, you may get to know other features such as variables, events – actions, feedback layers, etc.

Prepare Necessary Resources

Before diving into the crucial part, it’s necessary to do the preparation step well. It helps you to save tons of time and effort. 

• First, launch the ActivePresenter application and create a new project (on the Start Page > Blank Project). 
• Create as many slides as you need. In this example, let’s add Title Only slides (in the Home tab or Insert tab > New Slide > Title Only) and Multiple Choice Question slides (in the Questions tab > Multiple Choice).
• Then, open the View tab > Resources (to open the Resources pane if it is closed) > click the Import button to insert all resources such as images, audio, and video you need into the project: 

Create Score Box Using Variables

As mentioned in the game description, if players drag or select an object correctly, they will get 1 point updated on the laurel wreath. 

Follow the steps below to create a score box:

• Open the Home tab > Variables to create a number variable:

• Open the Insert tab > Text Caption to insert a text caption. Then, double-click it > navigate to the Home tab > References > select the number variable you’ve just created.

After performing the above steps, you already created a score box. However, if you want to make it more eye-catching, follow these additional steps:

• Drag an image, for example, a laurel wreath from the Resources pane into the Canvas. You can resize it as you want. 
• Put the image behind the text caption. Otherwise, it may accidentally hide the score. (You may need to right-click the text caption > Display Order > Bring to Front). 
• Select both the image and the text caption > press CTRL+G on your keyboard to group them into a single object.
• Right-click the group > Show over Multiple Slides > Top Layer. 

Here is the score box that you can create after performing the steps above: 

Note: You need to add events – actions to make this box update score each time players answer correctly. We’ll learn how to do that in the next sections. 

Create Shape Patterns Game Using Drop Areas

To create Shape Patterns in the form of a drag-n-drop game, we will use the Title Only slide added in the preparation step. 

Create Game Layout

• Enter the game instruction in the title placeholder. Later, you can edit its font, size, color as you want. 
• Insert shapes or icons from the Insert tab to create a repeating pattern:

If you want to use images instead of shapes or icons, simply drag them from the Resources pane into the Canvas. 

• You can create drag sources by selecting objects, then navigate to the Properties pane > Interactivity tab > Drag-n-Drop section > Drag Source.

Note: Drag sources are recognized by the green dashed line:

• Insert a drop area from the Insert tab. You may want to delete the default feedback messages and drag source because you already created drag sources on your own.

Note: A drop area is highlighted by the red dashed line.

Set Correct Answers

• To set the correct answers for a drop area, select it > in the Properties pane > Interactivity tab > Drag-n-Drop > click on the Accept List button:

Here, you can specify which drag sources can be dropped into a drop area and which ones are correct values. 

• Apart from that, you can also customize the Effect and the Snap Behavior:

Assign Events – Actions to Make the Score Box Work

Select a drop area, then navigate to the Properties pane > Interactivity tab > Events – Actions section. As you can see, default events – actions are added to a drop area. However, you can delete them and create new ones like the image below:

• Play Audio actions are added so that a sound is played to inform players whether their action is correct or not.
• Adjust Variable action is added to the On Correct event. When players drag the correct drag source into the drop area, they will get 1 point. The point is updated in the score box. 
• Show Feedback Layer actions are added so that they will appear to inform players whether their answer is correct or not. 

Customize Feedback Layers

You can open the View tab > Feedback Master > select Correct Feedback Layer/ Incorrect Feedback Layer to customize it to make it more engaging.

Note: When you customize the feedback layers here, they will apply to the whole project. 

Create Shape Patterns Game Using Multiple Choice Questions

Another way to create the Shape Patterns Game is to use Multiple Choice Questions. In the preparation step, you already inserted Multiple Choice Question slides. 

Create Game Layout

• Enter the game instruction in the title placeholder and customize it. 
• Drag images from the Resources pane into the Canvas to create a repeating pattern. 
• Change the question layout by selecting the answer area > in the Properties pane > Size & Properties tab > Container Layout section > None. Then, freely resize and reposition the answer option. 
• Select an answer option > in the Properties pane > Style & Effects tab > Fill section > Image Fill > select an image from the Resources pane.
• Customize the radio styles, the Submit button as you wish in the Format tab.
• Set the correct answer for a Multiple Choice Question by double-clicking an answer option.

Assign Events – Actions to Make the Score Box Work

Similar to other interactive questions in ActivePresenter, Multiple Choice Questions have built-in events – actions. You can keep the ones you wish, delete the others, and add new ones like the image below:

How to Deliver the Game?

The common question for those new to eLearning authoring tools is how to deliver eLearning courses or games to their learners/ players. The first step you need to do is to export the project to HTML5 output. Then, you can distribute it by embedding it into a webpage or upload it to an LMS. 

To export the project to HTML5 output, open the Export tab > HTML5:

Note: Before exporting, you can click the HTML5 Preview button to preview it.

That’s how to create Shape Patterns Game in ActivePresenter 8. Keep following our website and YouTube channel for other exciting educational games and eLearning content. 

Related Articles: