Problems html5 output smart interaction in Captivte 8

Hi community,
I have a problem with Captivate 8
When I publish smart interaction like Word Search they run perfect in swf. But when I watch the html5 output most of the interactions are placed on the top left corner and not at the position where I wanted to see them.
Are there any possibilies to fix this?
How can I bring the smart interaction in the html5 output into the center of the page?
Best regards
Me

All of the interactions are different.
You can move them on to the screen in the applicable widget html file. i.e. wr/w_4632/Widget_4632.htm
Sometimes you can use the reveal div, sometimes the widget name div:
<div id="wordsearchwdgt" style="-webkit-tap-highlight-color: rgba(0,0,0,0); left: 120px; top: 20px; position: absolute; display: block;">
      <link rel="stylesheet" id="cssFile" type="text/css" href="themes/dummy.css"></link>
      <link rel="stylesheet" id="cssHeader" type="text/css" href="themes/dummyHeader.css"></link>
      <link rel="stylesheet" type="text/css" href="themes/jScroll.css"></link>
      <div id="reveal" style="left: 120px; top: 0px; position: absolute; display: block; width: 832px;">
Even though it can be moved, some interactions still are cut off on the right. Still trying to find the culprit.

Similar Messages

Captivate 7 - HTML5 Output and Interactions - coming to the front

Hi all,
Don't know if anyone else has had this issue. I have found that when using inetractions with HTML5 output they automatically come to the front of the slide regardless of where you placed them in the story file.
I had used white rectangles to hide the interaction border but this now doesn't work in HTML5 (does the trick in SWF format).
Any ideas?
Cheers.

Hi again Mayank,
Little way down the road and it's not working . I have been testing away and discovered several things.
I started a new project and copy and pasted my slide from the main project with the accordian widget over to it. This was initially not working when tested in HTML5 so i proceded to chop away stuff untill it worked.
I discovered that if you have any objects with a shadow on the slide in any place (including not overlapping the widget) the whole widget breaks. I also found that if you had a 'line' smart object anywhere that the whole widget breaks.
Once i made sure i had no lines and shadows on the slide the widget then worked as expected with it staying at the back.
However i have found that no matter what i do in my main project the widget never works, even when it is the only thing on a new slide? This suggests a project wide issue and i have no idea what that could be.
Is there a chance that the actual save of my project is the issue as it was created before i changed the code? If so is there somthing i could change in the code of my save file to make it work?
I thought maybe i could copy and paste the entire project into a new project but of course all the click boxes change back to continue which is a nightmare.
EDIT: I just tried copying the entire project over to a new project and although all click boxes were on continue the slide with the widget worked fine (with the above amends).
EDIT EDIT: Hah, okay i have now discovered that deleteing the images of my master slide allowed the original project to work with the above amends (lines and shadows removed) too? So its the master slide thats the problem!

CP8 Glossary in HTML5 output problems

When publishing a SWF file that includes the glossary interaction, the glossary obeys the stacking order of objects when the file is viewed. When the file is published as HTML5, the glossary appears above items that were above it in the stacking order. In the image below you can see that I've added images above the glossary widget so I can make some appearance changes since you can't modify the widget's shape, and in the SWF output the widget appears below the images. In the HTML5 output the widget is being placed above the objects.
The other problem I'm seeing is that the glossary interaction doesn't even appear when viewing the published file in Chrome. So I have 2 questions:
1) How do you get the glossary widget to obey the stacking order in HTML5 output?
2) How do you get the glossary widget to appear at all in Chrome.?

Hi,
In regards to your first question I've had exactly the same problem. I've created elements to appear over the top of the widget which work fine in SWF but I've had no luck getting the sort order correct in HTML5. I've tried a number methods to try and find a solution but without any luck and so I would love to hear if anyone else has been able to do this.
What version of CP are you using? I do not have problems with the glossary widget appearing in Chrome using HTML8 and I'm using the latest build of CP 8. I did have problems with older versions but found that when I upgraded a project that had a glossary widget I also had to remove the old widget from the project and reinsert it again. Hope this point helps.
AndyK

HTML5 output not playing

Hi All
Using Captivate 7. Looking for some help on why I Randomly get this with some of my projects. The flash output works fine. So when I am in captivate and hit f12, no problems, but if I hit f11, the spinner just goes round and round. The problem happens in IE as well as Chrome. (see attachments). The only way I have found to fix it thus far is to copy all the slides from the damaged project and paste them into a new blank project. Ths then works fine, indicating its not a problem with the slides. Its just really annoying to have to go and reset all the interaction ID's and the project settings such as reporting every time it happens. (Seems to happen on average once a week)
I have also cleared the cache (general settings -> project cahce - > clear cache), and this hasnt helped
Looking at the error, it seems like its something internal.
Love any ideas that people have got.
Thanks
Luke
***** Edit *******
Ok so now the next project I open up also has the same issue, but with a different error
But other projects are still ok, so its not a problem with the pc or the installation, as far as I can tell

Just as another thing to look at if you have any similar issues, I found that if I have a "-" in a drag and drop interaction ID it also failed with the error in the console of :
SyntaxError: Expected ':'
at b (http://localhost:51210/HTML5Temp5776550982271Pre/assets/js/CPXHRLoader.js:36:369)
at Anonymous function (http://localhost:51210/HTML5Temp5776550982271Pre/assets/js/CPXHRLoader.js:37:45)
SCRIPT5009: 'cp' is undefined
File: index.html, Line: 17, Column: 3
However no such problem when using the swf output, just the html5 output
HTH

How to get current slide from embedded HTML5 output

I am using php to run a web application that displays HTML5 captivate files embeded in a HTML web page. What I need to be able to do is when a user clicks a button OUTSIDE of captivate (say maybe a "Finish" button) I need to be able to check if they have completed the interactive captivate capture. My research so far has show that there is little to no documentation on captivates APIs but they do exist. It looks like java script is the best option. How can I embed the captivate HTML5 output and find out if the user completed the Captivate. This could be by slide (i.e. 10/10 slides) or by percentage or a simple "Complete" would work. I just need the value so I can pass it back to php so my app can do its thing.

You already got addon running in the active ie instance. You just need to catch the WindowStateChanged event in every instance so you can write down the last event with OLECMDIDF_WINDOWSTATE_USERVISIBLE somewhere. When you need the active IE instance, just
pull from your save.
Note an IE tab may crash and take your addon with it. It is better to start a broker process to store your global data.
Visual C++ MVP

Fill-In-The-Blank drop-down list in HTML5 output

I'm working in Captivate 7 (WIN) and developing for both SWF and HTML5 output, viewing courses in IE9 for Windows and Safari on iPad.
I have a quiz containing a fill-in-the-blank question, using a drop-down list to select the correct answer, however it does not display the drop-down button or function correctly in HTML5 output (see screenshot).
The issue began after updating to Captivate 7 version 7.0.1.237. The drop-down list worked prior to the update I installed recently. I'm viewing the published course locally and in the LMS, and it does not work in either.
I've not read in the help documents that drop-down list questions are an unsupported question type in HTML5, and so I'm wondering if this is a bug that needs to be reported. Has anyone encountered this issue?

Do you need scoring? There is a Scrolling Text interaction (more control, you can empty the variable and it will be displayed empty) but it is a non-interactive one, no score possible except by adding other interactive objects.
Custom Short Answer Question - Captivate blog

Custom menu item not appearing in HTML5 Output

I'm trying to add a custom menu item to the top right of a project, it shows up fine in the flash output of a published SCORM file, but it's non-existent in the HTML5 output.
Has anyone experienced this issue, or have any suggestions for a solution?
Thanks in advance for any help you can provide!

I did it through the Skin Editor in Captivate, it is not an external flash menu...I wouldn't expect it to convert flash to html5. Through the skin editor you can add extra buttons, in the same place you can move the table of contents button, to the "top right". The problem is, the custom menu items won't even show the text where the link should be in html5, nothing... only when published to flash.

TOC not showing up on mobile devices after generating Multiscreen HTML5 output?

I'm using a trial version of RoboHelp 10. I created a project and used the screen profile: Android_Galaxy_Tab and the Screen Layout" Android_Tablet_Layout and generated HTML5 output from that. I navigate to the folder on my computer and click index.htm and it shows up in Chrome browser fine, but I upload (via FTP) the exact files to my web server and navigate to the web files and the TOC doesn't show up. As well as on mobile devices. The web files are here www.superdesigngirl.com/android_galaxy_tab/index.htm. Do I need to publish the files to the web via RoboHelp? Is this a known issue? Am I setting something wrong? Please help. Katherine.

Thanks Peter,
Observations:
When your site is uploaded to our server, and we access it with our mobile devices, we experience the same issue with the TOC refreshing instead of drilling down. The same sort of thing happens when we access your index - regardless of which topic we try to display, clicking on any link simply refreshes the index. We didn't have this problem with our own index. I wonder what's different?
When we access your site, directly via our iPad, it works perfectly. However, when we access your site via my Windows Phone (Nokia Lumia 920 running Phone 8) I experience the same problem of your TOC refreshing like ours does. Also, your index doesn't work on that phone, whereas ours does.
I should probably add that what I uploaded to our server was everything in the \empcareus\EmployeeCareUS\EmployeeCareUS_Project\!SSL!\Multiscreen_HTML5 directory to our testing server at ****.com.au/onlinehelpdemo/mobile/emp
Was that the right thing to do?
I've also thought this might be a permissions issue, but setting all file/folder permissions to 777 hasn't made a difference.
Cheers.
UPDATE: I took our files home and uploaded them to my own web server. They work perfectly on my Windows phone and iPad. Something's wrong at the work server end, I guess. Any ideas?

[FM12] Linking multiple books for HTML5 output

Hi all,
Here is the problem I'm facing :
I've created several FM12 books. Each one has a life on its own, as the main purpose is to publish in PDF format.
I would like publish in HTML5 to put all the books in an online help, that would be integrated into my company's website.
I have a problem dealing with the structure of my online help.
When putting out each book individually in HTML5, my TOC format is perfectly preserved as such :
ChapterTitle
- Level 1
- Level 2
- Level 3
ChapterTitle
- Level 1
- Level 2
- Level 3
However, if i put all my books in a same master-book, and generate a master-TOC, the HTML5 Output breaks my TOC format, as I have the following result :
Book 1 name
- ChapterTitle
- Level 1
- Level 2
- Level 3
- ChapterTitle
- Level 1
- Level 2
- Level 3
Book 2 name
- ChapterTitle
- Level 1
- Level 2
- Level 3
- ChapterTitle
- Level 1
- Level 2
- Level 3
Any hint or idea on how to solve this problem would be greatly appreciated. Thanks a lot !

This question has been cross-posted to two different forum
categories. Please direct any responses to the thread where the
question was originally asked. You may do this by
clicking
here.
Forum posting guidelines may be viewed by
clicking
here.

Cannot find html5 output folder

Greetings.
I am trying to insert an Edge Animate animation into my Captivate 7 project. In tutorials, it talks about a "html5 output folder".
Even if I am publishing in html5 (as well as swf), it does not create such html4 output folder. When I try to access the published files, the App Packager does not recognize them.
I am working on a Mac.
Hope someone can help me... I have searched forums and YouTube for a few hours but cannot find a solution.
Thank you!!
Best regards,
susan

I am having exactly the same issue. Also tried to uninstall and reinstall and it did not work.
Would really appreciate it if someone can help with this problem!!!

Smartshape buttons not consistent in HTML5 output

I have toggle buttons I created using Smart Shapes and advanced actions. They work fine and predictable in SWF output, but in HTML5 output, sometimes only half the button is hot and sometimes the a button won't be hot at all. There appears to be a dead spot in the top middle of the screen. If I move the buttons out of this zone, they work. Is this a known bug with HTML5 output?

Ok, so i tried unchecking Advanced Project Compression, still no luck.
One thing that I did that made the objects show up was move them directly to the center of the project (which breaks the design and navigation constraints the client has.)
Is there any reason why buttons and text near the edge of a project might be invisible in the output in Chrome? I am looking in the assets/js/... folder to see if there's anything there that might "hide" objects that are near the borders of the project. Any thoughts there?
Update: I found an older published HTML5 output of the same project that doesn't lose those elements in a full screen chrome. It was done before the most recent updates to Captivate 6. I compared the CPLibrary.js and found there are significant portions of code that have been changed / and or removed. I took the CPLibrary.js from the old project, and put it into the assets/js folder of the new project and it caused the missing items to show up in chrome. Not sure if this error will be fixed in the next update for captivate?

FM12 - "Black" images in HTML5 output

Hello
I'm using Framemaker 12, and I work with HTML5 output to publish online helps.
In my FM files, I use PNG images which are in anchored frames.
My problem is, after I did the HTML5 output, my images appear "black" as you can see below. Any idea about where this problem comes from would be greatly appreciated !
Thanks a lot.

Hi Arnis,
In fact the problem was in the transparency. My images are transparent .png files, and it looks like FM (still) does not know how to deal with transparency, and puts black where my images are transparent.

Images are stretched HTML5 output viewed in IE8. Workaround?

The images in my HTML5 output are being stretched vertically when viewed in Internet Explorer 8. I know there are HTML5 issues in general with IE, especially older versions, but is there a quick fix for this? I've attached an example below. The first image is supposed to be the search icon (magnifying glass) and the second is a little printer icon. Both are stretched vertically.

Hi,
I’ve not been paying much attention to the forums the last couple of days. Sorry for the late reaction.
The problem is that the image is stretched and IE8 incorrectly interprets this as that it has to stretch the image. If you are using IE9 in SharePoint (IE8 isn’t officially supported), you can press F12 and set the rendering mode to IE9 standards mode. This will make the output behave.
Greet,
Willam

Bookmarks of a Responsive HTML5 output as part of an overall tree structure

With its Responsive HTML5 output, unstructured FrameMaker 12 can create a bookmark tree.
Is it possible to tie trees (bookmarks) of multiple Responsive HTML5 outputs in an overall HTML tree structure?

Hi Herbert
Thanks for reporting the issue.
For this problem, I will suggest two solutions
1. Either create a master book containing all your books / fm documents and then publish, you will get integrated Responsive HTML5 output.
2. Or use TCS and in RoboHelp use merge project Adobe RoboHelp 11 * Merging Help projects
Please let us know if you find any issue in that.
Thanks
Amit Jha

HTML5 Output for Adobe Captivate 6

Hi,
I really need some Help. I am making a static widget in captivate 6 to where it could also access the system variables in captivate (Like cpCmndPause, cpCmndExit and etc.) using Actionscript 3.0. Now, It is for the swf Output. I am making for swf Output and as well as Html5 Output. I made Successfully the Static Widget for the swf Output and my Problem is how I could Make this in HTML5 Output. I did make a .wdgt file to where it contain the swf directory and html5 directory, And I would like to know if How I could make/access the same system variables in captivate, and I think it would be through javascript right?. I really need your Help on how to do this.
Is this available for the Html5 Output in Captivate? really need your Help. Thank you.

Do you have some links or example how to access those system variables in captivate (for HTML5 version)? I've doing this for almost one week but I didn't see any solutions forthis. I am making a new customized widget that could control the captivate commands like cpCmndPause,cpCmndNextSlide and other captivate commands. I'm making the .wdgt file in captivate so that it would support for both swf and html5 output. Thank you for your Help.

Problems html5 output smart interaction in Captivte 8

Similar Messages

Maybe you are looking for