The reCAPTCHA client API provides a reload javascript method that will grab a new set of words for the user to decode. It was easy enough to display a small error message above the reCAPTCHA div and call this method when the user responds incorrectly.

In a typical setup, as described in the reCAPTCHA client API, the standard theme can display an error message when the user responds incorrectly. This is done by appending an error URL parameter to the challenge. The error message I was adding via javascript was showing up above the reCAPTCHA module rather than just above the text box. I wanted to display the error message included in the standard reCAPTCHA theme.

Though I’m sure there are several ways to accomplish my goal, I settled on a very easy, but very unsupported solution (read: HACK):

The message the standard template displays just above the input textbox is controlled by a class set on the recaptcha_widget_div element. A class of recaptcha_nothad_incorrect_sol causes “Type the two words:” or “Type what you hear:” to be displayed while a recaptcha_had_incorrect_sol class causes “Incorrect. Try again.” to be displayed. So to display the default error message all you need to do is change the class of the recaptcha_widget_div element.

Trying to mix this with the reCAPTCHA reload method doesn’t work as you might expect. The reload method causes an AJAX request to be sent to the reCAPTCHA server. When the response arrives, the reCAPTCHA module is updated. If you modify the class before the response arrives, your updated class will be overwritten. To fix this, you can override the default response callback Recaptcha.finish_reload.

So my final solution (hack) looked something like this (please note, the page in question was already loading the prototype library so I used it):

if(typeof Recaptcha.old_finish_reload === 'undefined') {
   Recaptcha.old_finish_reload = Recaptcha.finish_reload;
   Recaptcha.finish_reload = function(a, b, c, d) {
      Recaptcha.old_finish_reload(a, b, c, d);
      $('recaptcha_widget_div').removeClassName('recaptcha_nothad_incorrect_sol');
      $('recaptcha_widget_div').addClassName('recaptcha_had_incorrect_sol');
   };
}
Recaptcha.reload();