The Logical Blog by IconLogic

Articulate Storyline: Adding JavaScript

by Kevin Siegel   

 

If you've used Articulate Storyline at all, you have likely discovered for yourself that triggers can perform robust interactivity and calculations. However, triggers will take you only so far. Storyline can go beyond its built-in functionality by employing JavaScript, a standard scripting language used by web developers to create interactive web-based content.

Storyline allows you to execute JavaScript in your projects that perform several useful functions. For instance, you can attach a JavaScript to a button that allows learners to print a slide. Here's how:

 

Open or create a Storyline project and then insert a button on a slide (or select an existing button).

Create a new trigger, and from the Action drop-down menu, choose Execute JavaScript.

 

From the Script area, click Add/Edit JavaScript (the three dots) to open the Javascript dialog box. This is where you can type the JavaScript, paste it if you have already copied it to the clipboard, or link to it if the script is located externally.

 

Type window.print(); in the Javascript dialog box.

The text you just typed is about as simple as JavaScript gets. The word "window" is a browser object that calls the current browser window. The word "print" is a method that calls the browser print functionality. When you call a method you often need an array (arrays go between the open and closed parentheses). In this instance, there are no arrays needed but the parentheses are still required (even if empty).

Click the OK button twice to close both dialog boxes.

If you publish the lesson and click the button, the print dialog box will open and you'll be able to print the slide.

***

Looking for Storyline or Adobe Captivate training, check out these live, online classes.

Adobe Captivate: Mac Cures

by Kevin Siegel   

 

I've gotten several emails over the past few weeks about some pesky issues Macintosh users are having with Adobe Captivate: adding captions during the recording process (in most instances you don't get any text captions at all) and stopping the recording process using keyboard shortcuts (try as you might, pressing the recommended shortcuts does nothing at all and you end up with a mess while trying to record screen actions).

 

Fortunately, both problems are easily fixed. First, quit Captivate and then open your Mac's System Preferences (Apple > System Preferences). Click Security & Privacy.

 

 

Select the Privacy category and, from the Allow the apps below to control your computer area, select Adobe Captivate.app. (Note that you might first need to click the padlock icon in the lower left of the window.)

 

 

Start Captivate and create a software simulation. This time, in addition to being able to stop the recording process, your new project should also include captions (assuming you enabled the feature prior to recording).

 

And here's another issue that's been reported: when attempting to create a software simulation on a Mac, the red recording area doesn't show up (meaning you really can't create the simulation). I've found that this issue typically occurs for people using two or more monitors. The fix for me is to move what I'm trying to capture to my main monitor and record from there (versus trying to record on the second or third monitor). You can also visit your System Preferences > Displays. Select the Arrangement category and enable Mirror Displays. 

 

 

While you should now be able to capture your main display with Captivate, the glory of having 20 monitors (show off) will be negated until you return to the Arrangement category and disable Mirror Displays.

 

***

Looking to get a jump start on creating software simulations with Adobe Captivate? Check out our newest mini course: Adobe Captivate: Creating Software Simulations. And if you're looking for our full, multi-day Captivate classes, check these out.

Adobe RoboHelp: The User Defined Variable Converter Script

by Willam van Weelden 

 

User Defined Variables are a great way to manage content that appears frequently in your RoboHelp project. Variables allow you to change all occurrences of say, your company name in your project from a single location.

 

If you have already created a RoboHelp project but weren't aware of variables, you will be happy to learn that there is a script that quickly converts all occurrences of a word or phrase to a variable.

In my example below, I'm going to use the script to replace the word IconLogic shown below to a variable.

1. Make a backup of your project (this script will update your topics, and its better to be safe than sorry).
2. Choose Tools > Scripts > UDV Converter with UI.
3. In the Enter value to replace field, type a word or phrase. (I've entered IconLogic.)
4. In the Enter new UDV name field, add the name of the variable to be created. In this case, I used CompanyName.
5. In the Enter UDV value field, add a value for the variable. (In this case, I used the phrase IconLogic, Inc.)
   
     
    
6. Click Convert.

The script will go through the project and convert the text you indicated into a variable. In my example, the word IconLogic changed into the variable CompanyName. Because the value of the variable is IconLogic, Inc, that's the text users will see.

 

 

Note: When running the script, only topic content is updated. (You can see in the image above that the topic title in the tab is left unchanged). If you want to modify the title, you will have to manually apply the variable in the topic title. Also, if your variables aren't green, check out my article about showing variables in topics.

eLearning: Attention, Attention!

by Kevin Siegel   

 

A few years ago I wrote about the perfect playtime for an eLearning lesson (or module). In my article, I referenced a piece by the BBC, Turning into Digital Goldfish, where the author said "The addictive nature of web browsing can leave you with an attention span of a goldfish." 

In my eLearning 101: Introduction to eLearning class, I discuss learner attention span and refer often to the domestic goldfish. Believe it or not, research has been done that says the attention span of a goldfish is actually 9 seconds.

 

So does that mean that a person surfing the web gets distracted in 9-seconds? Of course not, that would be silly. In my class, I tell attendees that typical human attention spans are between 12 and 15 seconds. 15 seconds! Does that surprise you? If so, look at the bright side... that's better than a goldfish.

And as I mentioned in my first article, an adult learner accessing your eLearning content will have an even greater attention span than a typical web surfer. In my experience developing eLearning, I put the attention span of an adult learner at 15-20 seconds per slide or scene. But I have long come to realize that if the slide/scene plays any longer, my learners will begin to fog out.

 

Times have changed... and I need your attention for another moment (see what I did there?). 

 

Remember when I said that the typical attention span of a web surfer was 9 seconds? Hold onto your hat. According to Microsoft and an article published online by Time, we now lose our concentration in a mere 8 seconds. That's right... we've now gone "sub-goldfish."

 

According to the article, "Microsoft found that since the year 2000 (or about when the mobile revolution began) the average attention span dropped from 12 seconds to eight seconds."

 

The article went on to say, "Microsoft theorized that the changes were a result of the brain's ability to adapt and change itself over time and a weaker attention span may be a side effect of evolving to a mobile Internet. 

"The survey also confirmed generational differences for mobile use; for example, 77% of people aged 18 to 24 responded 'yes' when asked, 'When nothing is occupying my attention, the first thing I do is reach for my phone,' compared with only 10% of those over the age of 65."

I'd love your feedback on this.  What kind of attention span are you seeing with your eLearning? And given your findings, how long are your typical eLearning modules playing? (Feel free to leave your feedback as comments below.)

Adobe Captivate Prime: The Fluidic Player

by Sean Mullen

The Fluidic Player is the universal content playback experience for Captivate Prime and allows for a simple, unified playback experience, regardless of the type of content being played. Content types include MP4, PPTXs, DOCX, Adobe Captivate or Adobe Presenter projects, SCORM or AICC packages, and even xAPI-compliant content for your mLearning projects. Thank you HTML5!

 

 

Adding the Fluidic Player is really smart on Adobe's part, something they clearly heard loud and clear when speaking with customers for the two years they took to design and develop Captivate Prime. The Captivate Prime team also manages the Adobe Captivate and Adobe Presenter products. Both tools allow you to create customized playback experiences for the learner. While this flexibility is great for the content developer, it isn't always ideal for the learner because they need to learn how to use/access different playbars, sidebars, player icons, TOCs, Notes, and Search options, just to name a few. 

Thanks to the Fluidic Player, learners will be able to bookmark any section of the course, or add explanatory notes at any point in their content, which they can reference during revisions. 

 

 

 

 

My hope is that down the road the Notes can be shared with other learners in an organization. 

 

There are also buttons on the Player for a TOC, Closed Captions, and Full Screen. 

 

  

 

The Table of Contents is clean, but maybe a bit light on features at the moment. Closed captioning, which appears across the bottom of the content, also has a clean appearance. Lastly, the Full Screen toggle works great and is very responsive.

Using Color as an eLearning Guide

by Sally Cox  

You've selected a palette of colors for your eLearning project, so your concerns about color are over, right? Not exactly. Simply picking a handful of colors doesn't mean they will complement each other and guide the learner through your course. What's that you say? You didn't know that color can be an eLearning guide? Absolutely, it can.

I'm designing a course (I always start in Adobe Illustrator but these tips apply for any application) and I have selected this lovely green as one of the colors to use for elements (buttons, etc.) within my course.

  

This color can be useful for drawing attention to certain areas of a slide, but it can also distract the learner if overused or covering a large area.

 

In the image below I've used the green as a slide background. In my experience, the green is too bright and covers too large an area.

 

 

Adjusting the color value

The "value" or the color, or "brightness,"  can be toned down to make it more effective. Here's how to achieve this in Illustrator.

In the Swatch panel of Illustrator (Window > Swatches), choose the color you wish to work with by doubling-clicking it.

 

 

When I double-click a swatch, I see the Swatch Options dialog box.

 

 

 

You can choose to name the color and double check that it's set to Process and RGB. 

To alter the value of the color, hold down Command (Mac) or Control (Windows) and drag one of the RGB sliders. Because you held that key, the three sliders interact together and the value changes without altering the ratios. Dragging to the left darkens; dragging to the right lightens. (If you don't hold down that key and drag the sliders, you will change it to a completely different color.)

 

Look at the variations I got while using this method on my green swatch. Lovely!

 

 

Let's compare the original slide and the new one with the darker value. I think it works much better, is far less distracting. Below you can see I lightened the text in the final version. By making the text a light "value," it draws more attention to it.

 

 

 

 

 

 

A Lesson on Distraction

 

In this example, I have three bright squares in the grid, and the rest are a dark gray.

 

Notice that all three squares are vying for your attention. I find it hard to focus on just one thing. Remember this when you are laying out your slides: too many bright elements can cause confusion for the learner. Always keep the focus of the slide in your sights, and design accordingly. Limit the number of brights, or adjust the values to tone down the other elements on the slide.

Value Affects Accessibility & Readability

And finally, the color value affects readability and can cause disabled people to be unable to view your content. Keep it high contrast so everyone--including the disabled--can access it.

People with a visual or motion impairment might use a machine called a "screen reader" to access your online content. The screen reader relays the description of the content back to the learner. If the content is too low contrast, the screen reader cannot decipher it. FAIL.

Here is an example of "high contrast" which has excellent readability.

 

 

 

This one is "low contrast," which makes it difficult to read or translate.

 

 

 

Red is considered by many to have negative connotations. So unless it's part of the brand and you cannot alter it, considering darkening the value.

 

 

 

This is a darker red, with a darker value. It still draws attention but it far less threatening to the learner.

 

 

Summary

Remember to consider all factors about a color before choosing it. Ensure it works well with the other colors, and be sure you have a nice mixture of bright and darker values for really effective eLearning.

Hope you found this information on color "valu"able!

***

If you'd like to attend some awesome 3-hour mini courses that focus on eLearning, check these out.