Include character word count in "classic layout" | XM Community
Skip to main content

Hi! 

How can I include characters count in my text entry questions using classic layout? 

Previously I was doing my survey on the simple layout and in the text entry type of question it was possible to see the amount of characters required. However, I had to change to the classic layout and the character count disappeared from the respondent preview. 

 

Also, I have already included a code in my JS to avoid copy pasting, so I don’t want to impact on that code! This is what I have on my JS now.

 

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#"+this.questionId+" .InputText:eq(0)").on("cut copy paste",function(e) {
   e.preventDefault();
  });
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

 

I appreciate your help!

 

regards

 

 

 

Hi @Renataalmeida Please have a look at this post.

Hi @Renataalmeida Please have a look at this post.

Hi @omkarkewat thanks for your response. I had already tried that. But my skills with JS are very limited and as I mentioned on my post I already have a code on my “addOnReady” in the JS to block copy/paste. Therefore, I don’t know how to include it without messing up with this other code. 

When I tried the one showed on the link you shared and it showed this message: Invalid JavaScript! You cannot save until you fix all errors: Unexpected token )

 

Could you please advise me how to have both these functions working in the classic layout?

  1. block copy pasting (that I already have, I’m using the code below)

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#"+this.questionId+" .InputText:eq(0)").on("cut copy paste",function(e) {
   e.preventDefault();
  });
});

  1. show the character count WHILE the person is writing. That was possible in the simple layout without having to do anything in the JS, just by selecting the minimum amount. But I don’t know why in the classic layout the same does not apply. 

Thanks once again.

Hi @Renataalmeida I got this code from Chat GPT, can you try this!

 

Qualtrics.SurveyEngine.addOnload(function() {

    var q = jQuery("#"+this.questionId);

    var input = q.find(".InputText");

    var limit = 200; // Change the limit as needed

    input.after("<span class='charCount'>Character count: 0/" + limit + "</span>");

    var display = q.find(".charCount");

 

    function countCharacters(el) {

        var count = el.value.length;

        if (count > limit) {

            el.value = el.value.substring(0, limit);

            count = limit; // Update the count to the limit if it exceeds

        }

        display.text("Character count: " + count + "/" + limit);

    }

 

    input.on("input", function() {

        countCharacters(this);

    });

 

    input.on("blur", function() {

        var count = this.value.length;

        if (count > limit) {

            this.value = this.value.substring(0, limit);

            count = limit; // Update the count to the limit if it exceeds

        }

        countCharacters(this);

    });

});

Hi @Renataalmeida I got this code from Chat GPT, can you try this!

 

Qualtrics.SurveyEngine.addOnload(function() {

    var q = jQuery("#"+this.questionId);

    var input = q.find(".InputText");

    var limit = 200; // Change the limit as needed

    input.after("<span class='charCount'>Character count: 0/" + limit + "</span>");

    var display = q.find(".charCount");

 

    function countCharacters(el) {

        var count = el.value.length;

        if (count > limit) {

            el.value = el.value.substring(0, limit);

            count = limit; // Update the count to the limit if it exceeds

        }

        display.text("Character count: " + count + "/" + limit);

    }

 

    input.on("input", function() {

        countCharacters(this);

    });

 

    input.on("blur", function() {

        var count = this.value.length;

        if (count > limit) {

            this.value = this.value.substring(0, limit);

            count = limit; // Update the count to the limit if it exceeds

        }

        countCharacters(this);

    });

});

Hi @omkarkewat, the code worked, but the layout was messed up for some reason. Do you know how to fix it? The “characters is showing on the right side of the box. 

 

 

Thanks again

 

@Renataalmeida just add a break tag <br> before it.

input.after("<br><span class='charCount'>Character count: 0/" + limit + "</span>");

@Renataalmeida just add a break tag <br> before it.

input.after("<br><span class='charCount'>Character count: 0/" + limit + "</span>");

Hi, the spacing problem is solved, but FYI I had to change the code because the previous one suggested was limiting the number of characters to 250. This is the final one: 

 

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/
    
var q = jQuery("#"+this.questionId);
var input = q.find(".InputText");
var limit = 250; // Minimum character count

input.after("<br><span class='charCount'>Character count: 0/" + limit + "</span>");
var display = q.find(".charCount");

function countCharacters(el) {
    var count = el.value.length;
    if (count < limit) {
        display.text("Character count: " + count + "/" + limit + " (minimum of 250 characters required)");
    } else {
        display.text("Character count: " + count + "/" + limit);
    }
}

input.on("input", function() {
    countCharacters(this);
});

input.on("blur", function() {
    countCharacters(this);

    });
});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#"+this.questionId+" .InputText:eq(0)").on("cut copy paste",function(e) {
   e.preventDefault();
  });
});

Qualtrics.SurveyEngine.addOnUnload(function()
{

 

THANKS

Leave a Reply


Terms & Conditions