Forum Discussion
Need help checking my JavaScript
Hi all -
I'm creating an interactive micro-learning where the users will answer 3 questions on each of 4 slides (total of 12 questions). Each of the 4 slides presents a different human interaction (retail, collections phone call, traffic stop, and customer phone call), and the 3 questions gauge their emotional response to each.
I want them to be able to click a "download" button at the end and get a DOCX of all their entries, along with the matching headers.
I'm using the default "TextEntry#" variable that Articulate assigns, and I was pretty sure I had modified all the variables correctly in the code, but when I click the download button, nothing happens (yes, I'm operating the module in Review360 as expected, not "preview" mode).
I'm sure I'm missing something silly, can anyone see where I might have gone wrong here?
var player = GetPlayer();
// 1. Gather all responses from different slides in the module
var retail1 = player.GetVar("TextEntry") || "No notes entered for this section.";
var retail2 = player.GetVar("TextEntry1") || "No notes entered for this section.";
var retail3 = player.GetVar("TextEntry2") || "No notes entered for this section.";
var collxns1 = player.GetVar("TextEntry3") || "No notes entered for this section.";
var collxns2 = player.GetVar("TextEntry4") || "No notes entered for this section.";
var collxns3 = player.GetVar("TextEntry5") || "No notes entered for this section.";
var traffic1 = player.GetVar("TextEntry6") || "No notes entered for this section.";
var traffic2 = player.GetVar("TextEntry7") || "No notes entered for this section.";
var traffic3 = player.GetVar("TextEntry8") || "No notes entered for this section.";
var cust1 = player.GetVar("TextEntry9") || "No notes entered for this section.";
var cust2 = player.GetVar("TextEntry10") || "No notes entered for this section.";
var cust3 = player.GetVar("TextEntry11") || "No notes entered for this section.";
// 2. Format multi-line text entries for HTML
var cleanretail = retail.replace(/\n/g, "<br>");
var cleancollxns = collxns.replace(/\n/g, "<br>");
var cleantraffic = traffic.replace(/\n/g, "<br>");
var cleancust = cust.replace(/\n/g, "<br>");
// 3. Build the comprehensive document layout
var htmlContent = "<html>" +
"<head>" +
"<style>" +
"body { font-family: Arial, sans-serif; margin: 40px; line-height: 1.6; color: #333; }" +
"h1 { color: #2c3e50; border-bottom: 3px solid #2c3e50; padding-bottom: 10px; }" +
"h2 { color: #16a085; margin-top: 30px; border-bottom: 1px solid #ddd; padding-bottom: 5px; }" +
".meta { font-style: italic; color: #7f8c8d; margin-bottom: 20px; }" +
".note-box { background-color: #f9f9f9; border-left: 4px solid #16a085; padding: 15px; margin-top: 10px; }" +
"</style>" +
"</head>" +
"<body>" +
"<h2>Scenario 1: The Retail Returns Desk (Angry)</h2>" +
"<div class='note-box'>" + cleanretail + "</div>" +
"<h2>Scenario 2: The Collections Call (Worried)</h2>" +
"<div class='note-box'>" + cleancollxns + "</div>" +
"<h2>Scenario 3: The Traffic Stop (Helpful)</h2>" +
"<div class='note-box'>" + cleantraffic + "</div>" +
"<h2>Scenario 4: The Customer Call (Condescending)</h2>" +
"<div class='note-box'>" + cleancust + "</div>" +
"</body>" +
"</html>";
// 4. Generate and download the consolidated file
var blob = new Blob(['\ufeff', htmlContent], { type: 'application/msword' });
var link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = name.replace(/[^a-z0-9]/gi, '_') + "_Course_Notes.doc";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
Look at section 2, you never defined retail, collxns, traffic, or cust, you defined retail1, retail2, retail3, etc. Also your template only outputs 4 boxes, not 12. Even after the ReferenceError is fixed, the HTML only references one variable per scenario, so you’d lose 8 of the 12 answers.
3 Replies
Look at section 2, you never defined retail, collxns, traffic, or cust, you defined retail1, retail2, retail3, etc. Also your template only outputs 4 boxes, not 12. Even after the ReferenceError is fixed, the HTML only references one variable per scenario, so you’d lose 8 of the 12 answers.
Thank you! As you have likely deduced, I am a bit of a JS newbie (well, I did it about 25 years ago when I was hardcoding webpages from scratch, but....the brain fade is real ;)) I appreciate your helpful and prompt reply!
Also worth noting with your code; a stray < or & in someone’s notes might mangle the output. If it were me I’d escape the input. Something like this:
function esc(s){ return String(s) .replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">") .replace(/\r\n|\r|\n/g, "<br>"); }