Highlighted

Percentage from Captivate to HTML

Explorer ,
Jul 07, 2019

Copy link to clipboard

Copied

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:

shot1.png

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

shot2.png

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

shot3.png

shot5.png

shot4.png

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

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.

Views

185

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Percentage from Captivate to HTML

Explorer ,
Jul 07, 2019

Copy link to clipboard

Copied

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:

shot1.png

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

shot2.png

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

shot3.png

shot5.png

shot4.png

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

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.

Views

186

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 07, 2019 0
Contributor ,
Jul 08, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2019 0
Contributor ,
Jul 08, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2019 1
Explorer ,
Jul 08, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2019 0
Most Valuable Participant ,
Jul 08, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2019 1
Contributor ,
Jul 09, 2019

Copy link to clipboard

Copied

that is ready to go, no changes needed

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2019 0