Text entry formatting | XM Community
Skip to main content
Solved

Text entry formatting


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.

Best answer by Tom_1842

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

View original

3 replies

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 869 replies
  • Answer
  • June 1, 2022

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


Forum|alt.badge.img+1

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


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 869 replies
  • January 27, 2025

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


Leave a Reply