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-pronoun {
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;
}
.table-container {
margin: 20px 0;
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 15px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
Exercice de Grammaire: Les Pronoms Personnels Sujets
Inscrivez-vous pour commencer l’exercice
Veuillez vous abonner et remplir vos informations pour accéder à l’exercice.
Complétez les phrases avec le pronom personnel sujet correct
Règles des pronoms personnels sujets en français
| Personne | Singulier | Pluriel |
|---|---|---|
| 1ère personne | je (j’ devant voyelle ou h muet) | nous |
| 2ème personne | tu | vous |
| 3ème personne | il (masculin), elle (féminin), on (indéfini) | ils (masculin/mixte), elles (féminin) |
- Je : Devient “j'” devant une voyelle ou un h muet (j’ai, j’habite).
- Tu : Utilisé dans un contexte familier ou avec des personnes qu’on tutoie.
- Il/Elle : “Il” pour un nom masculin, “elle” pour un nom féminin.
- On : Peut remplacer “nous” dans le langage familier ou désigner un sujet indéfini.
- Nous : Pour la première personne du pluriel.
- Vous : Pour la deuxième personne du pluriel ou comme forme de politesse au singulier.
- Ils/Elles : “Ils” pour un groupe masculin ou mixte, “elles” uniquement pour un groupe entièrement féminin.
Choisissez le niveau de difficulté:
Facile
Moyen
Difficile
Les Pronoms Personnels Sujets (Niveau Facile)
suis étudiant à l’université. aimes le chocolat. habite à Paris. travaille dans un hôpital. allons au cinéma ce soir. parlez bien français. jouent au football le dimanche. dansent très bien. ai un nouveau livre. peut réussir avec du travail. as quel âge ? fait beau aujourd’hui. est très intelligente. sommes fatigués après cette longue journée. êtes très gentils. viennent de Belgique. chantent dans une chorale. ne comprends pas cet exercice. prends le bus tous les matins. se retrouve à 18h devant le café. habite près de la gare. adorons voyager en été. avez raison, Madame. dorment encore à cette heure-ci. dessine très bien.
Les Pronoms Personnels Sujets (Niveau Moyen)
voudrais réserver une table pour ce soir. devrais essayer cette nouvelle recette. est parti en voyage d’affaires hier. avons visité plusieurs musées pendant nos vacances. Demain, présenterez votre projet devant toute la classe. ont remporté la compétition pour la troisième fois. ne sait jamais ce qui peut arriver. espère que tout se passera bien pendant l’examen. as toujours été là pour moi dans les moments difficiles. s’entraîne pour le marathon depuis six mois. nous sommes perdus en suivant le GPS. n’avez pas encore signé le contrat, Monsieur le Directeur. se connaissent depuis l’école primaire. hésite encore entre plusieurs options pour mes études. ferais mieux de partir maintenant pour éviter les embouteillages. faut absolument terminer ce projet avant vendredi. va au restaurant ce soir, tu veux venir ? sont ravies d’avoir reçu cette invitation. aurions dû confirmer la réservation à l’avance. pourriez m’expliquer comment résoudre ce problème ? vient d’être promue directrice du département. me demande si cette décision est vraiment la bonne. doivent soumettre leur candidature avant la fin du mois. t’adaptes facilement aux nouvelles situations. pourrait croire que c’est facile, mais ça ne l’est pas.
Les Pronoms Personnels Sujets (Niveau Difficile)
Si avais su plus tôt, n’aurais jamais accepté cette proposition. sembles penser que tout est de ma faute, alors que sais pertinemment que ce n’est pas le cas. Bien qu’ soit l’un des meilleurs dans son domaine, reste très humble. Non seulement dirige l’entreprise, mais trouve aussi le temps de s’occuper de sa famille. aurions pu réussir si avions travaillé ensemble. Même si êtes convaincus d’avoir raison, devriez quand même écouter les arguments des autres. Avant que ne prennent leur décision finale, devraient consulter un expert. Depuis qu’ ont commencé leur collaboration, ont réalisé des progrès considérables. pourrait penser que c’est simple, mais se tromperait gravement. À moins que ne change complètement d’approche, n’obtiendrai pas les résultats escomptés. Aussitôt que auras terminé ton travail, pourras rejoindre tes amis. Non seulement avons perdu du temps, mais avons également gaspillé des ressources précieuses. ne saurait trop insister sur l’importance de la préparation dans ce genre de situation.
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 des pronoms personnels sujets’;
} else {
rulesSection.style.display = ‘none’;
rulesToggle.textContent = ‘Afficher les règles des pronoms personnels sujets’;
}
}
// 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;
// Validation 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 continuer’;
isValid = false;
}
// Si tous les champs sont valides
if (isValid) {
// Enregistrement des informations de l’utilisateur
userInfo.prenom = prenom;
userInfo.nom = nom;
userInfo.email = email;
// Affichage de l’exercice et masquage du formulaire
document.getElementById(‘subscriptionForm’).style.display = ‘none’;
document.getElementById(‘exerciseContainer’).style.display = ‘block’;
// Affichage du niveau sélectionné par défaut
showExerciseLevel(currentDifficulty);
// Ajout des indices aux champs de texte
addHintButtons();
}
}
// 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 le niveau d’exercice sélectionné
function showExerciseLevel(level) {
// Masquer tous les niveaux d’exercice
document.getElementById(‘exerciseFacile’).style.display = ‘none’;
document.getElementById(‘exerciseMoyen’).style.display = ‘none’;
document.getElementById(‘exerciseDifficile’).style.display = ‘none’;
// Afficher le niveau sélectionné
document.getElementById(‘exercise’ + level.charAt(0).toUpperCase() + level.slice(1)).style.display = ‘block’;
// Masquer les résultats précédents
document.getElementById(‘resultContainer’).style.display = ‘none’;
document.getElementById(‘badgePreview’).style.display = ‘none’;
// Réinitialiser tous les champs de saisie
const inputs = document.querySelectorAll(‘.gap-input’);
inputs.forEach(input => {
input.value = ”;
input.style.backgroundColor = ”;
});
}
// Fonction pour ajouter des boutons d’indice aux champs de saisie
function addHintButtons() {
const inputs = document.querySelectorAll(‘.gap-input’);
inputs.forEach(input => {
// Vérifier si le bouton d’indice existe déjà
const existingHint = input.nextElementSibling;
if (existingHint && existingHint.classList.contains(‘hint-button’)) {
return;
}
// Créer un bouton d’indice
const hintButton = document.createElement(‘span’);
hintButton.textContent = ‘?’;
hintButton.className = ‘hint-button’;
hintButton.title = ‘Afficher un indice’;
// Ajouter un écouteur d’événement pour afficher l’indice
hintButton.addEventListener(‘click’, function() {
alert(‘Indice : ‘ + input.dataset.hint);
});
// Ajouter le bouton après l’input
input.parentNode.insertBefore(hintButton, input.nextSibling);
});
}
// Fonction pour vérifier les réponses
function checkAnswers() {
const inputs = document.querySelectorAll(‘#exercise’ + currentDifficulty.charAt(0).toUpperCase() + currentDifficulty.slice(1) + ‘ .gap-input’);
let correctCount = 0;
let totalCount = inputs.length;
let correctionHTML = ”;
// Vérifier chaque réponse
inputs.forEach(input => {
const userAnswer = input.value.trim();
const correctAnswer = input.dataset.answer;
// Vérifier si la réponse est correcte (insensible à la casse)
if (userAnswer.toLowerCase() === correctAnswer.toLowerCase()) {
input.style.backgroundColor = ‘#d4edda’;
correctCount++;
} else {
input.style.backgroundColor = ‘#f8d7da’;
correctionHTML += `
Question ${input.dataset.number}: Votre réponse “${userAnswer}” est incorrecte. La réponse correcte est “${correctAnswer}”.
`;
}
});
// Calculer le score en pourcentage
const scorePercentage = Math.round((correctCount / totalCount) * 100);
// Afficher le résultat
document.getElementById(‘scoreDisplay’).innerHTML = `Votre score: ${correctCount}/${totalCount} (${scorePercentage}%)`;
// Afficher les corrections si nécessaire
if (correctionHTML !== ”) {
document.getElementById(‘correctionDisplay’).innerHTML = `
Corrections:
${correctionHTML}`;
} else {
document.getElementById(‘correctionDisplay’).innerHTML = ‘
Félicitations ! Toutes vos réponses sont correctes.
‘;
}
// Afficher le container de résultat
document.getElementById(‘resultContainer’).style.display = ‘block’;
// Remplir les informations du badge pour prévisualisation
document.getElementById(‘badgeNamePreview’).textContent = `${userInfo.prenom} ${userInfo.nom}`;
document.getElementById(‘badgeLevelPreview’).textContent = currentDifficulty.charAt(0).toUpperCase() + currentDifficulty.slice(1);
document.getElementById(‘badgeScorePreview’).textContent = scorePercentage;
document.getElementById(‘badgeDatePreview’).textContent = new Date().toLocaleDateString();
}
// Fonction pour générer un badge
function generateBadge() {
// Afficher la prévisualisation du badge
document.getElementById(‘badgePreview’).style.display = ‘block’;
// Utilisation de la bibliothèque jsPDF pour créer un PDF du badge
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
// Titre du document
doc.setFontSize(20);
doc.text(‘Badge de Maîtrise – Pronoms Personnels Sujets’, 105, 20, { align: ‘center’ });
// Informations de l’utilisateur
doc.setFontSize(14);
doc.text(`Nom: ${userInfo.prenom} ${userInfo.nom}`, 20, 40);
doc.text(`Email: ${userInfo.email}`, 20, 50);
// Informations de l’exercice
doc.text(`Niveau: ${currentDifficulty.charAt(0).toUpperCase() + currentDifficulty.slice(1)}`, 20, 70);
// Score
const inputs = document.querySelectorAll(‘#exercise’ + currentDifficulty.charAt(0).toUpperCase() + currentDifficulty.slice(1) + ‘ .gap-input’);
let correctCount = 0;
inputs.forEach(input => {
if (input.value.trim().toLowerCase() === input.dataset.answer.toLowerCase()) {
correctCount++;
}
});
const scorePercentage = Math.round((correctCount / inputs.length) * 100);
doc.text(`Score: ${correctCount}/${inputs.length} (${scorePercentage}%)`, 20, 80);
// Date de complétion
const currentDate = new Date().toLocaleDateString();
doc.text(`Date: ${currentDate}`, 20, 90);
// Génération d’un QR Code
const qr = qrcode(0, ‘L’);
qr.addData(`Nom: ${userInfo.prenom} ${userInfo.nom}nNiveau: ${currentDifficulty}nScore: ${scorePercentage}%nDate: ${currentDate}`);
qr.make();
const qrImgUrl = qr.createDataURL(5);
// Ajout du QR Code au PDF
doc.addImage(qrImgUrl, ‘PNG’, 130, 60, 50, 50);
// Message de certification
doc.setFontSize(12);
doc.text(‘Ce badge certifie que la personne nommée ci-dessus a’, 105, 120, { align: ‘center’ });
doc.text(‘complété avec succès l’exercice sur les pronoms personnels sujets en français.’, 105, 130, { align: ‘center’ });
// Signature
doc.text(‘Signature:’, 20, 150);
doc.line(40, 150, 100, 150);
// Téléchargement du PDF
doc.save(`badge_pronoms_${userInfo.prenom}_${userInfo.nom}.pdf`);
}
});