Forum Discussion
JS output to MS Word is rearranging the variables and I can't figure out why
In the JS below (which is under a button on the final slide of my STORY, designed to generate a MS Word doc of the data the user has entered in multiple fields), I'm getting the final product just fine, but in the final Word doc, the data entered in each of the "...2" and "...3" fields is flipped - the data I entered into the variable "..2" shows up in the "..3" field and vice versa.
To illustrate:
When I ran the STORY in Review360, I entered the following into the fields the JS sees as retail1, retail2, and retail3, mapped to TextEntry fields "null," "..1" and "..2" respectively.
retail1 = "I feel attacked, and defensive"
retail2 = "I expect people to give me a chance to help"
retail3 = "I'm flushing, and my heart rate is going up"
However, in the DOCX attached, you can see that the "Retail" example shows the following - the 2nd and 3rd entries are on the wrong lines.
"I feel attacked, and defensive"
"I'm flushing, and my heart rate is going up"
"I expect people to give me a chance to help"
The mapping appears correct to me, so I'm not sure why this is happening, but it's happening for all 4 sections exactly the same way.
Thanks for any help you can offer!
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 cleanretail1 = retail1.replace(/\n/g, "<br>");
var cleanretail2 = retail2.replace(/\n/g, "<br>");
var cleanretail3 = retail3.replace(/\n/g, "<br>");
var cleancollxns1 = collxns1.replace(/\n/g, "<br>");
var cleancollxns2 = collxns2.replace(/\n/g, "<br>");
var cleancollxns3 = collxns3.replace(/\n/g, "<br>");
var cleantraffic1 = traffic1.replace(/\n/g, "<br>");
var cleantraffic2 = traffic2.replace(/\n/g, "<br>");
var cleantraffic3 = traffic3.replace(/\n/g, "<br>");
var cleancust1 = cust1.replace(/\n/g, "<br>");
var cleancust2 = cust2.replace(/\n/g, "<br>");
var cleancust3 = cust3.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: 20px; border-bottom: 1px solid #ddd; padding-bottom: 5px; }" +
"h3 { color: #34495e; margin-top: 16px; font-size: 16pt; }"+
".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>" +
"<h1>Leveling To Leading: The 4 L's of Customer Engagement</h1>" +
"<h2>Emotional Inventory Exercise</h2>" +
"<br>" +
"<p>" +
"For each of the 4 scenarios presented, here are your responses to the 3 questions from the L2L:4L section on 'Leveling: Taking Inventory Of Your Emotions':" +
"</p>" +
"<ol>" +
"<li>What am I feeling right now?</li>" +
"<li>What is the source of this feeling?</li>" +
"<li>How do these feelings show up in my mind and body?</li>" +
"</ol>" +
"<br>" +
"<h3>Scenario 1: The Retail Returns Desk (Angry)</h3>" +
"<div class='note-box'>" + cleanretail1 + "</div>" +
"<div class='note-box'>" + cleanretail2 + "</div>" +
"<div class='note-box'>" + cleanretail3 + "</div>" +
"<h3>Scenario 2: The Collections Call (Worried)</h3>" +
"<div class='note-box'>" + cleancollxns1 + "</div>" +
"<div class='note-box'>" + cleancollxns2 + "</div>" +
"<div class='note-box'>" + cleancollxns3 + "</div>" +
"<h3>Scenario 3: The Traffic Stop (Helpful)</h3>" +
"<div class='note-box'>" + cleantraffic1 + "</div>" +
"<div class='note-box'>" + cleantraffic2 + "</div>" +
"<div class='note-box'>" + cleantraffic3 + "</div>" +
"<h3>Scenario 4: The Customer Call (Condescending)</h3>" +
"<div class='note-box'>" + cleancust1 + "</div>" +
"<div class='note-box'>" + cleancust2 + "</div>" +
"<div class='note-box'>" + cleancust3 + "</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 = "My_Emotional_Inventory.doc";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
setTimeout(function () {
URL.revokeObjectURL(link.href);
}, 100);
1 Reply
Nothing in the JavaScript you've posted would cause retail2 and retail3 to swap. The HTML is generated in the same order that the variables are assigned, so the JavaScript itself doesn't appear to be reversing them.
Is it possible that the variables are reversed in Storyline (for example, the text entry fields are mapped to different variables than expected)?
If you don't mind sharing it, feel free to upload your .story project. I'd be happy to take a closer look and see if I can spot what's causing the swap.
