How to add a force scroll? | XM Community
Skip to main content

I have a legal agreement customers have to consent to in my survey. My legal team want me to add a force scroll before customers click “I agree”. I have already added the legal agreement (several pages long) into a text box and added a required “I agree” button. How can I enable that?

Hi @barbarajan 

One of simplest solution  to add a force scroll is to add empty “text/graphic” questions in your survey. this will create some gap between your textbox and the “i agree” button. You can apply this if you don’t want to do any custom coding.


One solution is to place the agreement text the question text. The respondent would then have to scroll through all of it to reach the Agree/Disagree options and the Next button at the bottom of the page.

If you have added the agreement text into a readonly text box, you could try adding an event listener that checks if the respondent has scrolled the length of the text element, similar to the approach mentioned in this thread. I adapted it so that the Next button is disabled until the respondent scrolls to the bottom of a text element.  

To give it a try, create a Text/Graphic question and use the Rich Content Editor's HTML/Source view "< >" to set the Question text with the below:

Agreement below:<br>
<textarea style="height: 200px;width:100%" readonly="readonly" name="Agreement" id="Agreement" class="Agreement">Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text

Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text

Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text

Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text

Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text</textarea>

Then, add the below to the question's JavaScript in the OnReady section:

var q= this;
var textElement = document.getElementById("Agreement");

q.disableNextButton();

textElement.addEventListener("scroll", checkScrollHeight, false);

function checkScrollHeight(){
if ((textElement.scrollTop + textElement.offsetHeight) >= textElement.scrollHeight){
q.enableNextButton();
}
}

 


Leave a Reply