Update index.html

index.html

@@ -30,7 +30,6 @@
             min-height: 100vh;
         }
 
-        /* Texture overlay */
         body::before {
             content: '';
             position: fixed;
@@ -79,7 +78,7 @@
 
         .game-container {
             display: grid;
-            grid-template-columns: 1fr 380px;
+            grid-template-columns: 1fr 400px;
             gap: 2rem;
             animation: fadeInUp 1s ease 0.2s both;
         }
@@ -120,63 +119,139 @@
             display: flex;
             flex-direction: column;
             gap: 1.5rem;
+            max-height: 800px;
+            overflow-y: auto;
         }
 
-        .species-options {
+        .score-display {
+            background: linear-gradient(135deg, #f8f6f0 0%, #ede9dc 100%);
+            padding: 1.5rem;
+            border-radius: 10px;
+            text-align: center;
+            border: 2px solid var(--border);
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+
+        .score-label {
+            font-family: 'Crimson Pro', serif;
+            font-size: 0.9rem;
+            color: var(--dark-sepia);
+            opacity: 0.7;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            margin-bottom: 0.5rem;
+        }
+
+        .score-value {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: var(--accent-green);
+            font-family: 'Crimson Pro', serif;
+        }
+
+        .answer-input-section {
             display: flex;
             flex-direction: column;
-            gap: 0.75rem;
+            gap: 1rem;
         }
 
-        .species-btn {
-            background: var(--sepia);
-            border: 2px solid var(--border);
-            padding: 1rem 1.25rem;
-            border-radius: 10px;
+        .answer-input-section label {
             font-family: 'Crimson Pro', serif;
-            font-size: 1.05rem;
-            color: var(--dark-sepia);
-            cursor: pointer;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            text-align: left;
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: var(--accent-green);
+        }
+
+        .input-wrapper {
             position: relative;
-            overflow: hidden;
         }
 
-        .species-btn::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
+        #species-input {
             width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(74, 124, 89, 0.1), transparent);
-            transition: left 0.5s;
+            padding: 1rem;
+            border: 2px solid var(--border);
+            border-radius: 10px;
+            font-family: 'Crimson Pro', serif;
+            font-size: 1rem;
+            background: var(--sepia);
+            color: var(--dark-sepia);
+            transition: all 0.3s ease;
         }
 
-        .species-btn:hover {
-            background: white;
+        #species-input:focus {
+            outline: none;
             border-color: var(--accent-green);
-            transform: translateX(4px);
+            background: white;
             box-shadow: 0 4px 12px var(--shadow);
         }
 
-        .species-btn:hover::before {
-            left: 100%;
+        .autocomplete-dropdown {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background: white;
+            border: 2px solid var(--accent-green);
+            border-top: none;
+            border-radius: 0 0 10px 10px;
+            max-height: 300px;
+            overflow-y: auto;
+            z-index: 1000;
+            box-shadow: 0 8px 16px var(--shadow);
         }
 
-        .species-btn.correct {
-            background: var(--accent-green);
-            color: white;
-            border-color: var(--accent-green);
-            animation: correctPulse 0.6s ease;
+        .autocomplete-item {
+            padding: 0.75rem 1rem;
+            cursor: pointer;
+            transition: background 0.2s ease;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .autocomplete-item:last-child {
+            border-bottom: none;
+        }
+
+        .autocomplete-item:hover,
+        .autocomplete-item.selected {
+            background: var(--sepia);
+        }
+
+        .autocomplete-item strong {
+            color: var(--accent-green);
+            display: block;
+            margin-bottom: 0.25rem;
         }
 
-        .species-btn.incorrect {
-            background: #c54a4a;
+        .autocomplete-item em {
+            color: var(--dark-sepia);
+            opacity: 0.7;
+            font-size: 0.9rem;
+        }
+
+        .submit-btn {
+            background: linear-gradient(135deg, var(--accent-green) 0%, #5a8c69 100%);
             color: white;
-            border-color: #c54a4a;
-            animation: shake 0.5s ease;
+            border: none;
+            padding: 1rem 1.5rem;
+            border-radius: 10px;
+            font-family: 'Crimson Pro', serif;
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
+        }
+
+        .submit-btn:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(74, 124, 89, 0.4);
+        }
+
+        .submit-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
         }
 
         .hints-section {
@@ -199,15 +274,11 @@
             box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
         }
 
-        .hint-btn:hover {
+        .hint-btn:hover:not(:disabled) {
             transform: translateY(-2px);
             box-shadow: 0 6px 20px rgba(212, 165, 116, 0.4);
         }
 
-        .hint-btn:active {
-            transform: translateY(0);
-        }
-
         .hint-btn:disabled {
             opacity: 0.5;
             cursor: not-allowed;
@@ -236,31 +307,6 @@
             margin-bottom: 0.25rem;
         }
 
-        .score-display {
-            background: linear-gradient(135deg, #f8f6f0 0%, #ede9dc 100%);
-            padding: 1.5rem;
-            border-radius: 10px;
-            text-align: center;
-            border: 2px solid var(--border);
-        }
-
-        .score-label {
-            font-family: 'Crimson Pro', serif;
-            font-size: 0.9rem;
-            color: var(--dark-sepia);
-            opacity: 0.7;
-            text-transform: uppercase;
-            letter-spacing: 0.1em;
-            margin-bottom: 0.5rem;
-        }
-
-        .score-value {
-            font-size: 2.5rem;
-            font-weight: 700;
-            color: var(--accent-green);
-            font-family: 'Crimson Pro', serif;
-        }
-
         .next-btn {
             background: var(--accent-green);
             color: white;
@@ -282,11 +328,6 @@
             box-shadow: 0 6px 20px rgba(74, 124, 89, 0.4);
         }
 
-        .next-btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
         .result-message {
             padding: 1.5rem;
             border-radius: 10px;
@@ -309,7 +350,6 @@
             border: 2px solid #c54a4a;
         }
 
-        /* Animations */
         @keyframes fadeInDown {
             from {
                 opacity: 0;
@@ -348,18 +388,6 @@
             to { opacity: 1; }
         }
 
-        @keyframes correctPulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-        }
-
-        @keyframes shake {
-            0%, 100% { transform: translateX(0); }
-            25% { transform: translateX(-10px); }
-            75% { transform: translateX(10px); }
-        }
-
-        /* Responsive */
         @media (max-width: 1024px) {
             .game-container {
                 grid-template-columns: 1fr;
@@ -374,7 +402,6 @@
             }
         }
 
-        /* Leaflet attribution styling */
         .leaflet-control-attribution {
             background: rgba(255, 255, 255, 0.8) !important;
             font-size: 0.7rem !important;
@@ -404,17 +431,27 @@
 
                 <div id="result-container"></div>
 
-                <div class="species-options" id="species-options">
-                    <!-- Options will be generated here -->
+                <div class="answer-input-section">
+                    <label for="species-input">Quelle est cette espèce ?</label>
+                    <div class="input-wrapper">
+                        <input 
+                            type="text" 
+                            id="species-input" 
+                            placeholder="Tapez le nom de l'espèce..."
+                            autocomplete="off"
+                        />
+                        <div id="autocomplete-dropdown" class="autocomplete-dropdown" style="display: none;"></div>
+                    </div>
+                    <button class="submit-btn" id="submit-btn">
+                        Valider ma réponse
+                    </button>
                 </div>
 
                 <div class="hints-section">
                     <button class="hint-btn" id="hint-btn">
                         💡 Demander un indice
                     </button>
-                    <div class="hints-display" id="hints-display">
-                        <!-- Hints will appear here -->
-                    </div>
+                    <div class="hints-display" id="hints-display"></div>
                 </div>
 
                 <button class="next-btn" id="next-btn" style="display: none;">
@@ -426,12 +463,14 @@
 
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script>
-        // Species data with taxonKeys and hints
+        // Extended species database with taxonKeys and hints
         const speciesData = [
+            // Original species
             {
                 name: "Mantis religiosa",
                 commonName: "Mante religieuse",
                 taxonKey: "144094823",
+                family: "Mantidae",
                 hints: [
                     "Famille : Mantidae",
                     "C'est l'espèce de mante la plus commune et répandue en Europe",
@@ -442,6 +481,7 @@
                 name: "Iris oratoria",
                 commonName: "Mante méditerranéenne",
                 taxonKey: "1404300",
+                family: "Tarachodidae",
                 hints: [
                     "Famille : Tarachodidae",
                     "Espèce méditerranéenne qui s'étend vers le nord",
@@ -452,6 +492,7 @@
                 name: "Hierodula patellifera",
                 commonName: "Mante asiatique géante",
                 taxonKey: "1405951",
+                family: "Mantidae",
                 hints: [
                     "Famille : Mantidae",
                     "Une des plus grandes espèces, originaire d'Asie du Sud-Est",
@@ -462,6 +503,7 @@
                 name: "Sphodromantis viridis",
                 commonName: "Mante africaine",
                 taxonKey: "7204692",
+                family: "Mantidae",
                 hints: [
                     "Famille : Mantidae",
                     "Espèce africaine de couleur verte caractéristique",
@@ -472,6 +514,7 @@
                 name: "Blepharopsis mendica",
                 commonName: "Mante fleur égyptienne",
                 taxonKey: "1406697",
+                family: "Empusidae",
                 hints: [
                     "Famille : Empusidae",
                     "Originaire d'Afrique du Nord et du Moyen-Orient",
@@ -482,11 +525,255 @@
                 name: "Idolomantis diabolica",
                 commonName: "Mante fleur du diable",
                 taxonKey: "1406692",
+                family: "Empusidae",
                 hints: [
                     "Famille : Empusidae",
                     "Espèce africaine considérée comme la plus spectaculaire au monde",
                     "Appelée 'du diable' pour son apparence impressionnante et ses cornes"
                 ]
+            },
+            // New species additions
+            {
+                name: "Acontista mexicana",
+                commonName: "Mante mexicaine",
+                taxonKey: "1404204",
+                family: "Acontistidae",
+                hints: [
+                    "Famille : Acontistidae",
+                    "Espèce d'Amérique centrale, notamment au Mexique",
+                    "Petite mante discrète vivant dans les zones arides"
+                ]
+            },
+            {
+                name: "Empusa pennata",
+                commonName: "Empuse commune",
+                taxonKey: "1406674",
+                family: "Empusidae",
+                hints: [
+                    "Famille : Empusidae",
+                    "Espèce méditerranéenne avec des antennes plumeuses caractéristiques",
+                    "Silhouette très élancée avec une crête sur la tête"
+                ]
+            },
+            {
+                name: "Tenodera sinensis",
+                commonName: "Mante chinoise",
+                taxonKey: "1405978",
+                family: "Mantidae",
+                hints: [
+                    "Famille : Mantidae",
+                    "Grande mante originaire d'Asie, introduite en Amérique du Nord",
+                    "Une des espèces les plus grandes et les plus robustes"
+                ]
+            },
+            {
+                name: "Phyllocrania paradoxa",
+                commonName: "Mante feuille morte",
+                taxonKey: "1406700",
+                family: "Hymenopodidae",
+                hints: [
+                    "Famille : Hymenopodidae",
+                    "Originaire d'Afrique, mimétisme exceptionnel avec une feuille morte",
+                    "Petite espèce très appréciée en terrariophilie"
+                ]
+            },
+            {
+                name: "Hymenopus coronatus",
+                commonName: "Mante orchidée",
+                taxonKey: "1406703",
+                family: "Hymenopodidae",
+                hints: [
+                    "Famille : Hymenopodidae",
+                    "Espèce d'Asie du Sud-Est, célèbre pour son mimétisme avec les orchidées",
+                    "Considérée comme une des plus belles mantes du monde"
+                ]
+            },
+            {
+                name: "Creobroter gemmatus",
+                commonName: "Mante fleur indienne",
+                taxonKey: "1406706",
+                family: "Hymenopodidae",
+                hints: [
+                    "Famille : Hymenopodidae",
+                    "Petite mante d'Asie du Sud avec des motifs colorés",
+                    "Taches oculaires vertes sur les ailes antérieures"
+                ]
+            },
+            {
+                name: "Pseudocreobotra wahlbergii",
+                commonName: "Mante fleur épineuse",
+                taxonKey: "1406705",
+                family: "Hymenopodidae",
+                hints: [
+                    "Famille : Hymenopodidae",
+                    "Espèce africaine avec des motifs en spirale sur les ailes",
+                    "Abdomen en forme de feuille avec des épines"
+                ]
+            },
+            {
+                name: "Deroplatys desiccata",
+                commonName: "Mante feuille morte géante",
+                taxonKey: "1406699",
+                family: "Deroplatyidae",
+                hints: [
+                    "Famille : Deroplatyidae",
+                    "Grande espèce d'Asie du Sud-Est avec mimétisme de feuille morte",
+                    "Apparence très plate et rugueuse imitant une feuille desséchée"
+                ]
+            },
+            {
+                name: "Stagmomantis carolina",
+                commonName: "Mante de Caroline",
+                taxonKey: "1405980",
+                family: "Mantidae",
+                hints: [
+                    "Famille : Mantidae",
+                    "Espèce commune aux États-Unis, notamment dans le sud-est",
+                    "Mante de taille moyenne, très adaptable"
+                ]
+            },
+            {
+                name: "Ameles spallanzania",
+                commonName: "Amèle de Spallanzani",
+                taxonKey: "1404283",
+                family: "Amelidae",
+                hints: [
+                    "Famille : Amelidae",
+                    "Petite mante méditerranéenne",
+                    "Les femelles sont souvent aptères (sans ailes)"
+                ]
+            },
+            {
+                name: "Popa spurca",
+                commonName: "Mante écorce africaine",
+                taxonKey: "1406694",
+                family: "Liturgusidae",
+                hints: [
+                    "Famille : Liturgusidae",
+                    "Espèce africaine avec excellent mimétisme d'écorce",
+                    "Apparence plate et rugueuse, vit sur les troncs d'arbres"
+                ]
+            },
+            {
+                name: "Sibylla pretiosa",
+                commonName: "Mante cryptique",
+                taxonKey: "1406695",
+                family: "Sibyllidae",
+                hints: [
+                    "Famille : Sibyllidae",
+                    "Espèce d'Afrique australe au camouflage remarquable",
+                    "Forme et couleur imitant l'écorce ou les brindilles"
+                ]
+            },
+            {
+                name: "Miomantis paykulli",
+                commonName: "Mante égyptienne",
+                taxonKey: "1405984",
+                family: "Mantidae",
+                hints: [
+                    "Famille : Mantidae",
+                    "Petite mante africaine, introduite dans plusieurs régions",
+                    "Très adaptable, peut vivre en zones urbaines"
+                ]
+            },
+            {
+                name: "Hierodula membranacea",
+                commonName: "Mante asiatique géante",
+                taxonKey: "1405953",
+                family: "Mantidae",
+                hints: [
+                    "Famille : Mantidae",
+                    "Grande espèce d'Asie, très répandue en terrariophilie",
+                    "Couleur verte brillante, très vorace"
+                ]
+            },
+            {
+                name: "Sphodromantis lineola",
+                commonName: "Mante africaine lignée",
+                taxonKey: "1405996",
+                family: "Mantidae",
+                hints: [
+                    "Famille : Mantidae",
+                    "Grande mante d'Afrique centrale et occidentale",
+                    "Bande blanche caractéristique sur les ailes antérieures"
+                ]
+            },
+            {
+                name: "Archimantis latistyla",
+                commonName: "Mante australienne géante",
+                taxonKey: "1406667",
+                family: "Mantidae",
+                hints: [
+                    "Famille : Mantidae",
+                    "Grande espèce endémique d'Australie",
+                    "Une des plus grandes mantes d'Australie"
+                ]
+            },
+            {
+                name: "Metallyticus splendidus",
+                commonName: "Mante métallique",
+                taxonKey: "1406714",
+                family: "Metallyticidae",
+                hints: [
+                    "Famille : Metallyticidae",
+                    "Petite mante d'Asie du Sud-Est avec reflets métalliques",
+                    "Aspect iridescent bleu-vert unique parmi les mantes"
+                ]
+            },
+            {
+                name: "Theopropus elegans",
+                commonName: "Mante orchidée élégante",
+                taxonKey: "1406707",
+                family: "Hymenopodidae",
+                hints: [
+                    "Famille : Hymenopodidae",
+                    "Espèce d'Asie du Sud-Est ressemblant aux fleurs",
+                    "Lobes abdominaux en forme de pétales"
+                ]
+            },
+            {
+                name: "Rivetina baetica",
+                commonName: "Mante ibérique",
+                taxonKey: "1404296",
+                family: "Rivetinidae",
+                hints: [
+                    "Famille : Rivetinidae",
+                    "Petite mante de la péninsule ibérique et d'Afrique du Nord",
+                    "Espèce discrète vivant au sol dans la végétation basse"
+                ]
+            },
+            {
+                name: "Empusa fasciata",
+                commonName: "Empuse fascié",
+                taxonKey: "1406675",
+                family: "Empusidae",
+                hints: [
+                    "Famille : Empusidae",
+                    "Espèce méditerranéenne proche d'Empusa pennata",
+                    "Antennes plumeuses et corps très élancé"
+                ]
+            },
+            {
+                name: "Orthodera ministralis",
+                commonName: "Mante australienne jardinière",
+                taxonKey: "1406668",
+                family: "Mantidae",
+                hints: [
+                    "Famille : Mantidae",
+                    "Espèce endémique d'Australie",
+                    "Mante de taille moyenne, verte ou brune"
+                ]
+            },
+            {
+                name: "Brunneria borealis",
+                commonName: "Mante-bâton",
+                taxonKey: "1404272",
+                family: "Mantidae",
+                hints: [
+                    "Famille : Mantidae",
+                    "Espèce d'Amérique du Nord, très élancée",
+                    "Population entièrement femelle (parthénogenèse)"
+                ]
             }
         ];
 
@@ -497,12 +784,13 @@
         let answered = false;
         let map = null;
         let tileLayer = null;
+        let selectedIndex = -1;
+        let filteredSpecies = [];
 
         // Initialize map
         function initMap() {
             map = L.map('map').setView([20, 0], 2);
             
-            // Base map layer
             L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                 attribution: '© OpenStreetMap contributors',
                 maxZoom: 18
@@ -511,12 +799,10 @@
 
         // Load species occurrences on map
         function loadSpeciesOnMap(taxonKey) {
-            // Remove previous tile layer if exists
             if (tileLayer) {
                 map.removeLayer(tileLayer);
             }
 
-            // Add GBIF occurrence tile layer
             tileLayer = L.tileLayer(
                 `https://api.gbif.org/v2/map/occurrence/density/{z}/{x}/{y}@1x.png?taxonKey=${taxonKey}&bin=hex&hexPerTile=100&style=classic.point`,
                 {
@@ -528,78 +814,122 @@
             tileLayer.addTo(map);
         }
 
-        // Shuffle array
-        function shuffle(array) {
-            const shuffled = [...array];
-            for (let i = shuffled.length - 1; i > 0; i--) {
-                const j = Math.floor(Math.random() * (i + 1));
-                [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+        // Autocomplete functionality
+        const input = document.getElementById('species-input');
+        const dropdown = document.getElementById('autocomplete-dropdown');
+
+        function filterSpecies(query) {
+            if (!query) return [];
+            const lowerQuery = query.toLowerCase();
+            return speciesData.filter(species => 
+                species.name.toLowerCase().includes(lowerQuery) ||
+                species.commonName.toLowerCase().includes(lowerQuery)
+            );
+        }
+
+        function showAutocomplete(species) {
+            if (species.length === 0) {
+                dropdown.style.display = 'none';
+                return;
             }
-            return shuffled;
+
+            filteredSpecies = species;
+            dropdown.innerHTML = species.map((s, index) => `
+                <div class="autocomplete-item" data-index="${index}">
+                    <strong>${s.commonName}</strong>
+                    <em>${s.name}</em>
+                </div>
+            `).join('');
+            
+            dropdown.style.display = 'block';
+            selectedIndex = -1;
+        }
+
+        input.addEventListener('input', (e) => {
+            const filtered = filterSpecies(e.target.value);
+            showAutocomplete(filtered);
+        });
+
+        input.addEventListener('keydown', (e) => {
+            const items = dropdown.querySelectorAll('.autocomplete-item');
+            
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                selectedIndex = Math.min(selectedIndex + 1, items.length - 1);
+                updateSelection(items);
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                selectedIndex = Math.max(selectedIndex - 1, 0);
+                updateSelection(items);
+            } else if (e.key === 'Enter') {
+                e.preventDefault();
+                if (selectedIndex >= 0 && selectedIndex < filteredSpecies.length) {
+                    selectSpecies(filteredSpecies[selectedIndex]);
+                } else {
+                    submitAnswer();
+                }
+            }
+        });
+
+        function updateSelection(items) {
+            items.forEach((item, index) => {
+                item.classList.toggle('selected', index === selectedIndex);
+            });
+            if (selectedIndex >= 0) {
+                items[selectedIndex].scrollIntoView({ block: 'nearest' });
+            }
+        }
+
+        dropdown.addEventListener('click', (e) => {
+            const item = e.target.closest('.autocomplete-item');
+            if (item) {
+                const index = parseInt(item.dataset.index);
+                selectSpecies(filteredSpecies[index]);
+            }
+        });
+
+        function selectSpecies(species) {
+            input.value = `${species.commonName} (${species.name})`;
+            dropdown.style.display = 'none';
         }
 
+        document.addEventListener('click', (e) => {
+            if (!input.contains(e.target) && !dropdown.contains(e.target)) {
+                dropdown.style.display = 'none';
+            }
+        });
+
         // Start new round
         function startNewRound() {
-            // Pick random species
             currentSpecies = speciesData[Math.floor(Math.random() * speciesData.length)];
             hintsRevealed = 0;
             answered = false;
 
-            // Load map
             loadSpeciesOnMap(currentSpecies.taxonKey);
 
-            // Clear hints
             document.getElementById('hints-display').innerHTML = '';
             document.getElementById('hint-btn').disabled = false;
-
-            // Clear result
             document.getElementById('result-container').innerHTML = '';
-
-            // Generate options (correct + 3 random wrong ones)
-            const options = [currentSpecies];
-            const otherSpecies = speciesData.filter(s => s !== currentSpecies);
-            const shuffledOthers = shuffle(otherSpecies);
-            options.push(...shuffledOthers.slice(0, 3));
-            
-            const shuffledOptions = shuffle(options);
-
-            // Render options
-            const optionsContainer = document.getElementById('species-options');
-            optionsContainer.innerHTML = shuffledOptions.map(species => `
-                <button class="species-btn" data-species="${species.name}">
-                    <strong>${species.commonName}</strong>
-                    <br><em>${species.name}</em>
-                </button>
-            `).join('');
-
-            // Add event listeners
-            document.querySelectorAll('.species-btn').forEach(btn => {
-                btn.addEventListener('click', handleAnswer);
-            });
-
-            // Hide next button
+            document.getElementById('species-input').value = '';
+            document.getElementById('species-input').disabled = false;
+            document.getElementById('submit-btn').disabled = false;
             document.getElementById('next-btn').style.display = 'none';
+
+            input.focus();
         }
 
-        // Handle answer
-        function handleAnswer(e) {
-            if (answered) return;
+        // Submit answer
+        function submitAnswer() {
+            if (answered || !input.value.trim()) return;
             
             answered = true;
-            const selectedSpecies = e.currentTarget.dataset.species;
-            const isCorrect = selectedSpecies === currentSpecies.name;
-
-            // Disable all buttons
-            document.querySelectorAll('.species-btn').forEach(btn => {
-                btn.style.pointerEvents = 'none';
-                if (btn.dataset.species === currentSpecies.name) {
-                    btn.classList.add('correct');
-                } else if (btn.dataset.species === selectedSpecies && !isCorrect) {
-                    btn.classList.add('incorrect');
-                }
-            });
+            const userInput = input.value.toLowerCase();
+            const isCorrect = userInput.includes(currentSpecies.name.toLowerCase()) ||
+                             userInput.includes(currentSpecies.commonName.toLowerCase());
+
+            document.getElementById('species-input').disabled = true;
+            document.getElementById('submit-btn').disabled = true;
 
-            // Update score
             if (isCorrect) {
                 const points = Math.max(3 - hintsRevealed, 1);
                 score += points;
@@ -607,22 +937,26 @@
                 
                 document.getElementById('result-container').innerHTML = `
                     <div class="result-message correct">
-                        ✓ Correct ! +${points} point${points > 1 ? 's' : ''}
+                        ✓ Correct ! C'était bien ${currentSpecies.commonName}<br>
+                        <em>${currentSpecies.name}</em><br>
+                        +${points} point${points > 1 ? 's' : ''}
                     </div>
                 `;
             } else {
                 document.getElementById('result-container').innerHTML = `
                     <div class="result-message incorrect">
-                        ✗ Incorrect ! C'était ${currentSpecies.commonName}
+                        ✗ Incorrect ! C'était ${currentSpecies.commonName}<br>
+                        <em>${currentSpecies.name}</em>
                     </div>
                 `;
             }
 
-            // Show next button
             document.getElementById('next-btn').style.display = 'block';
             document.getElementById('hint-btn').disabled = true;
         }
 
+        document.getElementById('submit-btn').addEventListener('click', submitAnswer);
+
         // Handle hint request
         document.getElementById('hint-btn').addEventListener('click', () => {
             if (hintsRevealed >= currentSpecies.hints.length || answered) return;