Skip to main content

How do I display scrollable terms and conditions text to survey participants and track their acceptance? (Modern Surveys)

Lisa Wong
Updated

Use an Embedded Content element to display Terms and Conditions in a scrollable box. You can experiment with the display options depending on the HTML you use. For example, display the static text in the frame, or use an iframe to embed your organization's Terms and Conditions webpage. We've provided code samples for both options.

Example

Sample survey structure:

terms_and_conditions_3_toc_2.png

Responding view:

terms_and_conditions_3_responding.png

Detailed Steps

  1. Create a Date profile variable named AcceptDate3.
    This Date profile variable will be used to store the date on which participants accepted the terms and conditions. 
    Note: You can name it anything you like. If you use a name other than AcceptDate3 (which is used everywhere in this article and in the script), you must change it everywhere.
    1. Click the App Drawer and select Profile Variables.
    2. Click + Profile Variables.
    3. In the Variable Name field, type "AcceptDate3."
    4. In the Description field, type what this profile variable will be used for. 
      For example, "Track terms and conditions acceptance in [Activity Name]."
    5. From the Type menu, select Date. 
    6. Click Save.
  2. 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 Embed content field, copy and paste one of the provided code samples below.
    3. 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.
  3. On the same survey page, below the Embedded Content element, add a Single Choice question and name it Accept Terms Click.
    1. Open the Single Choice question for editing.
    2. In the Question text field, type "Do you accept the terms and conditions?"
    3. Add "Yes" and "No" as answer options.
  4. On the same survey page, below the Single Choice question, add a hidden Profile action that references the AcceptDate3 profile variable.
    This Profile action will be used to record and track the acceptance date.
  5. Add a script to the survey page. 
    1. Click the Page element to open it for editing.
    2. Click the Scripting button.
      scripting_button.png
    3. Copy and paste the script below into the On Complete tab. 
    4. Update the AcceptDate3 value if necessary. 
    5. Click Save. 
  6. On a new survey page, add a Text and Image element and name it Results.
    This helps with testing and making sure the values are recorded as expected. You can hide this element before distributing the survey.
    1. In the Instruction text field, add a pipe for the Accept Terms Click value.
    2. Add a pipe for the AcceptDate3 value.
      terms_and_conditions_3_results_2.png
  7. 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. 

Embedded Content Code Sample 1 - Static 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>

Embedded Content Code Sample 2 - Webpage

<iframe src="https://www.alida.com/terms-use" title="Terms1" width="100%" height="500" style="border:1px solid black;">
</iframe>

Script

  /*
Script Name: How do I display scrollable terms and conditions text to survey participants and track their acceptance? (Modern Surveys)

To ensure your script works as expected, always copy the original script from the Script 
Library found in the Alida Help Center. Failure to use the latest script from the script library 
may cause unexpected results.
*/

//update to match your question name here.
const timerStart = response.getDataPoint('AcceptDate3');

// Get the current dateTime as a UTC string
var date = new Date();

// Check the 'start' hidden question to see if it has a value, populate it if not
const cur = timerStart.get();
if (cur == null){
   timerStart.set(date);
}

More Information

Related articles

Powered by Zendesk