Google ReCaptcha

This article will show you how to use Google ReCaptcha 

Background

The 'Google ReCaptcha' integration will all you to add in a way to confirm each respondent is indeed a real person that will be able to provide valid and meaningful data in your research. 

The sections listed below will show you how to program this exercise in your survey. 

• Adding Code to the 'Survey Header'
• Adding a Pass/Fail 'Radio Question'
• Adding a 'Static Element' for Display
• Troubleshooting

Adding Code to the 'Survey Header'

1. Access the 'Survey Settings'
   1. See article: Survey Settings Overview
2. Click on 'Default Text'
3. Click on the link to the 'Full Content Editor'  next to the 'Survey Header'
   1. See article: Full Text Editor
4. Click on the source (</>) icon in the text toolbar. You will now be in the source view.  
   1. See article: Source Code Editor
   2. Copy and paste the following code into the text area 
      

      <script src="https://www.google.com/recaptcha/api.js?render=explicit"></script>
      		

5. Cli on the source (</>) icon again and to exit the source view. 
6. Click on the 'SAVE' button at the bottom of the screen

Adding a Pass/Fail 'Radio Question'

1. Add a Radio Question
   1. See article: Standard Question: Radio items (Single Select)
2. Name it whatever you need it to be
3. Leave the question text blank
4. Access the 'Full Text Editor' for the 'Instructional Text' field 
   1. See article: Full Text Editor
      
5. Click on the source (</>) icon in the text toolbar. You will now be in the source view.  
   1. See article: Source Code Editor
   1. Copy and paste the following code into the text area

      <script> var failed = 0;</script>
      		

6. Add 2 blank responses to the response list

Adding a 'Static Element' for Display

1. Add your 'Static Element' on the same page as your 'Radio Question'
   1. See article: Standard Question: Static Elements
2. Name the question 'CAPTCHA' 
3. Access the 'Full Text Editor' 
   1. See article: Full Text Editor
4. Click on the source (</>) icon in the text toolbar. You will now be in the source view.  
   1. See article: Source Code Editor
   2. Add your question text surrounded by the div tag as shown below.  The code is below as well so you can copy and paste.
      

       <div id="myCaptcha">Please verify yourself using Google ReCaptcha below.</div>
      		

   3. Click on the source (</>) icon again and to exit the source view 
   4. Click 'SAVE'
5. Click on the '+ JavaScript' button 
   1. See article: Adding JavaScript and/or CSS to a Question
   2. Add the code below making sure to replace every instance of "S3" with whatever you named your radio question

      var pass = false;
      jQuery("#question-S3 ul.cm-radio-response-set li").hide();
      var faildetector = jQuery("#question-S3");
      	var captchaWidgetId = grecaptcha.render('myCaptcha',
      	{
      		'sitekey': '6Le9jgoUAAAAAF1RRRCEHAecz5druabTbn1gXfvp',
      		'callback': function(response)
      		{
      			if (response)
      			{
      			  pass = true;
      			  faildetector.hide();
      			  jQuery("#question-S3 ul.cm-radio-response-set li:eq(0) input").prop('checked', true);
                    jQuery(".error").remove();
      			}
      		}
      	});
      	faildetector.hide();
      	cmJq('.cm-Survey').on('beforeSubmit', someFunc);
      
      	function someFunc()
      	{
      	  faildetector.hide();
            if(failed == 0 && pass == false ) {
              jQuery("#myCaptcha").append("<div class='error'>Please verify yourself using Google ReCaptcha.</div>");
            }
      		if (faildetector.val() == "")
      		{
      			failed++;
      
      			faildetector.hide();
      		}
      		if (failed >= 2 && pass == false)
      		{
      		  jQuery("#question-S3 ul.cm-radio-response-set li:eq(1) input").prop('checked', true);
      		}
      	}
      		

   3. Click on 'SAVE'
6. Click on '+ CSS' 
   1. See article: Adding JavaScript and/or CSS to a Question
   2. Add the following code 

      #myCaptcha div:first-child {
        margin: 2em 0;
      }
      		

   3. Click 'SAVE' when you are done

Troubleshooting

• If you want to term if they fail the ReCaptcha, add a logic statement that reads if your Radio Question equals 2, term.
• If you are using this as the first exercise in your survey, you will need to add an intro page before it so the code has time to run. We suggest adding the intro page with a timer to show the next page button after 5-10 seconds. 
  • See the following article for help with setting that up: Next Page Button: Count Down Timer
• Make sure to test to ensure the exercise is working properly.