Skip to main content
jasona92196440
jasona92196440
Known Participant
January 5, 2017
Answered

How to reference JQuery reference file, in Captivate 9

  • January 5, 2017
  • 1 reply
  • 1092 views

Morning all

I am brand new to Jquery but have managed to build my own Jquery accordion interaction. It matches the Captivate interaction look and feel but has the ability to record the clicks of each tab. Click all 3 accordion tabs makes a button appear, yeah me!

But all is not well! When the slide loads Jquery hangs, as it searches for the reference folder, once found they then appear.

How can I reference the Jquery folder at the start of the project, so that all interactions have already linked to the folder, before the slides have opened.

Thanks Jas

    This topic has been closed for replies.
    Correct answer TLCMediaDesign

    Paternity Accordion

    This is the set up of the zipped file

    Found the bellow on line. Is this what you mean. The final bit being jquery.js rather than stuff. Thanks Jas

    <head>  <link rel="import" href="/path/to/imports/stuff.html"></head>

    One of those index files is more than likely going to have the JavaScript includes. They need to be loaded in a specific order, since they rely on each other. You would need to find the include statements, put them in the Captivate index.html and place the files in the applicable directory corresponding to the path you use in the include. I use:

    <link rel="stylesheet" type="text/css" href="assets/css/dcol_2.css">

    <script src="assets/js/dcol_2.js"></script>

    You need a link for each of the files, but you can just start with the big 2

    <script src="assets/js/jquery-ui.js"></script>

    <script src="assets/js/jquery-ui.min.js"></script>

    To tell you the truth, those 2 files are most likely the same file with one being minified.

    1 reply

    TLCMediaDesign
    TLCMediaDesign
    Inspiring
    January 5, 2017

    Not sure what you mean about jQuery folder?

    How did you load this "interaction" into Captivate? If you have multiple files, you need to zip them together and insert as an HTML5 Animation.

    What does this button that appears do? Is it supposed to interact with Captivate?

    jasona92196440
    jasona92196440Author
    Known Participant
    January 5, 2017

    Thanks for getting back to me, and sorry for my delayed response.

    I have zipped the accordion to turn it into a HTML5 Animation. Inside the zip is the Jquery ui folder. Inside this is the jquery.js.

    Now the accordion sits on the slide with a Captivate next button hidden. Each accordion dropdown is clicked. The clicks are counted. When each tab has been clicked at least once (Meaning all text has been opened if not read) the next button will appear.

    When on a LMS  the accordion is delayed by 4 or 5 secs as the ui is found, the accordion then appears. The inbuilt interactions don't have this delay. Is there away of having the ui load up at the beginning before the slide is reached.

    I'm probably not understanding this correctly, so I appologise if the above statement is dumb.

    Jas 

    TLCMediaDesign
    TLCMediaDesign
    Inspiring
    January 5, 2017

    That seems like an awfully long time to download some js files.

    You could create an include statement in the index file, either after publish or in the Captivate template files and include the folder in the assets/js folder. That way when it encounters the accordion, the files will already be there and won't need to ping the server again.

    You could also try to put a hidden accordion on the first slide, it should still download the files from the server.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices