Add Buttons, Text & Scrolling Screens
  • 16 Sep 2024
  • 2 Minutes to read
  • Contributors
  • Dark
    Light

Add Buttons, Text & Scrolling Screens

  • Dark
    Light

Article summary

Article Overview

In this article, you will learn how to build interactive features (such as buttons, text entry, and scrolling frames) into a lesson.  You will also learn how to use Lesson Builder to preview and interact with the lesson from the learner's perspective.  

  1. Creating and Assigning Clickable Areas
  2. Designing Text Entry Fields
  3. Building Scrolling Frames
  4. Preview the Learning Experience

1) Creating & Assigning Clickable Areas

Clickable areas can be buttons, scrollbars, carets, toggles, checkboxes, etc.  All are created in the same manner within Replica Maker (the screen editor) and then assigned to a step in Lesson Builder.

Only ONE button can be assigned per screen

Creating & Assigning a Clickable Area to a Screen

Click above to open this resource in a new tab

2) Designing Text Entry Fields

Like clickable areas, text entry fields are also created in Replica Maker (the screen editor) and assigned in Lesson Builder.  Unlike clickable areas, multiple text entry fields can be added to any given step.  Below are the possible combinations of interactivity concerning step controls:

  • 1 button
  • 1 text entry field
  • 1 text entry field + 1 button
  • Multiple text entry fields + 1 button
When multiple text entry fields are added to a step, the learner can interact with them in any order.  MEANING - You do NOT need to worry about the order in which you add controls in Lesson Builder.
Creating & Assigning a Text Entry Field to a Screen

Click above to open this resource in a new tab

3) Building Scrolling Frames

Scrolling frames are built in Replica Maker (the screen editor).  To build scrolling frames, you will start with the area of the image you want the learner to see when they first interact with the step's screen.  You will then be able to 'stitch' or 'append' additional viewing areas to any/all 4 sides - enabling the learner to scroll up/down and/or left/right.  Skyllful will add scroll bars to any scrolling portion of a screen to indicate, to the learner, that there is more to see.

Building a Scrolling Frame within a Workflow Screen

Click above to open this resource in a new tab

4) Previewing the Learning Experience

To preview a lesson using Simulator (the actual learning environment), a lesson must be published and added to an assignment.  Sometimes, while designing lessons, you're going to want to preview chunks of content without having to go through the motions of publishing, assigning, and navigating to Simulator. Within Lesson Builder, there is a preview button at the bottom of your screen where you can choose the Learning Mode you want to preview.  

It is important that you preview MULTIPLE modes rather than ONE mode.  This is because the modes behave differently from one another.

Previewing Content in Walkthrough, Practice, or Knowledge Check Modes


Was this article helpful?

ESC

Eddy AI, facilitating knowledge discovery through conversational intelligence