Scroll

Google's reCAPTCHA in Askia Design

Google's reCAPTCHA in Askia Design

Follow
Summary How to use Google's reCAPTCHA in Askia Design
Applies to Askia Design
Written for Survey Designers
Keywords html ; javascript ; reCAPTCHA ; CAPTCHA ; design ; screen mode


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: 

Showcase how to use Google's reCAPTCHA inside of Askia Design.

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

You can download our example QEX here.

 

Prerequisite: 

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 Design.

reCAPTCHA_Site_key.png

 

 

In Design: 

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

Intro.png

Q1.png

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

Screens.png

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.

 Intro_Screen.png

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_reCAPTCHA.gif

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).

Have more questions? Submit a request

Comments