Text entry formatting | XM Community
Skip to main content

Is there a way to allow survey respondents to paste formatted text into an essay text box? It would be helpful to allow bulleted lists and bolded headings to be preserved.

Hi there, adding Rich Content to Text Entry questions is not possible, but I recommend adding an upvote for it in this Product Idea post.
https://community.qualtrics.com/XMcommunity/discussion/14263/add-rich-content-editor-to-text-entry-response-field
In the meantime, bullets and line breaks can be copied, so a bulleted list should be able to be copied over.
TextEntryFormatting.png


Is there any change on this? The idea post link doesn’t seem to work.


Hi ​@StephanieQuan, going off of TomG's recommendation here, I found the QuillJS library which can accomplish this. The below code will take a Text Entry question, hide it, insert a div with Quill enabled, and then save the encoded text to the Qualtrics Text Entry question when the text in the div is updated. Like Tom mentions, the encoding makes it difficult to read, but you can also create an Embedded Data field that saves the non-encoded text as well.

To give it a try, first add the below to the survey's Header over in the Look & Feel:

<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>

Then, in the Survey Flow, create an Embedded Data field called "NoEncoding"

Finally, create a Text Entry question over in the Builder and add the below to the question's JavaScript:

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

var qid = this.questionId;
var qualtricsTextField = document.getElementById('QR~'+qid);

// Create a container for the Quill editor
var quillContainer = document.createElement('div');
qualtricsTextField.style.display = 'none'; // Hide the original text field
qualtricsTextField.parentNode.insertBefore(quillContainer, qualtricsTextField);

// Initialize Quill
var quill = new Quill(quillContainer, {
theme: 'snow',
modules: {
toolbar: :
'bold', 'italic', 'underline'],
{ 'list': 'ordered' }, { 'list': 'bullet' }],
'link']
]
}
});

// Function to decode HTML entities
function decodeHTML(html) {
var textarea = document.createElement('textarea');
textarea.innerHTML = html;
return textarea.value;
}

// Restore the previous value if the user navigates back
if (qualtricsTextField.value) {
var decodedContent = decodeHTML(qualtricsTextField.value); // Decode HTML entities
quill.root.innerHTML = decodedContent; // Restore Quill's content
}

// Sync Quill's content with the hidden Qualtrics field
quill.on('text-change', function () {
qualtricsTextField.value = quill.root.innerHTML; // Save the full HTML content to the Qualtrics field
var noEncoding = quill.getText();
Qualtrics.SurveyEngine.setEmbeddedData("noEncoding", noEncoding);
});
});

Also, the Product Idea in Evolve is EV-2162


@Tom_1842 - thank you for sharing your brilliance!!! Once the text has been input as rich content, is there a way to keep the formatting in place? For instance, I would like to have an email trigger to send me a response report any time the survey is completed, and display the rich text response as it was formatted in the Quill text box, rather than showing the encoded or NoEncoding versions. 


@ahendrickson It looks like Qualtrics escapes the HTML when piping from a survey question, but not when piping from an Embedded Data field. Try creating two Embedded Data Fields, "noEncoding" and "yesEncoding". The Embedded Data field "yesEncoding" retains the formatting and will render in browsers and emails. Updated JavaScript:

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

var qid = this.questionId;
var qualtricsTextField = document.getElementById('QR~' + qid);

// Create a container for the Quill editor
var quillContainer = document.createElement('div');
qualtricsTextField.style.display = 'none'; // Hide the original text field
qualtricsTextField.parentNode.insertBefore(quillContainer, qualtricsTextField);

// Initialize Quill
var quill = new Quill(quillContainer, {
    theme: 'snow',
    modules: {
        toolbar:
            r'bold', 'italic', 'underline'],
            e{ 'list': 'ordered' }, { 'list': 'bullet' }],
            ''link']
        ]
    }
});

// Function to decode HTML entities
function decodeHTML(html) {
    var textarea = document.createElement('textarea');
    textarea.innerHTML = html;
    return textarea.value;
}

// Restore the previous value if the user navigates back
if (qualtricsTextField.value) {
    var decodedContent = decodeHTML(qualtricsTextField.value); // Decode HTML entities
    quill.root.innerHTML = decodedContent; // Restore Quill's content
}

// Sync Quill's content with the hidden Qualtrics field
quill.on('text-change', function () {
    // Save the full HTML content to the Qualtrics field
    qualtricsTextField.value = quill.root.innerHTML;

    var noEncoding = quill.getText();
    Qualtrics.SurveyEngine.setEmbeddedData("noEncoding", noEncoding);

    var yesEncoding = quill.root.innerHTML;

    var yesEncoding = quill.root.innerHTML.replace(/<ol>(o\s\S]*?)<\/ol>/g, function (match, innerContent) {
        if (innerContent.includes('data-list="bullet"')) {
            return '<ul>' + innerContent + '</ul>';
        }
        return match; // leave as-is if not a bullet list
    });

    Qualtrics.SurveyEngine.setEmbeddedData("yesEncoding", yesEncoding);
});

});

Also, adding this CSS to the Style section of the Look and Feel I thought helped with the hyperlink popup by attaching it to the bottom of the text area.

.ql-snow .ql-tooltip {
position: static !important;
}

 


@Tom_1842 WOW, this did exactly what I need. Thank you SO much – this will be so helpful for my project and I am so grateful for your quick and effective response.