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, #9b59b6, #8e44ad, #7d3c98, #6c3483, #5b2c6f) 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;
}
.rules-box {
background-color: #f0f5fa;
padding: 15px;
border-left: 4px solid #3498db;
margin-bottom: 20px;
border-radius: 4px;
}
Exercice de Grammaire: Les Pronoms COI
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 COI appropriés
Rappel sur les pronoms COI
Les pronoms compléments d’objet indirect (COI) remplacent un nom introduit par la préposition “à” :
- me/m’ (1ère personne du singulier) : Il me parle.
- te/t’ (2ème personne du singulier) : Je te téléphone.
- lui (3ème personne du singulier) : Je lui donne un livre.
- nous (1ère personne du pluriel) : Il nous écrit.
- vous (2ème personne du pluriel) : Je vous envoie un message.
- leur (3ème personne du pluriel) : Elle leur explique la leçon.
Placement : Les pronoms COI se placent généralement avant le verbe sauf à l’impératif affirmatif où ils se placent après le verbe.
Choisissez le niveau de difficulté:
Facile
Moyen
Difficile
Les Pronoms COI en Français (Niveau Facile)
Chaque matin, ma mère prépare un petit-déjeuner délicieux. Je dis toujours merci. Mon père raconte des histoires amusantes pendant que nous mangeons. Nous posons beaucoup de questions.
Quand je vois mes amis à l’école, je parle de mes vacances. Ils écoutent avec attention. Ma meilleure amie montre ses nouveaux livres. Je prête aussi les miens.
Notre professeur explique la leçon clairement. Nous posons des questions quand nous ne comprenons pas. Il répond toujours gentiment. Parfois, il donne des exercices supplémentaires.
Mes grands-parents envoient souvent des cadeaux. Je téléphone pour les remercier. Ils demandent comment va l’école. Je réponds que tout va bien.
Ce soir, mes parents préparent une surprise. Je ai dit que j’étais curieux. Ma petite sœur pose plein de questions. Ils répondent de patienter.
Tu donnes ton avis? Je promets de garder le secret. Si tu aides, je offrirai un cadeau. Je remercie d’avance!
Les Pronoms COI en Français (Niveau Moyen)
utilisons les pronoms COI pour éviter les répétitions. Si tu écris à tes parents, tu racontes ta journée. Quand mes amis ont besoin d’aide, je propose mon soutien immédiatement. Si ton frère te demande un service, rendras-tu ce service?
Les pronoms COI se placent avant le verbe. Par exemple: “Je ai parlé hier.” Mais à l’impératif affirmatif, ils se placent après: “Parle- de ton projet!” À l’impératif négatif, ils reviennent avant le verbe: “Ne parle pas de ce sujet délicat.”
Quand tu rencontreras le directeur, présenteras-tu ton projet? Je suis certain qu’il accordera son attention. avez-vous envoyé les documents nécessaires? Si non, envoyez- rapidement.
Je ne cache rien, mais certaines choses sont difficiles à expliquer. Ma sœur et moi, nous sommes offert des cadeaux pour Noël. Le professeur ne a pas encore rendu leurs copies.
Je ai emprunté son livre la semaine dernière, mais je n’ai pas encore pu le lire. Pourrais-tu suggérer un bon moment pour le faire? Si tu vois Marie, dis- bonjour de ma part.
Les enfants sont trop petits; ne donne pas ces jouets compliqués. Elle a tout expliqué hier. Je fais confiance pour résoudre ce problème.
Ils ont parlé de leurs expériences à l’étranger. Je écrirai dès que j’arriverai. Ne demande pas l’impossible. Je souhaite une bonne journée. Si mes conseils sont utiles, feras-tu savoir?
Les Pronoms COI en Français (Niveau Difficile)
utilisation des pronoms COI peut se complexifier dans certaines constructions verbales. La directrice ayant envoyé une notification, les employés doivent répondre promptement. Ne ayant pas consultés avant de prendre sa décision, nous sommes mécontents.
Avec l’impératif et deux pronoms, l’ordre est important: donne- (COD puis COI). Va parler immédiatement! Ne en veuillez pas si nous refusons votre offre. avez-vous expliqué les conséquences de son choix?
Je ne saurais trop recommander d’être prudent. étant adressé à la mauvaise personne, je n’ai pas obtenu l’information. ayant consacré beaucoup de temps, j’espère que mes explications sont claires.
Dans les temps composés avec l’auxiliaire “avoir”, le pronom COI précède l’auxiliaire: “Je ai parlé.” Avec les verbes pronominaux: “Ils sont parlé”, le pronom réfléchi est un COI car on parle “à quelqu’un”. Ne es-tu jamais demandé pourquoi?
Dans certaines constructions infinitives, le pronom peut se positionner différemment: Je vais parler / Je vais parler (forme tonique). Il faut obéir / Il faut obéir (forme tonique).
Avec certains verbes comme “penser à”, “s’intéresser à”, les formes toniques sont utilisées: Je pense , non à son frère. Ils s’intéressent , pas à nos projets.
Quand plusieurs pronoms coexistent, l’ordre suit cette règle: me/te/se/nous/vous + le/la/les + lui/leur + y + en. Exemple: Je ai donné (le livre à Paul). On a offerts (les cadeaux à nous).
Ne donnez pas maintenant! Et regardez comme il a bien servi ce repas. Crois-moi, je dis la vérité. Je ne dirais pas si je n’étais pas certain.
Résultat
Certificat de Réussite
Exercice de Grammaire: Les Pronoms COI
Ce certificat atteste que
a complété avec succès l’exercice sur les pronoms COI en français
Score: / 100
Niveau:
Date:
// Variables globales
let currentDifficulty = ‘facile’;
let userInfo = {
prenom: ”,
nom: ”,
email: ”
};
// Logo Aplenguas en SVG (version violette pour les pronoms COI)
const aplenguas_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 checkButton = document.getElementById(‘checkButton’);
const generatePdfButton = document.getElementById(‘generatePdfButton’);
const difficultySelect = document.getElementById(‘difficultySelect’);
// Définir l’arrière-plan du certificat
const certificateBackground = document.querySelector(‘.certificate-background’);
certificateBackground.style.backgroundImage = `url(‘data:image/svg+xml;base64,${btoa(aplenguas_logo_svg)}’)`;
// Ajouter les logos SVG
const headerLogo = document.getElementById(‘certificateHeaderLogo’);
const footerLogo = document.getElementById(‘certificateFooterLogo’);
headerLogo.innerHTML = aplenguas_logo_svg;
footerLogo.innerHTML = aplenguas_logo_svg;
// Ajouter aussi le logo au container caché pour l’exportation PDF
document.getElementById(‘logoSvgContainer’).innerHTML = aplenguas_logo_svg;
// Ajout des écouteurs d’événements
startButton.addEventListener(‘click’, startExercise);
changeDifficultyButton.addEventListener(‘click’, changeDifficulty);
checkButton.addEventListener(‘click’, checkAnswers);
generatePdfButton.addEventListener(‘click’, generatePdf);
// 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’);
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 = ‘Veuillez cocher cette case pour continuer.’;
isValid = false;
}
if (isValid) {
// Enregistrement des informations utilisateur
userInfo.prenom = prenom;
userInfo.nom = nom;
userInfo.email = email;
// Afficher l’exercice et masquer le formulaire
document.getElementById(‘subscriptionForm’).style.display = ‘none’;
document.getElementById(‘exerciseContainer’).style.display = ‘block’;
// Afficher l’exercice de la difficulté actuelle
showExercise(currentDifficulty);
}
}
// Fonction pour valider le format de l’email
function isValidEmail(email) {
const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
return emailRegex.test(email);
}
// Fonction pour changer la difficulté
function changeDifficulty() {
const newDifficulty = difficultySelect.value;
showExercise(newDifficulty);
currentDifficulty = newDifficulty;
// Réinitialiser les résultats
document.getElementById(‘resultContainer’).style.display = ‘none’;
document.getElementById(‘certificatePreview’).style.display = ‘none’;
// Réinitialiser les champs de réponse
const inputs = document.querySelectorAll(‘.gap-input’);
inputs.forEach(input => {
input.value = ”;
input.style.backgroundColor = ”;
});
}
// Fonction pour afficher l’exercice selon la difficulté
function showExercise(difficulty) {
// Cacher tous les exercices
document.querySelectorAll(‘.exercise-level’).forEach(el => {
el.style.display = ‘none’;
});
// Afficher l’exercice de la difficulté sélectionnée
document.getElementById(‘exercise’ + difficulty.charAt(0).toUpperCase() + difficulty.slice(1)).style.display = ‘block’;
}
// Fonction pour vérifier les réponses
function checkAnswers() {
let score = 0;
const maxScore = 25; // 25 questions par exercice
const inputs = document.querySelectorAll(‘#exercise’ + currentDifficulty.charAt(0).toUpperCase() + currentDifficulty.slice(1) + ‘ .gap-input’);
inputs.forEach(input => {
const userAnswer = input.value.trim().toLowerCase();
const correctAnswer = input.getAttribute(‘data-answer’).toLowerCase();
if (userAnswer === correctAnswer) {
score++;
input.style.backgroundColor = ‘#d4edda’; // Vert clair pour les bonnes réponses
} else {
input.style.backgroundColor = ‘#f8d7da’; // Rouge clair pour les mauvaises réponses
}
});
// Calculer le pourcentage
const percentage = Math.round((score / maxScore) * 100);
// Afficher le score
document.getElementById(‘scoreDisplay’).textContent = `Vous avez obtenu ${score} réponses correctes sur ${maxScore} (${percentage}%).`;
document.getElementById(‘resultContainer’).style.display = ‘block’;
// Mettre à jour le certificat
updateCertificatePreview(score, maxScore, percentage);
}
// Fonction pour mettre à jour l’aperçu du certificat
function updateCertificatePreview(score, maxScore, percentage) {
document.getElementById(‘certificateNamePreview’).textContent = `${userInfo.prenom} ${userInfo.nom}`;
document.getElementById(‘certificateScorePreview’).textContent = percentage;
document.getElementById(‘certificateLevelPreview’).textContent = currentDifficulty.charAt(0).toUpperCase() + currentDifficulty.slice(1);
const options = { year: ‘numeric’, month: ‘long’, day: ‘numeric’ };
const today = new Date();
document.getElementById(‘certificateDatePreview’).textContent = today.toLocaleDateString(‘fr-FR’, options);
// Générer le QR code
generateQRCode();
// Afficher le certificat
document.getElementById(‘certificatePreview’).style.display = ‘block’;
}
// Fonction pour générer le PDF
function generatePdf() {
// S’assurer que jsPDF est chargé
if (typeof window.jspdf === ‘undefined’) {
alert(“La bibliothèque jsPDF n’est pas chargée correctement. Veuillez réessayer plus tard.”);
return;
}
try {
const { jsPDF } = window.jspdf;
const certificateElement = document.getElementById(‘certificatePreview’);
// Créer un nouveau document PDF
const pdf = new jsPDF({
orientation: ‘landscape’,
unit: ‘mm’,
format: ‘a4’
});
// Obtenir les dimensions du certificat
const width = certificateElement.offsetWidth;
const height = certificateElement.offsetHeight;
// Créer un canvas temporaire pour le rendu
const canvas = document.createElement(‘canvas’);
canvas.width = width * 2; // Multipliez par 2 pour une meilleure qualité
canvas.height = height * 2;
const ctx = canvas.getContext(‘2d’);
// Définir l’arrière-plan blanc
ctx.fillStyle = ‘#ffffff’;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Options pour html2canvas
const options = {
scale: 2,
canvas: canvas,
width: width,
height: height,
useCORS: true,
logging: false
};
// Utiliser svg2pdf pour ajouter le logo SVG
const logoSvg = document.getElementById(‘logoSvgContainer’).querySelector(‘svg’);
if (logoSvg) {
// Créer une version data URI du SVG
const serializer = new XMLSerializer();
const svgStr = serializer.serializeToString(logoSvg);
const svgBlob = new Blob([svgStr], {type: ‘image/svg+xml’});
const url = URL.createObjectURL(svgBlob);
// Créer une image à partir du SVG
const img = new Image();
img.onload = function() {
// Dessiner l’image sur le canvas
ctx.globalAlpha = 0.1; // Semi-transparent pour le fond
ctx.drawImage(img, canvas.width/4, canvas.height/4, canvas.width/2, canvas.height/2);
ctx.globalAlpha = 1.0;
// Continuer avec le reste du contenu
renderCertificateContent(pdf, canvas);
// Libérer l’URL
URL.revokeObjectURL(url);
};
img.src = url;
} else {
// Si pas de SVG, continuer sans
renderCertificateContent(pdf, canvas);
}
} catch (error) {
console.error(“Erreur lors de la génération du PDF:”, error);
alert(“Une erreur est survenue lors de la génération du PDF. Veuillez réessayer.”);
}
}
// Fonction pour le rendu du contenu du certificat
function renderCertificateContent(pdf, canvas) {
// Dessiner le contenu du certificat
const ctx = canvas.getContext(‘2d’);
// Définir la police et la taille
ctx.font = ‘bold 48px Arial’;
ctx.fillStyle = ‘#2c3e50’;
ctx.textAlign = ‘center’;
// Titre
ctx.fillText(‘Certificat de Réussite’, canvas.width/2, canvas.height/4);
ctx.font = ’36px Arial’;
ctx.fillText(‘Exercice de Grammaire: Les Pronoms COI’, canvas.width/2, canvas.height/4 + 50);
// Contenu
ctx.font = ’24px Arial’;
ctx.fillText(‘Ce certificat atteste que’, canvas.width/2, canvas.height/2);
ctx.font = ‘bold 36px Arial’;
ctx.fillText(`${userInfo.prenom} ${userInfo.nom}`, canvas.width/2, canvas.height/2 + 50);
ctx.font = ’24px Arial’;
ctx.fillText(‘a complété avec succès l’exercice sur les pronoms COI en français’, canvas.width/2, canvas.height/2 + 100);
const score = document.getElementById(‘certificateScorePreview’).textContent;
const level = document.getElementById(‘certificateLevelPreview’).textContent;
const date = document.getElementById(‘certificateDatePreview’).textContent;
ctx.fillText(`Score: ${score} / 100`, canvas.width/2, canvas.height/2 + 150);
ctx.fillText(`Niveau: ${level}`, canvas.width/2, canvas.height/2 + 180);
ctx.fillText(`Date: ${date}`, canvas.width/2, canvas.height/2 + 210);
// Signature
ctx.font = ’20px Arial’;
ctx.fillText(‘________________________________’, canvas.width*3/4, canvas.height*3/4 + 50);
ctx.fillText(‘Signature du Professeur’, canvas.width*3/4, canvas.height*3/4 + 80);
// Ajouter l’image au PDF
pdf.addImage(canvas.toDataURL(‘image/png’), ‘PNG’, 0, 0, 297, 210); // A4 en mm
// Enregistrer le PDF
pdf.save(`certificat_pronoms_coi_${userInfo.nom}_${userInfo.prenom}.pdf`);
}
});