Adding References to Certificate of Completions

Sep 29, 2020

Does anyone know how to add custom fields to a printable certificate of completion? I'd like the learner to enter the name of their company and location in two fields early on in the course (see attached) and have that information display in the certificate at the end.

I have tried editing the report.html file and two HTML coders have tried as well. We are still trying to figure it out and Storyline won't provide a tech person to help answer questions. The version I'm using is Storyline 360. 

 

8 Replies
Sam Hill

Hi Douglas, this should be possible just by accessing the player. Assuming that report.html opens in a new window, the JavaScript required in report.html would look something like this.

<script>
var player = window.opener.GetPlayer(); // get a reference to the SL player
var company = {};
var company.name = player.GetVar("TextEntry4"); // get var
var company.city = player.GetVar("TextEntry5"); // get var
<script>

You should then be able to output as you need to:

<div id="companyname"></div>
<script>document.getElementById("companyname").innerHTML = company.name;<script>

or

<div><script>document.write(company.name);</script></div>
Kris Grant

Hi There

Apologies in advance.

I know editing report.html is still (still?) unsupported after many years of requests, but would really appreciate assistance from the community if possible.

We have about 30 eLearning modules for a major project and each module may contain several sections, with a quiz at the end of each section.

The report.html file separates the 3 quizzes into tables on the report so that learners can see the right and wrong answers. However, the 3 results tables on the report have the main module title not the section title which is in 3 project variables: Section_1_Title, Section_2_Title etc.

I have tried the get the sample code (below) adapted to our variables to work in our report but have been unable to so far:

Sample

var player=window.opener.GetPlayer();
var learnerID=player.GetVar("TextEntry").replace(/(\r\n|\r|\n)/g, '
');
document.write("

USER ID: "+learnerID+""); 
 
Adapted
 

var player=window.opener.GetPlayer();
var Section1=player.GetVar("Section_1_Title").replace(/(\r\n|\r|\n)/g, '
');
document.write("

USER ID: "+Section1+""); 

  

I have attached the report.html and a screenshot of the results showing the same heading for each of the section results tables. 

I would be grateful If anyone is able to assist, e.g. the exact code if the above is not right anymore and where to insert in the report as the results disappear when I attempt this with no JS knowledge.  

Regards Kris.

 

 

Sam Hill

Hi Kris, I think the attached should work for you. Let me know how you go. The change is in the function setUpPrint()

          // *** Rename the quiz name using 'Section_{num}_Title' *** //
          let $player = window.opener.GetPlayer();
          for(let $quiznum = 0; $quiznum < quizzes.length; $quiznum++)
          {
            quizzes[$quiznum].strQuizName = $player.GetVar('Section_'+($quiznum + 1)+'_Title');
          }

 

Kris Grant

Hi Sam

I really appreciate you replying on this subject. Especially with the time difference if in Australia (...I was hoping Cameron Smith could have done it at the Masters golf) 

I see we can now use let instead of var in SL and think I understand what the code is doing.

Sorry for the dumb question: 

I have been doing this locally without success, do I need to publish to a testing server for this to work?

Kind Regards

Kris.

 

Sam Hill

Hi Kris, it may be that I didn't get something correct. Would you be comfortable sharing your *.story file with me. You can send to me privately at sam @ rebusmedia . com (remove the spaces) and I can take a quick look for you.

It's not a dumb question. This will work locally when it does work. No special set-up required.

Kris Grant

Hi Sam

Just thought I'd update you, we have managed to get the report to display as needed, with just a minor tweak of the script you kindly forwarded: 

var player = window.opener.GetPlayer();

var quiznum = 0;
for(var i in quizzes){
if(quiznum !== 0){
quizzes[i].strQuizName = player.GetVar('Section_'+quiznum+'_Title');
}
quiznum = quiznum + 1;
}

This works for the current module with 3 knowledge check quizzes (on testing server, due to trust local browser restrictions), so will check again when we produce further modules for publishing.

Thanks again for your help.

Kris.

 

Sam Hill

There was an error with this code, and it should be looping through an object and not an array:

The following code can be inserted into the setupPrint function at around line 306. In the following instance, the script is retrieving variable values from storyline. The variable names that are being assigned to the quizzes are Section_1_Title through to Section_4_Title. The loop simply using $quiznum variable and incrementing it within the loop and reassigning the individual quiz names, strQuizName, with the Section_n_Title.

let $player = window.opener.GetPlayer();
let $quiznum = 1;
for(let quiz in quizzes)
{
quizzes[quiz].strQuizName = $player.GetVar('Section_'$quiznum+'_Title');
$quiznum++;
}

The function could be further modified if the variable names cannot be accessed using an index such as $quiznum in the title. An array of variable names could be used as follows:

let $player = window.opener.GetPlayer();
// array index
let $quiznum = 0;
// an array of Storyline variable used to name the quizzes
let $variable = ['QuizA1Title','QuizA2Title','QuizBTitle','QuizCTitle','FinalQuiz']
for(let quiz in quizzes)
{
quizzes[quiz].strQuizName = $player.GetVar($variable[$quiznum]);
$quiznum++;
}