Rear Window: Can you crack the case?

Difficulty Level: 🌶️ Easy

Use it for: Orientation Activities, Onboarding.

Interactive images are handy for introducing people to new equipment, technology, spaces, and products. Hover-over labels allow users to explore each item and learn more.

How to do it:

1. Upload an image.
2. Add Interactive Areas to the objects.
3. Apply a Tooltip to each interactive area.
4. Add a Jump-to-page link to the telescope, taking users to the next level.

Features used: Interactive area, Tooltip, Jump to page

Difficulty Level: 🌶️ Easy

Use it for: Highlighting elements, Displaying locked content.

Genially offers hundreds of hover and click-trigger animations. As well as creating a more engaging and “3D” experience, animations help you guide users and show them what to click on. To make the available post-its pop on the screen, we used a hover animation with Zoom effect. To show which were still locked, we used a Wobble effect.

How to do it:

1. Select any element on the canvas.
2. Add Animation
3. Select the Hover Mouse trigger and choose an effect.
4. Add Tooltips to label locked elements.

Features used: Hover Animation, Tooltip

Difficulty Level: 🌶️ 🌶️ Medium

Use it for: Find the clue, Search for hidden objects.

Challenging players to search for a hidden object is a great way to increase focus and anticipation. Try swapping the telescope for binoculars, a magnifying glass or any other shape like a keyhole!

How to do it:

1. Upload a transparent image in PNG format.
2. Make sure this image is the top layer (use Designer Mode to check the layers).
3. Add Tooltips to offer hints.
4. Enable Drag-and-drop so that users can move the shape around the screen.

Features used: Hover Animation, Tooltip

Difficulty Level: 🌶️🌶️ Medium

Use it for: Storytelling, Step-by-step Guides, Tutorials.

Creating movie-style sequences in Genially is easier than you might think. Here we used a hotspot on the video doorbell to trigger the appearance of the phone handset. Remember that you can make an audio clip start to play at the same time as any animation.

How to do it:

1. Add an Open Window interaction to the image that will trigger the action.
2. In the Window, add the image that you want to appear.
3. Apply an Entrance Animation to the image and the audio.

Features used: Interactive area, Tooltip, Jump to page

Difficulty Level: 🌶️🌶️ Medium

Use it for: Menus, Homepages, Locked levels, Activities in a sequence.

Menus are a key gamification tool, enabling learners to check their progress and see which level or challenge comes next. Here we used the timer feature to control when each challenge becomes available. To make things extra interactive, we activated the Paint feature - allowing users to note down their suspicions.

How to do it:

1. Create the board using images.
2. Duplicate the page, creating one for each challenge.
3. Use the Jump-to-page interaction to link to each challenge.
4. Add a “Home” button so users can return to the main screen.

Features used: Timer, Tooltip, Jump to page, Paint

Difficulty Level: 🌶️🌶️ Medium

Use it for: Instructions, Storytelling, Pacing.

Intertitles (captions on screen that tell part of the story) are a classic film-making technique, dating back to the silent movie era. Alfred Hitchcock himself was a big fan! It’s an engaging narrative device that you can apply in your own learning and communication content. Reveal information step by step and focus your audience’s attention.

How to do it:

1. Add a Timer widget outside of the canvas, so that it’s invisible to users.
2. Apply an Open Window interaction to the timer, so that the Window appears when the time runs out. Here, we set the timer to 00:01.
3. Inside the Window, add text boxes with Entrance Animations at staggered intervals.

Features used: Window, Entrance Animation, Timer

Difficulty Level: 🌶️ 🌶️ 🌶️ Advanced

Use it for: Knowledge Checks, Quizzes, Tests, Consolidation.

Wrapping up with quiz questions encourages learners to reflect on what they’ve learned during the game. If you’re feeling adventurous, you can try combining questions with a bit of creative storytelling, as we did here - simulating the signatures on a witness statement.

How to do it:

1. Add a Jump-to-page interaction to each section of the statement.
2. Create your questions on a separate page.
3. In the question configuration, select Go-to-next-page when the user answers the question.
4. Add an Entrance Animation and Audio clip to replicate the image and sound of a pen signing the document. Magic!

Features used: Questions, Jump to page, Entrance Animation, Audio

Difficulty Level: 🌶️ 🌶️ 🌶️ Advanced

Use it for: Escape Games, Locked Levels.

A secret code is a fun gamification device for motivating learners and encouraging them to analyze information. In Genially you can create locks in multiple ways: by using a page password or building your own interactive code.

How to do it:

1. Upload an image of a padlock, keypad, or code.
2. Add an Interactive Area over each number.
3. Use the Reveal interaction to create a connected “chain” of click-to-reveals. When the user clicks on the first correct number, the interaction on the second number in the sequence becomes available.
4. Add a Jump-to-page link to the last number in the code, taking the user to the next page or level.
5. Provide hints by adding Tooltips to the wrong numbers.

Sounds tricky? Give it a go - you can crack it!

Features used: Reveal, Jump to page, Tooltip, Interactive Area

Difficulty Level: 🌶️ 🌶️ 🌶️ Advanced

Use it for: Creating scrollable content inside a static frame.

Don’t forget that Genially allows you to embed one design inside another! Here we created a separate genially for the elevator, on a canvas with mobile (9:16) dimensions. Learn more about designing mobile-optimized content.

How to do it:

1. Create the content you want to embed, in mobile format.
2. Extend the length of the canvas to increase the scrollable area.
3. Publish and copy the iframe code.
4. In your original design go to Insert > External Content.
5. Paste the iframe code of the mobile design into the page.

* Pro Hack: We used a Flipcard inside the mobile canvas, allowing users to scroll in the opposite direction. We placed a button on top of the card, then used a scroll to element interaction to jump to the elevator doors.

Features used: Embed iframe, Mobile Canvas, Scroll to element, Flipcard