body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
max-width: 100%;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
h1, h2, h3 {
color: #2c3e50;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.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;
}
.exercise-text {
line-height: 2;
font-size: 18px;
}
.gap {
border-bottom: 1px solid #333;
padding: 0 5px;
margin: 0 3px;
min-width: 50px;
display: inline-block;
}
input.gap-input {
width: 100px;
border: none;
border-bottom: 1px solid #333;
font-size: 16px;
text-align: center;
}
.base-adjective {
color: #666;
font-size: 14px;
font-style: italic;
margin-left: 2px;
}
.result {
margin-top: 30px;
padding: 20px;
background-color: #eafaf1;
border-radius: 8px;
display: none;
}
.badge {
text-align: center;
margin-top: 30px;
padding: 20px;
display: none;
}
.difficulty-selector {
margin-bottom: 20px;
}
.error {
color: red;
font-size: 14px;
}
#badgePreview {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.badge-outer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(45deg, #3498db, #2980b9, #1abc9c, #16a085);
display: flex;
justify-content: center;
align-items: center;
}
.badge-inner {
width: 90%;
height: 90%;
border-radius: 50%;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px;
box-sizing: border-box;
}
.badge-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
color: #2c3e50;
}
.badge-name {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
color: #3498db;
}
.badge-info {
font-size: 14px;
margin-bottom: 5px;
text-align: center;
}
.badge-icon {
margin-bottom: 10px;
width: 60px;
height: 60px;
}
.rules-section {
background-color: #f0f8ff;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
border-left: 4px solid #3498db;
}
.rules-section h3 {
margin-top: 0;
color: #3498db;
}
.rules-section ul {
padding-left: 20px;
}
.rules-toggle {
margin-bottom: 15px;
text-decoration: underline;
color: #3498db;
cursor: pointer;
}
.hint-button {
background-color: #f39c12;
color: white;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
margin-left: 10px;
vertical-align: middle;
}
.hint-button:hover {
background-color: #e67e22;
}
Exercice de Grammaire: Les Adjectifs Qualificatifs
Inscrivez-vous pour commencer l’exercice
Veuillez vous abonner et remplir vos informations pour accéder à l’exercice.
Complétez les phrases avec l’adjectif qualificatif correctement accordé
Règles d’accord des adjectifs qualificatifs
- L’adjectif s’accorde en genre (masculin/féminin) et en nombre (singulier/pluriel) avec le nom qu’il qualifie.
- Féminin : généralement formé en ajoutant un “e” (grand → grande).
- Pluriel : généralement formé en ajoutant un “s” (petit → petits).
- Certains adjectifs ont des formes particulières au féminin :
- -er → -ère (premier → première)
- -eux → -euse (heureux → heureuse)
- -f → -ve (neuf → neuve)
- -c → -che ou -que (blanc → blanche, public → publique)
- Certains adjectifs sont invariables : orange, marron, standard, etc.
Choisissez le niveau de difficulté:
Facile
Moyen
Difficile
Les Adjectifs Qualificatifs (Niveau Facile)
La maison est très jolie. Les fleurs sont magnifiques dans le jardin. Ce garçon est et fort. Cette fille est mais courageuse. Les chiens sont avec les enfants. La voiture est garée devant le magasin. Le chat dort sur le canapé. Les chaussures sont dans la boîte. Cette histoire est et passionnante. Le livre appartient à mon grand-père. La table est au centre de la pièce. Les fruits sont délicieux en été. Sa robe lui va très bien. Les enfants sont de partir en vacances. La chambre est et bien rangée. Des nuages couvrent le ciel aujourd’hui. Cette femme est et travailleuse. Les dessins sont et colorés. Un vent souffle dehors. Cette musique est et relaxante. Les exercices sont à comprendre. La route traverse la forêt. Ce film est pour toute la famille. Les montagnes sont couvertes de neige. Cette soupe est et savoureuse.
Les Adjectifs Qualificatifs (Niveau Moyen)
Les vacances sont toujours agréables. Ce problème est difficile à résoudre. Les discussions se poursuivent à l’ONU. La robe lui donne un air printanier. Son attitude déplaît à ses collègues. Les informations sont inquiétantes. Ce sportif s’entraîne tous les jours. Cette réponse est et peu claire. Les résultats seront publiés demain. Une solution a été proposée. Ces idées ont transformé l’entreprise. Un débat est organisé ce soir. Les chevaux galopent dans le pré. Cette réforme est contestée. Les eaux de la Méditerranée sont magnifiques. Un silence régnait dans la salle. Des paroles apaisent souvent les tensions. Cette situation est pour tous. Les villes attirent de nombreux touristes. Un sourire illuminait son visage. Ces questions sont pour notre avenir. La politique du pays a changé. Ce jardin abrite des espèces rares. Les conditions se dégradent. Une équipe travaille efficacement.
Les Adjectifs Qualificatifs (Niveau Difficile)
Les analyses montrent des tendances intéressantes. Cette approche permet une meilleure compréhension des phénomènes. Des recherches ont été menées sur le sujet. Une crise touche de nombreux jeunes adultes. Les débats sont parfois houleux. Une démarche a été privilégiée. Les preuves ont convaincu le jury. Ce témoignage a changé le cours du procès. Les conséquences sont préoccupantes. Une situation s’est développée dans l’administration. Ces idées ont transformé notre perception. Un silence a suivi sa déclaration. Les mesures sont insuffisantes. Cette théorie est difficile à vulgariser. Les relations sont essentielles pour l’Europe. Un projet a été présenté hier. Des questions se posent aujourd’hui. Cette approche est et prometteuse. Les perspectives sont encourageantes. Un discours est attendu ce soir. Ces archives contiennent des documents précieux. La connaissance diffère du savoir théorique. Ce phénomène intrigue les scientifiques. Les implications de cette découverte sont profondes. Une expérience a changé sa vision du monde.
Résultat
// Variables globales
let currentDifficulty = ‘facile’;
let userInfo = {
prenom: ”,
nom: ”,
email: ”
};
// 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 checkButton = document.getElementById(‘checkButton’);
const generateBadgeButton = document.getElementById(‘generateBadgeButton’);
const difficultySelect = document.getElementById(‘difficultySelect’);
const rulesToggle = document.getElementById(‘rulesToggle’);
const rulesSection = document.getElementById(‘rulesSection’);
// Ajout des écouteurs d’événements
startButton.addEventListener(‘click’, startExercise);
changeDifficultyButton.addEventListener(‘click’, changeDifficulty);
checkButton.addEventListener(‘click’, checkAnswers);
generateBadgeButton.addEventListener(‘click’, generateBadge);
rulesToggle.addEventListener(‘click’, toggleRules);
// Fonction pour basculer l’affichage des règles
function toggleRules() {
if (rulesSection.style.display === ‘none’) {
rulesSection.style.display = ‘block’;
rulesToggle.textContent = ‘Masquer les règles d’accord des adjectifs’;
} else {
rulesSection.style.display = ‘none’;
rulesToggle.textContent = ‘Afficher les règles d’accord des adjectifs’;
}
}
// Fonction pour démarrer l’exercice
function startExercise() {
// Validation des champs
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éinitialisation des messages d’erreur
document.getElementById(‘prenomError’).textContent = ”;
document.getElementById(‘nomError’).textContent = ”;
document.getElementById(‘emailError’).textContent = ”;
document.getElementById(‘subscribeError’).textContent = ”;
let isValid = true;
// Vérification des champs
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 (!validateEmail(email)) {
document.getElementById(‘emailError’).textContent = ‘Veuillez entrer un email valide.’;
isValid = false;
}
if (!subscribe) {
document.getElementById(‘subscribeError’).textContent = ‘Veuillez cocher cette case pour vous abonner.’;
isValid = false;
}
// Si tous les champs sont valides, afficher l’exercice
if (isValid) {
userInfo.prenom = prenom;
userInfo.nom = nom;
userInfo.email = email;
// Cacher le formulaire d’inscription et afficher l’exercice
document.getElementById(‘subscriptionForm’).style.display = ‘none’;
document.getElementById(‘exerciseContainer’).style.display = ‘block’;
// Afficher l’exercice correspondant à la difficulté sélectionnée
showExerciseLevel(currentDifficulty);
}
}
// Fonction pour valider le format de l’email
function validateEmail(email) {
const re = /^[^s@]+@[^s@]+.[^s@]+$/;
return re.test(email);
}
// Fonction pour changer la difficulté de l’exercice
function changeDifficulty() {
const newDifficulty = difficultySelect.value;
showExerciseLevel(newDifficulty);
currentDifficulty = newDifficulty;
}
// Fonction pour afficher l’exercice selon le niveau de difficulté
function showExerciseLevel(level) {
document.getElementById(‘exerciseFacile’).style.display = ‘none’;
document.getElementById(‘exerciseMoyen’).style.display = ‘none’;
document.getElementById(‘exerciseDifficile’).style.display = ‘none’;
document.getElementById(‘exercise’ + level.charAt(0).toUpperCase() + level.slice(1)).style.display = ‘block’;
}
// Ajouter des indices aux champs de saisie
const allGapInputs = document.querySelectorAll(‘.gap-input’);
allGapInputs.forEach(input => {
// Ajouter un bouton d’indice à côté de chaque champ
const hintButton = document.createElement(‘span’);
hintButton.className = ‘hint-button’;
hintButton.textContent = ‘?’;
hintButton.title = ‘Afficher un indice’;
hintButton.onclick = function(e) {
e.stopPropagation();
alert(`Indice: L’adjectif “${input.dataset.base}” doit être accordé en ${input.dataset.hint}.`);
};
input.insertAdjacentElement(‘afterend’, hintButton);
// Ajouter un petit texte pour montrer l’adjectif de base
const baseAdjective = document.createElement(‘span’);
baseAdjective.className = ‘base-adjective’;
baseAdjective.textContent = `(${input.dataset.base})`;
input.insertAdjacentElement(‘afterend’, baseAdjective);
});
// Fonction pour vérifier les réponses
function checkAnswers() {
const resultContainer = document.getElementById(‘resultContainer’);
const scoreDisplay = document.getElementById(‘scoreDisplay’);
const correctionDisplay = document.getElementById(‘correctionDisplay’);
let correctAnswers = 0;
let totalQuestions = 0;
let correctionHtml = ”;
// Récupérer tous les champs de l’exercice actuel
const currentExercise = document.getElementById(‘exercise’ + currentDifficulty.charAt(0).toUpperCase() + currentDifficulty.slice(1));
const inputFields = currentExercise.querySelectorAll(‘.gap-input’);
// Vérifier chaque réponse
inputFields.forEach(input => {
const userAnswer = input.value.trim().toLowerCase();
const correctAnswer = input.dataset.answer.toLowerCase();
totalQuestions++;
if (userAnswer === correctAnswer) {
correctAnswers++;
input.style.color = ‘green’;
correctionHtml += `
Question ${input.dataset.number}: Correct! (${userAnswer})
`;
} else {
input.style.color = ‘red’;
correctionHtml += `
Question ${input.dataset.number}: Incorrect. Vous avez écrit “${userAnswer || ‘(pas de réponse)’}”, la réponse correcte est “${correctAnswer}”.
`;
}
});
// Calculer le score
const score = Math.round((correctAnswers / totalQuestions) * 100);
// Afficher le résultat
scoreDisplay.innerHTML = `Vous avez obtenu ${score}% (${correctAnswers} sur ${totalQuestions})`;
correctionDisplay.innerHTML = correctionHtml;
// Afficher la section de résultat
resultContainer.style.display = ‘block’;
// Mettre à jour les informations du badge
document.getElementById(‘badgeNamePreview’).textContent = `${userInfo.prenom} ${userInfo.nom}`;
document.getElementById(‘badgeLevelPreview’).textContent = currentDifficulty;
document.getElementById(‘badgeScorePreview’).textContent = score;
document.getElementById(‘badgeDatePreview’).textContent = new Date().toLocaleDateString();
}
// Fonction pour générer le badge
function generateBadge() {
// Afficher le badge
document.getElementById(‘badgePreview’).style.display = ‘block’;
// Faire défiler jusqu’au badge
document.getElementById(‘badgePreview’).scrollIntoView({ behavior: ‘smooth’ });
// Préparer le PDF
setTimeout(() => {
createPDF();
}, 1000);
}
// Fonction pour créer le PDF du badge
function createPDF() {
const { jsPDF } = window.jspdf;
// Créer un nouvel objet PDF
const pdf = new jsPDF(‘p’, ‘mm’, ‘a4’);
// Obtenir le contenu SVG du badge
const badgeElement = document.getElementById(‘badgePreview’);
const badgeOuterHTML = badgeElement.outerHTML;
// Ajouter le titre
pdf.setFontSize(18);
pdf.text(‘Badge de Maîtrise des Adjectifs Qualificatifs’, 105, 20, { align: ‘center’ });
// Ajouter les informations de l’utilisateur
pdf.setFontSize(12);
pdf.text(`Nom: ${userInfo.nom}`, 20, 40);
pdf.text(`Prénom: ${userInfo.prenom}`, 20, 50);
pdf.text(`Email: ${userInfo.email}`, 20, 60);
pdf.text(`Niveau: ${currentDifficulty}`, 20, 70);
pdf.text(`Score: ${document.getElementById(‘badgeScorePreview’).textContent}%`, 20, 80);
pdf.text(`Date: ${document.getElementById(‘badgeDatePreview’).textContent}`, 20, 90);
// Générer un QR code avec un lien factice
const qr = qrcode(4, ‘L’);
qr.addData(`https://exemple.fr/verifier-badge?email=${userInfo.email}&score=${document.getElementById(‘badgeScorePreview’).textContent}`);
qr.make();
// Ajouter le QR code comme une image
const qrCodeDataURL = qr.createDataURL(4);
pdf.addImage(qrCodeDataURL, ‘PNG’, 140, 40, 50, 50);
// Ajouter un texte de félicitations
pdf.setFontSize(14);
pdf.text(‘Félicitations pour avoir complété cet exercice!’, 105, 110, { align: ‘center’ });
// Ajouter un certificat
pdf.setFontSize(22);
pdf.text(‘Certificat de Réussite’, 105, 130, { align: ‘center’ });
pdf.setFontSize(14);
pdf.text(`Ce certificat est décerné à ${userInfo.prenom} ${userInfo.nom}`, 105, 145, { align: ‘center’ });
pdf.text(`pour avoir démontré une excellente maîtrise des adjectifs qualificatifs`, 105, 155, { align: ‘center’ });
pdf.text(`en français au niveau ${currentDifficulty}.`, 105, 165, { align: ‘center’ });
// Ajouter un cadre au certificat
pdf.rect(20, 120, 170, 60);
// Télécharger le PDF
pdf.save(`badge_adjectifs_${userInfo.nom}_${userInfo.prenom}.pdf`);
}
});