How To Link From Engage To Presenter

Summary: Add code to a hyperlink in Engage to link the interaction to a slide in PowerPoint.
Difficulty: Medium

It is not every day that you come across a new “hack” that you know is somehow bound to make it into the annals of Articulate development. Well, we are going to look at one which lets you link from any step in an Engage interaction embedded in your PowerPoint presentation to any other slide in the same PowerPoint presentation.

First, have a look at an example I put together showing how a labeled graphic can link to different slides in a presentation and be then linked back to the Engage interaction.

View Demo

I didn’t do the whole map – just the orange markers link to other slides, plus the Exit link.

As you can see, the Engage interaction is used as a menu to other pages. You can therefore use any Engage interaction as a menu or sub-menu to your presentation. You can also link directly from one Engage interaction to another and back again.

How Do You Do It?

First some history.

A post on our forums caught the eye of one our developers. It was a plea to be able to link from Engage to a particular slide in PowerPoint.

Well, as easy as that might sound, this had not been possible without going into some considerable effort to create specially prepared SWF files containing Actionscript code. The code told the Articulate player to go to one slide or another. Here is an example I did some eighteen months ago. There was an easier solution, but the drawback was that the player had to restart before the slide was loaded as you can see in this example. This looked messy.

With this “hack”, we can now link to whatever slide we like from Engage without the player restarting and without having to write Flash. Here’s what you need to do:

 

Step By Step

 

• 1. Create your Engage interaction and add a hyperlink on a word. You’ll need to select some text and press the Hyperlink button:

 



 

• 2. Add this code as an http hyperlink with the last number indicating which slide in PowerPoint you want to link to:

  asfunction:_level44.playSlide,5

 



 

This hyperlink is linking to slide 5. If you want the link to go to slide 4, then replace the 5 at the end with a 4. Note too that the http:// we have at the beginning of a regular link is not used here. Then click OK.

 

• 3. Publish your interaction to PowerPoint.

 

• 4. Allow the user to leave the interaction at any time:

 



 

• 5. Now publish your PowerPoint presentation with Articulate Presenter and the hyperlinks in Engage will link to slides in your presentation (in this example to slide 5).

IMPORTANT NOTES

 

Please note that this is completely unsupported by Articulate so please do not write to Articulate Support about this. Write to me instead and I will try my best to help. This “hack” may one day become a supported feature, but at the moment it is definitely unsupported. As such, I cannot guarantee this will work with future updates to the software.

 

Your link will NOT change automatically if you add extra slides to PowerPoint and the slide you want to link to is no longer slide 5. You will need to edit the hyperlink by opening the interaction again in Engage and then republishing to PowerPoint/Articulate Presenter. Because you may want to add slides to your presentation before it is definitively finished, it might be a good idea to create your links from Engage to PowerPoint at the very end of the process, just before publishing.

 

If you are linking from one Engage interaction to another, you cannot link to a particular step in an interaction, only to the slide.

 

This “hack” does not work with Quizmaker ’09.

 

How To Add Quizmaker ’09 to Engage ’09

 

Summary: You can add a Quizmaker ’09 to an Engage ’09 by manually changing the published files.
Difficulty: Medium

 

 

One of the great things about the Articulate products is how you can bring together different types of content into one single presentation. Earlier this year we looked at how we can add a Quizmaker 2 quiz to Engage 1. The process how now become a lot cleaner with the new suite of Studio ’09 products and the method has changed. So if you are looking for a way to spice your interactions with an embedded quiz, look no further.

First, let us look at what you can do:

 

 

View Demo

The example shows how you can make Quizmaker ’09 appear in a new window but you can also have it embedded within Engage. The example below Quizmaker ’09 embedded within Engage ’09 which in turn has been published in Presenter ’09.

 

 

See Demo

How do you do it?

• Well we are going to look at the first example in this article which is publishing Engage as a standalone. As before, create your quiz first and publish to the Web. Your published files will look something like this.

 

 

• Now open your Engage interaction and decide where you want to place your quiz.

• Select the Add Media button.

 

 

• Point to the quiz.swf file in the Quizmaker ’09 published files we saw above and click Open.

 

 

• In the Multimedia Properties box, decide if you want the quiz to open in a new window, have it embedded or Full size (as in the picture below). Unlike with Quizmaker 2, all three options are possible with Quizmaker ’09 and Engage ’09.

 

 

• If you are going to show in Full size, you’ll probably want to choose a custom image to launch your quiz. This is what you will see in the Engage interaction and what users will click on to see the quiz.
  You can also decide where you want your image to appear.

  If you are embedding, you’ll probably want to choose as large an area as possible to make your quiz readable.

• When you have finished your interaction, publish it to the Web. (for a standalone Engage interaction).

 

Changing your published files

To finish your project you need to manually change the Engage published files.

• Locate your Engage project files.

 

 

• Open the engage_content folder in the Engage project files and notice the swf1.swf which corresponds to the quiz.swf which we imported earlier.

  NOTE: The name of this file will depend on how many other Flash movies you may have inserted in your Engage interaction. Make sure you find the one which corresponds to your quiz. Opening in Swiff Player or Internet Explorer should bring up the swirling logo.

 

 

• Unusually, we need to change the name of this file back to what it was before, namely quiz.swf.

  So your files will look like this:

 

 

• Now, open the data.xml file in Wordpad. (right-click -> Open with Wordpad)

• In the top menu of Word, select Edit -> Replace

 

 

• Now replace all instances of swf1.swf with quiz.swf. Depending on how you have inserted your quiz (embedded, new window, full size), you should find one or two instances.

 

 

• Save the edited data.xml.

• Finally go back to your original Quizmaker ’09 published files and copy the quiz_content folder and the state.xml file.

 

 

• Paste the folder and the file into your Engage engage_content folder. The contents of the engage_content folder should now look something like this:

 

 

Your Engage interaction is now ready to be viewed. Double-click engage.html to launch your interaction in your browser.

NOTES

You can have your quiz embedded or open as Full size. Opening in Full size slightly clips the submit button of your quiz. Embedding works fine but you need to make sure your quiz is large enough to be readable.

The main limitation with this method is that you can only insert ONE quiz per interaction.

Print Results will not work.

As the second example at the beginning showed, you can also embed a quiz in Engage and then embed the interaction in Presenter. You will need to publish from Engage to Presenter, and then embed the Quizmaker files in the engage_content folder of the Presenter ’09 project files, making the same adjustments as above.

How To Link From One Presentation To Another – Part 1

 

Summary: You can link from one presentation to another by embedding a web object.
Difficulty: Medium

 

Linking Elegantly

A question frequently asked in support is how to link seamlesslessly from one presentation to another, be it online or offline or even on a CD ROM. Reasons for wanting to do this are numerous including wanting to give a course to students using already prepared materials which include two or more modules, or wanting a user to go from one online course to another without leaving their training, so to speak.

An easy way to do this would be to simply create a hyperlink on the last slide that linked to your next course. The problem with doing this is that it creates a new window and so might look messy as it lies on top of the preceeding course.

Or you could do something like this. If you click on the course below, you will see a short specimen course which links to another, in the same window.

 

 

View Demo

 

How do you do it?

Well to create the above, I used the web object feature of Presenter to place some basic JavaScript to tell my browser to change URL address. Let’s have a look at the JavaScript I used (click on image below to view):

 

 

View Code

Download index.html now (right-click)

 

If you look carefully, without knowing what all the functions or code mean, you can see a link at the end. This link is where you want your presentation to go after finishing the present course. This is really the only thing you need to change in the above code before you can use it yourself.

In this example, my second course had already been loaded up to my server before I created the first module. The second module is at this address:

 

http://mediaenglishonline.com/daveperso/blogdemos/linkingpart1/presentation2/player.html

 

There is a course at that address above. Click it to see if you like.

The reason I uploaded this course first was that I needed to know the absolute address or URL of my course for me to link to it from my first course. (of course, you can plan how and where your course is going to lie beforehand so you don’t necessarily have to upload it first).

Now this link needs to be edited in the Javascript code which itself needs to be copied into a file called index.html and placed into an empty folder somewhere on your computer for use later. You can call the folder Next Presentation Web Object.

 

Let’s create a linking web object now

Now that might sound a little complicated but it really isn’t. Let’s go ahead and make a linking web object now to see how easy it is.

 

1) Create a folder now on your computer in My Documents

 

2) Call it Next Presentation Web Object

 

3) Download the index.html to your computer by right-clicking here and save it in the folder you have just created. (Make sure you right-click the link. Left-clicking the link will launch the presentation!)

 

4) Open it up with Notepad and check that the link is as above. Notice how you can change that link to whatever you want. For the moment, however, let’s keep it as it is so you can see if you can link from one of your presentations to mine.

 

You should now have a folder on your computer called Next Presentation Web Object in which there is a single file called index.html. The link at the end of the code in the index.html file is to the course that you want your first course directed to.

 

Adding your web object to your presentation

The majority of the work is done.

Now, create a new presentation and we’ll add a slide at the end which contains a web object.

5) Create a new blank page at the end of your course

 

6) Select Web Object from the Articulate menu

 

7) Where it says “Enter a web address”, click on the folder icon to the right of the input box.

 

 

8) Navigate to the Next Presentation Web Object folder you saved on your computer

 

9) Click OK

 

10) In the Insert Web Object dialog box, display the web object in slide.

 

11) Make the window “Full Slide”

 

12) Keep the other settings at their default values

 

13) Click OK. Your web object is now placed on the slide.

 

14) If you like, you can now reduce the size of the web object by just using your mouse to drag the corners in. You can make it as small as you like and perhaps write some text on the uncovered slide explaining that the next presentation is being loaded, or just asking them to wait a moment. This enables you to customize your last loading slide to match the rest of your course.

 

 

Now you can upload your course to any location you like and when it finishes, it will run into your new web object and take the user to your second presentation. This example will also work offline, provided you have a connection to the Internet for it to call up the second presentation.

For your own work you need to change the link in the index.html so that it takes the user to your course. Make sure that it is an absolute address and you put http:// at the beginning of the address.

 

In Part 2, I’ll show you how to link from one presentation to another using a relative link plus how you can create a looping series of presentations both offline and online.

 

Notes

• If you are using Presenter 5, the web object feature leaves an ‘ugly’ border so making the object smaller might not be a good idea. It might be better to leave the web object full slide, and actually incorporate an image into the web object. This example shows how I have inserted an image into the index.html file.

  You can download the corresponding Next Presentation Web Object folder here. Either use the same image or insert your own into the images folder.

 

• The link in the index.html can either be an absolute address like:

  http://www.articulate.com/mypresentation/player.html

  or a relative address like

  ../mypresentation/player.html.

  An absolute address means that you are giving the specific address of your course whereas a relative address means you are giving the address relative to where you are at the moment, ie the course you are looking at at the moment. If you are preparing a course for offline ose or CD ROM, you’d probably want to use a relative link. In this article, we concentrated on the absolute address first as it’s the easiest to set up and we’ll look at relative addresses in Part 2.

• This method of linking between presentations is probably not recommended on an LMS.

How To Add Captivate To Engage ’09

Summary: Embedding Captivate movies is possible even if the movie consists of multiple files. The procedure is the same in Engage ’09 as with Engage 1.

Difficulty: Medium

 

Putting External Content Into Engage

The inclusion of Captivate movies into Articulate content proves to be a popular subject so in this article I have decided to focus on adding content to Engage. A number of people have also enquired as to whether the new upgrades to the Articulate Studio in any way affects how we do this.

First, let us look at our sample Captivate movie which I copied and published from the Captivate samples:

 

And here are the published files created by Captivate:

Notice the “skin.swf” (Soft Skills_skin.swf) and the regular swf file (Soft Skills.swf) .

Inserting Captivate into a Media Tour interaction

Let us first insert this Captivate movie into the Media Tour Interaction.

• Open Engage ’09 and choose to open a new Media Tour Interaction.
• Click “Change Media” below the photo of the sunflowers.
• Navigate to and select the skin.swf, Soft Skills_skin.swf and then click Open.

 



 

• Confirm that you want to overwrite the existing content (the picture of the sunflowers)
• Make other changes to your interaction (delete or create other steps, change title etc, remove Caption text) and save your changes.
• Publish to the Web.

 

Once it has published successfully, you get the Publish Successful dialog box.

 

 

If you preview now, you will only see the player in Engage since the player is contained in the skin.swf file we imported.

 

 

What we now need to do is to import the other Captivate files into the Engage interaction.

 

• Go back to the original Captivate files and select all the files except the skin.swf, the html file (we don’t need the html file since we are embedding the swf directly rather than displaying it as an html page in a browser) and the standard.js file (this is just a file to prevent a security warning appear when you view Flash content but is already included in the Engage interaction code).

If you are not sure which files to copy, you can copy them all. It won’t make a big difference in size and won’t make any functional difference either.

 



 

• Now go to your Engage PUBLISHED files (the files you published earlier in the Media Tour interaction) which by default will be in (My) Documents -> My Articulate Projects or click on “Open Folder” in the Publish Successful dialog box that you should still have open. It should look something like this:

 

 

• Open the engage_content folder.

 

 

• Paste the contents of your clipboard (which should contain the Captivate files you copied a minute ago) into this folder to give you something like this and notice the three extra files:

 



 

• Now go back up to the root level of your Engage interaction and launch the engage.html file. DO NOT REPUBLISH IN ENGAGE.

Your interaction should work something like this:

 

 

Note that you can have several Captivate movies in the same Engage interaction, one on each step.

Adding Captivate via Add Media in other interactions

 

Now let us look at another type of interaction, the Process Interaction. The Media Tour interaction is unique in that it does not offer you a choice of how you want to display your Flash movie but all the other interactions including the Process interaction give you a choice from three options, :

1) Embedded

2) Full size

3) In new window

The procedure is exactly the same as with the Media Tour interaction.

• Open a blank Process interaction
• Select Add Media on one of the step.
• Navigate, select and open the skin.swf of your Captivate movie.

Then choose how you wish to display your movie in the drop-down menu:

 

 

If you go for the Full Size option or the New Window option, you can leave the default value or change the default Flash image for your own. If you choose the Embedded option, you might want to make your image size as large as possible so that your users will be able to view it correctly.

Once you have edited your interaction, publish it as normal and follow exactly the same procedure as with the Media Tour to copy the other Captivate movie files into the engage_content folder.

Here are examples of the three options in this Engage interaction (click on the Flash arrows where necessary to see the movie):

 

 

Note that since I am displaying the same movie in each step, I don’t need to duplicate the Captivate project files each time.

Any questions? Feel free to post a comment.

Reading Articulate Presenter 5 CDs With Flash 10

 

Summary: You can read legacy Presenter 5 CDs with Flash 10 by using the Flash Switcher Add-on in Firefox 3
Difficulty: Easy

 

 

Adobe recently released an update to their Flash Player which caused problems for some Articulate Presenter courses. Articulate have released the Flash 10 Updater tool to make all previously published Articulate Presenter 5 content readable with Flash 10 but the tool can only work on editable files such as on a local computer or on a server via FTP. Updating a CD Rom is more difficult since those files cannot be changed. Here is one way to easily make your CD Rom readable.

The procedure is straightforward:

1) Install Firefox 3 (an alternative browser to Internet Explorer)
2) Install a plugin/application called Flash Switcher
3) Change your Flash version in Firefox to read your CD.

1) Install Firefox 3.

If you already have Firefox 3 installed on your system, move straight onto step 2: Install Flash Switcher. If you have Firefox 2 or earlier, you will need to upgrade to Firefox 3.

 

At least 15% of the world’s Internet users (and more than 30% in Europe) use Firefox as their default browser. One of the advantages of Firefox is that it allows you to add little applications known as Add-ons to let you do extra things.

 

• To install Firefox 3 (or upgrade from an earlier version), go to http://firefox.com and download the installer. You’ll probably find that firefox.com will automatically detect your language and operating system for you and you’ll just be able to click on the “Free Download” button.

 

• You’ll then be taken to the download page where a download dialog box automatically appears and the Firefox installation is explained in four simple steps:

 

 

• Start the process by clicking Run (or Save)

• Give permission to launch the setup wizard by clicking Continue after the file has downloaded.

• Follow the steps shown in the setup wizard.

• Look for the Firefox icon on your desktop to use the Firefox browser.

2) Install Flash Switcher

• Double-click on the Firefox icon on your desktop. You may be prompted to make the browser your default browser or import your bookmarks from Internet Explorer. You can refuse both if you like. The browser will open with a welcome page.

• Copy and paste this link below into the Firefox browser address bar and press Enter on your keyboard. It will take you to the Flash Switch Add-on web site:

http://www.sephiroth.it/firefox/flash_switcher/

• Scroll to the bottom of the page and click on Install Now.

• When you click on the button, you will get a Firefox warning at the top of the page. Click Allow at the top right.

• A Software Installation dialog box will appear. Click on Install Now.

• The Add-On will download in the Add-on window.

• When it is fully downloaded, you will be prompted to Restart Firefox. Click on the Restart Firefox button.

Firefox will close and then reopen.

That’s it, the Flash Switch Add-on is installed and ready to use.

3) Change your Flash version to read your Articulate CD.

If you are reading this article in the first place and installing the Flash Switcher Add-on in Firefox, it is probably because you are already running in Flash 10 either in Internet Explorer or in Firefox itself and are unable to read an Articulate CD that you have.

The Flash Switcher will allow you to switch backwards and forwards between different versions of Flash in a few seconds. Because your Articulate CD is not compatible with Flash 10, you can change your Flash version to Flash 9 while you read your CD.

• Click on the Flash Switcher f icon and notice the different versions of Flash listed.

• If you don’t see Flash 10 version listed, go to the Adobe website and install the latest version of Flash which at the time of writing is Flash 10. You can download the latest version for Firefox here:

  http://www.adobe.com/go/getflash

  You might need to close Firefox to run through the Flash 10 installation.

• Once Flash 10 is installed, click on the f icon and notice the different versions of Flash including Flash 10 at the top (assuming that you running Flash 10 at the moment in Firefox).
• Click on Shockware Flash 10 and then select Save.

• Accept the default folder name.
• Now click on Flash 9 (it might have a longer name like Flash 9.0 r124)

• Your browser will momentarily close and then reopen with a Javascript application message saying Successfully Installed.
• You are now running Flash 9 in your browser.
• Launch the Articulate presentation in your CD Rom either by inserting the CD into your CD drive or by launching the presentation manually.
• Your presentation should play normally.
• When you have finished viewing the CD, you can revert back to Flash 10 by clicking on the Flash Switcher icon again at the bottom right and selecting Flash 10.

Now that you have installed the Flash Switcher in Firefox, you can just click on the Flash Switcher icon at the bottom right of the screen every time you want to view a legacy Articulate CD. In literally a couple of seconds, your browser will be ready to use.

Finally a thank you to Alessandro Crugnola for creating such a useful Firefox Add-on.

Cheating in Quizmaker

Summary: Making some basic changes to your quizzes can make it more difficult for your students to cheat.
Difficulty: Medium

 

Cheating, be it on Wall Street or in the classroom, does seem to be a fact of life or a facet of human nature but when it is your learners who are cheating on the course that you spent a lot of effort designing, you might suddenly become less indulgent. And let’s face it, there are a number of ways to cheat in Quizmaker if you, the designer, let them get away with it.

 

Take this quiz for example. It is a question about when I was born. There are two questions and unless you happen to be very clever or very lucky, you are unlikely to get both answers correct, though it is statistically possible of course!

 

View quiz

 

But there are at least three ways to cheat in this quiz…

Cheat 1

• Did you notice the review button at the end? Well it does not take a lot of genius to understand that if you review the quiz, you will automatically see which answers are correct and which are not, which means, of course, that you can take the quiz again and pass.

Cheat 2

• Print the certificate and it tells you which questions are right or wrong. There is nothing to stop you taking the quiz a second time and getting full marks.

Cheat 3

• Find someone who gets the right results and then just click the Print Results button without even taking the quiz. You get asked to enter your name which you do and hey presto, the certificate prints out your name with the correct answers and a pass mark.

So what can I do about it?

Well if all that sounds rather depressing, do not despair. You can stop all of that cheating if you follow the steps below. It might not be necessary of course. It all depends on your context. But if you have a sneaking suspicion that is something is afoot with your results, and that your students are really doing too well, then read on!

STEP 1

Change the color scheme so that the Review Quiz function will NOT show which answers are correct. Actually this won’t work for all question types so if security is a big issue, you might want to actually avoid using those question types.

How do you do it?

• In Quizmaker 2, go to Edit -> Colors and Effects.
• Change the ‘Correct color’ so that it matches the ‘Background color’ of your quiz.
• Now publish.

You’ll see that when you review the answers, you won’t be able to see the correct answers any more!

Here’s the example above corrected:

 

View quiz

Note: This will not work for all question types in particular the Word Bank and sequencing questions.

 

STEP 2

If you want the quiz certificate or printed results to be personalized, then DON’T let them put their name in at the end of the course when the results are known. Make them enter their name at the beginning. That way, anybody wanting to copy will have to do the whole quiz themselves.

How do you do it?

Simply add a Survey type question to the beginning of your quiz asking for the required information. You can add several questions if you like. Because they are survey questions, there is no scoring and so the final result will not be affected. BUT the answers will show on the print results output. So you will know who did the test. Here’s an example:

 

View quiz

 

Notice that I have removed the option to add the user name when printing results (Quizmaker -> Quiz Properties -> Results -> Features). Now, when you view the certicate, you see the name and other details at the beginning of the quiz reponses.

STEP 3

Change the course certificate such that the correct answers are not displayed. This won’t prevent cheating totally but it will make it more difficult for the student to go back round a second time.

How do you do it?

You need to edit the report.xml file in the Quizmaker published files or program files. Here are how your published files may look:

 

 

An application which I find useful for editing xml and one which allows me to specify which lines to edit is Notepad2.exe which you can download here (choose the first binary files download). It is open source and free and, like me, you might find it useful.

If you open report.html with Notepad2.exe rather than the standard Windows Notepad, you’ll see that all the lines are numbered.

To remove the correct answers from the certificate you need to delete the following lines:

Line 143

 

Line 267

 

Here is an example with an amended certificate:

 

View quiz

 

NOTE:

One drawback with this approach is that you keep having to changed the published files which can be a hassle if you want to publish to a server. An alternative to the above is to actually changed the report.html file in the program files.

• Go to Program Files\Articulate\Articulate Quizmaker\player\web\ and you will find the same report.html file as in the published files.
• Take a backup copy of that file and call in report_copy.html and then edit the report.html as before.

Now, every time you publish, the report.html will automatically have those changes included without you having to edit the published files every time.

FINAL TEST

So here is a final quiz. You know what day I was born, you know what time I was born, now, can you find what date I was born? If you get the answers right, then the quiz will tell you, but if you don’t, it won’t, and you won’t be able to cheat!

 

View quiz

Creating A Hotspot Game In Presenter

Summary: Use hyperlinks in PowerPoint to create a simple Hotspot game/activity.
Difficulty: Medium

 

Adding a bit of fun to a course is never a bad idea and if, on top of that, you can be teaching your users something useful, then so much the better.

 

There are quite a few external applications that you can add to your PowerPoint presentation as well as the Learning Games which are part of Articulate Presenter and of course Articulate Quizmaker but you can actually create your own activities in PowerPoint itself if you are creative with hyperlinks.

Hotspot Game

This article looks at how to make a hotspot game. None of the techniques used are particularly new or innovative but it hopefully shows how relatively easy and quick it is to add a little spice to your presentation.

First, let’s look at one of the demos I did for the occasion. As you’ll`see the demo is very simple and is designed for beginner English language learners. Try clicking on a wrong answer to see what happens.

 

View Demo

Download Project Files

 

As you can see, I have chosen to send the user right back to the beginning each time they get an answer wrong. This makes it more like a game but of course you may just want the user to take the question again without going right back to the beginning.

Here is another example taking the same template as above but making it slightly more complex. The principle is the same: get one question wrong, and you go back to the beginning.

View Demo

Download Project Files

Advantages

One of the advantages of using Hotspot questions in Presenter, rather than building them in Quizmaker, is that it allows you to have just one question in the middle of your course without changing the presentation or layout unnecessarily and without having a results page per se.

You can also customize the screen more than you can with Quizmaker 2.

Another advantage is that you have more say on the shape of your hotspot rather than the rectangle or square that is available in Quizmaker 2.

How Do You Do It?

Be creative with the hyperlinks. The process is relatively simple and creation can be quick, particularly if you just want to add a two or three question game.

You are basically adding hyperlinks to shapes or objects and then making them transparent and placing these transparent shapes over an image or text that you want the user to click on.

Be careful about which shapes you use as not all are supported by Articulate Presenter particularly when you use PowerPoint 2007 and Articulate Presenter 5.3. All the standard shapes should work though.

Step by step

• 1) First create the structure of your game. The above games are a series of cards or slides, going to the next question if correct, and going back to the beginning if wrong. In both of the above examples, I chose to have an extra slide to show that the answer was correct, but I could have skipped that slide altogether and made it even simpler – jump to the next question if correct, jump back to the beginning if wrong. This is what we are going to do in this short tutorial.

 

• 2) Once you have decided the structure, create 4 empty slides and label the accordingly: Title slide, wrong answer, question 1, and game complete . Put them in that order.

 

 

• 3) Now look at the first Question and build your template which you will use for the other questions later.
  Import the picture on which you want to build your hotspot game.
  Create the shapes that will cover the parts of the picture you want to make interactive.
  Link one of them to go back to the “wrong answer” slide.
  Publish to test that your linking is working.

  To link the shape, right-click it and select Hyperlink. Be careful about using different shapes and particularly the Scribble and Freeform shapes as the links will probably not work. Also, be sure to test in Articulate Presenter. Just because it works in PowerPoint does not necessarily mean it will work once published with Articulate Presenter.

 

 

• 4) Now create the shapes for all the objects you want to create hotspots for on our picture and link them ALL to the “wrong answer” slide. Change the format of the shape (right-click on the shape and select Format Background) and make Fill, no Fill and Line Color, No line (PPT 2007). Basically you want to make the shape transparent, invisible to the user.

 

 

• 5) Make any other adjustments to the presentation of the slide, background color, titles, images etc. You are going to duplicate this slide so now is the time to make those final adjustments. It will save you time later.

 

• 6) Duplicate this slide, however many times you want there to be questions in your game. If you want five questions, then duplicate it four times so that you have five identical slides. You might find you want a question for each object you have made a hotspot.

 

• 7) For each slide, number it Question 1, Question 2 etc and choose one of the objects which will be the correct answer. For the simplified quiz, link it to the next question. The others are already linked to the “wrong answer” slide so there is nothing more to do. Either add your question in text form actually on the slide OR, as I did, add your question in audio form by Record Narration or importing audio. I created my questions in the Slide Notes field so that I had something to read when I came to recording the narration.

 

 

• 8) Create your “wrong answer” slide. Choose how you want to present it and add some suitable audio if you like which will sound every time the user comes back to that slide.

 

• 9) Create your “winning” slide again with appropriate graphics and audio. The “winning” slide will be linked from a correct answer of your last question.

 

• 10) Finally, publish and test! However, I hard I try to get it right first time, I always notice a mistake, be it with a link, or a title or whatever. Do not test in PowerPoint, test in Articulate Presenter.

 

Here is the same Articulate Quiz with just the ten questions, “wrong answer” slide and “winning” slide.

 

View Simplified Demo
Download Project Files

 

Notes:

You can download the project files for each of the demos above. Unzip the file on your computer and open the PowerPoint file. It will be in PPTX format. You can download the plugin which allows you to open this kind of file in PowerPoint 2003 or earlier here. The project files should help clarify the hyperlinking structure of the games.

 

.

You could be clever and add some applause each time the question is correct, or a graphic telling the user it is correct. In the first two examples above, I added an extra slide between each question, confirming the answer was correct both visually and with an audio track.

 

I added a box each time a question was answered correctly. You could do anything here. Have a number that increased by one each time for example, have a picture that completes bit by bit, have an object, animal, person advances across the stage as each question is answered correctly.

 

Make sure that your slides are set to move on “by user” as defined in the Slide Properties Manager. You might want to make your “wrong answer” slide move on automatically to the first question.

 

You’ll want to hide the navigation controls both at the bottom and at the side or else your users will be able to click through the quiz. Either show your quiz in ‘Slide Only’ view and hide the controls or else show it in ‘No Sidebar’ view and make sure you have removed the navigation controls at the bottom. If you are not happy about doing that, then opt for the “Slide Only” view solution. When your user comes to the game, put them in Slide Only view. When they’ve finished, bring them back out into Standard or No Sidebar. (Remember you’ll need to hide the controls for the Slide Only view).

 

Finally, if you haven’t already done so, be sure to check out Tom Kuhlmann’s recent article on building a Puzzle Animation in PowerPoint and Articulate Presenter.

Controlling Audio In Engage

Summary: Convert your audio files to FLV to create playbars.
Difficulty: Easy

 

As a qualified English teacher myself, I know the utility of allowing my students to play, pause and generally control an audio file they are listening to. This could be a listening comprehension exercise where they have to try and understand some basic elements, and being able to go back and listen to a critical point in the audio to check their understanding is obviously a welcome feature.

The same could be said for a speech or lecture. You might not choose to show the text of the speech and if the listener was distracted or simply did not understand what was said, they’ll want to be able to go back and listen again, without necessarily having to go back to the beginning.

Well all of that is fairly obvious. The problem arises when we try and insert audio into Engage. As many of you will have noticed, while Engage allows you to insert audio or even record your own voice directly into the interaction with just a press of a button, the user is not able to pause or control that audio file within the interaction. Check this example to see what I mean:

View Demo

There is no need to listen to the whole audio files of course. The point is that we can’t stop the audio at any point or go back and forth.

If the interaction is then embedded into Articulate Presenter, there is no problem since the Presenter player will control the audio in Engage. But if your Engage interaction is standalone ie. is published by itself either on the web or on CD, then the user has no way to control the audio. And if your Engage IS in Presenter and you wanted to hide your player controls in the Presenter player (for design purposes) then you are also stuck….

Unless you do something like this:

View Demo

There is now a controller for each audio file which the user can click on to listen and repeat as they choose.

How do we do it?

Well, as you will see, there is no option in Engage to create playback controls for audio files. But there is for FLV video files. When you insert an FLV video file, you have the option to include a playbar and for the file to start automatically or not. So the solution to our problem is to convert our audio files to Flash Video or FLV format.

Once they are in FLV format:

• Click on the Add Media button in one of your steps of your Engage interaction:

 

 

• Navigate to your selected FLV file and click OK:

 

 

• Select playbar and decide if you want the file to start automatically or not and click OK:

 

 

And that’s it. Your audio files will now have player controls attached to them.

Notes

Bear in mind that since you are using the Add Media function to add your audio, you will not necessarily be able to add images to go with your audio. It will depend on the interaction you are using. On the Process interaction, for example, you will only be able to have text on the steps you include the audio FLV file.

 

It is not very easy to find an audio to FLV converter, and when you do, you might find that Engage is not recognizing the correct length of the audio file.

I have checked a lot of programs to find those that worked well and I found only two, one which is no longer available but which I bought a few years back, and Replay Converter by Applian Technologies. It is possible that Adobe Flash will do the necessary but I didn’t find how to do this in Sorensen Squeeze, nor in much other software. Either the possibility to convert from audio to FLV did not exist, or if it did, the length of the file would appear wrong and the scrub bar would not work.

There is a free trial for Replay Converter which last indefinitely but is limited to 90 seconds audio conversion at a time. To convert your audio file in Replay Converter, add your WAV file (or mp3), and then choose to Convert to Video File (even though this is audio). Select “Add more video formats” in the drop-down menu and choose an FLV format (I chose the smallest file size 100 kps which is sufficient for audio only conversion). Then click on the Go button and your file is converted. You should find that Engage correctly recognizes the length of any file converted with Replay Converter.

Changing Default Timings In Engage

Summary: Changing the autoplayduration value in the data.xml file of the Engage published files allows you to change default timings in Engage.
Difficulty: Medium

Introduction

Engage is a great product to make your PowerPoint slides look super interactive plus it adds that ‘Flash’ factor with the proverbial stroke of a brush or mouse. There are one or two tweaks you can apply to make them do just what you want them to do. I wrote a post about how to resize a FLV or SWF in the Media Tour interaction.

 

 

This post today looks at how to change default timings when viewing an Engage interaction which may allow us to make things work better and can also be used to workaround an issue with the Labeled Graphic interaction. It is a post about making certain tweaks to make things happen as we want.

“Click next to continue”

First let’s have a look at one of the issues on hand: Here is a simple Timeline Engage Interaction. Notice how the user needs to wait for five seconds or more before the message “Click next to continue” appears.

 

See example

Five seconds is fine sometimes, but you may have an interaction where 5 seconds on the first slide is simply too long. Well, you can’t change this from Engage itself, but you can change it by editing the data.xml file in the published files. If you make those changes, then you can get your interaction to behave like this:

 

See example

How do you do it?

• Create your Engage interaction and publish it either either as Standalone or to Articulate Presenter.

 

• Locate the published files. If this is a standalone interaction, you will find these by default in My Documents\My Articulate Projects. If you are publishing to Articulate Presenter, then you will find these in the Presenter published files, a folder in the same location and with the same name as your PowerPoint file. By default, this will be My Documents\Articulate Presenter\myprojectnamefolder\engage_257 (the number of the Engage folder will change).

 

• Locate and open the engage_content folder within the Engage published files:

 



 

• Open the data.xml file in an editor like Notepad. You will see a file like this:

 



 

• Find the autoplayduration tag and change the value from 5 to something smaller. In the example above, I changed it to 0.1 (it will not take 0 as a valid figure):

 



 



 

• Save and close the data.xml file.

 

• Play your standalone Engage interaction (without republishing) or publish your Articulate Presenter presentation (without republishing Engage to Presenter) and you should find that the message appears quicker than before.

Note

Another instance where this technique is useful is specifically when you have inserted an Engage interaction into Presenter.

Imagine that you have set your Engage interaction to be played in Linear viewing (Engage interaction properties) and you want the next slide button to appear immediately on the last step rather than have the user wait for five seconds for this to appear.

Again, changing the autoplayduration figure will vary the delay the user must wait. Making the value 0.1 will effectively make the “Next Slide” button appear immediately.

 

Here is an example of the issue:

 

View example

 

and here it is resolved having changed the autoplayduration value to 0.1.

 

View resolved demo

Labeled Graphic Issue

This brings us to a final and more serious issue with certain Engage interactions including the Labeled Graphic Interaction when embedded in Presenter. If your Articulate Presenter presentation is running in Restricted mode and the audio of the last step is LONGER than the autoplayduration value in the data.xml file, then the interaction gets stuck and the user cannot move on.

This is known issue by the Articulate developers but one which continues to cause headaches for some designers.

 

Here is an example:

 

View issue

 

By changing the autoplayduration value to a greater number than the length of the audio file on the last step, we can workaround this problem. The audio length of the file is 7.3 seconds. So I am going to make the autoplayduration value 7.5 seconds.

 

Here is the same file with the issue resolved:

 

View issue resolved

 

The drawback with this workaround is that it automatically makes all steps default to the autodurationplay value you choose. So if you have shorter audio in the earlier steps, your users will have to wait before being able to move on. Similarly, steps without audio, will take this new viewing time value.

The secret is therefore to make your final audio piece shorter than the others in the preceeding steps (if they have audio). If you don’t want to change the autodurationplay value manually, just make sure that your final step contains less than 5 seconds of audio or none at all!

Happy hacking !

Viewing Presentations Locally

 

Summary: Use Server2Go micro package to workaround Flash and browser security issues when viewing Articulate presentations.

Difficulty: Easy

 

Many users are still coming across issues when trying to view their published content locally due to increased security features in both Internet browsers and Flash.

This article takes another look at a solution to this problem that was written up by Gabe Anderson on his Word of Mouth blog last year following a post by a user on the Articulate forums. This second look at this solution is partly justified by the fact that a new smaller version of Server2Go has been released which now makes it feasible to use when sending presentations by email and not just when publishing to CD.

 

 

Typically the issues that are being met are the following:

• Adobe flash security message

Adobe Flash Player has stopped a potentiall unsafe operation.
The following local application on your computer or network:

C:\….\…\…..\stealthray.swf

Is trying to communicate with this Internet-enable location:

C:\… \player.html

To let this application comminucate with the Internet, click Settings.
You must restart the application after changing your settings.

*******************************************************************

• Attachments will not open. Clicking on a link in the Attachments tab does nothing at all or brings up an error message.

• Links will not work. Clicking on a link does nothing.

 

All of these issues may occur if:

• You are viewing your presentation off a CD Rom. ie. you have copied the published files to CD and you are trying to view your presentation on another computer.
• You have sent your presentation by mail in the form of a zip file. The user unzips the file and tries to view the presentation on their computer.
• You are trying to view a presentation off a zip drive or a USB drive on another computer.

 

Using Server2Go

One solution is to use an application called Server2Go which emulates an online server and so prevents the security issues from happening. Originally, Gabe’s article was more focussed on creating a workaround for CD productions as the application was well over 40 Mb in size but Server2Go have since released a “Micro” version of their software which is significantly smaller than the full version at about 5 Mb and which therefore allows it to be used for sending presentations by mail.

I have taken that smaller version, changed the splash screen and removed some unnecessary files to make it as small as possible to make it that much easier to publish using Server2Go.

 

How do we do it?

Using Server2Go might sound horrendously complicated but in fact it is extremely easy, almost childsplay. The application is basically ready for immediate use. You simply need to copy the files that have already been prepared for you on to a CD or into your file to be mailed and you are away. You should think of it as a container for your presentation. The container is ready for use, you just need to put something in it.

• 1) First, you need to make sure your presentation is ready. You don’t need to publish to CD, just publish to the WEB in Articulate. Let us take an Articulate Presenter presentation as an example. Here are our files.



• 2) Now comes the only change you need to make to your files. Change the name of the player.html file to index.html. This will make it readable by Server2Go. Your files will look like this:



• 3) Now download the Server2Go files. I have prepared a special version of the files which you can download here:

Download adapted Server2Go files

 

• 4) Unzip the package. This unzipped package contains all the elements for your new format presentation. It is the container that will need to be copied “as is” to your CD or into your mail. You package should look like this:



• 5) Now comes the second manual operation by you to get this to work. You need to put your presentation files (with the changed player.html to index.html file) INTO the htdocs folder as shown by the arrow below.



• 6) You’ll just find a readme.txt file initially. You can delete that once you have read it and replace it with your presentation files. So your htdocs folder should contain the following files:

And that is all you have to do.

If you are going to publish to CD, you need to copy all of the Server2Go package including the newly filled htdocs folder to your CD Rom. Make sure you just copy those files and not a folder containing the files. When you open your CD and view the files on the CD you should see the following files that we saw earlier:

The presentation should launch automatically but if it doesn’t, clicking on Server2Go.exe will lauch it.

 

Sending by mail

Because the package is so small, you can easily send your entire presentation by mail, provided of course that your presentation itself is not too large. If you want to send your presentation by mail, you can zip up the package again (this time it will contain your presentation in the htdocs folder), and send it to your correspondent. They will unzip and double-click on the Server2Go.exe file to launch it.

Here is a simple example of a packaged presentation that I prepared to show you the file structure. Download it, unzip and play it on your computer by double-clicking on the Server2Go.exe file. Notice the Articulate published files in the htdocs folder.

Download example presentation

Notice too how the attachments button works and you are able to view the readme text.

Now download the presentation outside of Server2Go and you’ll get the attachments error message. Unzip and double-click the player.html file to run.

Download standalone Articulate presentation.

 

Notes:

Server2Go is donation software. If you are using the software commercially, then the author asks that you make a small donation (anything from $15). although of course that might not be easy in a corporate environment.

You can change the splash screen which the user gets on launching the course as I did in the specially prepared package. Simply locate the splash.png file and change it as required.

There are other alternatives to Server2Go which may work as well including HTML Executable.