Skip to main content
zMerlinz
zMerlinz
Inspiring
July 7, 2019
Answered

Percentage from Captivate to HTML

  • July 7, 2019
  • 3 replies
  • 614 views

Hi everyone, hope all had or having a great 4th of July weekend!

Background:

I Designed a pilot program where the user completes 10 slides as part of a “pre” test. As the user goes through each slide, a percentage is displayed to let the user know how much he/she has completed.  I want to take the percentage and send it to a custom HTML file as illustrated below. I find a custom HTML much easier to manipulate for this project, as I will be adding additional topics for the user later down the road.

User clicks on study:

User goes through several slides, and a percentage is displayed.

Need to take the current percentage from Captivate and send to custom HTML.

HMTL - Source

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title><!-- Mobile Specific Meta -->

    <meta content="width=device-width, initial-scale=1" name="viewport">

    <!-- Meta used for SEO -->

    <meta content="Bootstrap Accordion Framework" name="description">

    <meta content="responsive, creative, html5, css3, form, layout, new layout, bootstrap element" name="keywords">

  

    <style>

      

/* Cosmetics */

      

.panel-body {

  

    height: 100%;

  

}

.panel-group .panel {

    border-radius: 4px;

    margin-bottom: -1em;

}

/* Panel Image Inactive */

.panel-heading1 {

     background-size: 100% 100%;

    padding: 10% 12%;

    position: relative;

}

.nj-title1 {

    color: #888888;

    font: 5vw Helvetica, sans-serif;

    font-weight: bold;

    left: 5%;

    /*position: relative;*/

    top: 40%;

}

.nj-title2 {

    color: #888888;

    font: 5vw Helvetica, sans-serif;

    font-weight: bold;

    left: 27%;

    position: relative;

    top: 40%;

}

.nj-safeperc {

  

    color: #4c4c4c;

    font: 7vw Helvetica, sans-serif;

    font-weight: bold;

    left: 66%;

    position: absolute;

    top: 30%;  

    width: 35%;

}

.nj-return1 {

    background-color: black;

     background-size: 100% 100%;

    padding: 6% 0%;

    position: relative;

}

.nj-return1txt{

    color: #f0f0f0;

    font: 7vw Helvetica, sans-serif;

    font-weight: bold;

    left: 24%;

    position: relative;

    /* top: 40%; */

}

    </style>

<!--- Capture percentage from Captivate? -->

  

<script>

  $(document).ready(function()

  {

     $("#link1").click(function(event)

       {

       window.parent.window.cpAPIInterface.getVariableValue("var_SafProgress_Percent");

       });

  });

</script>

</head>

<body>

    <div class="nj-return1">

    <span class="nj-return1txt">Choose Subject</span></div>

    <a id="link1" href=""></a>

    <div class="panel-group" id="accordion">

        <div class="panel panel-default">

            <div class="panel-heading1">

            <span class="nj-title1">Study<a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"></a></span>

            <span class="nj-title2">Completed</span>

          

    </div>

            </div>

        </div>

</body>

</html>

Any feedback/advice you can provide is much appreciated.

Using:

CP2019

This topic has been closed for replies.
Correct answer chrismay_at_delta6226261

I think you have it all correct, do you want the user to have to click something to see the percentage, or have it load automatically?

your code has it trying to load after the user clicks something...

in your custom html, add this in the script  area:

function getUrlParameter(name) {

  name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');

   var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');

   var results = regex.exec(location.search);

   return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));

};

var thePercentage= getUrlParameter('var_SafProgress_Percent');

give your completed span an id, <span class="nj-title2" id="mySpan">Completed</span>

then you can do something like: $("#mySpan").text("Completed "+thePercentage+"%");

it is better practice to use id's for individual items, if you targeted the class in the above statement, and there was more than one object assigned to the class, you would end up changing the text in both elements.

3 replies

chrismay_at_delta6226261
chrismay_at_delta6226261
Inspiring
July 9, 2019

that is ready to go, no changes needed

Lilybiri
Lilybiri
Legend
July 8, 2019

Bit strange a percentage based only on slides, not on duration. Anyway, you could download a descriptive table with all system variables from this post:

Discover/Use Captivate's System variables - Part 1 - Captivate blog

Contrary to most counter variables, cpInfoCurrentSlide has an index starting with 1, not with 0.

    chrismay_at_delta6226261
    chrismay_at_delta6226261
    Inspiring
    July 8, 2019

    Look at these system variables:

    cpInfoCurrentSlide

    cpInfoSlideCount

    (cpInfoCurrentSlide/cpInfoSlideCount)*100 will give you the percentage. You can also access these variables from JavaScript (assuming all your pages are published to HTML5

    You could pass the percentage as a query string http://.../myCustompage.html?completion=30.5 and then use JS to read and display the percentage on the new page.

    chrismay_at_delta6226261
    chrismay_at_delta6226261Correct answer
    Inspiring
    July 8, 2019

    I think you have it all correct, do you want the user to have to click something to see the percentage, or have it load automatically?

    your code has it trying to load after the user clicks something...

    in your custom html, add this in the script  area:

    function getUrlParameter(name) {

      name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');

       var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');

       var results = regex.exec(location.search);

       return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));

    };

    var thePercentage= getUrlParameter('var_SafProgress_Percent');

    give your completed span an id, <span class="nj-title2" id="mySpan">Completed</span>

    then you can do something like: $("#mySpan").text("Completed "+thePercentage+"%");

    it is better practice to use id's for individual items, if you targeted the class in the above statement, and there was more than one object assigned to the class, you would end up changing the text in both elements.

      zMerlinz
      zMerlinzAuthor
      Inspiring
      July 9, 2019

      This looks very promising!

      The provided js code, is that ready to go or does it require modification, such as changing the word "name" ?

      function getUrlParameter(name) {

        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');

        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');

        var results = regex.exec(location.search);

        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));

      };

      And yes, the user must click in order to advance to the next slide.

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