Developing Both Responsive and Position-based mlearning and elearning Easily. mlearning: Tips and Techniques for Development and Implementation

Transcription

1 mlearning: Tips and Techniques for Development and Implementation November 14 & 15, 2013 Supplemental Materials 302 Developing Both Responsive and Position-based mlearning and elearning Easily Paul Schneider, DominKnow

2 Claro elearning Guild Web Conference Guide This guide has been provided for the purposes of aiding those participants of the elearning Guild Web Conference and is not meant as a training guide or complete overview of Claro and Claro Flow. Note: As of the time of this web conference, Claro Flow is in Beta and not available for purchase. If you have questions about Claro Flow or this document, please contact Paul Schneider at paul.schneider@dominknow.com / Overview During the hands-on portion of this session we will create a basic three-page course using traditional courseware design or position-based approach. We will then create a responsive version of the same course to compare how the two look and react in different training environments. While you can create a great many types of pages interactions, and content with Claro, for the interest of time we will focus on a basic example. For both courses you will need to be logged into Claro. We recommend you use Chrome, Firefox or IE10 for the best experience in showing off a responsive course. If you have a mobile phone or tablet with you, please have that ready for the testing and review of the courses you create. Your login will be provided at the start of the presentation. All steps will be illustrated during the presentation. Position Based The first step is to create a course. 1. From the Splashboard, click on Course. If you have closed the Splashboard, click on the Application Menu (upper left blue button) and select New, and then Course. 2. For Course name, use your name and Position Based (e.g., Jane Doe Position Based ). 3. A new course will be created with one module, one learning object and one page. We won t cover the concept of learning Objects and reuse today but will simply add 2 additional pages to our course.

3 Position Based: Page 1 The first page is title Untitled Page by default. 1. To change the page name, click on Untitled Page and press Enter on your keyboard. You will now be able to change the page title. Alternatively you can double click the page name and a fly out panel will open on the right side of your screen. Here you can change the name and then click on Update. Change page title to Title Page 2. The default page has a default layout for title and subtitle. To add text to the default text blocks, click in the Title text block. (Note: depending on where you have clicked, you may need to double click the Title text block. Once you have activated the text block, the box border will be yellow. You can now type text into the block. Add a title and a subtitle of your choice.

4 Position Based: Page 2 1. To create a new page, click on the Home Tab and click on the first icon, Page. Choose the Blank layout. 2. When a new page is created, it will let you change the page name. Name the page Corporate Values. If you have clicked elsewhere you may need to click on the page name and press Enter (as you did for Page 1). On the page we will be adding some text with reveal actions. You will be adding text blocks, graphics, shapes, and actions. 1. Add some intro text for your page. a. To add a text block, click on the Insert Tab, and choose Text. b. Place the cursor in the desired location on the page (you can always move it later) and click. c. You can now enter your text. The suggested text is below. Add the text in two separate blocks one block for the title and one for the content. Corporate Values OmniAll Corporation's stated Corporate Vision is meaningless unless we uphold it by our commitment to our Corporate Values. These values guide our business, and ultimately, define our success. Click each of the symbols below to reveal our Corporate Values. Note: You can copy and paste the above text if you like. Once you add the text you can click outside the text block and then single click on the block (the outline will be Blue) and then resize and/or move the block as desired. 2. Add a background shape. a. To add the background shape, from the Insert Bab choose Box (far right). b. Now place the cursor where you want the start of your upper left corner of your box to be, and drag your mouse. (You can always adjust the size later and move the box later). c. Place the box below the intro text. 3. Add 3 symbol graphics. (The 3 symbols are located in the shared media library. You can upload your own graphics as well, but to save time, we ll use some stock ones that are already loaded). a. Click on the Media Library button (upper left corner third button in). b. In the media library, click on the Company Assets filter (middle left). c. You will see three green graphics (Service, Safety, and Quality). Click on the Service icon and click on the Insert button. d. Move the graphic to the appropriate location. 4. Repeat step 3 for the other two graphics.

5 5. Add the text for each of the three graphics. The text you are adding will show up when the button is clicked. Our first step is adding the text. a. Click on Insert and choose Text. b. Place the text object and add the text and then position it. c. Repeat this for the remaining two text items. Note: You need to have 3 separate text objects as we are tying actions to each object. You can copy and paste from the text below. Exemplary Customer Service Our customers are the reason OmniAll exists. They come to OmniAll for a variety of initial reasons but they stay because of our commitment to customer service. Safety for All Employees OmniAll's success is dependent on its employees. OmniAll recognizes its need to provide a safe work environment, exceeding all safety requirements. Excellence in Quality OmniAll customers manufacture many products that use innumerable components. OmniAll can never be the weakest link in a customer's product. 6. Add actions to each button to show the text block. a. Click on the first button so it is selected. (A solid blue line will appear around the image with handles.) b. Click on the Interaction Tab and then click on the Actions button (far left) and select Show Elements from the menu. c. In the right fly out you will pick what element will show up when you click on the button. Under the elements list scroll down until you see the text block Exemplary Customer Service. Select that item and drag it over to the right column called targets. Once done, click on Apply (bottom of fly out window). d. Repeat these steps for the next two buttons, choosing the text that matches each button. Note: Do NOT select the graphic and move it to the target widow this will hide the graphic and your button will be gone until you click on it which is impossible at this point!!! 7. Preview your page to see how it looks. a. Click on the View tab. b. Click on Current Page (third button over). Your text blocks should not show up until you click on the buttons.

6 Position Based: Page 3 Our third page will have some text and two buttons that will display information about two different departments and the leader in that department. 1. Create a new page with the layout choice of blank (Home, Page, Blank ). Name the page Corporate Divisions. 2. Add a text block for the title of the page, Corporate Divisions. Position it appropriately. 3. Add a shape for the background of the text describing the department. 4. Add a text block for the Sales Department and place it on top of the background shape. (You might need to resize the text block and shape to fit). Sales Department Our sales team is comprised of outstanding customer-facing employees dedicated to service quality. This team is dispersed across North America. Employees telecommute, working with other employees via the VPN and mobile communications. 5. Add your Sales team leader. a) Click on the Insert tab and under the Stock Assets section, click on People. Using the people browser pick a person to represent your sales team leader. Note: The size of the image is specified in the lower left of the people

7 browser, pick small or medium when adding your image. b) Once selected, add it to your page and position it to the left of the text and block. 6. Add your Trade Floor Department text and person. a) You will repeat the same steps as before. The text and person for the trade department will be placed on top of the Sales department text and person. While it looks odd now, the two will never be displayed at the same time, so it will work well. Trade Floor Department Our trade floor teams are the backbone of our company. Each employee is committed to production quality and timely delivery, We have teams at both the Pittsburgh and West Des Moines locations. Communication and collaboration between the teams occurs frequently through on-floor computer terminals, web meetings, and regularly scheduled on-site meetings. 7. Add Sales button. You will now add a button that, when clicked, will show the sales information and hide the trade floor information. a. From the Insert tab, click Button and choose a color for Sales. b. Place the button above the text for both departments. c. In the right fly out change the Title to Sales and change the Label to Sales. d. Click on the Actions button in the right fly out (middle button at bottom of screen). e. Click on Show Elements (first choice) and click on the Next button (bottom of right fly out). f. Drag and drop the Sales Text and Sales team leader from the Elements column into the Target column in the right fly out. g. Below the options, click on the check box for Hide other action targets. This will hide the Trade Floor text and person when you click on the Sales button. h. Click Apply in the right fly out panel 8. Add Trade Floor button. Repeat the steps you used for the Sales button, but pick the Trade Floor text and person. 9. Preview your page and confirm the actions are working properly. Click on View, Preview Current Page. 10. Preview your whole course if you like, click on View, Full Course Preview.

8 Responsive Flow courses are structured differently from regular Claro courses. In regular Claro courses you have layers, and you position elements on a layer exactly where you want them to be appear on screen. In Flow courses you don t have layers elements on the screen are positioned in relative terms. A good way to think about it is building a table in Word. As you adjust the table things in the table move but remained positioned relative to each other. While not an exact analogy, it s helpful to keep in mind. The first step is to create a Flow course. 1. From the Application Menu (upper left blue button) select New and then Flow Course from the menu options. 2. For Course name, use your name and Responsive e.g., Jane Doe Responsive. 3. A new course will be created with one module, one learning object, and one page. Responsive: Page 1 The first page is title Untitled Page by default. 1. Change page title to Title page (as you did when creating a normal Course). 2. Currently we do not have default layouts (they re coming!). So just add a text element. You add text in the same manner as before, but you will NOT position it. When you Insert text it will automatically add it to the only available location. Type in the desired text for your starting page 3. Increase the size of the text (highlight and change the size in the Home tab). 4. Center the text. You could center the block of text, but we ll use the Tool Box to do this. a. Click on the View tab and select Tool Box (far right under tools) b. Select the text block c. Open the Alignment bar d. Click on the Center Alignment icon. The text block will be centered. e. Now we need to add some space above the text. Click on the Margins bar and change the to Top Outside margin to 2 (the top number above Element ). With Responsive courses you need to keep in mind the spacing around elements as they may flow above or below other elements. Hint: If you have space leave the Tools box open and move it to the right of your screen we ll need to use it for several other items.

9 2) Preview the page. Click on View Preview Current page. You can click on Responsive Preview button in the bottom bar and then select different sizes to see what it looks like. a. BONUS: Do you have your phone or tablet ready? If you have a QR reader (many are available for free), click On Device from the View tab. A QR code will open. Scan it. This will enable you to preview the page/course on your device quickly and easily! Responsive Based: Page 2 1. Create a new page and choose the Blank layout. 2. When a new page is created, it will let you change the page name. Name the page Corporate Values. If you have clicked elsewhere you may need to click on the name and press enter (as you did for Page 1). You will be creating the same page as before, but the approach will be different. 3. Add some intro text for your page. a. Add a text block for the Title of the page. Use the same steps in the first page. Except only add the Margin, do not make it center aligned. Corporate Values OmniAll Corporation's stated Corporate Vision is meaningless unless we uphold it by our commitment to our Corporate Values. These values guide our business, and ultimately, define our success. Click each of the symbols below to reveal our Corporate Values. b. Add the second text block as a new row in the course. To do this, simply add a new text block. For this block use the same Margin settings. Notice that it is automatically in a new row. On the left of your screen where

10 the course structure is, click on the Rows tab (this was Layers in our previous course). You will see your course has two rows. 4. Add 3 symbol graphics. The 3 symbols are located in the shared media library (you can upload as well, but we are saving time). a. Click on Media Library button (upper left corner third button in). b. In the media library, click on the Company filter (middle left). c. You will see three green graphics (Service, Safety, and Quality). Click on the Service icon and click on the Insert button. d. The icon will be added to a new row. e. Using the Tool Box a. Set the top Margin to 2 (as before) b. Set the Row Color to: #d6d6d6 (you could also pick a color if you like) and press Enter. 5. Repeat step 4 for the other two graphics 6. Add the text for each of the three graphics. The text you are adding will show up when the button is clicked. Our first step is adding a blank text block a. Click on Insert and choose Text. b. Add the text block. Tap your space bar a few times. This is not 100% necessary but it makes it easier to see and move the block. We will add the actual text later. c. In the Title section just above the ruler bar, give the text block a name. This will make it easier to locate later, such as Customer Service. d. The text element will be in a new row by default. However we want it in the same row as the graphic image it corresponds too. By default when you add an item its relative space is set for the width of the course page. We need to change that for both the text object and the graphic so they can sit side by side. a. Click on the first graphic icon you added to your page. Once the blue box with handles appears, click on the handle bar on the far right and shrink the box until it is as small as it can be without hiding the image. (It will actually make the image smaller if you go to far and it won t hide at all.) This is telling the course what is the minimum relative space the image needs. b. Click on the Text box that corresponds to the graphic. Resize it so it takes up a width that is small enough for the text and the graphic to fit on the same page. Then drag and drop it next to the graphic. If it doesn t drop next to it, you haven t made it small enough. c. If you click on the Row tab in the course structure (far left) you will see the text is in the same row section now. e. Repeat this for the remaining two text items, naming them Safety and Quality respectively. 7. We need to add some space between the 3 sections. We could use margins, but there is a special Spacer option that does the trick nicely. a. Click on the Row tab, and then click on the Insert Row Spacer Icon (upper left). This will add a Row spacer to the bottom of the page.

11 b. In the left column, drag and drop the row spacer up until it is between the first and second rows. c. Repeat the steps and put one between the second and third rows 8. Add actions to each button to show the text block. a. Click on the first button so it is selected. (A solid blue line will appear around the image with handles.) b. Click on the Interaction Tab and then click on the Actions button. Do NOT click on the drop down arrow, but instead click on the button (this will change in the future). c. If you click on the button, the right fly out will open. From here click on the Add button and choose Swap Content. d. Select the text block called Customer Service. The Swap Content button will appear in the fly out. e. Click on the Swap Content button. In the text box, paste in the Customer Service description. Click Submit and then click Apply. f. Repeat these steps for the next two buttons, but choose the text that matches each button. Exemplary Customer Service Our customers are the reason OmniAll exists. They come to OmniAll for a variety of initial reasons but they stay because of our commitment to customer service. Safety for All Employees OmniAll's success is dependent on its employees. OmniAll recognizes its need to provide a safe work environment, exceeding all safety requirements. Excellence in Quality OmniAll customers manufacture many products that use innumerable components. OmniAll can never be the weakest link in a customer's product. 9. Preview your page to see how it looks. a. Click on the View tab. b. Click on Current page third button over. Your text blocks should not show up until you click on the buttons. c. Try the different Responsive Previews and see how the content automatically adjusts for different sizes.

12 Responsive Based: Page 3 Our third page will have some text and two buttons that will display information about two different departments and the leader in that department. 1. Create a new page with the layout choice of blank (see previous information). Name the page Corporate Divisions 2. Add a text block for the title of the page, Corporate Divisions. Change the margins to 1 for the top outside margin and 2 for the left inside margin. 3. Add a Spacer row. 4. Add the Sales button. a. Rename the button Title and Label to Sales b. Click the Update button. We ll add the actions later c. Set the Alignment to Center in the Tool Box d. Set the Inside Left and Right Margins to 2 each e. Resize the button so it is similar in size to the Page 3 in the last course. 5. Add an Element spacer. a. Click on the Rows tab b. Click on the 2 nd icon at the top Element Spacer c. Resize the element spacer so it is the same height and width as the button (approximately) d. Drag the Spacer to the right of the Sales button. 6. Add the Trade Floor button. a. Repeat the same steps as when adding the Sales button. b. Drag and drop the Trade Floor button to the right of the Element Spacer 7. Add a row spacer after the buttons. 8. Add the text description for the Sales team. a. Add a text block and insert the Sales Team description and insert text below: Sales Department Our sales team is comprised of outstanding customer-facing employees dedicated to service quality.

13 This team is dispersed across North America. Employees telecommute, working with other employees via the VPN and mobile communications. b. Select the box and set the margins to: i. Inside: left, right, top and bottom = 1 ii. Outside: left and right = 2 c. Change the background color to: #d6d6d6 d. Resize the box so it takes up about ½ to 2/3 of the page width 9. Add your Sales team leader. a. Click on the Insert tab and under the Stock Assets section, click on People. Using the people browser pick a person to represent your sales team leader. Note: The size of the image is specified in the lower left of the people browser, pick small or medium when adding your image. b. Once selected, add it to your page c. Resize the block containing the person so it is as small as possible without resizing the image d. Drag and drop it next to the text block. Note: If you didn t make the text block small enough or it is really close, resize the text block. 10. Add your Trade Floor team leader a. Pick your leader and add it to the page. b. Select the image and click on the Home tab and click delete (far right). Note: This action will enable us to select the person when we update the Trade Floor button. These two steps are to circumvent a known bug. 11. Add actions to your Sales button. In this first step we are telling the Sales button to keep the same text and image (as that is the text that shows up to begin with). a. Select the Sales button (single click) b. Click on the Interactions tab and click on the Actions button (not the drop down arrow portion of the button) c. Once the right fly out opens, click on the Add drop down and select Swap Content d. Select the Sales Department Text item and click on Swap Content e. The Sales Department Text should be present. Make no changes and click Submit. f. Click on Apply. g. In the right fly out, from the Add button select Swap Content h. Select the Sales Team Leader and click on Swap Content i. Select the SAME person from the list of files and click Insert j. Click on Apply. k. Click on Done.

14 12. Add actions to your Trade Floor button. In this step we are telling the button to change the text and image to the Trade Floor items. a. Select the Trade Floor button b. Click on the Interactions tab and click on the Actions button (not the drop down arrow portion of the button) c. Once the right fly out opens, click on the Add drop down and select Swap Content d. Select the Sales Department text item and click on Swap Content e. Remove the text and replace it with the Trade Floor text and then click Submit Trade Floor Department Our trade floor teams are the backbone of our company. Each employee is committed to production quality and timely delivery, We have teams at both the Pittsburgh and West Des Moines locations. Communication and collaboration between the teams occurs frequently through on-floor computer terminals, web meetings, and regularly scheduled on-site meetings. f. Click on Apply. g. In the right fly out, from the Add button select Swap Content h. Select the Sales Team Leader and click on Swap Content i. Select the Trade Floor Leader from the list of files and click Insert j. Click on Apply. k. Click on Done. 13. The last step will be to make a small customization for smartphone sized screens. In this step we will change the button style and the size of a team leader. (You may want to resize both leaders if you like.) a. Changing the buttons iii. Select the Animate Tab and select Timing Animate iv. Select both the Sales and Trade Floor buttons and drag them over to the Targets column v. For the Effect drop down, select Resize To vi. For the Trigger drop down, select When the breakpoint is reached vii. Set the Custom Breakpoint to Smartphone (480) viii. For Dimensions set the width and height to 100 ix. Click on Apply b. Hiding the button spacer x. Select the Animate Tab and select Timing Hide xi. Select the Element spacer and drag it to the Targets column xii. For the Effect drop down, select None xiii. For the Trigger drop down, select When the breakpoint is reached xiv. Set the Custom Breakpoint to Smartphone (480) xv. Click on Apply c. Changing the size of the leader

15 xvii. Select the Sales or Trade Floor leader (or both) and drag them over to the Targets column xviii. For the Effect drop down, select Resize To xix. For the Trigger drop down, select When the breakpoint is reached xx. Set the Custom Breakpoint to Smartphone (480) xxi. For Dimensions set the Width and height to 25 xxii. Click on Apply d. Click on Done. 14. Preview your page and confirm the actions are working properly. Click on View, Preview Current Page. 15. Preview your whole course if you like, click on View Full Course Preview. 16. Try the responsive options.