Forum Discussion
Modifying report.html to include slide name
Hello! I am hoping for some assistance from the community. I have a course -- really a self-assessment -- with multiple categories. Each category includes a quiz and a results slide.
Each result slide includes a print button to enable users to print the assessment questions. I fount the report.html file and modified it to remove some columns and outputs to simplify the report (e.g., no correct answer column since it's an assessment, and changed "student" to "respondent").
My final wish for customization is for the output to include the slide title when the report is generated. This way, if users print/save the results, there will be a title to help users match the output to the related section. Currently, the output includes the course title.
I've included a screenclip where I've highlighted the repeated course name that I'd like to replace with a slide title.
Has anyone had luck modifying the report.html file?
Hello skuda,
You may need to use a combination of Javascript and variables, but if you can store the value of the "Menu.SlideTitle" built-in variable and reference it in the print page using Javascript, you may be able to populate any supported field you need. Here's a good thread on print variables using Javascript.
I'll defer to the community who could share what worked for them, as JavaScript is not something we can offer support for.
I don't think it's possible to directly access Storyline's built-in variables in the report.html file. The report.html typically opens in a new tab, and the GetPlayer() function is only available within the Storyline player context. As a result, you can't reference Storyline variables like GetVar() in the report.html. You could only replace the text of the h3 element with a static string (like "Result Slide") if you're only looking for a placeholder.
Thank you for the responses! Jose - I appreciate the thread reference; unfortunately, the links in the thread are no longer active.
Nedim - you confirmed what I was worried about! I really wanted to make the h3 element dynamic based on which results slide the user is on. Do you know if I could use javascript to download the report.html output as a pdf instead of opening a new tab? I'm thinking that I could then specify a file name that corresponds to the slide title within the script -- which is a workaround to being able to include it right in the document.You would have to modify report.html after being published to Web. Insert this script right before </body> at the bottom of report.html document.
<script> document.addEventListener("DOMContentLoaded", function () { function loadScript(src, callback) { var script = document.createElement("script"); script.src = src; script.onload = callback; document.head.appendChild(script); } loadScript("https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js", function () { loadScript("https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js", function () { generatePDF(); }); }); function generatePDF() { const { jsPDF } = window.jspdf; var doc = new jsPDF({ orientation: "p", unit: "mm", format: "a4" }); html2canvas(document.body, { scale: 1 }).then(canvas => { var imgData = canvas.toDataURL("image/png"); var imgWidth = 210; var pageHeight = 297; var imgHeight = (canvas.height * imgWidth) / canvas.width; doc.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight); doc.save("Results.pdf"); // Close the tab after saving the PDF, with a slight delay to ensure the save dialog appears first setTimeout(function () { window.close(); }, 100); }); } }); </script>Result:
You can play with different formats according to jsPDF documentation and update the code accordingly.
