Converting from Glossary Widget to HTML5 alternative

[Brett_Conlon]

Hiya Cappy-boffins,

I've recently been required to change tack with my eGuide project from originally exporting to exe file to now exporting to html5. Sadly, my rather large Glossary now doesn't appear because it uses the widget (Flash-based).

Aside from re-creating the whole thing manually (which would be an absolute nightmare, due to the sheer number of entries in there), is there another way I can deliver it with the least amount of labour as possible, and with the flexibility to readily update it without having to worry about re-flow issues (eg. adding a new "A" term means I have to manually push along all other entries after it)?

Does someone out there offer an HTML plug-in alternative? Can I use another software to build it then somehow integrate it into the project?

Your direction is most appreciated!

Regards,

Brett

[RodWard]

As far as I am aware the Glossary widget that ships with current Captivate versions should be compatible with HTML5.  It's not ONLY for SWF.

Which version of Captivate are you using?

Have you tried deleting the Glossary widget from your Interactions_[version] folder and to force Captivate to download the current version?

The Interactions folder is here for Captivate 2017:

C:\Users\Public\Documents\Adobe\eLearning Assets\Interactions_10_0

[Brett_Conlon]

Thanks for responding, Rod!

I’m using Cp 2017

We exported the project as HTML5 and the widget just never shows up in the page it’s sitting on.

That’d be absolutely FANTASTIC if it could still work. At this point we won’t be delivering it from within an LMS (project is far too big and would take ages to load – besides it doesn’t require an LMS as a product eGuide, rather than formal guided training with assessments).

I read on a similar post re: Glossary widget, that they had success when their project was imported into their LMS.

I haven’t tried removing the Glossary widget. My current widget shows a creation date of 20th April, 2017 (do I still need to delete it?). If I delete it, how do you get it to download afresh? Does it happen automatically on launch of Cp?

Chz,

Brett

[RodWard · Accepted solution]

The WDGT file format is really just a renamed zip file.  Inside the package there can be code to support either SWF or HTML5 versions of the interaction/widget.  This is so that if you publish to SWF the SWF widget file gets used and if you publish to HTML5 then the HTML5 code gets used.

I created a small test project and added a Glossary learning interaction (mine has the same create date from April 2017 as yours) and published out to HTML5.  Testing it locally on my PC showed that it played fine in Edge but Chrome wouldn't play it.

However, the best way to test any HTML5 content is from a web server, so I uploaded the same files to my own web server and tested it in Chrome there and it played fine:

http://www.infosemantics.com.au/downloads/wdgt/index.html

[Brett_Conlon]

Hi Rod,

Many thanks for the tipoff about the widgets working both ways. I did my own test, similar to yours, and found that the Glossary widget works in both IE and Firefox but is missing in Chrome, like you. I haven't tried it from a server.

So that lead me to wonder why my project's glossary doesn't work in HTML, even though it worked in the exe file. I first tried with only a few terms and kept building it until it eventually broke. I found that the exe file is far more tolerant with the characters used in the labels and the definitions.

My Glossary is broken into Acronyms and Words. So far I've gotten all the Acronyms to work but I needed to remove all the special characters like "&" and "/" and "+" and ":" for the glossary table to show. Characters like "(" and ")" and "-" were OK.

So, is there a way to get these special characters to work? For example, I've had to convert "TCP/IP" into "TCP-IP". I found that if the troublesome characters were part of the label then the whole table wouldn't load at all. If it was part of the definition then you could see the label in the list but if you clicked on it, the definition wouldn't appear.

I also found that the button and the logo image I placed on top of the Glossary would be in the background, behind the Glossary. I couldn't bring it to the front, which meant that the button became hidden. The Glossary also shrank in width (ie. it wasn't the full page size I made it). So, there seems to be a number of bugs to iron out.

Thanks again, Rod and Lilybiri for your assistance!

[RodWard]

As I showed with my own example, a simple project with Glossary DOES work in Chrome when uploaded to a web server.  But that example had no terms and definitions added.  It was just to show that the Glossary widget itself can work in HTML5.

The reason your HTML5 version of the content with this Glossary widget is not working is likely to be that most of those special characters you identified as problems are actually used in HTML or JavaScript code.  So they can easily trip up HTML5 content because the web browser may think they are code and try to execute the text around them as if it were programming code.  When it cannot make sense of the 'code' then it stops the page.

You may be able to use certain characters by 'escaping' them.  This involves adding a backslash \ character before each of the suspect characters.  Try it and see if that works for you.  If it doesn't then you'll just have to do without them.

Widgets added to HTML5 content are actually placed inside an iframe and Captivate tends to place them on the top layer.  In your case you also have the Glossary widget set timed for Rest of Project do you not?  If so, that also usually means you need to have it set to be on top of everything else so that when you make it appear, the learner can interact with it.

[Brett_Conlon]

Thanks again Rod,

Sadly escaping the characters with a backslash didn't work. For "/" and "&" the glossary didn't appear. For ":" and "+" the glossary appeared but again, the definitions didn't show when the label was clicked on. Looks like I'll just have to try and work around it. for the most part, I can do without them but for words like TCP/IP, it just looks wrong without the forward slash!

As for the Glossary on top: I actually have the Glossary on its own slide and the glossary buttons I have set up on each page navigates to the Glossary page then a "Return" button at the top takes them back to where they were. Is there a better implementation than that?

Chz,

Brett

[Brett_Conlon]

<groan> Oh-my-gosh! This is becoming more and more painful...

I've just noticed that all my labels and definitions have been offset by a few results (ie. if I click on a label, the definition 2 or so down from it shows so they are all outa-whack.)

OK, so I found that it was because I had a few definitions that started with numbers (eg. 4-colour and 5-colour) and because the widget seems to only have letters across the top, the numbered labels are being ignored, but it's skewing the definitions. When I changed them to Four-Colour and Five-Colour, everything ran smoothly. This was not at all an issue in the exe file. It quite happily displayed my numbered references.

I have to say that I've spent more time trying to get the damned Glossary widget to work (this time and the first time I set it up) than setting up all the hundreds of definitions in the first place. </groan>

Chz,

Brett

[RodWard]

I never set the definitions up directly in the widget.  I always set them up in a separate XML file and import that.  That way I can use the same definitions across multiple modules and make corrections quite easily before reimporting.

[Brett_Conlon]

Yes, I definitely have an external xml file I work on, then import it into the Widget.

I more meant that you mentioned having the widget set to show for the rest of the project. Is there a better way to implement my widget, instead of having it on a separate page and having buttons take the user to that page, then back to where they were?

How would you set it up?

[RodWard]

Some choose to place the widget on one of the earlier slides in a project, set timing to Rest of Project, and Visibility in Output to OFF so that they can then use Advanced Actions on any subsequent slide to SHOW the widget when needed.

But that setup won't change the issues you are having with special characters in the definitions.  You'll still need to get rid of those.

[Brett_Conlon]

Got it thanks!

And I'll soldier on with cleaning up the labels/definitions.

I most appreciate your assistance - this forum would be VERY DIFFERENT without your (and Lilybiri's) assistance!

Best regards,

Brett

[RodWard]

Thank you!

One type of character that always seems to cause problems is the chevrons < >.  Get rid of any of those.

Another type of special characters that can sometimes get you into trouble are parentheses and curly or square brackets.  They are also used in programming code.

I once found that for some unexplained reason I could use parentheses around words in the Glossary definitions but not around any words in the Glossary terms.  So watch out for them as well.

[Lilybiri]

The learning interactions (have a look at: Tips - Learning Interactions - Captivate blog )  in HTML5 output will probably play well if you upload to a webserver or to a LMS (in case of reproting tunred on). Bit annoying, but HTML5 has that kind of disadvantages compared with the older SWF output.