Word Count for Multiple Text Entry on the Same Page | XM Community
Solved

Word Count for Multiple Text Entry on the Same Page

  • 18 February 2020
  • 9 replies
  • 20 views

Userlevel 7
Badge +6
Hello all. I've successfully used this thread to add word count to text entry question.

However, has anyone figured out how to adapt this to work with multiple text entry question on a single page, with each question counting its specific words. I've tried setting the specific QID# for each question, but that didn't seem to work.
icon

Best answer by TomG 18 February 2020, 19:19

View original

9 replies

Userlevel 7
Badge +27
Someone just asked this the other day and referenced the same code. ids must be unique per page. So, change wordCountDisplay to a class then find the element relative to the question.

HTML:
```
<span class="wordCountDisplay">0</span>
```
JS:
```
var display = $(this.questionId).select('.wordCountDisplay');
```
P.S. The reference is to an old post and uses prototypejs. I recommend switching to jQuery.
Userlevel 7
Badge +6
@TomgG

Thank you for this. I still can't find the other other question like this. I hate duplicating threads, but I mainly find feature requests for this.

Anyway, I am sure this would fix my issue so I'll leave here for the next person who understands it.

I've tried tweaking the code with what you provided, but was unable to make it work. Feeling mildly defeated, I decided to just put the 2 text entry questions on seperate pages.
Userlevel 7
Badge +27
> @Akdashboard said:
> @TomgG
>
> Thank you for this. I still can't find the other other question like this. I hate duplicating threads, but I mainly find feature requests for this.
>
> Anyway, I am sure this would fix my issue so I'll leave here for the next person who understands it.
>
> I've tried tweaking the code with what you provided, but was unable to make it work. Feeling mildly defeated, I decided to just put the 2 text entry questions on seperate pages.

I didn't test it and would normally do it in jQuery. Below is a link to a jQuery script that does it. It has the additional advantage of being all self contained (no need for separate html).
https://gist.github.com/marketinview/aaf237fea91d2f7947fa4f170ac16486
Userlevel 7
Badge +6
@TomG - The code in the link you sent works brilliantly! Exactly what I need.

Thank you!
Userlevel 7
Badge +6
@TomgG - I am trying to understand the code (promise) so that I know what variable to reference if I want to set the word count as embedded data. Am I write in interrpretting that there isn't a var set to the actual word count?

My guess is that I need to set a var, but I am not sure where.

I tried adding the code below, but it either didn't work or broke the function, depending on where I put it.

~~~~~
var OEFB_1 = countWords(textbox.value);
Qualtrics.SurveyEngine.setEmbeddedData("Word_Count_1", OEFB_1 );
~~~~~

Suggestions?
Userlevel 7
Badge +27
Put the following INSIDE the addOnload function:
```
Qualtrics.SurveyEngine.addOnPageSubmit() {
Qualtrics.SurveyEngine.setEmbeddedData("Word_Count_1", display.text());
});
```
Userlevel 7
Badge +6
> @TomG said:
> Put the following INSIDE the addOnload function:
> ```
> Qualtrics.SurveyEngine.addOnPageSubmit() {
> Qualtrics.SurveyEngine.setEmbeddedData("Word_Count_1", display.text());
> });
> ```

*Edited: Mistyped the first time*

Thank you again!

What am I doing wrong? I keep getting an unexpected token error.

~~~~~~~~~
Qualtrics.SurveyEngine.addOnload(function(Qualtrics.SurveyEngine.addOnPageSubmit() {
Qualtrics.SurveyEngine.setEmbeddedData("Word_Count_1", display.text());
});)
{
/*Place your JavaScript here to run when the page loads*/
var q = jQuery("#"+this.questionId);

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

input.after("<div style='font-size:0.8em;float:right'>Word count: <span class='wordCount'>0</span></div>");

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

countWords(input.get(0));

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

input.blur(function() { this.value = this.value.trim(); });



function countWords(el) {

if(el.value.length > 0) display.text(el.value.match(/\\S+/g).length);

else display.text("0");


}
Qualtrics.SurveyEngine.addOnPageSubmit() {
Qualtrics.SurveyEngine.setEmbeddedData("Word_Count_1", display.text());
});

~~~~~~~~~
Userlevel 7
Badge +27
It should be:
```
Qualtrics.SurveyEngine.addOnload(function() {
var q = jQuery("#"+this.questionId);
var input = q.find(".InputText");
input.after("<div style='font-size:0.8em;float:right'>Word count: <span class='wordCount'>0</span></div>");
var display = q.find(".wordCount");
countWords(input.get(0));
input.on("input", function() { countWords(this) });
input.blur(function() { this.value = this.value.trim(); });

function countWords(el) {
if(el.value.length > 0) display.text(el.value.match(/\\S+/g).length);
else display.text("0");
}

Qualtrics.SurveyEngine.addOnPageSubmit(function() {
Qualtrics.SurveyEngine.setEmbeddedData("Word_Count_1", display.text());
});
});
```
Userlevel 7
Badge +6
@TomG - gotcha. So I was missing the function() piece it looks like.

As always, thank you. You are a scholar and saint.

Leave a Reply