How to add a word counter progress bar to text entry field | Experience Community
Skip to main content
Question

How to add a word counter progress bar to text entry field

  • July 8, 2020
  • 2 replies
  • 49 views
J

Hello everybody,
I would like to add a word counter progress bar to text entry field. So the progress bar should not show the progress for the whole study, just for that specific text entry field. This is the code I would like to use: https://codepen.io/tinynow/pen/dJxDF
but I can't include the Javascript funktion into the HTML code. I was able to add the Jacascript funktion to my Qualtrics Question an the HTML in the editor, but I can't get it to work in Qualtrics. Do you know how it works?

Thank you for helping!

2 replies

SurajK
QPN Level 3 ●●●
Forum|alt.badge.img+4
  • SurajK
  • QPN Level 3 ●●●
  • July 10, 2020

Hi JannikeHarnisch ,
1.Add the below lines in the question text,




2.Add the CSS code in Look & Feel -> Style -> Custom CSS,
body {
  padding-top: 5px;
}
textarea {
  height: 300px;
  width: 500px;
}
#progress {
  position: fixed;
  top: 0;
  left: 0;
  content: "";
  background: red;
  height: 5px;
  
}


3.And add the below code in JS tab,
function count(){  
  var val   = jQuery.trim(jQuery('input[type="text"]').val()),  
      words = val.replace(/\\s+/gi, ' ').split(' ').length,
      chars = val.length,
      wordgoal = 60,
      prog = (words/wordgoal)*100;
  if(!chars)words=0;
    
  jQuery('#counter').html('
'+words+' words and '+ chars +' characters');
  
  jQuery('#progress').css( "width", prog+"%" );
  
}
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
jQuery('input[type="text').on('input', count);
});


J

Thank you for the answer.
I did it as you said, but it does not not show me a progress bar fot the text entry field.

Terms & ConditionsAccessibility statement