CAPTCHA Mathématique - Proinfo83

Description

Le CAPTCHA mathématique est un système de vérification anti-robot qui génère automatiquement des calculs mathématiques simples que l'utilisateur doit résoudre pour soumettre un formulaire.

Fonctionnement

Génération automatique

• Opérations supportées : Addition (+), Soustraction (-), Multiplication (×)
• Nombres utilisés :

- Addition/Soustraction : 1 à 20

- Multiplication : 1 à 10 (pour éviter des calculs trop complexes)

• Génération : Un nouveau calcul est généré à chaque chargement de page

Interface utilisateur

• Affichage du calcul dans un format clair : 5 + 3 = ?
• Bouton de rafraîchissement pour générer un nouveau calcul
• Champ de saisie numérique pour la réponse
• Message d'erreur si la réponse est incorrecte
• Validation en temps réel

Sécurité

• Le résultat correct est stocké dans un champ caché
• Validation côté client avant soumission du formulaire
• Empêche la soumission si le CAPTCHA est incorrect

Implémentation

Fichiers concernés

• assets/js/script.js : Fonction initCaptcha() et logique du CAPTCHA
• pages/contact.html : Formulaire de contact avec CAPTCHA
• pages/devis.html : Formulaire de devis avec CAPTCHA

Structure HTML requise

```html

```

Initialisation automatique

Le CAPTCHA s'initialise automatiquement sur toutes les pages qui incluent assets/js/script.js et qui ont les éléments HTML requis.

Personnalisation

Modifier les opérations

Pour ajouter ou modifier les opérations mathématiques, éditez la variable operations dans la fonction generateCaptcha() :

```javascript

const operations = [

{ op: '+', func: (a, b) => a + b },

{ op: '-', func: (a, b) => a - b },

{ op: '×', func: (a, b) => a * b },

{ op: '÷', func: (a, b) => Math.floor(a / b) } // Exemple d'ajout de division

];

```

Modifier les plages de nombres

Ajustez les valeurs dans les conditions pour modifier la difficulté :

```javascript

if (operation.op === '×') {

num1 = Math.floor(Math.random() * 15) + 1; // 1 à 15 au lieu de 1 à 10

num2 = Math.floor(Math.random() * 15) + 1;

} else {

num1 = Math.floor(Math.random() * 30) + 1; // 1 à 30 au lieu de 1 à 20

num2 = Math.floor(Math.random() * 30) + 1;

}

```

Dépannage

Le CAPTCHA ne s'affiche pas

1. Vérifiez que assets/js/script.js est bien inclus
2. Vérifiez que tous les IDs HTML sont présents et corrects
3. Ouvrez la console du navigateur pour vérifier les erreurs JavaScript

Le CAPTCHA ne valide pas

1. Vérifiez que le champ caché captcha-value est bien présent
2. Vérifiez que la fonction initCaptcha() est appelée
3. Testez avec des calculs simples pour vérifier la logique

Problèmes de style

1. Vérifiez que Bootstrap CSS est bien chargé
2. Vérifiez que les classes CSS sont correctement appliquées
3. Inspectez les éléments avec les outils de développement du navigateur

Compatibilité

• Navigateurs modernes : Chrome, Firefox, Safari, Edge (versions récentes)
• Navigateurs anciens : Support limité, fallback vers validation basique
• Mobile : Compatible avec tous les appareils tactiles
• Accessibilité : Labels appropriés et messages d'erreur clairs