How do I require survey participants to scroll to the end of terms and conditions text in order to click "I Consent to Terms"? (Modern Surveys)

Use Embedded Content elements to display full Terms and Conditions text in a scrollable box, and require participants to scroll to the end before clicking "I Consent to Terms." If participants do not scroll to the end, they are blocked from proceeding in the survey. 

Example

Sample survey structure: 

Responding view: 

Detailed Steps

1. In the survey, add an Embedded Content element and name it Terms and Conditions.
   1. Open the Embedded Content element for editing.
   2. In the Question text field, add some messaging about reviewing the terms and conditions text and scrolling to the end. 
      For example, "Please review the Terms and Conditions below. You must scroll to the end of the text before you click I Consent to Terms."
   3. In the Embed content field, copy and paste the Terms and Conditions Text code sample.
   4. Replace the Alida-specific terms and conditions text or URL with your organization's content. 
      Tip: We recommend editing the code sample in an external editor before copying/pasting.
2. On the same survey page, below the first Embedded Content element, add a second Embedded Content element and name it Alter Next Button.
   1. Open the second Embedded Content element for editing.
   2. In the Embed content field, copy and paste the Alter Next Button code sample.
3. Preview and test your survey.
   Note: Embedded Content elements do not work in survey preview, so testing this in survey preview will not work. Instead, get a test activity link. 

Terms and Conditions Text

<iframe srcdoc="
<h1><b>Terms of Use</b></h1>

You can paste in your terms and conditions text into this area. 
You can use all the commong HTML tags to manage the presentation as you see fit. 
You can also use a WYSIWYG edito to generate the basic HTML if preferred.

<br><br>
<b>Section 1</b>
<br>
Each section can be titled and separated with breaks to give appropriate line spacing.

<br><br>
<b>Section 2</b>
<br>
You can also use tags for links, bold, italics, etc.
<b>bold</b>
<i>italic</i>
<br><br>
Finish the section with ending iframe code and set whatever presentation you like for the width, height, and outline.

title="Terms1" width="100%" height="500" style="border: 1px solid black;">
<iframe>

Alter Next Button

<!-- Alter the next button to say I Consent to Terms-->

<script>
  document.getElementById("Next").childNodes[0].nodeValue = "I Consent to Terms";

//Disable next button
survey.embedContent.setIncomplete(); 

//Check if scroll is at the end ONLY for iframe with embedded text, doesn't work with the iframe loading external URL
function watchIframeScroll(iframeId, onBottomReached) {
    const iframe = document.getElementById(iframeId);

    if (!iframe) {
        console.error(`Iframe with ID "${iframeId}" not found.`);
        return;
    }

    
    iframe.onload = function() {
        try {
            const iframeWin = iframe.contentWindow;
            const docEl = iframe.contentDocument.documentElement;

            iframeWin.addEventListener('scroll', function() {
                // Calculation: Current Scroll + Visible Area >= Total Content Height
                const isAtBottom = (docEl.scrollTop + docEl.clientHeight) 
                                   >= (docEl.scrollHeight - 5);

                if (isAtBottom) {
                    onBottomReached();
                }
            });
        } catch (e) {
            console.error("Security Error: Cannot access cross-origin iframe content.", e);
        }
    };
}

//Check if at the end and enable next button
watchIframeScroll('embText', function() {
    console.log("Embedded text finished.");
    survey.embedContent.setComplete();
});
</script>

More Information

• Create an Embedded Content element
• Get a test activity link