Guide Rapide - Clavier Mathématique

🚀 Installation (3 étapes)

1 Ajouter les fichiers

<head>
    <link rel="stylesheet" href="../../assets/css/math-keyboard.css">
</head>
<body>
    <!-- Votre contenu -->
    <script src="../../assets/js/math-keyboard.js"></script>
</body>

2 Remplacer les inputs

❌ AVANT

✅ APRÈS

3 C'est tout !

✅

Le clavier fonctionne automatiquement
Aucune configuration supplémentaire nécessaire. Cliquez sur un input et le clavier apparaît !

📝 Récupérer les réponses

❌ ANCIEN CODE

const reponse = 
    document.getElementById('rep1').value;

✅ NOUVEAU CODE

const input = document.getElementById('rep1');
const reponse = 
    window.mathKeyboard.getValue(input);

💡

C'est la SEULE modification à faire dans votre code JavaScript !
Remplacez simplement .value par window.mathKeyboard.getValue(input)

🎯 Exemple Complet

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>تمرين الرياضيات</title>
    <link rel="stylesheet" href="../../assets/css/math-keyboard.css">
</head>
<body>

    <h2>بسّط الكسر</h2>
    <p>15/25 = <span class="math-input-box" id="rep1"></span></p>
    <button onclick="verifier()">تحقق</button>
    <div id="resultat"></div>

    <script src="../../assets/js/math-keyboard.js"></script>
    
    <script>
        function verifier() {
            const input = document.getElementById('rep1');
            const reponse = window.mathKeyboard.getValue(input);
            
            if (reponse === '\\frac{3}{5}' || reponse === '3/5') {
                document.getElementById('resultat').innerHTML = 
                    '<p style="color:green">✅ صحيح!</p>';
                window.mathKeyboard.setSuccess(input);
            } else {
                document.getElementById('resultat').innerHTML = 
                    '<p style="color:red">❌ خطأ</p>';
                window.mathKeyboard.setError(input);
            }
        }
    </script>

</body>
</html>

🔧 Méthodes Utiles

Méthode	Usage
`getValue(input)`	Récupérer la réponse
`setValue(valeur, input)`	Définir une valeur
`setSuccess(input)`	Marquer comme correct (vert)
`setError(input)`	Marquer comme incorrect (rouge)
`clearState(input)`	Effacer l'état
`clear()`	Vider l'input actuel

📊 Formats de Réponse

Saisie Utilisateur	Format Retourné
Fraction avec bouton ↗	`\frac{3}{5}`
Nombre simple	`42`
Puissance x²	`x^2`
Expression	`2x+5`

💡 Fonction de Vérification Réutilisable

function verifier(inputId, reponseCorrecte) {
    const input = document.getElementById(inputId);
    const reponse = window.mathKeyboard.getValue(input);
    
    if (reponse === reponseCorrecte) {
        window.mathKeyboard.setSuccess(input);
        return true;
    } else {
        window.mathKeyboard.setError(input);
        return false;
    }
}

// Utilisation
verifier('rep1', '\\frac{3}{5}');
verifier('rep2', 'x^2+6x+9');

🔄 Intégration avec localStorage

function sauvegarder(inputId, correct) {
    const input = document.getElementById(inputId);
    const reponse = window.mathKeyboard.getValue(input);
    
    const data = {
        page: window.location.pathname,
        exercice: inputId,
        reponse: reponse,
        correct: correct,
        timestamp: Date.now()
    };
    
    const historique = JSON.parse(localStorage.getItem('reponses') || '[]');
    historique.push(data);
    localStorage.setItem('reponses', JSON.stringify(historique));
}

✅ Checklist d'Intégration

Copier math-keyboard.css et math-keyboard.js dans /assets/
Ajouter <link> dans <head>
Ajouter <script> avant </body>
Remplacer <input> par <span class="math-input-box">
Remplacer .value par window.mathKeyboard.getValue()
Tester sur mobile et desktop

📱 Guide Rapide