Engage 360: Understanding Interaction Types
Choose from 20 interaction types in Articulate Engage 360, then simply fill out a form with text and media to create beautiful interactions for your e-learning courses. Click each interaction type below to learn more. Engage 360: Accordion Interactions Engage 360: Bulletin Board Interactions Engage 360: Checklist Interactions Engage 360: Circle Diagram Interactions Engage 360: Conversation Interactions Engage 360: FAQ Interactions Engage 360: Folder Interactions Engage 360: Glossary Interactions Engage 360: Guided Image Interactions Engage 360: Image Zoom Interactions Engage 360: Labeled Graphic Interactions Engage 360: Labeled Panel Interactions Engage 360: Media Panel Interactions Engage 360: Media Tour Interactions Engage 360: Process Interactions Engage 360: Pyramid Interactions Engage 360: Quick Choice Interactions Engage 360: Tabbed Image Interactions Engage 360: Tab Interactions Engage 360: Timeline InteractionsGetting Started with Studio 360
This series of tutorials will get you up and running quickly with Studio 360, which includes Presenter 360, Quizmaker 360, and Engage 360. First, watch each overview video, then dive into the tutorials and practice activities that follow. Presenter 360 Presenter 360: Building a Course with Content Library 360 Slide Templates Presenter 360: Recording Narration and Syncing Animations Presenter 360: Importing and Exporting Audio Presenter 360: Annotating Slide Content Presenter 360: Adding Quizzes and Interactions Presenter 360: Adding Content Library 360 Characters Presenter 360: Adding Videos and Web Objects Presenter 360: Adding Interactivity with Hyperlinks and Branching Presenter 360: Customizing the Course Player Presenter 360: Previewing and Publishing a Course Quizmaker 360 Quizmaker 360: Creating a Quiz Quickly in Form View Quizmaker 360: Designing Quiz Questions in Slide View Quizmaker 360: Building Freeform Quiz Questions Quizmaker 360: Editing the Quiz Result Slide Quizmaker 360: Organizing and Randomizing Quiz Questions Quizmaker 360: Customizing the Quiz Player Quizmaker 360: Previewing and Publishing a Quiz Engage 360 Engage 360: Creating Your First Interaction Engage 360: Adding and Editing Content Engage 360: Working with Interaction Properties Engage 360: Customizing the Interaction Player Engage 360: Previewing and Publishing an InteractionEngage 360: Tab Interactions
The tabs interaction in Engage 360 lets learners explore a group of related items. Use the tabs interaction to: Walk through a list of related concepts. Identify members of a group. Compare several objects. Exploring the Editor Adding Tabs to Your Interaction Renaming Tabs Rearranging Tabs Deleting Tabs Adding Content to Tabs Changing the Location and Size of the Tabs Exploring the Editor The tabs editor has three columns with the following panels: Steps Located on the left side of the screen, this panel is used to manage tabs for your interaction. Text Located in the middle of the screen, this panel is used to add text to each tab. Audio Located in the upper right corner of the editor, this panel is used to add and edit audio. Media Located in the lower right corner, this panel is used to add pictures, characters, andvideos. Here are some tips for working with the editor: Change the width of a column by dragging its boundary with your mouse. Click the triangle in the upper right corner of the audio panel to collapse it if you need more room to work with the media panel. Click it again to reopen the panel. Adding Tabs to Your Interaction Each step in a tabs interaction is called a tab. To add a tab, do any of the following: Press Ctrl+M. Go to the Tabs tab on the ribbon and click Add Tab. Click the Create a new step button in the lower left corner of the Steps panel. Click the Duplicate button at the bottom of the Steps panel to copy the selected tab(s). New tabs get added just below the tab that's currently selected in the Steps panel—unless the summary is selected, in which case new tabs get added above it. Tip: A tabs interaction can have up to 12 tabs (not counting the introduction and summary). Renaming Tabs To rename a tab, do either of the following: Double-click the tab in the Steps panel to open it for editing. Type the new name and press the Enter key on your keyboard. Select the tab in the Steps panel, then type the new name in the title field at the top of the text panel. Tip: You can rename the introduction or summary in the same way. Rearranging Tabs To change the order of tabs, select one or more tabs in the Steps panel, then do any of the following: Drag them to a new location in the list. An orange line will move with your mouse to indicate where the tabs will be dropped when your mouse button is released. Go to the Tabs tab on the ribbon, click Move Tab, then select Up or Down. Use the Up and Down arrows at the bottom of the Steps panel. Tip: The introduction and summary can't be moved. Deleting Tabs To delete a tab, select it in the Steps panel, then do any of the following: Press the Delete key on your keyboard. Go to the Tabs tab on the ribbon and click Delete Tab. Click the Delete button at the bottom of the Steps panel. Tip: You can't delete the introduction or summary, but you can hide them. Adding Content to Tabs To add text, audio, and media to each tab in your interaction, see these user guides: Adding and Formatting Text Adding Audio Adding Media Changing the Location and Size of the Tabs The tabs can appear on the left or right side of your interaction. You can also change how they're sized. Here's how: Go to the Tabs tab on the ribbon and click Interaction Properties. Select Tabs on the left side of the window that appears. Set the following properties: Allow tabs to use __% of the interaction width: This determines the width of your tabs. Tabs default to 30% of the width of the overall interaction, but you can enter any percentage between 10 and 70. Place tabs on: This determines whether your tabs display on the left or right side of your interaction. Choose an option from the drop-down. Size tabs: This determines the height of your tabs. Choose Dynamically or Statically from the drop-down. The default setting, Dynamically, makes each tab as tall as possible, so the list of tabs fills the entire height of your interaction. Statically fixes the height of each tab at 40 pixels. Click OK. You Might Also Want to Explore: Working with the Interaction Title Working with Interaction PropertiesStudio 360 User Guide
New to Studio 360? See Getting Started with Studio 360 See the user guides below to learn how to transform PowerPoint slides into mobile and online courses with Presenter 360, create dynamic quizzes and surveys with Quizmaker 360, and dazzle learners with media-rich interactions inEngage 360. Presenter 360 User Guide Quizmaker 360 User Guide Engage 360 User GuideEngage 360 User Guide
Engage 360: Creating a New Interaction Engage 360: Setting Your Interaction Size Engage 360: Tips for Managing Project Files Working with the Interface Engage 360: Working with the Interaction Title Engage 360: Working with the Introduction and Summary Engage 360: Using Keyboard Shortcuts Engage 360: Setting Engage Options Understanding Interaction Types Engage 360: Accordion Interactions Engage 360: Bulletin Board Interactions Engage 360: Checklist Interactions Engage 360: Circle Diagram Interactions Engage 360: Conversation Interactions Engage 360: FAQ Interactions Engage 360: Folder Interactions Engage 360: Glossary Interactions Engage 360: Guided Image Interactions Engage 360: Image Zoom Interactions Engage 360: Labeled Graphic Interactions Engage 360: Labeled Panel Interactions Engage 360: Media Panel Interactions Engage 360: Media Tour Interactions Engage 360: Process Interactions Engage 360: Pyramid Interactions Engage 360: Quick Choice Interactions Engage 360: Tabbed Image Interactions Engage 360: Tab Interactions Engage 360: Timeline Interactions Working with Text Engage 360: Adding and Formatting Text Engage 360: Adding Symbols Engage 360: Adding Hyperlinks Engage 360: Replacing Fonts Engage 360: Using the Spell Checker Engage 360: Translating Interactions Working with Audio Engage 360: Adding Audio Engage 360: Editing Audio Adding Media Engage 360: Adding Content Library 360 Media Engage 360: Adding Content Library 360 Characters Engage 360: Adding Pictures Engage 360: Adding Videos Engage 360: Adjusting Video Properties Engage 360: Editing Videos Engage 360: Adding Alternate Text to Media Setting Interaction Properties Engage 360: Setting Playback Mode Engage 360: Adjusting Interaction-Specific Properties Engage 360: Working with Theme Colors Engage 360: Choosing Animation Style, Media Border Style, Sounds, and Fonts Engage 360: Changing Quality Settings Customizing the Player Engage 360: Working with the Player Engage 360: Choosing Player Features Engage 360: Changing the Player Colors, Font, and Font Size Engage 360: Customizing the Text Labels Engage 360: Changing the Browser Settings and Player Size Engage 360: Changing the Resume Behavior Engage 360: Enabling Right-to-Left Language Support Engage 360: Saving and Switching Players Engage 360: Restricting Which Mobile Device Orientations Learners Can Use Previewing and Publishing an Interaction Engage 360: Previewing an Interaction Engage 360: Publishing an Interaction to Presenter 360 Engage 360: Publishing a Standalone Interaction to Review 360 Engage 360: Publishing a Standalone Interaction for Web Distribution Engage 360: Publishing a Standalone Interaction for LMS Distribution Engage 360: Publishing an Interaction to Microsoft Word Engage 360: Publishing an Interaction for Mobile DevicesEngage 360: Accordion Interactions
The accordion interaction in Engage 360 lets learners explore related items in a horizontal layout. Use the accordion interaction to: Walk through a list of related concepts. Identify members of a group. Compare several objects. Exploring the Editor Adding Panels (Steps) to an Accordion Renaming Panels (Steps) Rearranging Panels (Steps) Deleting Panels (Steps) Adding Content to Panels (Steps) Exploring the Editor The accordion editor has three columns with the following panels: Steps Located on the left side of the screen, this panel is used to manage panels for the accordion. Text Located in the middle of the screen, this panel is used to add text to each panel. Audio Located in the upper right corner of the editor, this panel is used to add and edit audio. Media Located in the lower right corner, this panel is used to add pictures, characters, andvideos. Here are some tips for working with the editor: Change the width of a column by dragging its boundary with your mouse. Click the triangle in the upper right corner of the audio panel to collapse it if you need more room to work with the media panel. Click it again to reopen the panel. Adding Panels (Steps) to an Accordion Each step in an accordion interaction is called a panel. To add a panel, do any of the following: Press Ctrl+M. Go to the Accordion tab on the ribbon and click Add Panel. Click the Create a new step button in the lower left corner of the Steps panel. Click the Duplicate button at the bottom of the Steps panel to copy the currently selected panel(s). New panels get added just below the panel that's currently selected in the Steps panel—unless the summary is selected, in which case new panels get added above it. Tip: An accordion interaction can have up to eight panels (not counting the introduction and summary). Renaming Panels (Steps) To rename a panel, do either of the following: Double-click the panel in the Steps panel to open it for editing. Type the new name and press the Enter key on your keyboard. Select the panel in the Steps panel, then type the new name in the title field at the top of the text panel. Tip: You can rename the introduction or summary in the same way. Rearranging Panels (Steps) To change the order of panels in an accordion interaction, select one or more panels in the Steps panel, then do any of the following: Drag them to a new location in the list. An orange line will move with your mouse to indicate where the panels will be dropped when your mouse button is released. Go to the Accordion tab on the ribbon, click Move Panel, then select Up or Down. Use the Up and Down arrows at the bottom of the Steps panel. Tip: The introduction and summary can't be moved. Deleting Panels (Steps) To delete a panel from an accordion interaction, select it in the Steps panel, then do any of the following: Press the Delete key on your keyboard. Go to the Accordion tab on the ribbon and click Delete Panel. Click the Delete button at the bottom of the Steps panel. Tip: You can't delete the introduction or summary, but you can hide them. Adding Content to Panels (Steps) To add text, audio, and media to each panel in an accordion interaction, see these user guides: Adding and Formatting Text Adding Audio Adding Media You Might Also Want to Explore: Working with the Interaction Title Working with Interaction PropertiesEngage 360: Labeled Graphic Interactions
The labeled graphic interaction in Engage 360 lets learners identify the key elements of an image. Use the labeled graphic interaction to: Highlight details of an image. Call out relevant parts of a graphic. Explain features of a software screenshot. Exploring the Editor Understanding Labels and Markers Switching to a Different Image Adding Labels to an Image Renaming Labels Rearranging Labels and Markers Changing the Color and Style of Markers Changing the Position of Labels Making an Audio-Only Marker Changing the Marker Animation Style Adding Transparency to Labels Deleting Labels Adding Content to Labels Exploring the Editor The labeled graphic editor has three columns with the following panels: Steps Located on the left side of the screen, this panel is used to manage labels for your interaction. Preview Located at the top of the middle section, this panel is used to arrange markers on the image. Text Located at the bottom of the middle section, this panel is used to add text to each label. Audio Located in the upper right corner of the editor, this panel is used to add and edit audio. Media Located in the lower right corner, this panel is used to add pictures, characters, andvideos. Here are some tips for working with the editor: Change the width of a column by dragging its boundary with your mouse. Expand the text panel by dragging its top boundary upward if you need more room to work with text. Click the triangle in the upper right corner of the audio panel to collapse it if you need more room to work with the media panel. Click it again to reopen the panel. Understanding Labels and Markers A labeled graphic interaction is an image with one or more circular markers highlighting important areas of the image. Each marker displays a label when clicked. Labels can have text, audio, pictures, characters, and videos. Switching to a Different Image To change the image for your interaction, do the following: Go to the Labeled Graphic tab on the ribbon and click Change Image. Browse to the image you want to use and click Open. Adding Labels to an Image Each step in a labeled graphic interaction is called a label. To add a label, do any of the following: Press Ctrl+M. Go to the Labeled Graphic tab on the ribbon and click Add Label. Click the Create a new step button in the lower left corner of the Steps panel. Click the Duplicate button at the bottom of the Steps panel to copy the currently selected label(s). New labels get added just below the label that's currently selected in the Steps panel—unless the summary is selected, in which case new labels get added above it. Tip: A labeled graphic interaction can have up to 100 labels (not counting the introduction and summary). Renaming Labels To rename a label, do either of the following: Double-click the label in the Steps panel to open it for editing. Type the new name and press the Enter key on your keyboard. Select the label in the Steps panel, then type the new name in the title field at the top of the text panel. Tip: You can rename the introduction or summary in the same way. Rearranging Labels and Markers There are two aspects to arranging labels and markers: sequential order and spatial layout. Sequential order refers to the order of labels in the Steps panel, which is the same order in which they'll appear in the published output. Spatial layout refers to how labels are distributed across the image. Sequential Order: To change the order of your labels, select one or more of them in the Steps panel, then do any of the following: Drag them to a new location in the list. An orange line will move with your mouse to indicate where the labels will be dropped when your mouse button is released. Go to the Guided Image tab on the ribbon, click Move Label, then select Up or Down. Use the Up and Down arrows at the bottom of the Steps panel. Spatial Layout: Spatial layout is easy to control. Simply drag the markers to a new location in the preview panel. Tip: Use the arrow keys on your keyboard for more precise placement. Hold down the Ctrl key while pressing the arrows keys for even tighter control. Changing the Color and Style of Markers To change the color or style of a marker, select it in the preview panel (or select the corresponding label in the Steps panel), then use the following formatting options on the ribbon: Marker Color Choose one of the predefined colors, or click More Colors at the bottom of the drop-down and specify a custom color. To use the same color for all markers, click the Apply to All button to the right of the drop-down. Marker Style This changes the icon that appears on the marker. Choose from over 200 icons. To use the same icon for all markers, click the Apply to All button to the right of the drop-down. Changing the Position of Labels To change the direction that a label opens when its marker is clicked, do the following: Select a label in the Steps panel (or its marker in the preview panel). Go to the Labeled Graphic tab on the ribbon and click Label Position. Choose any of the nine positions. (The dots represent the position of the marker in relation to its label.) If you want to use the same position for all labels in your interaction, click the Apply to All button to the right of the drop-down. Making an Audio-Only Marker To make an audio-only marker, check the Audio Only box in the audio panel. The text and media panels will become grayed out. If you change your mind, uncheck the Audio Only box. Tip: An audio only marker will still display a title when learners hover over it. Changing the Marker Animation Style By default, markers use a swirl animation, but you can change it. Here's how: Go to the Labeled Graphic tab on the ribbon and click Interaction Properties. Select the Labeled Graphic tab on the left side of the window that appears. Use the Marker Animation drop-down to choose Swirl, Pulse, or None. Click OK. Tip: All markers in the same interaction use the same marker animation. Adding Transparency to Labels To add transparency to the labels in your interaction, do the following: Go to the Labeled Graphic tab on the ribbon and click Interaction Properties. Select the Labeled Graphic tab on the left side of the window that appears. Enter a percentage in the Label Transparency field. Click OK. Tip: All labels in the same interaction use the same amount of transparency. Deleting Labels To delete a label, select it in the Steps panel or preview panel, then do any of the following: Press the Delete key on your keyboard. Go to the Labeled Graphic tab on the ribbon and click Delete Label. Click the Delete button at the bottom of the Steps panel. Tip: You can't delete the introduction or summary, but you can hide them. Adding Content to Labels To add text, audio, and media to each label in your interaction, see these user guides: Adding and Formatting Text Adding Audio Adding Media You Might Also Want to Explore: Working with the Interaction Title Working with Interaction PropertiesEngage 360: Checklist Interactions
The checklist interaction in Engage 360 lets learners explore a list of related items. Use the checklist interaction to: Walk through a list of related concepts. Provide instructions or reminders. Identify a to-do list. Exploring the Editor Adding Items to a Checklist Renaming Items Rearranging Items Deleting Items Adding Content to Items Changing the Placement and Appearance of the Clipboard Exploring the Editor The checklist editor has three columns with the following panels: Steps Located on the left side of the screen, this panel is used to manage items for the checklist. Text Located in the middle of the screen, this panel is used to add text to each item. Audio Located in the upper right corner of the editor, this panel is used to add and edit audio. Media Located in the lower right corner, this panel is used to add pictures, characters, andvideos. Here are some tips for working with the editor: Change the width of a column by dragging its boundary with your mouse. Click the triangle in the upper right corner of the audio panel to collapse it if you need more room to work with the media panel. Click it again to reopen the panel. Adding Items to a Checklist Each step in a Checklist interaction is called an item. To add an item, do any of the following: Press Ctrl+M. Go to the Checklist tab on the ribbon and click Add Item. Click the Create a new step button in the lower left corner of the Steps panel. Click the Duplicate button at the bottom of the Steps panel to copy the currently selected item(s). New items get added just below the item that's currently selected in the Steps panel—unless the summary is selected, in which case new items get added above it. Tip: A checklist interaction can have up to 32 items (not counting the introduction and summary). Renaming Items To rename an item, do either of the following: Double-click the item in the Steps panel to open it for editing. Type the new name and press the Enter key on your keyboard. Select the item in the Steps panel, then type the new name in the title field at the top of the text panel. Tip: You can rename the introduction or summary in the same way. Rearranging Items To change the order of items, select one or more items in the Steps panel, then do any of the following: Drag them to a new location in the list. An orange line will move with your mouse to indicate where the items will be dropped when your mouse button is released. Go to the Checklist tab on the ribbon, click Move Item, then select Up or Down. Use the Up and Down arrows at the bottom of the Steps panel. Tip: The introduction and summary can't be moved. Deleting Items To delete an item, select it in the Steps panel, then do any of the following: Press the Delete key on your keyboard. Go to the Checklist tab on the ribbon and click Delete Item. Click the Delete button at the bottom of the Steps panel. Tip: You can't delete the introduction or summary, but you can hide them. Adding Content to Items To add text, audio, and media to each item in your interaction, see these user guides: Adding and Formatting Text Adding Audio Adding Media Changing the Placement and Appearance of the Clipboard Choose whether you want the clipboard in your interaction to appear on the left or the right side. And give it an optional page curl effect. Here’s how: Go to the Checklist tab on the ribbon and click Interaction Properties. Select the Checklist tab on the left side of the window. Choose Left or Right from the drop-down on the right side of the window. Mark the Show page curl box to give the lower right corner of the clipboard a page curl effect. Uncheck it if the curl interferes with your list of items. Click OK. You Might Also Want to Explore: Working with the Interaction Title Working with Interaction PropertiesEngage 360: Conversation Interactions
The conversation interaction in Engage 360 lets learners step through a social media dialog. Use the conversation interaction to: Set up a scenario. Critique an interview. Teach interpersonal skills. Exploring the Editor Adding Steps to a Conversation Switching Characters Changing a Character’s Location Rearranging Steps Deleting Steps Adding Content to Steps Exploring the Editor The conversation editor has three columns with the following panels: Steps Located on the left side of the screen, this panel is used to manage steps for the conversation. Text Located in the middle of the screen, this panel is used to switch characters and add text to each step. Audio Located in the upper right corner of the editor, this panel is used to add and edit audio. Media Located in the lower right corner, this panel is used to add pictures, characters, andvideos. Here are some tips for working with the editor: Change the width of a column by dragging its boundary with your mouse. Click the triangle in the upper right corner of the audio panel to collapse it if you need more room to work with the media panel. Click it again to reopen the panel. Adding Steps to a Conversation To add a step to the conversation, do any of the following: Press Ctrl+M. Go to the Conversation tab on the ribbon and click Add Step. Click the Create a new step button in the lower left corner of the Steps panel. Click the Duplicate button at the bottom of the Steps panel to copy the currently selected step(s). New steps get added just below the step that's currently selected in the Steps panel—unless the summary is selected, in which case new steps get added above it. Tip: A conversation interaction can have an unlimited number of steps. Switching Characters To change the character that's speaking, select a step in the Steps panel, then do any of the following: Choose a new character. Click the character avatar in the text panel, which opens the character browser. Choose a character, expression, pose, and perspective, then click Insert Character. (If the character isn’t installed on your computer yet, click Download to install it, then insert it into your interaction.) Another way to choose a new character is to go to the Conversation tab on the ribbon and click Character, which opens the character browser. Choose a character, expression, pose, and perspective, then click Insert Character. (If the character isn’t installed on your computer yet, click Download to install it, then insert it into your interaction.) Reuse an existing character. Go to the Conversation tab on the ribbon and click the drop-down arrow on the Character button, which shows the characters currently being used in your interaction. Click a character to choose it. Import your own character. Go to the Conversation tab on the ribbon and click Picture. Browse to the image you want to use and click Open. Tip: To change the expression, pose, or perspective of a character you’ve already inserted in your interaction, just click its avatar to reopen the character browser. Changing a Character’s Location Characters can appear on the left or right side of your interaction. To move a character: Select the step you want to edit in the Steps panel. Go to the Conversation tab on the ribbon. Click Display on Left or Display on Right. Tip: The avatars in the Steps panel will move to the left or right as a visual indicator of their location in the interaction. Rearranging Steps To change the order of steps, select one or more steps in the Steps panel, then do any of the following: Drag them to a new location in the list. An orange line will move with your mouse to indicate where the steps will be dropped when your mouse button is released. Go to the Conversation tab on the ribbon, click Move Step, then select Up or Down. Use the Up and Down arrows at the bottom of the Steps panel. Tip: The introduction and summary can't be moved. Deleting Steps To delete a step, select it in the Steps panel, then do any of the following: Press the Delete key on your keyboard. Go to the Conversation tab on the ribbon and click Delete Step. Click the Delete button at the bottom of the Steps panel. Tip: You can't delete the introduction or summary, but you can hide them. Adding Content to Steps To add text, audio, and media to each step in your interaction, see these user guides: Adding and Formatting Text Adding Audio Adding Media You Might Also Want to Explore: Working with the Interaction Title Working with Interaction Properties
