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: 50px;
border: none;
border-bottom: 1px solid #333;
font-size: 16px;
text-align: center;
}
.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;
}
.difficulty-selector {
margin-bottom: 20px;
}
.error {
color: red;
font-size: 14px;
}
#certificatePreview {
position: relative;
width: 100%;
height: 450px;
background-color: #fff;
border: 10px solid transparent;
border-image: linear-gradient(45deg, #f39c12, #e67e22, #d35400, #c0392b, #e74c3c) 1;
box-sizing: border-box;
overflow: hidden;
}
.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;
}
.triangle-pattern {
position: absolute;
width: 150px;
height: 120px;
}
.triangle-pattern.top-right {
top: 0;
right: 0;
}
.triangle-pattern.bottom-left {
bottom: 0;
left: 0;
}
Exercice de Grammaire: Les Pronoms Personnels Toniques
Inscrivez-vous pour commencer l’exercice
Veuillez vous abonner et remplir vos informations pour accéder à l’exercice.
Complétez le texte avec les pronoms personnels toniques appropriés
Choisissez le niveau de difficulté:
Facile
Moyen
Difficile
Les Pronoms Personnels Toniques en Français (Niveau Facile)
Bonjour, je m’appelle Marie. Cette voiture est à . Mon frère, c’est qui habite à Paris. Notre maison appartient à . Ce cadeau est pour . C’est qui va organiser la fête. Je vais aller au cinéma avec ce soir. , vous êtes responsables de la décoration. préfèrent voyager en été.
Mes parents et , nous partons en vacances. C’est à de choisir le film. et son ami vont arriver bientôt. , tu es vraiment gentil. Je pense que c’est qui ont raison. Mes voisins, ce sont qui font trop de bruit. et , nous sommes amies depuis longtemps.
Ce livre est à . Nous avons préparé ce repas pour . aussi vont participer au concours. Je ne peux pas vivre sans . C’est qui avons gagné la compétition. est plus grande que . Je suis fier de . C’est entre qu’il faut choisir.
Les Pronoms Personnels Toniques en Français (Niveau Moyen)
Les pronoms personnels toniques sont très utiles en français. Selon la situation, on peut les utiliser de différentes façons. Par exemple, pour insister sur le sujet: “, je préfère rester à la maison” ou “, ils sont déjà partis”. On les utilise aussi après une préposition: “Cette lettre est pour ” ou “Il a parlé avec “. Dans une comparaison, on dit: “Il est plus grand que “.
Parfois, on utilise ces pronoms seuls: “Qui veut venir? – !” ou “Qui a fait ce dessin? – “. Avec l’adverbe “même”, on renforce l’idée: “Je l’ai fait -même” ou “Ils ont construit cette cabane -mêmes”. Dans les structures emphatiques, on dit: “C’est qui organise la réunion” ou “Ce sont qui ont eu cette idée brillante”.
Ces pronoms permettent d’éviter des répétitions: “Pierre et , nous sommes allés au cinéma”, “Toi et , vous devriez vous parler”. Ils expriment aussi la possession: “Ce stylo est à “, “Cette idée est la “. Dans une phrase négative, on peut dire: “Personne sauf n’a compris”.
Après certains verbes comme “penser à”, on utilise ces pronoms: “Je pense souvent à “, “Elle s’intéresse à “. Entre deux propositions, on peut dire: “Selon , il va pleuvoir”, “D’après , c’est une bonne idée”. Dans une expression idiomatique: “Chacun pour “, “À de jouer!”. Après “ni…ni”: “Ni ni ne savons la réponse”. Et pour conclure une énumération: ” aussi sont concernés.”
Les Pronoms Personnels Toniques en Français (Niveau Difficile)
L’emploi des pronoms personnels toniques en français recèle des subtilités que même les locuteurs avancés peuvent trouver délicates. Au-delà des usages classiques, ces pronoms s’intègrent dans des tournures idiomatiques complexes. Par exemple, dans l’expression de l’exception: “Personne n’est venu à part “, ou dans celle de la concession: “Malgré , le projet a réussi”. On les trouve également dans des structures coordonnées complexes: “Ni ni son assistant n’ont pu résoudre ce problème qui, selon , nécessite l’intervention d’un expert”.
Les nuances discursives sont parfois cruciales: “À seul, je ne pourrai jamais terminer ce travail” implique une incapacité individuelle, tandis que “Quant à , son opinion diffère radicalement” introduit un changement de perspective. Dans certaines expressions figées, le choix du pronom est essentiel: “Entre soit dit”, “Loin de cette idée!”.
Les constructions pronominales peuvent se complexifier davantage avec des doubles pronoms: “C’est à -même qu’il faut demander”, ou dans des expressions comparatives élaborées: “Ils sont aussi intelligents l’un que l’autre, mais c’est qui travaille le plus assidûment”. Avec certains verbes pronominaux réciproques, on dira: “Ils s’écrivent souvent entre “, et dans les formulations emphatiques littéraires: ” que j’ai tant aimé, comment as-tu pu m’abandonner?”
Dans le discours soutenu, ces pronoms peuvent marquer une opposition forte: “Contrairement à , je n’ai jamais prétendu être expert en la matière”, ou une distinction subtile: “En dehors de -même, personne ne peut comprendre ce que je ressens”. Les structures disloquées sont fréquentes à l’oral: “Ces livres, je les ai achetés pour spécifiquement”.
Lors de l’emploi avec des adjectifs possessifs, la nuance est importante: “Un ami à ” n’est pas exactement identique à “mon ami”. De même, après “sauf” ou “excepté”, ces pronoms suivent des règles particulières: “Tous étaient présents, sauf “. Dans les questions rhétoriques: “Qui, sinon , pourrait accomplir cela?”, et dans les exclamations: “Pauvre de !”.
Dans le langage juridique ou administratif, on trouve des formulations comme: “Par-devant , notaire soussigné”. Les tournures littéraires peuvent être encore plus subtiles: “En , l’idée n’est pas mauvaise”, “Hors de -même, il ne put répondre”. Certains registres soutenus emploient des expressions figées: “À de voir”, “Entre deux, mon cœur balance”. Enfin, dans les formules de politesse épistolaires: “Veuillez agréer, Madame, l’expression de mes sentiments distingués. Bien à .”
Résultat
Certificat de Réussite
Exercice de Grammaire: Les Pronoms Personnels Toniques
Ce certificat atteste que
a complété avec succès l’exercice sur les pronoms personnels toniques en français
Score: / 100
Niveau:
Date:
// Logo Aplenguas en SVG
const aplenguas_logo_svg = `
`;
// Variables globales
let currentDifficulty = ‘facile’;
let userInfo = {
prenom: ”,
nom: ”,
email: ”
};
// Fonction pour mettre en majuscule la première lettre
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
// Fonction pour vérifier si un email est valide
function isValidEmail(email) {
const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
return emailRegex.test(email);
}
// Fonction pour générer le QR code
function generateQRCode() {
const qrCodeContainer = document.getElementById(‘qrCodeContainer’);
qrCodeContainer.innerHTML = ”;
try {
// Version du QR code (1-40) avec un niveau de correction d’erreur ‘L’
var qr = qrcode(4, ‘L’);
qr.addData(`https://aplenguas.com/certificat?nom=${encodeURIComponent(userInfo.nom)}&prenom=${encodeURIComponent(userInfo.prenom)}&score=${document.getElementById(‘certificateScorePreview’).textContent}&niveau=${currentDifficulty}`);
qr.make();
qrCodeContainer.innerHTML = qr.createImgTag(4);
} catch (error) {
console.error(“Erreur lors de la génération du QR code:”, error);
// Fallback si la génération du QR code échoue
qrCodeContainer.innerHTML = ‘
‘;
}
}
// 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 (!isValidEmail(email)) {
document.getElementById(‘emailError’).textContent = ‘Veuillez entrer un email valide.’;
isValid = false;
}
if (!subscribe) {
document.getElementById(‘subscribeError’).textContent = ‘Vous devez vous abonner pour continuer.’;
isValid = false;
}
if (isValid) {
// Enregistrement des informations de l’utilisateur
userInfo.prenom = prenom;
userInfo.nom = nom;
userInfo.email = email;
// Affichage de l’exercice
document.getElementById(‘subscriptionForm’).style.display = ‘none’;
document.getElementById(‘exerciseContainer’).style.display = ‘block’;
// Afficher l’exercice en fonction de la difficulté sélectionnée
showExerciseLevel(currentDifficulty);
}
}
// Fonction pour afficher l’exercice en fonction du niveau de difficulté
function showExerciseLevel(level) {
// Cacher tous les niveaux d’exercice
document.querySelectorAll(‘.exercise-level’).forEach(div => {
div.style.display = ‘none’;
});
// Afficher le niveau sélectionné
document.getElementById(‘exercise’ + capitalizeFirstLetter(level)).style.display = ‘block’;
// Mettre à jour la difficulté actuelle
currentDifficulty = level;
document.getElementById(‘difficultySelect’).value = level;
}
// Fonction pour vérifier les réponses
function checkAnswers() {
let score = 0;
const totalQuestions = 25; // 25 questions pour chaque niveau
// Obtenir tous les champs de réponse du niveau actuel
const exerciseDiv = document.getElementById(‘exercise’ + capitalizeFirstLetter(currentDifficulty));
const inputs = exerciseDiv.querySelectorAll(‘.gap-input’);
// Vérifier chaque réponse
inputs.forEach(input => {
const correctAnswer = input.getAttribute(‘data-answer’);
const userAnswer = input.value.trim().toLowerCase();
// Comparer la réponse de l’utilisateur avec la réponse correcte
if (userAnswer === correctAnswer.toLowerCase()) {
score++;
input.style.color = ‘green’;
} else {
input.style.color = ‘red’;
// Afficher la réponse correcte
input.value = correctAnswer;
}
// Désactiver l’entrée
input.disabled = true;
});
// Calculer le pourcentage
const percentage = Math.round((score / totalQuestions) * 100);
// Afficher le résultat
document.getElementById(‘scoreDisplay’).textContent = `Vous avez obtenu ${score} sur ${totalQuestions} (${percentage}%).`;
document.getElementById(‘resultContainer’).style.display = ‘block’;
// Mettre à jour les informations du certificat
document.getElementById(‘certificateNamePreview’).textContent = `${userInfo.prenom} ${userInfo.nom}`;
document.getElementById(‘certificateScorePreview’).textContent = percentage;
document.getElementById(‘certificateLevelPreview’).textContent = capitalizeFirstLetter(currentDifficulty);
// Obtenir la date actuelle
const today = new Date();
const formattedDate = today.toLocaleDateString(‘fr-FR’, { day: ‘numeric’, month: ‘long’, year: ‘numeric’ });
document.getElementById(‘certificateDatePreview’).textContent = formattedDate;
// Afficher le certificat
document.getElementById(‘certificatePreview’).style.display = ‘block’;
// Insérer les logos
document.getElementById(‘certificateHeaderLogo’).innerHTML = aplenguas_logo_svg;
document.getElementById(‘certificateFooterLogo’).innerHTML = aplenguas_logo_svg;
document.getElementById(‘logoSvgContainer’).innerHTML = aplenguas_logo_svg;
// Générer le QR code
generateQRCode();
}
// Fonction pour générer le PDF du certificat
function generatePDF() {
const { jsPDF } = window.jspdf;
// Créer un nouveau document PDF
const doc = new jsPDF({
orientation: ‘landscape’,
unit: ‘mm’,
format: ‘a4’
});
// Obtenir l’élément du certificat
const certificateElement = document.getElementById(‘certificatePreview’);
// Capturer le certificat en utilisant html2canvas (simplifié pour cet exemple)
// Dans un cas réel, il faudrait utiliser html2canvas ou une autre méthode
// Ajouter le fond
doc.setFillColor(255, 255, 255);
doc.rect(0, 0, 297, 210, ‘F’);
// Ajouter une bordure
doc.setDrawColor(243, 156, 18); // Orange
doc.setLineWidth(5);
doc.rect(10, 10, 277, 190);
// Ajouter le titre
doc.setFontSize(30);
doc.setTextColor(44, 62, 80); // Bleu foncé
doc.text(‘Certificat de Réussite’, 148.5, 40, { align: ‘center’ });
// Sous-titre
doc.setFontSize(18);
doc.text(‘Exercice de Grammaire: Les Pronoms Personnels Toniques’, 148.5, 50, { align: ‘center’ });
// Contenu du certificat
doc.setFontSize(14);
doc.text(‘Ce certificat atteste que’, 148.5, 70, { align: ‘center’ });
// Nom de l’utilisateur
doc.setFontSize(24);
doc.setTextColor(231, 76, 60); // Rouge
doc.text(`${userInfo.prenom} ${userInfo.nom}`, 148.5, 85, { align: ‘center’ });
// Suite du contenu
doc.setFontSize(14);
doc.setTextColor(44, 62, 80);
doc.text(‘a complété avec succès l’exercice sur les pronoms personnels toniques en français’, 148.5, 100, { align: ‘center’ });
// Score et niveau
doc.text(`Score: ${document.getElementById(‘certificateScorePreview’).textContent} / 100`, 148.5, 115, { align: ‘center’ });
doc.text(`Niveau: ${capitalizeFirstLetter(currentDifficulty)}`, 148.5, 125, { align: ‘center’ });
doc.text(`Date: ${document.getElementById(‘certificateDatePreview’).textContent}`, 148.5, 135, { align: ‘center’ });
// Ligne de signature
doc.line(148.5 – 40, 170, 148.5 + 40, 170);
doc.text(‘Signature du Professeur’, 148.5, 180, { align: ‘center’ });
// Enregistrer le PDF
doc.save(`certificat_${userInfo.prenom}_${userInfo.nom}.pdf`);
}
// Événements
document.addEventListener(‘DOMContentLoaded’, function() {
// Bouton pour commencer l’exercice
document.getElementById(‘startButton’).addEventListener(‘click’, startExercise);
// Bouton pour changer de difficulté
document.getElementById(‘changeDifficultyButton’).addEventListener(‘click’, function() {
const selectedDifficulty = document.getElementById(‘difficultySelect’).value;
showExerciseLevel(selectedDifficulty);
});
// Bouton pour vérifier les réponses
document.getElementById(‘checkButton’).addEventListener(‘click’, checkAnswers);
// Bouton pour générer le PDF
document.getElementById(‘generatePdfButton’).addEventListener(‘click’, generatePDF);
// Initialisation: afficher le formulaire d’inscription
document.getElementById(‘subscriptionForm’).style.display = ‘block’;
document.getElementById(‘exerciseContainer’).style.display = ‘none’;
// Insérer le logo SVG
document.getElementById(‘logoSvgContainer’).innerHTML = aplenguas_logo_svg;
// Créer les motifs de triangles pour le certificat
const trianglePatternTopRight = document.createElement(‘div’);
trianglePatternTopRight.className = ‘triangle-pattern top-right’;
trianglePatternTopRight.innerHTML = aplenguas_logo_svg;
document.getElementById(‘certificatePreview’).appendChild(trianglePatternTopRight);
const trianglePatternBottomLeft = document.createElement(‘div’);
trianglePatternBottomLeft.className = ‘triangle-pattern bottom-left’;
trianglePatternBottomLeft.innerHTML = aplenguas_logo_svg;
document.getElementById(‘certificatePreview’).appendChild(trianglePatternBottomLeft);
});