Learn How to Juggle The Easy Way! Storyboard to Accompany the Online Course: Learn Articulate Storyline 3 The Easy Way Create This Storyline 3 Course in a Day! Part of the “Learn-By-Doing” Series by e-course alley

1 Design Considerations Intro Slides

Here are some design guidelines:

• You can use whatever avatar character in Articulate Storyline 3 that you wish for this demo course on juggling.

• Try to be consistent with your color scheme. You don’t have to use the colors I show here, but make sure you only use a few colors and keep them consistent throughout the course. Branching • The structure of this course is shown on the right in the “Story View”: • Introductory slides (title, learning objectives, etc.) • Branching to the 5 steps to learn how to juggle 3 balls • Light-Boxed slides showing more information Light Boxes, KCs • Knowledge Check (KC) Questions and remediation slides • Simulation and Summary slides

*Note that throughout this storyboard, text within <> brackets Simulation, Summary indicate instructions for you as the developer or labels to refer to different elements on screen. 2 Screen Title: Learn How to Juggle the Easy Way! Screen Number: 1

ON SCREEN TEXT/SCREEN SHOTS: MEDIA: • I used the Storyline 3 Carmen character, but Learn How to choose any character JUGGLE you like for your avatar The EASY WAY! • For this screen, make sure your character has his or her arms at a 90o angle and is facing front • Place your avatar in the middle of the screen • Create 3 juggling balls, of different colours (your choice) – I chose yellow, green and blue

MAIN PROGRAMMING CONSIDERATIONS: Use linear animation paths to create the text movement: “Learn How to” and “JUGGLE” slide in from the left, and “The EASY WAY!” slides in from the right. Use a zoom entrance animation for your Avatar and for the juggling balls. See Lecture How to Build the Juggling Course Title Screen to learn how to create this screen step-by-step. 3 Screen Title: Learning Objectives Screen Number: 2

ON SCREEN TEXT/SCREEN SHOTS: MEDIA: This lesson will teach you the basics of how - Place your Avatar on to juggle 3 balls continuously. the right hand side with arms at a 90o angle By the end of this lesson, you will be able to demonstrate how to: - Use same juggling ball shapes from previous 1. Position yourself optimally for juggling slide 2. Throw 1 ball in an arc from one hand to - Create blue circles the other numbered 1-5 for the 3. Throw 2 balls so they cross in mid-air list items from one hand to the other 4. Throw 3 balls in a sequence from one hand to the other 5. Juggle all 3 balls continuously

MAIN PROGRAMMING CONSIDERATIONS: Have each list item fly in from the left using an entrance animation. In the timeline, set these to cascade in at slightly different times. Insert a slide layer to input the Juggling Animation. See Lectures How to Build “Learning Objectives” – Main Screen and How to Build “Learning Objectives” – Slide Layers to learn how to create this screen step-by-step. 4 Screen Title: What You Will Need Screen Number: 3

ON SCREEN TEXT/SCREEN SHOTS: MEDIA: • Avatar with arms up, Juggling Balls, Bean Bags, or any type of ball or facing front and fruit (e.g. oranges) enlarged • Use caption, placed to the left with Stepwise Instructions (i.e. This Mini-Course!) instructional text (see on screen text) • Create a yellow circle to Patience! act as the ball that the learner can interact with to discover what they will need to learn Move the ball to see what you will need to learn how to juggle how to juggle!

MAIN PROGRAMMING CONSIDERATIONS: Use a Dial interaction to create this screen, with 3 values so there are three places to input text for the 3 things you will need to learn how to juggle. Each “need” should be a different slide layer so it can be triggered by moving the ball connected to the Dial interaction. See Lectures How to Build “What You Will Need” – Main Screen and How to Build “What You Will Need” – Slide Layers to learn how to create this screen step-by-step. 5 Screen Title: The Juggling Process Screen Number: 4

ON SCREEN TEXT/SCREEN SHOTS: MEDIA: • Avatar with one arm out to the left side, facing front and Step 1 Position pointing at buttons Step 2 Step 3 1 Ball • Caption with Step 4 instructional text (see Step 5 2 Balls on screen text) • Clickable buttons 3 Balls (choose a colour that Click on each step to learn goes with your course more. Continuous Juggling colour scheme)

MAIN PROGRAMMING CONSIDERATIONS: Create 5 clickable buttons and use the Hover state to trigger the slide layers to show main idea for each step in the juggling process. When each button is clicked, the action will branch to a similar slide showing the specifics for each step. Buttons should change to another colour when they are clicked so the learner knows what step they are on. See Lecture How to Build “The Juggling Process” – Main Screen and How to Build “The Juggling Process” – Slide Layers to learn how to create this screen step-by-step. 6 Screen Title: Step 1 – Position Yourself Screen Number: 5

ON SCREEN TEXT/SCREEN SHOTS: MEDIA: • Avatar in the same spot on screen as previous • Feet shoulder-width apart slide but with arms by • Wear comfortable clothing their side to start off • Start with one ball with • Arms at a 90o angle • List of steps (buttons) are to the left but with Step 1 button emphasized with a different colour (I am using blue) • Yellow ball that enters slide, at which point Avatar changes pose to arms at right angles

MAIN PROGRAMMING CONSIDERATIONS: Text appears on screen as narration plays (triggered by cue points in the timeline). Ball flies in from the right along an arc animation path, triggered by a cue point. Avatar changes poses (from arms at her side to arms at right angles) when ball enters slide to appear as though the ball is being caught. See Lecture How to Build “Step 1” – Main Screen to learn how to create this screen step-by-step. 7 Screen Title: Step 2 – 1 Ball Screen Number: 6

ON SCREEN TEXT/SCREEN SHOTS: MEDIA: • Avatar in same spot on screen as previous step • Throw ball from one hand to the other with arms at right • Arms at a right angle angles • Practice for consistency • List of steps (buttons) • Throw with your eyes closed! are to the left with Step 2 emphasized in another colour (I use Tip: To prevent balls from rolling away when blue) you are first learning to juggle, use bean • “Tip” box placed in the bags instead. upper right corner to show additional information

MAIN PROGRAMMING CONSIDERATIONS: Text appears on screen as narration plays (triggered by cue points in the timeline). The ball follows an arc animation path from one hand to the other (8 times) – I inserted a separate slide layer (Throw 1 Ball) to create this animation. The “Tip” box shows an additional text box (Slide Layer “Tip 1”) when triggered by the learner hovering over it. See Lectures How to Build “Step 2” – Main Screen and How to Build “Step 2” – Slide Layers to learn how to create this screen step-by- step. 8 Screen Title: Step 3 – 2 Balls Screen Number: 7

ON SCREEN TEXT/SCREEN SHOTS: MEDIA: • Avatar in same spot on screen as previous step • Use two balls – one in each hand with arms at right angles • Throw from one hand to the other • List of steps (buttons) are • Balls should cross in the air to the left with Step 3 • Practice catching each ball emphasized in another colour (I use blue) • “Tip” box placed in the Tip: Try starting with different hands so you upper right corner to get used to throwing both ways. show additional information • One ball is yellow and the other is green to help distinguish them from one another

MAIN PROGRAMMING CONSIDERATIONS: Text appears on screen as narration plays (triggered by cue points in the timeline). Balls follow similar arc animation paths from one hand to the other as in the previous step but in opposite directions (4 times) crossing in mid-air – I inserted a separate slide layer (Throw 2 Balls) to create this animation. The “Tip” box shows an additional text box (Slide Layer “Tip 2”) when triggered by the learner hovering over it. See Lectures How to Build “Step 3” – Main Screen and How to Build “Step 3” – Slide Layers to learn how to create this screen step-by-step. 9 Screen Title: Step 4 – 3 Balls (Not Continuous) Screen Number: 8

ON SCREEN TEXT/SCREEN SHOTS: MEDIA: • Avatar in same spot on screen as previous step • Two balls in your dominant hand with arms at right angles • One ball in the other hand • List of steps (buttons) are • Throw first 2 balls (like Step 3) to the left with Step 4 • Add 3rd ball – before 2nd ball lands emphasized in another • Practice catching all 3 balls colour (I use blue) • “Let’s Break It Down!” button is shown in the • Ball shapes – yellow, Repeat (Opposite Direction) Click on each button green and blue balls (or to see how the colours of your choice) Retry? juggling sequence is are in the Avatar’s hands – Yellow and Blue balls in broken down. one hand and the Green Ball 1, Ball 2, Ball 3 ball in the other hand

MAIN PROGRAMMING CONSIDERATIONS: Text appears on screen as narration plays (triggered by cue points in the timeline). Balls follow arc animation paths to simulate throwing 3 balls with a pause between each set (ie., not continuous juggling) – the sequence is shown 3 times Slide Layer – Juggling Animation. The “Let’s Break It Down!” button is triggered when clicked to light box a slide (Step 4 – Let’s Break It Down!). In the light-boxed slide, buttons can be clicked to trigger the balls to move from one hand to the other to show the juggling throwing sequence more slowly. The learner can repeat this slide as much as they like to help them internalize the process. See Lectures How to Build “Step 4” – Main Screen, How to Build “Step 4” – Slide Layers, How to Build “Step 4” – Light Box: Main Screen (Part 1 and Part 2) and How to Build “Step 4” – Light Box: Slide Layers to learn how to create this screen step-by-step.

10 Screen Title: Step 5 – 3 Balls (Continuous) Screen Number: 9

ON SCREEN TEXT/SCREEN SHOTS: MEDIA: • Avatar in same spot on screen as previous step • Make it continuous with arms at right angles • Don’t stop after 3rd catch • List of steps (buttons) are • Throw the next ball in the sequence to the left with Step 5 • Practice, practice, practice! emphasized in another colour (I use blue) • “Let’s Break It Down!” top right hand corner Repeat (Opposite Direction) Click on each button • Ball shapes – yellow, to see how the green and blue balls (or Then Keep Going… colours of your choice) juggling sequence is are in the Avatar’s hands Retry? broken down. – Yellow and Blue balls in one hand and the Green

ball in the other hand Ball 1, Ball 2, Ball 3 MAIN PROGRAMMING CONSIDERATIONS: Text appears on screen as narration plays (triggered by cue points in the timeline). Balls follow arc animation paths to simulate throwing 3 balls without a pause after the 3rd ball is thrown (ie., continuous juggling) – the sequence is shown 4 times in Slide Layer – Juggling Animation. The “Let’s Break It Down!” button is triggered when clicked to light box a slide (Step 5 – Let’s Break It Down!). In the light-boxed slide, buttons can be clicked to trigger the balls to move from one hand to the other to show the juggling throwing sequence more slowly. The learner can repeat this slide as much as they like to help them internalize the process. See Lectures How to Build “Step 5” – Main Screen, How to Build “Step 5” – Slide Layers, How to Build “Step 5” – Light Box: Main Screen and How to Build “Step 5” – Light Box: Slide Layers to learn how to create this screen step-by-step.

11 Screen Title: Knowledge Check 1 Screen Number: 10

ON SCREEN TEXT/SCREEN SHOTS: MEDIA: • Avatar is enlarged with Indicate the throwing order in the arms at right angles, image below to juggle 3 balls. facing front and holding 3 yellow balls – 2 on the left side and one on Drag the numbers to the correct the right side of the ball to indicate the throwing slide order. • The numbers 1, 2, 3 are in the top left corner of 1 2 3 the slide and a caption is used for the instructional text (see on screen text) The correct order to juggle 3 balls is shown in the image below.

MAIN PROGRAMMING CONSIDERATIONS: Insert a “freeform” slide to create a drag and drop question type. In the “Form View”, indicate the drag items (which would be your numbers, 1, 2, 3). Also indicate where they will be dragged to – your hotspot areas or drop targets, which will be the juggling balls themselves. This freeform slide will create 3 slide layers, one for the Correct response, Incorrect response and Try Again so the learner can try the question a second time. If the learner gets the question wrong a second time, there is a link in the remediation to light box to a slide (Knowledge Check 1 – Remediation) that shows the correct answer. On this slide, there is a button to Review where the material came from. See Lectures How to Build “Knowledge Check 1” – Main Screen, How to Build “Knowledge Check 1” – Slide Layers and How to Build “Knowledge 12 Check 1” – Remediation to learn how to create this screen step-by-step. Screen Title: Knowledge Check 2 Screen Number: 11

ON SCREEN TEXT/SCREEN SHOTS: MEDIA: • Avatar’s head is shown At what point do you add in the in the bottom center of 3rd ball when juggling 3 balls? the screen with a caption containing A. When you throw the 2nd ball. instructional text B. When you throw the 1st ball. C. Before the 2nd ball lands. D. Before the 1st ball lands. Select the correct response.

MAIN PROGRAMMING CONSIDERATIONS: Use a “Pick One” freeform question type and set each answer A, B, C, D as a separate text box. At the back-end, under the Form View, specify which text box is the correct one (it is C). Also indicate that the learners get 2 attempts before the remediation is shown, at which point a Review link is included so they can return to where they saw the information (Step 4). You can also highlight the answers in a colour as they select a choice (I chose blue) – modify the selected state of the text box to do so. See Lectures How to Build “Knowledge Check 2” – Main Screen and How to Build “Knowledge Check 2” – Slide Layers to learn how to create this 13 screen step-by-step. Screen Title: Simulation – Don’t Drop the Ball! Screen Number: 12

ON SCREEN TEXT/SCREEN SHOTS: MEDIA: • Avatar on right hand side, facing toward the left of the screen with one arm out • Caption with Click on each ball in the instructional text (see on proper order to simulate screen text) juggling 3 balls. • 2 Buttons on the left hand side (Hint and Reset buttons) • Near bottom of the screen show 3 balls: Yellow, Green, Blue… Green one on left and the Yellow and Blue balls on the right • Two hands coming up from the bottom beneath the balls as shown in the screenshots

MAIN PROGRAMMING CONSIDERATIONS: When the Hint button is hovered over, show slide layer Hint with the words “yellow, green, blue…” When the Reset button is clicked, reset the slide back to its initial state (set this in the base layer slide properties). Insert circular hotspot areas where the balls will move toward when clicked, along arc animation paths. See Lecture How to Build “Simulation” – Part 1 and How to Build “Simulation” – Part 2 to learn how to create this screen step-by-step. 14 Screen Title: Summary Screen Number: 13

ON SCREEN TEXT/SCREEN SHOTS: MEDIA: I hope you have enjoyed this course and are • Avatar is in the bottom now able to juggle 3 balls successfully! right hand corner, with one hand showing a thumbs up You should now be able to demonstrate how to: • Include “Thank You!” text with a border 1. Position yourself optimally for juggling around it as shown 2. Throw 1 ball in an arc from one hand to • Create blue circles the other numbered 1-5 for the 3. Throw 2 balls so they cross in mid-air list items from one hand to the other 4. Throw 3 balls in a sequence from one hand to the other 5. Juggle all 3 balls continuously

MAIN PROGRAMMING CONSIDERATIONS: Have each list item fly in from the left using an entrance animation. In the timeline, set these to cascade in at slightly different times. For the Avatar and the Thank You! Text, use entrance animations to have these come in after the numbered list is on screen. See Lecture How to Build the Summary Screen to learn how to create this screen step-by-step. 15 Screen Title: Navigation Screen Number:

ON SCREEN TEXT/SCREEN SHOTS: MEDIA: Use Next and Previous buttons/arrows on • Insert images as shown: the bottom right corner of the screen to navigate through the slides in this course. You can also use the Menu on the left side to navigate to various sections of the course. Several slides contain Clickable Buttons to show additional information, to “light box” a slide, jump to another slide or to trigger an action. Instructional Text will appear in speech bubbles to guide you on how to interact with each slide. Here is an example of a speech bubble containing instructional text: MAIN PROGRAMMING CONSIDERATIONS: This is a light box slide that will be linked from the Player Properties to appear when the Navigation button is clicked (attached to the course player in the top right corner). See Lecture How to Create the Navigation Light Box Slide to learn how to create this screen step-by-step. 16