Hello,
I'm trying to put a minimum word limit on my survey questions and I have used the suggestions previously posted in the community. I'm counting the words in the textbox and hiding the next and previous buttons if the number of words are less than a certain limit. When I preview my survey, this works perfectly, however, on the small mobile phone version that is shown next to the web version, the next/previous buttons are not hidden and always present. I would appreciate if you could guide me how to fix it.
Thanks
Hide next button not working in survey preview for the phone version
Userlevel 7
+22
If a code is written and is working fine in web version, then it will definitely work for mobile version. If you can post your code here, it will be easy to debug.
Also, instead of custom code, you can also use custom validation -> regex.
The regex to check the minimum word limit is (here 100)-
/^\\W*(\\w+\\b\\W*){100,}$/
Source
Thanks Rondev for your response. I will look into regex solution as well.
Here is the code I'm using:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
$('NextButton').hide();
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var display = $('wordCountDisplay');
var questionID = this.questionId;
var textbox =$('QR~' + questionID);
var that = this;
function countWords(s){
s = s.replace(/\\n/g,' '); // newlines to space
s = s.replace(/(^\\s*)|(\\s*$)/gi,''); // remove spaces from start + end
s = s.replace(/[ ]{2,}/gi,' '); // 2 or more spaces to 1
if(s == ''){
return 0;
}else{
return s.split(' ').length;
}
}
textbox.onkeyup = function(e){
var currWords = countWords(textbox.value)
display.update(currWords);
console.log(textbox.value);
if (currWords < 25) {
$('NextButton').hide();
$('PreviousButton').hide();
}
else {
$('NextButton').show();
}
}
Userlevel 7
+22
Use the below code in the JS:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery('#NextButton').hide();
jQuery('#PreviousButton').hide();
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
jQuery('#NextButton').hide();
var display = jQuery('.wordCountDisplay');
var questionID = this.questionId;
var textbox =jQuery(".InputText");
var that = this;
function countWords(s){
s = s.replace(/\\n/g,' '); // newlines to space
s = s.replace(/(^\\s*)|(\\s*jQuery)/gi,''); // remove spaces from start + end
s = s.replace(/[ ]{2,}/gi,' '); // 2 or more spaces to 1
if(s == ''){
return 0;
}else{
return s.split(' ').length;
}
}
jQuery(".InputText").bind('keyup change',function(e){
var currWords = countWords(textbox.val())
display.text(currWords);
if (currWords < 5) {
jQuery('#NextButton').hide();
jQuery('#PreviousButton').hide();
}
else {
jQuery('#NextButton').show();
}
});
});
Also, to show word count, in the question HTML view paste the below code:
Thanks Rondev. Interestingly, your code works perfectly for the web version but again it has an issue with the mobile version but this time the opposite! It never shows the next button, even after going above the word limit, on the mobile version.
Userlevel 7
+22
Next button is not visible in the qualtrics mobile device because we have not typed in the mobile version, if you type in it, you will be able to see the next button.
Also, just to confirm, you can publish the survey and using anonymous link, test it in real mobile device.
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.