We use cookies to improve your experience. No personal information is gathered and we don't serve ads. Cookies Policy.

ExpressionEngine Logo ExpressionEngine
Features Pricing Support Find A Developer
Partners Upgrades
Blog Add-Ons Learn
Docs Forums University
Log In or Sign Up
Log In Sign Up
ExpressionEngine Logo
Features Pro new Support Find A Developer
Partners Upgrades
Blog Add-Ons Learn
Docs Forums University Blog
  • Home
  • Forums

Extension: Accessible Captchas

Development and Programming

Greg Salt's avatar
Greg Salt
3,988 posts
18 years ago
Greg Salt's avatar Greg Salt

Hi,

This extension changes the captchas from graphic words to definable questions and answers. The settings allow you to create up to 8 simple questions and answers that will be randomly chosen in place of the captcha. So, for example, you could have:

Question: What is missing: North, South, East? Answer: West

Question: 2+2 is equal to? Answer: 4

Question: An … a day keeps the doctor away. What word is missing? Answer: apple

The captcha will then be replaced by one of these questions. The answer is case insensitive so for question 1 ‘West’ and ‘west’ will validate.

There is an additional setting: Answer hinting, that places text showing the number of characters required to complete the answer after the question. The hint will be wrapped in a span with the class ‘captcha-hints’ like so:

What is missing: North, South, East? <span class="captcha-hints">4 character(s) required</span>

Note that no other HTML tags are output so you can use whatever you wish to wrap and style the captcha question. The input is cleaned and processed by the existing form code.

Werner Gusset has kindly provided a German language file for this extension. You can download it from his site.

I hope that you find this useful. Let me know what you think of it and whether you think it could be improved.

Information can be found on our site here. The latest files will now be available on Bitbucket here.

Cheers

Dry

P.S. You will probably want to edit the lang.core.php file to change the error messages associated with either no captcha submitted or an incorrect one. The keys are ‘captcha_required’ and ‘captcha_incorrect’ on about lines 98 and 101 respectively. These changes are not required in the 2.x version.

       
Lisa Wess's avatar
Lisa Wess
20,502 posts
18 years ago
Lisa Wess's avatar Lisa Wess

oh my goodness. This sound rockin’, will have to play with it this weekend. =)

Please add this to the add-on library. =)

       
chrispiciullo's avatar
chrispiciullo
69 posts
18 years ago
chrispiciullo's avatar chrispiciullo

Wow, Dry… this is fantastic. I’ve been wanting something like this ever since I saw a similar plugin for WordPress. Now I have something to play with tonight. 😊

Thanks!

       
PXLated's avatar
PXLated
1,800 posts
18 years ago
PXLated's avatar PXLated

Cool, have never liked the EE captcha system.

       
Werner Gusset's avatar
Werner Gusset
122 posts
18 years ago
Werner Gusset's avatar Werner Gusset

Thanks Dry

works perfect and I was looking a long time for such a solution.

One little thing: Could you put the hint text for “character(s) required” in the language file? On german sites we would like to have this be translated.

       
Greg Salt's avatar
Greg Salt
3,988 posts
18 years ago
Greg Salt's avatar Greg Salt

Hi Werner,

Glad you like it. I’ll make that change and update the download later on today.

Cheers

Dry

       
chrispiciullo's avatar
chrispiciullo
69 posts
18 years ago
chrispiciullo's avatar chrispiciullo

Hey Dry.

I’m not sure if this is doable with extensions as I’m wholly unfamiliar with how they work, but I was wondering if it would be possible to dynamically add more than 5 Q&A pairs. I guess I’m just worried that if, after a while, the same questions keep repeating all the bots will catch on eventually.

Am I being overly paranoid?

       
Daniel Walton's avatar
Daniel Walton
553 posts
18 years ago
Daniel Walton's avatar Daniel Walton

Looks like you should just be able to add new “questionX” & “answerX” keys to the lang file, and the same to the settings array within the ext file.

       
Greg Salt's avatar
Greg Salt
3,988 posts
18 years ago
Greg Salt's avatar Greg Salt
Hey Dry. I’m not sure if this is doable with extensions as I’m wholly unfamiliar with how they work, but I was wondering if it would be possible to dynamically add more than 5 Q&A pairs. I guess I’m just worried that if, after a while, the same questions keep repeating all the bots will catch on eventually. Am I being overly paranoid?

Hi Crimson,

I am not sure that is easily doable. I can certainly add more Q&A fields and you don’t have to fill them all in for the extension work correctly.

Of course, it’s easy to change the questions on an infrequent basis and that is going to be completely transparent to your site users.

Cheers

Dry

       
Werner Gusset's avatar
Werner Gusset
122 posts
18 years ago
Werner Gusset's avatar Werner Gusset
There is an additional setting: Answer hinting, that places text showing the number of characters required to complete the answer after the question. The hint will be wrapped in a span with the class ‘captcha-hints’ like so:
What is missing: North, South, East? <span class="captcha-hints">4 character(s) required</span>

Dry

Another little suggestion: could you wrap the hint in brackets () like

What is missing: North, South, East? <span class="captcha-hints">(4 character(s) required)</span>

otherwise we would need to add them in the extension file by hand

Thanks

       
Greg Salt's avatar
Greg Salt
3,988 posts
18 years ago
Greg Salt's avatar Greg Salt

Hi,

I’ve updated the extension to version 1.0.1. This moves the answer hint text into the language file and also adds 3 more Q&A sets giving a total of eight.

The file in the first post is the new download.

Cheers

Dry

       
Greg Salt's avatar
Greg Salt
3,988 posts
18 years ago
Greg Salt's avatar Greg Salt
There is an additional setting: Answer hinting, that places text showing the number of characters required to complete the answer after the question. The hint will be wrapped in a span with the class ‘captcha-hints’ like so:
What is missing: North, South, East? <span class="captcha-hints">4 character(s) required</span>
Dry Another little suggestion: could you wrap the hint in brackets () like
What is missing: North, South, East? <span class="captcha-hints">(4 character(s) required)</span>
otherwise we would need to add them in the extension file by hand Thanks

Oops,

Sorry Werner I didn’t see your additional request. You know, I wondered about adding that the first time around but figured that it would be better to leave it as clean as possible.

Lemme see if I can come up with something in the settings to let you choose whether to have them or not.

Cheers

Dry

       
Greg Salt's avatar
Greg Salt
3,988 posts
18 years ago
Greg Salt's avatar Greg Salt

Hi,

Updated to version 1.0.2. Changes are:

  1. Added new setting to enable hints wrapped in ( and )
  2. Slightly amended English language hints text

File in first post is new download.

Cheers

Dry

       
Werner Gusset's avatar
Werner Gusset
122 posts
18 years ago
Werner Gusset's avatar Werner Gusset

Dry

That’s very good. I love this ext. Many thanks.

A new suggestion: what about an option to put the Hint on a new line? Would be handy sometime. And if you do this, give it a seperate CSS class. This way one could have the question bold and the hint normal.

If you want you can have the little lang file in German to include.

       
Greg Salt's avatar
Greg Salt
3,988 posts
18 years ago
Greg Salt's avatar Greg Salt

Hi Werner,

Yeah, that’d be great. Send it over and I’ll update zip. Or, if you’d prefer just send me the link to your site download and I’ll update the first post.

Dry A new suggestion: what about an option to put the Hint on a new line? Would be handy sometime. And if you do this, give it a seperate CSS class. This way one could have the question bold and the hint normal.

You can already do this because the hints appear at the end of the question. All you have to do is make the hint span a block level element (in CSS) and style whatever tag you’ve wrapped around the captcha appropriately. In fact, I’ve done something like this:

Template

{captcha}

CSS

.captcha {
font-weight: 900;
}

.captcha-hints {
display: block;
font-style: italic;
font-weight: 400;
}

Cheers

Dry

       
1 2 3 Last

Reply

Sign In To Reply

ExpressionEngine Home Features Pro Contact Version Support
Learn Docs University Forums
Resources Support Add-Ons Partners Blog
Privacy Terms Trademark Use License

Packet Tide owns and develops ExpressionEngine. © Packet Tide, All Rights Reserved.