Module 4 - BUILD
Implementing a digital escape game
4. Building interactions and puzzle mechanics
This is where your game becomes interactive, with clickable clues, hidden content locks, and progression. Every interaction should answer:
- What can I do here?
- What happens when I click?
- What should I do next?
If players don’t get those answers, they can feel stuck, overwhelmed, confused or frustrated.
Implementation tutorials: Hidden elements, navigation, codes and key mechanics
Micro-tutorial 1: Click to reveal a hidden element
- Add the element (text box, button or image) that you wish to hide.
- Add another element that players need to interact with (which they need to identify based on the puzzle instructions among red herrings).
- Add the “Reveal” interactivity and link the clickable object with the hidden one: clicking the step 2 element reveals the step 1 element.
- Use the “Reveal” interactivity to link the clicked element with the feedback message and the “Next” button, so that they appear only when the player has interacted with the correct element.
Tips & tricks: This can work for various types of enigmas, such as revealing a hint, information or a literal key to open a lock. For a more complete tutorial, check the Creation kit tool “Interactivity tools – Genially Functions”.
If you need to hide multiple elements, you may need to use additional resources, such as S’Cape tools, specifically Brian. More information about S’Cape in the Creation kit sheet “Support Material – S’Cape”.
Micro-tutorial 2: Create a code/keyword input
- Add an interactive question element that allows input, such as “Short answer” or “Fill in the blanks” and set the answers in the settings.
- Create two clear feedback messages:
- Correct: “Unlocked! The next step is now available.”
- Incorrect: “Not quite. Re-check the clue and try again.”
Tips & tricks: Reduce frustration by specifying which variation is accepted. The default interactions only allow one format for the answer (uppercase or lowercase, spaces). Warn players: “Enter the code in CAPITALS, no spaces.”
If you wish to add a more advanced lock that can hide content until a code is entered, use Lockee and add the link to it in Genially. More information in the Creation kit sheet “Interactivity tools – Lockee.fr”.
If you wish to use an option with more flexibility, you can use additional resources, such as S’Cape tools, specifically Couis3. More information about S’Cape in the Creation kit sheet “Support Material – S’Cape”.
Micro-tutorial 3: Create a drag-and-drop puzzle
Drag-and-drop mechanics can be very engaging, but they are harder to test and aren’t user-friendly or accessible on mobile devices.
- Easy option 1: Use the interactive question called “Sort” which allows players to drag and arrange a set number of elements in a certain order. You can easily modify the content and settings, and add an action when players succeed or fail (see details in the following video).
- Easy option 2: Use the interactivity “Drag and drop” which allows you to link customised elements together (one draggable element, one drop zone). You can add an action when players complete or fail the action for all elements (see details in the following video).
- Advanced option: Use the S’Cape tool “DND Lemniscape” that allows more diverse interactions but requires external elements with several specific steps for implementation. A detailed tutorial is available in the Creation kit sheet “Interactivity tools – S’Cape DND Lemniscape”.
Watch the video
In this video, you will find a summary of this micro-tutorial.
Activity: Multiple choice question
Choose the correct answer.
Micro-tutorial 4: Add QR codes for hybrid play
- Create a QR code that links to a page/video (use tools such as MeQR).
- Add the QR code image into Genially or print it as a physical document hidden around the room to diversify the format.
- Always include a short-written link underneath the QR code (as a backup option in case the QR code becomes unreadable).
- Test QR scanning with at least two different phones.