Reference

https://www.google.com/recaptcha/intro/index.html

"Protect your website from spam and abuse while letting real people pass through with ease."

Purpose

To showcase how to use Google's reCAPTCHA inside of AskiaDesign.

To see a working example of this, please click this link.

You can download our example QEX here.

Pre-requisite

You need to go to the following link: https://www.google.com/recaptcha/intro/index.html.

Click "Get reCAPTCHA" and register your site's domain.

Once registered, you can click on "your reCAPTCHA site", and it'll forward you to the admin page for that reCAPTCHA domain.

Next, you'll want to go down to the section that says "Adding reCAPTCHA to your site" and expand the "Keys" section.

Take note of the "Site key" that is generated here, as you'll be using it later in AskiaDesign.

In AskiaDesign

Create an introduction chapter and then some other "first question" the respondent will see once past the CAPTCHA screen.

Navigate to AskiaDesign's "Screen Mode" and generate your screens.

Go into your "Introduction" chapter screen and insert a label under the chapter caption.

Paste the following into the new label:

<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXXX"></div>
<br/><br/>
<div><input type="button" title="Submit" value=">>" class="button" name="Submit" onclick="CheckResponse();"></div>

Note: where it says "data-sitekey", make sure you paste your uniquely generated Google reCAPTCHA API site key here.

Next, navigate to "Options > Internet Options", and go into the "Head" section. We'll need to add the following lines of script to enable the reCAPTCHA functionality:

<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function CheckResponse()
{
var response = grecaptcha.getResponse();

if (response.length == 0) {
alert("Please confirm you are not a robot.");
}
else {
$('input[name="Next"]').click();
}
}

That's it. You're done.

Conclusion

Once you've set this up, you should have a fully functional reCAPTCHA in your survey.

See below GIF of this in action:

Google also allows you to modify the difficulty of the reCAPTCHA tool, so if you want to make it easier or harder, they provide a slider scale to manipulate (some reCAPTCHAs can be as easy as clicking a little checkbox, while others can be as hard as selecting 3-4 squares of a 3x3 picture grid which only contain a specific item).