<style>
.btn {
background-color: #3498db;
color: white;
padding: 10px 18px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 1em;
transition: background 0.3s ease;
width: 100%;
}
.btn:hover {
background-color: #2980b9;
}
@media (max-width: 600px) {
#game-container {
padding: 15px;
font-size: 16px;
}
.btn {
font-size: 1em;
padding: 12px;
}
}
</style>





<script>
const fullWordList = [
"chien","chat","maison","voiture","arbre","école","pomme","fromage","livre","chaise","porte","fenêtre",
"crayon","stylo","papier","bureau","lampe","téléphone","ordinateur","souris","clavier","camion","bateau",
"montagne","rivière","plage","soleil","lune","étoile","ciel","nuage","pluie","neige","vent","feuille",
"herbe","fleur","jardin","forêt","oiseau","poisson","vache","mouton","cheval","cochon","lapin",
"serpent","grenouille","tigre","lion","zèbre","éléphant","giraffe","singe","ours","abeille","araignée",
"fourmi","escargot","poule","canard","chaton","chiot","frère","fille","mère","père","oncle","tante",
"cousin","voisin","ami","professeur","docteur","policier","pompier","cuisinier","serveur","vendeur",
"client","ville","village","quartier","rue","route","pont","église","hôpital","banque","magasin",
"supermarché","université","restaurant","hôtel","cinéma","théâtre","parc","musée","gare","table","lit","oreiller","couverture","télévision","radio","horloge","miroir","tapis","rideau","sac","valise","chaussure","botte","chapeau","gant","écharpe","veste","pantalon","robe","jupe","chemise","cravate","ceinture","bijou","montre","lunettes","parapluie","clé","serrure","boîte","bouteille","verre","tasse","assiette","couteau","fourchette","cuillère","poêle","casserole","frigo","four","machine"
];

let gameWords = [];
let level = 1;
let round = 1;
let score = 0;
let correctAnswers = 0;
let currentNumbers = [];

function shuffleArray(arr) {
let copy = [...arr];
for (let i = copy.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[copy[i], copy[j]] = [copy[j], copy[i]];
}
return copy;
}

function updateStats() {
document.getElementById('level').innerText = `Level: ${level}`;
document.getElementById('score').innerText = `Score: ${score}`;
document.getElementById('round').innerText = `Round: ${round} / 5`;
document.getElementById('highscore').innerText = `🏆 High Score: ${localStorage.getItem("frenchHighScore") || 0}`;
}

function displayWords() {
document.getElementById('feedback').innerText = '';
gameWords = shuffleArray(fullWordList).slice(0, 10);
const list = gameWords.map((w, i) => `${i + 1}. ${w}`).join('
');
document.getElementById('word-list').innerHTML = list;
document.getElementById('word-list').style.display = 'block';
document.getElementById('answer').style.display = 'none';
document.getElementById('submit').style.display = 'none';
document.getElementById('question').style.display = 'none';
document.getElementById('startBtn').style.display = 'none';

let timeLeft = 30;
document.getElementById('timer').innerText = `⏱ Time left: ${timeLeft}s`;

const timer = setInterval(() => {
timeLeft--;
document.getElementById('timer').innerText = `⏱ Time left: ${timeLeft}s`;
if (timeLeft <= 0) {
clearInterval(timer);
askQuestion();
}
}, 1000);
}

function askQuestion() {
document.getElementById('word-list').style.display = 'none';
const count = level;
currentNumbers = [];
while (currentNumbers.length < count) {
const n = Math.floor(Math.random() * 10) + 1;
if (!currentNumbers.includes(n)) currentNumbers.push(n);
}
document.getElementById('question').innerText = `🤔 What word(s) were at position(s): ${currentNumbers.join(', ')}?`;
document.getElementById('question').style.display = 'block';
document.getElementById('answer').value = '';
document.getElementById('answer').style.display = 'block';
document.getElementById('submit').style.display = 'inline';
}

function checkAnswer() {
const input = document.getElementById('answer').value.trim().toLowerCase().split(/\s+/);
const correct = currentNumbers.every((num, i) => input[i] === gameWords[num - 1].toLowerCase());

if (correct) {
score += level * 10;
correctAnswers++;
document.getElementById('feedback').style.color = 'green';
document.getElementById('feedback').innerText = "✅ Correct!";
document.getElementById('correctSound').play();
} else {
document.getElementById('feedback').style.color = 'red';
const correctWords = currentNumbers.map(n => gameWords[n - 1]).join(', ');
document.getElementById('feedback').innerText = `❌ Incorrect. Correct answer: ${correctWords}`;
document.getElementById('wrongSound').play();
}

// Update high score
if (score > (parseInt(localStorage.getItem("frenchHighScore")) || 0)) {
localStorage.setItem("frenchHighScore", score);
}

round++;
updateStats();

if (round > 5) {
if (correctAnswers >= 3) {
level++;
round = 1;
correctAnswers = 0;
document.getElementById('startBtn').style.display = 'block';
document.getElementById('feedback').innerText += " 🎉 Level up!";
} else {
document.getElementById('feedback').innerText += " 💥 Game Over. Try again!";
resetGame();
}
} else {
setTimeout(displayWords, 2000);
}
}

function startGame() {
updateStats();
displayWords();
}

function resetGame() {
level = 1;
round = 1;
score = 0;
correctAnswers = 0;
document.getElementById('startBtn').innerText = "🔁 Restart Game";
document.getElementById('startBtn').style.display = 'block';
updateStats();
}

startGame();
</script>

Comment jouer :

1. Vous verrez une liste de 10 mots français numérotés de 1 à 10.





2. Vous avez 30 secondes pour les mémoriser.





3. Ensuite, on vous demandera le mot à une ou plusieurs positions (par exemple : 3 ou 5, 7).





4. Tapez uniquement les mots correspondants dans le bon ordre.





5. N’utilisez pas de virgules entre les mots.
   → Écrivez par exemple : pomme chat (et non pomme, chat)





6. 5 tours par niveau – Vous montez au niveau suivant si vous obtenez au moins 3 bonnes réponses.

Amusez-vous bien !

---

How to Play:

1. You will see a list of 10 French words numbered 1 to 10.





2. You have 30 seconds to memorize them.





3. Then you’ll be asked to recall the word(s) at one or more positions (e.g., 3 or 5, 7).





4. Type only the correct words in the correct order.





5. Do NOT use commas between words.
   → For example: pomme chat (not pomme, chat