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

JannikeHarnischJannikeHarnisch Community Member Qubie ✭

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

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!

Tagged:

Answers

  • SurajKSurajK IndiaCommunity Member Sage ✭✭✭

    Hi @JannikeHarnisch ,

    1.Add the below lines in the question text,

    <div id="progress"></div> <br/>

    <div id="counter"></div>

    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('<br>'+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);
    });
    
    
    
  • JannikeHarnischJannikeHarnisch Community Member Qubie ✭

    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.

Sign In to Comment