body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
max-width: 100%;
margin: 0 auto;
padding: 20px;
background-color: #f5f7fa;
color: #2c3e50;
}
h1, h2, h3 {
color: #3498db;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
max-width: 100%;
margin: 0 auto;
}
.subscription-form {
background-color: #e8f4f8;
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
}
.exercise-container {
display: none;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
.error {
color: #e74c3c;
font-size: 14px;
}
.difficulty-selector {
margin-bottom: 20px;
}
.result {
margin-top: 30px;
padding: 20px;
background-color: #eafaf1;
border-radius: 8px;
display: none;
}
.certificate {
text-align: center;
margin-top: 30px;
padding: 20px;
border: 2px solid #2c3e50;
border-radius: 8px;
display: none;
}
.article-tip {
background-color: #fff3cd;
border-left: 5px solid #ffc107;
padding: 10px;
margin-bottom: 20px;
border-radius: 0 5px 5px 0;
}
.article-tip-title {
font-weight: bold;
margin-bottom: 5px;
}
/* Styles spécifiques pour le jeu de memory */
.memory-game {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
perspective: 1000px;
}
.memory-card {
height: 80px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s;
cursor: pointer;
}
.memory-card.flip {
transform: rotateY(180deg);
}
.memory-card.matched {
transform: rotateY(180deg);
cursor: default;
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
backface-visibility: hidden;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-front {
background-color: #3498db;
color: white;
transform: rotateY(180deg);
}
.card-back {
background-color: #95a5a6;
color: #2c3e50;
transform: rotateY(0deg);
}
/* Styles pour les mots croisés */
.crossword-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.crossword-grid {
display: grid;
grid-template-columns: repeat(15, 30px);
grid-template-rows: repeat(15, 30px);
gap: 1px;
}
.crossword-cell {
width: 30px;
height: 30px;
border: 1px solid #bdc3c7;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: white;
}
.crossword-cell.black {
background-color: #2c3e50;
}
.crossword-cell input {
width: 100%;
height: 100%;
border: none;
text-align: center;
font-size: 16px;
text-transform: uppercase;
}
.crossword-number {
position: absolute;
top: 1px;
left: 1px;
font-size: 10px;
color: #7f8c8d;
}
.crossword-clues {
margin-top: 20px;
display: flex;
justify-content: space-between;
width: 100%;
max-width: 800px;
}
.crossword-clue-section {
width: 48%;
}
.crossword-clue {
margin-bottom: 10px;
cursor: pointer;
}
.crossword-clue:hover {
color: #3498db;
}
/* Styles pour les textes à trous */
.gap-input {
width: 60px;
border: none;
border-bottom: 1px solid #333;
font-size: 16px;
text-align: center;
margin: 0 3px;
}
.exercise-text {
line-height: 2;
font-size: 18px;
}
/* Styles pour le certificat */
#certificatePreview {
position: relative;
width: 100%;
max-width: 800px;
height: 450px;
background-color: #fff;
border: 10px solid transparent;
border-image: linear-gradient(45deg, #3498db, #2980b9, #1abc9c, #16a085) 1;
box-sizing: border-box;
overflow: hidden;
margin: 0 auto;
}
.certificate-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.07;
z-index: 0;
background-position: center;
background-repeat: no-repeat;
background-size: 70%;
}
.certificate-content {
position: relative;
z-index: 1;
padding: 20px;
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.certificate-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.certificate-title {
flex-grow: 1;
text-align: center;
}
.certificate-logo {
width: 120px;
height: 60px;
}
.certificate-footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.certificate-qr {
width: 120px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
}
.certificate-qr img {
max-width: 100%;
max-height: 100%;
}
.certificate-signature {
flex-grow: 1;
text-align: center;
}
Les Articles en Français : Exercices Interactifs
Inscrivez-vous pour commencer les exercices
Pour accéder aux exercices interactifs, veuillez vous inscrire ci-dessous.
Exercices sur les articles en français
Articles définis : le, la, l’, les
Articles indéfinis : un, une, des
Articles partitifs : du, de la, de l’
Articles contractés : au (à + le), aux (à + les), du (de + le), des (de + les)
Choisissez le niveau de difficulté :
Facile – Jeu de Memory
Moyen – Mots Croisés
Difficile – Textes à Trous
Niveau Facile : Jeu de Memory
Associez chaque article à son utilisation correcte. Cliquez sur deux cartes pour les retourner.
Niveau Moyen : Mots Croisés des Articles
Complétez les mots croisés en trouvant l’article correct pour chaque définition.
Horizontal
Vertical
Niveau Difficile : Textes à Trous
Complétez le texte suivant avec les articles appropriés.
Les Articles en Français et Leurs Nuances
maîtrise articles français représente défi pour apprenants étrangers. Contrairement à anglais qui utilise peu articles, français exige précision lexicale particulière.
Dans conversation courante, on distingue différents types d’articles. Par exemple, pour demander pain chez boulanger, on utilise article partitif. Si l’on se réfère à baguette spécifique en vitrine, on emploie article défini.
En voyage, on remarque différences d’usage entre pays francophones. Québécois ont parfois expressions qui surprennent Français. Pour aller magasins ou cinéma, on utilise articles contractés.
Après négation, articles indéfinis et partitifs deviennent généralement “de”. Par exemple : “Je n’ai pas de temps” au lieu de “J’ai du temps”.
Résultat
Certificat de Réussite
Exercices sur les Articles en Français
Ce certificat atteste que
a complété avec succès l’exercice sur les articles en français
Score: / 100
Niveau:
Date:
// Variables globales
let currentDifficulty = ‘facile’;
let userInfo = {
prenom: ”,
nom: ”,
email: ”
};
// Logo ArticleSage en SVG
const articleSage_logo_svg = `
`;
// Attente que le DOM soit chargé
document.addEventListener(‘DOMContentLoaded’, function() {
// Éléments du DOM
const startButton = document.getElementById(‘startButton’);
const changeDifficultyButton = document.getElementById(‘changeDifficultyButton’);
const difficultySelect = document.getElementById(‘difficultySelect’);
const generatePdfButton = document.getElementById(‘generatePdfButton’);
// Définir l’arrière-plan du certificat
const certificateBackground = document.querySelector(‘.certificate-background’);
certificateBackground.style.backgroundImage = `url(‘data:image/svg+xml;base64,${btoa(articleSage_logo_svg)}’)`;
// Ajouter les logos SVG
const headerLogo = document.getElementById(‘certificateHeaderLogo’);
const footerLogo = document.getElementById(‘certificateFooterLogo’);
headerLogo.innerHTML = articleSage_logo_svg;
footerLogo.innerHTML = articleSage_logo_svg;
// Ajout des écouteurs d’événements
startButton.addEventListener(‘click’, startExercise);
changeDifficultyButton.addEventListener(‘click’, changeDifficulty);
generatePdfButton.addEventListener(‘click’, generatePdf);
document.getElementById(‘checkGapsButton’).addEventListener(‘click’, checkGapAnswers);
document.getElementById(‘checkCrosswordButton’).addEventListener(‘click’, checkCrosswordAnswers);
document.getElementById(‘finishMemoryButton’).addEventListener(‘click’, finishMemoryGame);
// Initialisation des cartes Memory
const memoryPairs = [
{ id: 1, front: “le”, back: “Article défini masculin singulier” },
{ id: 2, front: “la”, back: “Article défini féminin singulier” },
{ id: 3, front: “l'”, back: “Article défini (devant une voyelle)” },
{ id: 4, front: “les”, back: “Article défini pluriel” },
{ id: 5, front: “un”, back: “Article indéfini masculin singulier” },
{ id: 6, front: “une”, back: “Article indéfini féminin singulier” },
{ id: 7, front: “des”, back: “Article indéfini pluriel” },
{ id: 8, front: “du”, back: “Article partitif masculin singulier” },
{ id: 9, front: “de la”, back: “Article partitif féminin singulier” },
{ id: 10, front: “de l'”, back: “Article partitif (devant une voyelle)” },
{ id: 11, front: “au”, back: “Article contracté (à + le)” },
{ id: 12, front: “aux”, back: “Article contracté (à + les)” },
];
// Données des mots croisés corrigées
const crosswordData = {
grid: [
[”, ”, ”, ‘D’, ‘E’, ‘L’, ‘A’, ”, ”, ”, ”, ”, ”, ”, ”],
[”, ”, ”, ‘E’, ”, ‘E’, ”, ”, ”, ”, ”, ”, ”, ”, ”],
[”, ”, ”, ‘S’, ”, ‘S’, ”, ”, ”, ”, ”, ”, ”, ”, ”],
[”, ‘A’, ‘U’, ‘X’, ”, ”, ”, ”, ”, ‘L’, ”, ”, ”, ”, ”],
[”, ”, ”, ”, ”, ”, ”, ”, ”, ‘A’, ”, ”, ”, ”, ”],
[”, ”, ”, ”, ”, ”, ”, ‘U’, ‘N’, ‘E’, ”, ”, ”, ”, ”],
[‘D’, ‘E’, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”],
[‘E’, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”],
[‘L’, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”],
[”, ”, ”, ”, ‘D’, ‘U’, ”, ”, ‘D’, ‘E’, ‘S’, ”, ”, ”, ”],
[”, ”, ”, ”, ”, ‘N’, ”, ”, ”, ”, ”, ”, ”, ”, ”],
[”, ”, ”, ‘A’, ‘U’, ”, ”, ”, ‘L’, ‘E’, ”, ”, ”, ”, ”],
[”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”],
[”, ‘L’, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”],
[”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”, ”],
],
clues: {
horizontal: [
{ num: 1, row: 0, col: 3, clue: “Article partitif féminin singulier” }, // DELA
{ num: 2, row: 3, col: 1, clue: “Article contracté (à + les)” }, // AUX
{ num: 3, row: 5, col: 7, clue: “Article indéfini féminin singulier” }, // UNE
{ num: 4, row: 6, col: 0, clue: “Article utilisé après négation ou expression de quantité” }, // DE
{ num: 5, row: 9, col: 4, clue: “Article partitif masculin singulier” }, // DU
{ num: 6, row: 9, col: 8, clue: “Article indéfini ou contracté pluriel” }, // DES
{ num: 7, row: 11, col: 3, clue: “Article contracté (à + le)” }, // AU
{ num: 8, row: 11, col: 8, clue: “Article défini masculin singulier” } // LE
],
vertical: [
{ num: 9, row: 0, col: 3, clue: “Article contracté (de + les)” }, // DES
{ num: 10, row: 0, col: 5, clue: “Article défini pluriel” }, // LES
{ num: 11, row: 3, col: 9, clue: “Article défini féminin singulier” }, // LA
{ num: 12, row: 9, col: 5, clue: “Article indéfini masculin singulier” }, // UN
{ num: 13, row: 13, col: 1, clue: “Article défini (devant une voyelle)” }, // L
{ num: 14, row: 6, col: 0, clue: “Article après négation (trois lettres)” } // DEL – ajout de l’indice manquant
]
}
};
// Fonction pour créer le jeu Memory
function createMemoryGame() {
const memoryGameContainer = document.getElementById(‘memoryGame’);
memoryGameContainer.innerHTML = ”;
// Doubler le tableau pour avoir des paires et mélanger
const cards = […memoryPairs, …memoryPairs].map((card, index) => {
return { …card, uniqueId: index };
});
shuffleArray(cards);
// Créer les cartes dans le DOM
cards.forEach(card => {
const memoryCard = document.createElement(‘div’);
memoryCard.className = ‘memory-card’;
memoryCard.dataset.id = card.id;
memoryCard.dataset.uniqueId = card.uniqueId;
const frontFace = document.createElement(‘div’);
frontFace.className = ‘card-face card-front’;
frontFace.textContent = card.front;
const backFace = document.createElement(‘div’);
backFace.className = ‘card-face card-back’;
backFace.textContent = ‘?’;
memoryCard.appendChild(frontFace);
memoryCard.appendChild(backFace);
memoryCard.addEventListener(‘click’, flipCard);
memoryGameContainer.appendChild(memoryCard);
});
}
// Variables pour le jeu Memory
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
let matchedPairs = 0;
let memoryMoves = 0;
// Fonction pour retourner une carte
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
if (this.classList.contains(‘matched’)) return;
this.classList.add(‘flip’);
memoryMoves++;
if (!hasFlippedCard) {
// Premier clic
hasFlippedCard = true;
firstCard = this;
return;
}
// Second clic
secondCard = this;
checkForMatch();
}
// Vérifier si les deux cartes retournées correspondent
function checkForMatch() {
let isMatch = firstCard.dataset.id === secondCard.dataset.id;
if (isMatch) {
disableCards();
matchedPairs++;
// Vérifier si toutes les paires sont trouvées
if (matchedPairs === memoryPairs.length) {
document.getElementById(‘finishMemoryButton’).style.display = ‘block’;
}
} else {
unflipCards();
}
}
// Désactiver les cartes qui correspondent
function disableCards() {
firstCard.classList.add(‘matched’);
secondCard.classList.add(‘matched’);
resetBoard();
}
// Retourner les cartes qui ne correspondent pas
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove(‘flip’);
secondCard.classList.remove(‘flip’);
resetBoard();
}, 1000);
}
// Réinitialiser le plateau
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
// Fonction pour terminer le jeu Memory et calculer le score
function finishMemoryGame() {
// Calculer le score basé sur le nombre de mouvements
// Pour un jeu parfait: 24 mouvements (12 paires)
const perfectScore = memoryPairs.length * 2;
let score = Math.max(0, Math.round(100 – ((memoryMoves – perfectScore) * 2)));
displayResults(score);
}
// Fonction pour créer la grille de mots croisés
function createCrossword() {
const grid = crosswordData.grid;
const gridContainer = document.getElementById(‘crosswordGrid’);
gridContainer.innerHTML = ”;
// Créer les cellules de la grille
for (let row = 0; row < grid.length; row++) {
for (let col = 0; col {
const clueElement = document.createElement(‘div’);
clueElement.className = ‘crossword-clue’;
clueElement.textContent = `${clue.num}. ${clue.clue}`;
clueElement.addEventListener(‘click’, () => highlightClue(clue, ‘horizontal’));
horizontalClues.appendChild(clueElement);
});
crosswordData.clues.vertical.forEach(clue => {
const clueElement = document.createElement(‘div’);
clueElement.className = ‘crossword-clue’;
clueElement.textContent = `${clue.num}. ${clue.clue}`;
clueElement.addEventListener(‘click’, () => highlightClue(clue, ‘vertical’));
verticalClues.appendChild(clueElement);
});
}
// Fonction pour mettre en évidence un indice sélectionné
function highlightClue(clue, direction) {
// Réinitialiser tous les styles de surbrillance
const allInputs = document.querySelectorAll(‘.crossword-cell input’);
allInputs.forEach(input => {
input.style.backgroundColor = ”;
});
// Mettre en évidence les cellules de l’indice sélectionné
if (direction === ‘horizontal’) {
for (let col = clue.col; col < crosswordData.grid[clue.row].length; col++) {
if (crosswordData.grid[clue.row][col] === '') break;
const input = document.querySelector(`input[data-row="${clue.row}"][data-col="${col}"]`);
if (input) {
input.style.backgroundColor = '#e8f4f8';
input.focus();
}
}
} else {
for (let row = clue.row; row {
totalAnswers++;
if (input.value.toUpperCase() === input.dataset.answer.toUpperCase()) {
correctAnswers++;
input.style.color = ‘#2ecc71’;
} else {
input.style.color = ‘#e74c3c’;
}
});
const score = Math.round((correctAnswers / totalAnswers) * 100);
displayResults(score);
}
// Fonction pour vérifier les réponses du texte à trous
function checkGapAnswers() {
const gapInputs = document.querySelectorAll(‘.gap-input’);
let correctAnswers = 0;
let totalAnswers = gapInputs.length;
gapInputs.forEach(input => {
if (input.value.trim().toLowerCase() === input.dataset.answer.toLowerCase()) {
correctAnswers++;
input.style.color = ‘#2ecc71’;
input.style.borderBottomColor = ‘#2ecc71’;
} else {
input.style.color = ‘#e74c3c’;
input.style.borderBottomColor = ‘#e74c3c’;
}
});
const score = Math.round((correctAnswers / totalAnswers) * 100);
displayResults(score);
}
// Fonction pour afficher les résultats
function displayResults(score) {
const resultContainer = document.getElementById(‘resultContainer’);
const scoreDisplay = document.getElementById(‘scoreDisplay’);
scoreDisplay.textContent = `Votre score est de ${score}/100.`;
// Afficher le résultat
resultContainer.style.display = ‘block’;
// Mettre à jour la prévisualisation du certificat
document.getElementById(‘certificateNamePreview’).textContent = `${userInfo.prenom} ${userInfo.nom}`;
document.getElementById(‘certificateScorePreview’).textContent = score;
document.getElementById(‘certificateLevelPreview’).textContent = getDifficultyName(currentDifficulty);
document.getElementById(‘certificateDatePreview’).textContent = new Date().toLocaleDateString();
// Créer QR code pour le certificat
const qrCodeContainer = document.getElementById(‘qrCodeContainer’);
qrCodeContainer.innerHTML = ‘Aplenguas’;
const qr = qrcode(4, ‘L’);
qr.addData(`ArticleSage: ${userInfo.prenom} ${userInfo.nom} – Score: ${score}/100 – ${new Date().toLocaleDateString()}`);
qr.make();
qrCodeContainer.innerHTML = qr.createImgTag(4);
// Afficher le certificat
document.getElementById(‘certificatePreview’).style.display = ‘block’;
}
function generatePdf() {
const { jsPDF } = window.jspdf;
const pdf = new jsPDF(‘landscape’, ‘mm’, ‘a4’);
// Obtenir les données du certificat
const userName = `${userInfo.prenom} ${userInfo.nom}`;
const score = document.getElementById(‘certificateScorePreview’).textContent;
const level = document.getElementById(‘certificateLevelPreview’).textContent;
const date = document.getElementById(‘certificateDatePreview’).textContent;
// Ajouter l’arrière-plan
pdf.setFillColor(255, 255, 255);
pdf.rect(0, 0, 297, 210, ‘F’);
// Ajouter une bordure
pdf.setDrawColor(52, 152, 219);
pdf.setLineWidth(5);
pdf.rect(10, 10, 277, 190);
// Ajouter le titre
pdf.setFontSize(30);
pdf.setTextColor(52, 152, 219);
pdf.text(‘Certificat de Réussite’, 148.5, 40, { align: ‘center’ });
pdf.setFontSize(20);
pdf.text(‘Exercices sur les Articles en Français’, 148.5, 50, { align: ‘center’ });
// Ajouter le contenu
pdf.setFontSize(12);
pdf.setTextColor(44, 62, 80);
pdf.text(‘Ce certificat atteste que’, 148.5, 70, { align: ‘center’ });
pdf.setFontSize(20);
pdf.setTextColor(52, 152, 219);
pdf.text(userName, 148.5, 85, { align: ‘center’ });
pdf.setFontSize(12);
pdf.setTextColor(44, 62, 80);
pdf.text(‘a complété avec succès l’exercice sur les articles en français’, 148.5, 100, { align: ‘center’ });
pdf.text(`Score: ${score} / 100`, 148.5, 115, { align: ‘center’ });
pdf.text(`Niveau: ${level}`, 148.5, 125, { align: ‘center’ });
pdf.text(`Date: ${date}`, 148.5, 135, { align: ‘center’ });
// Logo simple pour remplacer le SVG
pdf.setDrawColor(52, 152, 219);
pdf.setFillColor(52, 152, 219);
pdf.rect(30, 30, 40, 20, ‘F’);
pdf.setTextColor(255, 255, 255);
pdf.setFontSize(10);
pdf.text(‘Aplenguas’, 50, 40, { align: ‘center’ });
// Logo en bas à droite
pdf.setFillColor(52, 152, 219);
pdf.rect(227, 170, 40, 20, ‘F’);
pdf.setTextColor(255, 255, 255);
pdf.text(‘Aplenguas’, 247, 180, { align: ‘center’ });
// Ajouter un QR code simple (un carré noir)
pdf.setFillColor(0, 0, 0);
pdf.rect(30, 150, 40, 40, ‘F’);
// Ajouter la signature
pdf.setDrawColor(0, 0, 0);
pdf.setLineWidth(0.5);
pdf.line(148.5 – 40, 170, 148.5 + 40, 170);
pdf.setTextColor(44, 62, 80);
pdf.text(‘Signature du Professeur’, 148.5, 180, { align: ‘center’ });
// Télécharger le PDF
pdf.save(`certificat_articles_francais_${userInfo.prenom}_${userInfo.nom}.pdf`);
}
// Fonction pour démarrer l’exercice
function startExercise() {
// Valider le formulaire
const prenom = document.getElementById(‘prenom’).value.trim();
const nom = document.getElementById(‘nom’).value.trim();
const email = document.getElementById(‘email’).value.trim();
const subscribe = document.getElementById(‘subscribe’).checked;
// Réinitialiser les erreurs
document.getElementById(‘prenomError’).textContent = ”;
document.getElementById(‘nomError’).textContent = ”;
document.getElementById(‘emailError’).textContent = ”;
document.getElementById(‘subscribeError’).textContent = ”;
// Valider les champs
let isValid = true;
if (!prenom) {
document.getElementById(‘prenomError’).textContent = ‘Veuillez entrer votre prénom’;
isValid = false;
}
if (!nom) {
document.getElementById(‘nomError’).textContent = ‘Veuillez entrer votre nom’;
isValid = false;
}
if (!email) {
document.getElementById(‘emailError’).textContent = ‘Veuillez entrer votre email’;
isValid = false;
} else if (!isValidEmail(email)) {
document.getElementById(‘emailError’).textContent = ‘Veuillez entrer un email valide’;
isValid = false;
}
if (!subscribe) {
document.getElementById(‘subscribeError’).textContent = ‘Veuillez cocher cette case pour continuer’;
isValid = false;
}
if (!isValid) {
return;
}
// Enregistrer les informations de l’utilisateur
userInfo.prenom = prenom;
userInfo.nom = nom;
userInfo.email = email;
// Afficher les exercices
document.getElementById(‘subscriptionForm’).style.display = ‘none’;
document.getElementById(‘exerciseContainer’).style.display = ‘block’;
// Initialiser le niveau de difficulté actuel
currentDifficulty = document.getElementById(‘difficultySelect’).value;
showExerciseLevel(currentDifficulty);
}
// Fonction pour changer la difficulté
function changeDifficulty() {
const newDifficulty = document.getElementById(‘difficultySelect’).value;
currentDifficulty = newDifficulty;
showExerciseLevel(currentDifficulty);
}
// Fonction pour afficher le niveau d’exercice sélectionné
function showExerciseLevel(level) {
// Cacher tous les niveaux
document.querySelectorAll(‘.exercise-level’).forEach(el => {
el.style.display = ‘none’;
});
// Afficher le niveau sélectionné
document.getElementById(‘exercise’ + capitalizeFirstLetter(level)).style.display = ‘block’;
// Cacher le résultat et le certificat
document.getElementById(‘resultContainer’).style.display = ‘none’;
document.getElementById(‘certificatePreview’).style.display = ‘none’;
// Initialiser l’exercice selon le niveau
if (level === ‘facile’) {
createMemoryGame();
document.getElementById(‘finishMemoryButton’).style.display = ‘none’;
matchedPairs = 0;
memoryMoves = 0;
} else if (level === ‘moyen’) {
createCrossword();
} else if (level === ‘difficile’) {
// Réinitialiser le texte à trous
document.querySelectorAll(‘.gap-input’).forEach(input => {
input.value = ”;
input.style.color = ”;
input.style.borderBottomColor = ”;
});
}
}
// Utilitaires
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function isValidEmail(email) {
const re = /^[^s@]+@[^s@]+.[^s@]+$/;
return re.test(email);
}
function shuffleArray(array) {
for (let i = array.length – 1; i > 0; i–) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function getDifficultyName(difficulty) {
switch (difficulty) {
case ‘facile’: return ‘Facile – Jeu de Memory’;
case ‘moyen’: return ‘Moyen – Mots Croisés’;
case ‘difficile’: return ‘Difficile – Textes à Trous’;
default: return difficulty;
}
}
});