Очередная CAPTCHA. На этот раз каптча-рисовалка

Сколько разных каптч уже придумали разработчики. Кто-то просит ввести просто цфры, кто-то текст, кто-то математические операции производит, кто-то хочет, что б пользователи выбирали на фото живой природы или животных на доступных изображениях, а есть даже тематические вопросы "аля: Какой транзистор нужно припаять к южному мосту, что бы вольтаж снизился к потреблению 8 вольт".

Есть любопытная каптча - называется она MotionCAPTCHA. Написана на всеми любимом JS фреймворке JQuery. Суть ее в том, чтобы нарисовать геометрическую фигуру по картинки, т.е. просто обвести контур. Текущая версия работает на стороне клиента, но автор уверил всех, что очень скоро она будет работать на стороне сервера.

Подключение каптчи

В head страницы:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="jquery.motionCaptcha.0.2.min.js"></script>
<link href="jquery.motionCaptcha.0.2.css"></script>

Прописываем ID нашей форме:

<form action="#" id="mycoolform" method="[get/post]">

Добавляем каптчу в форму:

<div id="mc">
    <p>Пожалуйста, обведите фигуру:</p>
    <canvas id="mc-canvas"></canvas>
</div>

Отключаем кнопку отправки формы:

<input type="submit" disabled="disabled" value="Отправить" />

Добавляем путь к скрипту в скрытом поле формы:

<input type="hidden" id="fairly-unique-id" value="submitform.php" />

И описываем все это дело в JQuery:

$('#form-id').motionCaptcha({
    action: '#fairly-unique-id'
});
$('#form-id').motionCaptcha();
$('#form-id').motionCaptcha({
    // Basics:
    action: '#mc-action',        // ID формы
    divId: '#mc',                // ID нашего DIV
    cssClass: '.mc-active',      // css class нашего DIV
    canvasId: '#mc-canvas',      // ID каптчи

    // массив доступных фигур:
    shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'caret', 'zigzag', 'arrow', 'leftbracket', 'rightbracket', 'v', 'delete', 'star', 'pigtail'],

    errorMsg: 'Ошибочка. Пожалуйста, нарисуйте еще раз',
    successMsg: 'Ура. Все верно!',

    // если браузер не поддерживает - пишем, что увы :(
    noCanvasMsg: "Ваш браузер не поддерживает canvas"

    label: '<p>Пожалуйста, обрисуйте фигуру:</p>'
});