Package Exports

@opentech-lab/custom-captcha
@opentech-lab/custom-captcha/dist/index.esm.js
@opentech-lab/custom-captcha/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@opentech-lab/custom-captcha) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Custom CAPTCHA – Build Your Own reCAPTCHA-Style Puzzle

A fully customizable CAPTCHA component built for modern web apps. Easily plug it into your forms to stop bots, test user knowledge, or filter out unwanted traffic with your own question sets or image-based puzzles.

Features

Protect your forms from spam and automation
Add your own custom questions (text, image, logic, drag-n-drop)
Puzzle types: multiple choice, image select, drag to match, sentence completion
Language & culture aware: design puzzles specific to your audience
Simple integration with React (other frameworks coming soon)
Lightweight & dependency-free (core)

Getting Started

1. Install

npm install @opentech-lab/custom-captcha

2. Usage (React)

import { CustomCaptcha } from '@opentech-lab/custom-captcha';

export default function MyForm() {
  return (
    <form method="POST" action="/api/submit">
      <input type="text" name="email" />
      <CustomCaptcha
        siteKey="your-site-key"
        questions={[
          {
            type: 'multiple-choice',
            question: 'Question?',
            choices: ['Yes', 'No', 'Prefer not to say'],
            answer: 'Yes',
          },
        ]}
        onSuccess={(token) => console.log('Token:', token)}
        onError={(error) => console.error('CAPTCHA Failed:', error)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

CAPTCHA Types

Type	Description
`multiple-choice`	Ask any text-based question with options
`image-select`	Click on the correct image(s)
`drag-match`	Drag to match items (coming soon)
`sentence-fill`	Fill in blanks in a sentence (coming soon)

Validation (Backend)

You must validate the token on your server to prevent spoofing.

// Example: Express.js
import { validateCaptchaToken } from '@opentech-lab/custom-captcha/server';

app.post('/api/submit', async (req, res) => {
  const { captchaToken } = req.body;
  const isValid = validateCaptchaToken(captchaToken, 'your-secret-key');

  if (!isValid) {
    return res.status(403).json({ error: 'Invalid CAPTCHA' });
  }

  // proceed with request
});

Props

Prop	Type	Required	Description
`questions`	`Array<Object>`	Yes	Array of questions (see formats below)
`siteKey`	`string`	Yes	Unique key for your frontend
`onSuccess`	`function`	Yes	Callback when CAPTCHA is solved
`onError`	`function`	No	Callback on failure

Question Format

{
  type: "multiple-choice",
  question: "What is 2 + 2?",
  choices: ["3", "4", "5"],
  answer: "4",
}

Advanced Ideas (Coming Soon)

Time-based interaction analysis (anti-GPT bot)
reCAPTCHA-style invisible scoring
Crowd-verified question pools
Custom image puzzle builder
Audio CAPTCHA (for accessibility)

Ethics & Safety

This tool is designed for developers building secure and intentional communities. Use ideological or political filters responsibly. Avoid using CAPTCHAs in ways that could be discriminatory or violate local laws.

License

MIT

Contributing

PRs welcome. If you'd like to contribute new puzzle types, translations, or integrations (Vue, Svelte, etc.), feel free to open an issue or fork the repo.

Inspiration

This project was inspired by:

Google's reCAPTCHA
The increasing threat of AI-generated misinformation
The need for user-driven, culturally-aware gatekeeping tools