JavaScript output for variables to print filename working locally but not on Moodle...

Jan 06, 2021

MarkAnthony Chesner
By MarkAnthony Chesner

Hello Heroes!

After trials, tribulations, heartbreak and pain I finally worked out the Java code to place variables into file names to save/print the result sides. It worked perfectly and I was extremely proud of myself as I am not a programmer.

All was going well until I uploaded to Moodle and tested it on the server...

Instead of my student names and course name in the file name area, all I could/can get was player.pdf....

Here is my code:

var player = GetPlayer();
var first=player.GetVar("FirstName");
var middle=player.GetVar("MiddleName");
var last=player.GetVar("LastName");
var title=player.GetVar("CourseTitle");
document.title=first + " " + middle + " " + last + " " + "-" + " " + title;
window.print();

All the variables have been checked, like a million times, and it does work brilliantly locally.

Any assistance would be most welcome!

I've added on of the modules below.

79 Replies
MarkAnthony Chesner
over 3 years ago01/06/21 at 2:21 pm (UTC)

Perhaps I was not clear in my first post. I am trying to output variables as filenames for the pdf print from the results page. I have registered a free account at TalentLMS and still the filename is not the variables that I am trying to pass.

Locally, everything works. But it seems that there are some difficulties when you upload this to a server...PLEASE HELP!

Phil Mayor
over 3 years ago01/07/21 at 9:47 am (UTC)

It works fine inside of Articulate Review. I would suspect it is the way content is displayed in the Player element of most LMSs. The content is within an Iframe most of the time so may not be possible to get the course title and that may be breaking things!

I would use the console to check each variable is set correctly within your LMS, if Moodle is intended environment I would also pull name from there

MarkAnthony Chesner
over 3 years ago01/07/21 at 9:56 am (UTC)

Thanks for the reply!

It's not my code, just trying to copy & paste to get what I need done... I'm not a programmer...

At present, I'm trying to just do everything in pdfmake, but again, this has proven to be very difficult.

Is there any way that you could help me to get the document.title working? It would save me the migraines I have been living through the past few days...

Optionally, could you send me a good example of javascript to change the colour of a variable based on the text value; true or false? For pdfmake, by the way...

here is my feable attempt:

function colorChange() {
if (Q21.innerHTML = "true") {
Q21.style.color = 'blue';
} else {
Q21.style.color = 'red';
}
}

Thanks again!

Math Notermans
over 3 years ago01/07/21 at 10:31 am (UTC)

Go the simple way for that colorchange if your not into Javascript. Use 2 textfield one with color red and one with color blue and use triggers to either show one or the other.

A console log is just a Javascript call to test at any given point in your code.

// add this wherever you want to test something
console.log("my document title is: "+document.title);

Dont forget copying from the forum can break quotes so make sure they are all fine. Best to check code in Sublime Editor or something like that.

MarkAnthony Chesner
over 3 years ago01/07/21 at 12:13 pm (UTC)

Math, 

Thanks for your response, but I am trying to change the colour in the HTML file then pdf file from the pdfmake tool.

I would rather use the document.title which would solve my problem, I just can't get my head around the code.

Any help would be most welcome.

Thank you again!

UPDATE:  I am trying to use javascript in the pdfmake HTML to change the Q21 text variable to either blue or red depending on its text value of true or false. 

If someone could help me out with the conditional statement, that would be fabulous!

This is my code without the background image data:

<!doctype html>
<html lang='en'>

<head>
<meta charset='utf-8'>
<!-- Include pdfmake JS -->
<script src='pdfmake/pdfmake.min.js'></script>
<script src='pdfmake/vfs_fonts.js'></script>
</head>

<body>
<script>

// Check if GetPlayer function exists, if it does, retrieve values of variables.
if (typeof window.parent.GetPlayer === 'function') {

// Retrieve storyline player object from parent window
var player = window.parent.GetPlayer();

// Retrieve the learners name from the learnerName variable
var name = player.GetVar("learnerName");

// Retrieve the teachers name from the teacher variable
var teacher = player.GetVar("teacherName");

// Retrieve the score from the score variable
var score = player.GetVar("score");

// Retrieve the title of the project from projectTitle variable.
var title = player.GetVar("projectTitle");

// Retrieve the title of the project from projectTitle variable.
var Q21 = player.GetVar("v21");

// If GetPlayer function does not exist we are probably testing the certificate outwith storyline. Set variables with dummy values for testing.
} else {

var name = "Joe Bloggs";

var title = "Test Project";

}

// Get todays date in format dd/mm/yyyy
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
date = dd + '/' + mm + '/' + yyyy;

// Define PDF output - See http://pdfmake.org/#/gettingstarted for information on creating a PDF document with pdfmake.
var docDefinition = {
// Set page size
pageSize: 'A4',
// Set document orientation
pageOrientation: 'landscape',
// Set page margins
pageMargins: [0, 0, 0, 0],


// Define main body of document
content: [

// Include learner name
{
text: name,
fontSize: 25,
bold: true,
color: '#006',
alignment: 'left',
margin: [43, 135, 0, 0]
},
{
text: score,
fontSize: 35,
bold: true,
color: '#006',
alignment: 'left',
margin: [245, 85, 0, 0]
},
{
text: Q21,
fontSize: 20,
bold: true,
alignment: 'left',
margin: [500, -220, 0, 0]
},

],
};

function colorChange() {
if (Q21.innerHTML === "true") {
Q21.style.color = 'blue';
} else {
Q21.style.color = 'red';
}
}

// Function to generate and download the PDF using the document definition object (docDefinition) we defined previously.
function generatePDF() {
pdfMake.createPdf(docDefinition).download(title + '.pdf');
}

// Testing - Uncomment to generate PDF with dummy values outwith storyline. This opens PDF in new window.
// pdfMake.createPdf(docDefinition).open();

</script>
</body>

</html>

Phil Mayor
over 3 years ago01/07/21 at 2:14 pm (UTC)

I think you can just do simple if else on the text rather than a function, shouldn't have to define true or false in and if/else statement

if (yourVariable) {
 text: yourTextVar,
 bold: true,
 color: '#ffffff',
 fontSize: 14,
 alignment: 'left',
 // margin: [left, top, right, bottom]
 margin: [0, 10, 0, 10]
} else {
 text: yourTextVar,
 bold: true,
 color: '#000000',
 fontSize: 14,
 alignment: 'left',
 // margin: [left, top, right, bottom]
 margin: [0, 10, 0, 10]
}
Phil Mayor
over 3 years ago01/07/21 at 3:02 pm (UTC)

Is it a boolean in storyline? It should report true or false, if it is a string

If it is text try this (works on theory that can only be true or false) This will only change between black and white you need to add hex codes for Blue and red. Did you get any errors in the colsoe?

if (Q21 == "true") {
text: true,
color: '#ffffff'
} else {
text: false,
color: '#000000'
},
Sign In to Reply