Forum Discussion

StevenChippe932's avatar
StevenChippe932
Community Member
4 years ago

Had anyone had any success populating an HTML table for printing using Javascript?

I have been using Javascript to provide learners with a document of their entries to bring to class.

I haven't populated a table before, and my HTML is very rusty. Where I'm struggling is knowing what requires a new line - I've prefixed each line with 'contents+='.

Can anyone with JS knowhow please take a look and let me know where I'm going wrong? Currently, it does nothing.

// Step 1. Connect JavaScript to the Storyline variables
var player = GetPlayer();
var RiseTitle=player.GetVar("varRiseTitle");
var QuestionText=player.GetVar("varQuestionText");
var TextEntry1=player.GetVar("TextEntry");
var TextEntry2=player.GetVar("TextEntry1");
var TextEntry3=player.GetVar("TextEntry2");
var TextEntry4=player.GetVar("TextEntry3");
var TextEntry5=player.GetVar("TextEntry4");
var TextEntry6=player.GetVar("TextEntry5");
var TextEntry7=player.GetVar("TextEntry6");
var TextEntry8=player.GetVar("TextEntry7");
var TextEntry9=player.GetVar("TextEntry8");
var TextEntry10=player.GetVar("TextEntry9");
var TextEntry11=player.GetVar("TextEntry10");
var TextEntry12=player.GetVar("TextEntry11");

// Step 2. The HTML Section - with the Storyline variables inserted
var contents = "<html><head></head><body style='width:650px;padding:20px;'>";
contents+="<div style='font-size:26px;font-weight:bold;margin-top:26px;margin-bottom:20px;'>"+RiseTitle+"</div>";
contents+="<div style='display:block;border-width:1px';><hr/></div>";
contents+="<div style='font-size:16px;font-weight:bold;'>"+QuestionText+"</div>";
contents+= "</body>"
contents+="<table>";
contents+="<thead>"
contents+="<tr>";
contents+="<th>"Core™ i5-9400F"</th>";
contents+="<th>"Celeron® N4020"</th>";
contents+="<th>"Ryzen™ 5 3600"</th>";
contents+="<th>"Athlon™ 3000G"</th>";
contents+="</tr>";
contents+="</thead>";
contents+="<tbody>";
contents+="<tr>";
contents+="<td>"+TextEntry1+"</td>";
contents+="<td>"+TextEntry2+"</td>";
contents+="<td>"+TextEntry3+"</td>";
contents+="<td>"+TextEntry4+"</td>";
contents+="</tr>";
contents+="</tbody>";
contents+="</table>";
contents+= "</html>";


// Step 3. Open the document window, write the HTML contents, and open the print window
var myWindow = window.open("","Print","width=810,height=610,scrollbars=1,resizable=1");
myWindow.document.write(contents);
myWindow.print();

storyline 360
  • StevenChippe932's avatar
    StevenChippe932
    Community Member
    4 years ago

    After some research and trial-and-error, I have managed to make this work as desired. I think the main thing that I missed was containing the table in a div.

    Here is the Javacript syntax I used:

    // Step 1. Connect JavaScript to the Storyline variables
    var player = GetPlayer();
    var RiseTitle=player.GetVar("varRiseTitle");
    var QuestionText=player.GetVar("varQuestionText");
    var TextEntry1=player.GetVar("TextEntry");
    var TextEntry2=player.GetVar("TextEntry1");
    var TextEntry3=player.GetVar("TextEntry2");
    var TextEntry4=player.GetVar("TextEntry3");
    var TextEntry5=player.GetVar("TextEntry4");
    var TextEntry6=player.GetVar("TextEntry5");
    var TextEntry7=player.GetVar("TextEntry6");
    var TextEntry8=player.GetVar("TextEntry7");
    var TextEntry9=player.GetVar("TextEntry8");
    var TextEntry10=player.GetVar("TextEntry9");
    var TextEntry11=player.GetVar("TextEntry10");
    var TextEntry12=player.GetVar("TextEntry11");

    // Step 2. The HTML Section - with the Storyline variables inserted
    var contents = "<html><head></head><body style='width:650px;padding:20px;'>";
    contents+="<div style='font-size:26px;font-weight:bold;margin-top:26px;margin-bottom:20px;'>"+RiseTitle+"</div>";
    contents+="<div style='display:block;border-width:1px';><hr/></div>";
    contents+="<div style='font-size:16px;font-weight:bold;'>"+QuestionText+"</div>";
    contents+="<div>";
    contents+="<table style='width: 100%' border='1'>";
    contents+="<tr style='text-align: left;'>";
    contents+="<th>CPU Model</th><th>Core™ i5-9400F</th><th>Celeron® N4020</th><th>Ryzen™ 5 3600</th><th>Athlon™ 3000G</th>";
    contents+="</tr>";
    contents+="<tr>";
    contents+="<td>Clock Frequency (GHz)</td><td>"+TextEntry1+"</td><td>"+TextEntry2+"</td><td>"+TextEntry3+"</td><td>"+TextEntry4+"</td>";
    contents+="</tr>";
    contents+="<tr>";
    contents+="<td>Cache Memory (MB)</td><td>"+TextEntry5+"</td><td>"+TextEntry6+"</td><td>"+TextEntry7+"</td><td>"+TextEntry8+"</td>";
    contents+="</tr>";
    contents+="<tr>";
    contents+="<td>Price ($)</td><td>"+TextEntry9+"</td><td>"+TextEntry10+"</td><td>"+TextEntry11+"</td><td>"+TextEntry12+"</td>";
    contents+="<tr>";
    contents+="</table>";
    contents+="</div>";
    contents+="</body>";
    contents+="</html>";


    // Step 3. Open the document window, write the HTML contents, and open the print window
    var myWindow = window.open("","Print","width=810,height=610,scrollbars=1,resizable=1");
    myWindow.document.write(contents);
    myWindow.print();

Related Content