Print multiple questions from a survey on a single page. | XM Community
Skip to main content

Hello! I created a survey, and need the questions in a block to print on a single page. Screenshot #1 below is the code I’m working with. The code includes a “Print” button for the user, and a dialog box opens to print (this works beautifully).

The problem is, all the text to print is in a single row on the page (Screenshot #2 below). 

I need each field and text (for the embed data field) in the “const lines (i.e. Name, Date of Birth, etc.)” to print on its own row on the page.

Thank you for your assistance.

Screenshot #1: JavaScript code:

Qualtrics.SurveyEngine.addOnload(function () {
    let printBtn = document.createElement("button");
    printBtn.textContent = "PRINT";
    printBtn.style.margin = "20px 0";
    printBtn.style.padding = "10px 20px";
    printBtn.style.fontSize = "16px";
    printBtn.style.cursor = "pointer";

    this.getQuestionContainer().appendChild(printBtn);

    printBtn.addEventListener("click", function () {
        let printWindow = window.open("", "", "width=800,height=600");
        let doc = printWindow.document;

        doc.write("<html><head><title>Print Preview</title></head><body>");
        doc.write("<h2>SDMC Post Appointment Student Information Sheet</h2>");

        const lines = &
            "Name: ${e://Field/StudentLastName}, ${e://Field/StudentFirstName} ${e://Field/StudentMiddleName}",
            "Date of Birth: ${e://Field/DOB}",
            "Tentative Grade Placement: ${q://QID206/ChoiceGroup/SelectedChoices}",
            "Student Number (if available):",
            "OLR Status: ${q://QID13/ChoiceGroup/SelectedChoices}",
            "Interviewer (Appointment ISA): ${e://Field/ISAPersonnel}",
            "Transcript Status: ${q://QID144/ChoiceGroup/SelectedChoices}",
            "Description of Transcript Needed (if any): ${q://QID285/ChoiceTextEntryValue}",
            "School Name: ${q://QID325/ChoiceGroup/SelectedAnswers/1}",
            "School Address: ${q://QID325/ChoiceGroup/SelectedAnswers/2}",
            "School Address: ${q://QID325/ChoiceGroup/SelectedAnswers/3}",
            "School Phone Number: ${q://QID325/ChoiceGroup/SelectedAnswers/3}",
            "International Student Advisory Name: ${q://QID325/ChoiceGroup/SelectedAnswers/4}",
            "International Student Advisory Phone Number: ${q://QID325/ChoiceGroup/SelectedAnswers/6}",
            "International Student Advisory Email Address: ${q://QID325/ChoiceGroup/SelectedAnswers/5}"
        ];

        lines.forEach(function (lines) {
            doc.write("<p>" + lines + "</p>");
            doc.write("<p>" + lines + "</p>");
            doc.write("<p>" + lines + "</p>");
        });

        doc.write("</body></html>

 

==============

Screenshot #2: Print out:

 

You just need to write each line once in its own <p> tag. Here's the corrected section:

lines.forEach(function (line) {
    doc.write("<p>" + line + "</p>");
});

Please refer the below updated JavaScript:

Qualtrics.SurveyEngine.addOnload(function () {
    let printBtn = document.createElement("button");
    printBtn.textContent = "PRINT";
    printBtn.style.margin = "20px 0";
    printBtn.style.padding = "10px 20px";
    printBtn.style.fontSize = "16px";
    printBtn.style.cursor = "pointer";

    this.getQuestionContainer().appendChild(printBtn);

    printBtn.addEventListener("click", function () {
        let printWindow = window.open("", "", "width=800,height=600");
        let doc = printWindow.document;

        doc.write("<html><head><title>Print Preview</title>");
        doc.write("<style>body { font-family: Arial, sans-serif; padding: 20px; } p { margin: 10px 0; }</style>");
        doc.write("</head><body>");
        doc.write("<h2>SDMC Post Appointment Student Information Sheet</h2>");

        const lines = &
            "Name: ${e://Field/StudentLastName}, ${e://Field/StudentFirstName} ${e://Field/StudentMiddleName}",
            "Date of Birth: ${e://Field/DOB}",
            "Tentative Grade Placement: ${q://QID206/ChoiceGroup/SelectedChoices}",
            "Student Number (if available):",
            "OLR Status: ${q://QID13/ChoiceGroup/SelectedChoices}",
            "Interviewer (Appointment ISA): ${e://Field/ISAPersonnel}",
            "Transcript Status: ${q://QID144/ChoiceGroup/SelectedChoices}",
            "Description of Transcript Needed (if any): ${q://QID285/ChoiceTextEntryValue}",
            "School Name: ${q://QID325/ChoiceGroup/SelectedAnswers/1}",
            "School Address: ${q://QID325/ChoiceGroup/SelectedAnswers/2}",
            "School Address: ${q://QID325/ChoiceGroup/SelectedAnswers/3}",
            "School Phone Number: ${q://QID325/ChoiceGroup/SelectedAnswers/3}",
            "International Student Advisory Name: ${q://QID325/ChoiceGroup/SelectedAnswers/4}",
            "International Student Advisory Phone Number: ${q://QID325/ChoiceGroup/SelectedAnswers/6}",
            "International Student Advisory Email Address: ${q://QID325/ChoiceGroup/SelectedAnswers/5}"
        ];

        lines.forEach(function (line) {
            doc.write("<p>" + line + "</p>");
        });

        doc.write("</body></html>”);

      doc.close();

   });

});

 

 

Thank you, I will try it out!

Leave a Reply


Terms & Conditions