Adding reCAPTCHA before the experiment

There are many ways to do it. You can either use “fake-captcha” or host your own pcibex and have a backend and api to do real captcha (overkill) or you can do mouse tracking.

I use mouse tracking and tell participants sometimes they might be asked to check a box. Bot mouse movements and human mouse movements are different, pcibex already has support for mouse tracking.

Fake catpcha:

– Go to any captcha picture generator website. get couple of captcha images. put the image file names and answer text in a csv file and create a template trials like this:

`
Template(“captcha.csv”, row =>
newTrial(“captcha”,
newText(“title”, “Human Verification”).bold().print(),
newText(“instruction”, “Type the characters you see in the image:”).print(),
newImage(“captchaImg”, row.img).size(250, 80).print(),
newTextInput(“captchaInput”).print(),
newText(“error”, “Incorrect, please try again.”).color(“red”),
newButton(“Submit”).print()
.wait(
getTextInput(“captchaInput”)
.test.text(new RegExp(“^\\s*” + row.answer + “\\s*$”, “i”))
.failure(
getText(“error”).print(),
getTextInput(“captchaInput”).clear()
)
)
)
)
`

Real captcha:

– Or start hosting your own pcibex. add google/amazon script api to your page template ( <script src=”https://www.google.com/recaptcha/api.js&#8221; async defer></script>)
– Then add trials like this to your pcibex code and then verify the tokens in your backend.

`
newTrial(“captcha”,
newText(“instruction”, “Please complete the CAPTCHA to continue.”).print(),
newHtml(“recaptchaWidget”,
“<div class=’g-recaptcha’ data-sitekey=’YOUR_SITE_KEY’></div>”
).print(),
newFunction(“checkCaptcha”, () => new Promise(resolve => {
const interval = setInterval(() => {
const response = grecaptcha.getResponse();
if (response.length > 0) {
clearInterval(interval);
resolve();
}
}, 500);
})).call().wait(),
newButton(“Continue”).print().wait()
)
`

Mouse tracking:

– Add mouse trackers and a random checkbox to subset of your trials.
– Track TrialN in your experiments

`
Header(
newVar(“TrialN”, 0).global(),
)
.log(“trialN_header”, getVar(“TrialN”))
`

– When you create a template code for your filler or experimental trials, add an if statement like this and add mouse tracker start, randomcheckbox, and mouse tracker stop.

`
Template(“experiment.csv”, row =>
newTrial(“exp”,
getVar(“TrialN”).test.is(v => v % 20 === 0).success(
newMouseTracker(“mouse”).log().start()
),

// rest of your experiment code doing normal experiment stuff…

// clear everything on the screen

getVar(“TrialN”).test.is(v => v % 20 === 0).success(
//some checkbox code
,
getMouseTracker(“mouse”).stop()
),

`