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/07/21 at 5:48 pm (UTC)

<!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 (Q21 == "true") {
text: 'true',
color: '#ffffff'
} else {
text: 'false',
color: '#000000'
},


// 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 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>

Russell Killips
over 3 years ago01/07/21 at 6:10 pm (UTC)

Here's what I came up with.

<!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>
function fnCapitalize(x) {
x = x.toString();
return x.charAt(0).toUpperCase() + x.slice(1);
}

function generatePDF() {
var player = parent.GetPlayer();
var title = player.GetVar("projectTitle");
var name = player.GetVar("learnerName");

var Q21 = player.GetVar("v21");
var Q21_Color = "";
if(Q21){
Q21_Color = "#0000ff";
}else{
Q21_Color = "#ff0000";
}
Q21 = fnCapitalize(Q21);

var docDefinition = {
pageSize: 'A4',
pageOrientation: 'landscape',
pageMargins: [0, 0, 0, 0],
content: [
{
text: name,
fontSize: 25,
bold: true,
color: '#006',
alignment: 'left',
margin: [43, 135, 0, 0]
},
{
text: "Q.21: " + Q21,
fontSize: 25,
bold: true,
color: Q21_Color,
alignment: 'left',
margin: [43, 135, 0, 0]
}
]

}
pdfMake.createPdf(docDefinition).download(title + '.pdf');
}

</script>
</body>

</html>

Russell Killips
over 3 years ago01/07/21 at 7:10 pm (UTC)

On your print page, you insert a web object pointing it to your certificate folder.

Then for your print button, you want it to execute the generatePDF() function that's inside the web object.

for (i=0; i<window.frames.length; i++){
try {
window.frames[i].frameElement.contentWindow.generatePDF();
i = window.frames.length;
}
catch(err) {}
}

MarkAnthony Chesner
over 3 years ago01/07/21 at 9:16 pm (UTC)

Thank you Russell,

I meant, how can I apply this to each of the 30 variables that I need to push to the HTML and pdf?

I see in the code some aspects of capitalization, I just need to show blue or red for true or false applied to my situation. Could you please just show me how to do this with what I have? Or show me a way to do this with what you've provided? 

Thank you again!!!

UPDATE:

It was late last night and my mind was a bit foggy. Slept on it, don't understand how the colours are changed but I was able to duplicate it....that being said, could you please possibly help me with setting up some formating on the page? I have made an image roughly showing what I need. 

If so, could you also place a content element in one of the table cells so I can see an example of the coding punctuation and such?

If not, I can do it using negative margins but this would be painstakingly intense for me....

Thank you again for your help!!!

 

Phil Mayor
over 3 years ago01/09/21 at 12:36 pm (UTC)

There is a Playground for PDFMake where you can mess round as much as you want and get it right. This should work, but for me it is about testing playing, testing playing and geting it right.

 {
 text: [
 'your text string here ',
 {text: emnboldenedVAR, bold: true},
 ' your text string here',
 ]
 },

 

MarkAnthony Chesner
over 3 years ago01/09/21 at 2:23 pm (UTC)

Thanks guys!

But it doesn't seem to work when applied to the variable where I need it. It doesn't show an error in the console, but the pdf will not generate...

{
text:  '51. Yesterday the inspector asked me when ' + Q51 + ' last.'
fontSize: 15,
color: '#000000',
alignment: 'left',
margin: [40, 10, 0, 0]
},

Thank you again!!!

Phil Mayor
over 3 years ago01/09/21 at 2:33 pm (UTC)

Sorry Mark that isn't what we shoed you, try this:

 {
 text: [
 '51. Yesterday the inspector asked me when ',
 {text: Q51, bold: true},
 ' last',
 ]
fontSize: 15,
color: '#000000',
alignment: 'left',
margin: [40, 10, 0, 0]
 },

Not 100% convinced styling is in the right place and when you start to get more complicated you probably want to use styles in the document

Sign In to Reply