body {
font-family: ‘Arial’, sans-serif;
line-height: 1.6;
max-width: 100%;
margin: 0 auto;
padding: 20px;
color: #333;
}

h1, h2 {
color: #0066cc;
text-align: center;
}

.intro {
background-color: #f0f8ff;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}

.question-container {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
}

.options {
margin-top: 10px;
}

button {
background-color: #0066cc;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}

button:hover {
background-color: #004c99;
}

input[type=”text”], textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 4px;
}

textarea {
min-height: 100px;
}

.result-section {
display: none;
text-align: center;
margin-top: 20px;
}

.badge {
border: 2px solid #0066cc;
padding: 20px;
margin: 20px auto;
text-align: center;
background-color: #f0f8ff;
max-width: 500px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 10px;
}

.progress-container {
width: 100%;
background-color: #ddd;
margin-bottom: 20px;
border-radius: 5px;
}

.progress-bar {
height: 20px;
background-color: #0066cc;
border-radius: 5px;
width: 0%;
text-align: center;
line-height: 20px;
color: white;
}

.controls {
display: flex;
justify-content: center;
margin-top: 15px;
}

#email-form {
margin-top: 20px;
display: none;
}

.stamp {
width: 100px;
height: 100px;
border: 2px solid #0066cc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
background-color: #e6f0ff;
font-weight: bold;
color: #0066cc;
transform: rotate(-15deg);
}

#badge {
border: 5px solid #0066cc;
border-radius: 10px;
padding: 20px;
max-width: 800px;
margin: 20px auto;
background-color: #f9f9f9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: relative;
}

#grade-stamp {
position: absolute;
top: 20px;
right: 20px;
width: 60px;
height: 60px;
background-color: #e63946;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
font-weight: bold;
border: 3px solid #333;
transform: rotate(15deg);
}

#email-status {
padding: 10px;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
border-radius: 4px;
color: #3c763d;
margin-top: 15px;
display: none;
}

.certificate-header {
text-align: center;
margin-bottom: 20px;
}

.certificate-header h2 {
color: #0066cc;
font-size: 28px;
margin-bottom: 5px;
}

.certificate-header p {
font-style: italic;
color: #666;
}

.certificate-body {
margin: 20px 0;
text-align: center;
}

.certificate-signature {
margin-top: 40px;
text-align: center;
}

.signature-line {
width: 200px;
height: 1px;
background-color: #333;
margin: 10px auto;
}

.timer {
position: fixed;
top: 20px;
right: 20px;
background-color: #0066cc;
color: white;
padding: 15px;
border-radius: 50%;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
z-index: 1000;
}

.texte-comprehension {
background-color: #fff;
padding: 20px;
border-left: 5px solid #0066cc;
margin-bottom: 20px;
line-height: 1.8;
}

.aplenguas-login-form {
max-width: 100%;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

.form-group input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

.btn-submit {
background-color: #4285f4;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
}

#continuar {
background-color: #34a853;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}

// Script para el formulario de inicio de sesión
const SCRIPT_URL = ‘https://script.google.com/macros/s/AKfycbySKFDJZ7MwZUvEdMbMIJAvsamQHhmvJhrW3xW_mWbClvummp_jBSYu78IAyWv9QLWUGA/exec’;

document.getElementById(‘login-form’).addEventListener(‘submit’, function(e) {
e.preventDefault();

const email = document.getElementById(‘email’).value;
const nombre = document.getElementById(‘nombre’).value;
const curso = document.getElementById(‘curso’).value;

// Mostrar estado de procesamiento
document.getElementById(‘estado-envio’).style.display = ‘block’;
document.getElementById(‘mensaje-estado’).innerText = ‘Enviando datos…’;

// Guardar los datos localmente
sessionStorage.setItem(‘student_email’, email);
sessionStorage.setItem(‘student_name’, nombre);
sessionStorage.setItem(‘student_course’, curso);

// Enviar datos al servidor usando fetch
const formData = new FormData();
formData.append(‘email’, email);
formData.append(‘nombre’, nombre);
formData.append(‘curso’, curso);
formData.append(‘accion’, ‘iniciar’); // Indica que es inicio de sesión

fetch(SCRIPT_URL, {
method: ‘POST’,
body: formData,
mode: ‘no-cors’
})
.then(response => {
// No podemos acceder a la respuesta debido a no-cors,
// pero asumimos que funcionó si no hubo errores
document.getElementById(‘login-form’).style.display = ‘none’;
document.getElementById(‘mensaje-confirmacion’).style.display = ‘block’;
document.getElementById(‘estado-envio’).style.display = ‘none’;
})
.catch(error => {
console.error(‘Error:’, error);
document.getElementById(‘mensaje-estado’).innerText = ‘Error al enviar datos’;
document.getElementById(‘detalles-error’).innerText = error.message;
document.getElementById(‘detalles-error’).style.display = ‘block’;
});
});

document.getElementById(‘continuar’).addEventListener(‘click’, function() {
document.querySelector(‘.aplenguas-login-form’).style.display = ‘none’;
document.getElementById(‘contenido-ejercicio’).style.display = ‘block’;
});

// Variables globales para el examen
let currentQuestionIndex = 0;
let userAnswers = [];
let questionOrder = [];
let studentData = {};
let examTimer;
let timeLeft = 90 * 60; // 1h30 en segundos

// Función para actualizar el temporizador
function updateTimer() {
const hours = Math.floor(timeLeft / 3600);
const minutes = Math.floor((timeLeft % 3600) / 60);
const seconds = timeLeft % 60;

document.getElementById(‘exam-timer’).textContent =
(hours > 0 ? hours + ‘:’ : ”) +
(minutes < 10 ? '0' + minutes : minutes) + ':' +
(seconds < 10 ? '0' + seconds : seconds);

if (timeLeft <= 0) {
clearInterval(examTimer);
alert("Le temps est écoulé! L'examen va être terminé automatiquement.");
calculateResults();
} else {
timeLeft–;
}
}

// El texto de comprensión para la primera parte del examen
const texteComprehension = `

`;

// Las preguntas de la evaluación
const questionsData = [
// Parte 1: Comprensión de lectura sobre la educación de las niñas
{
type: “text_intro”,
content: texteComprehension,
category: “Compréhension de lecture”
},
{
type: “qcm”,
question: “Selon le texte, quel est le pourcentage d’adultes analphabètes qui sont des femmes?”,
options: [“50%”, “60%”, “66%”, “75%”],
correct: 2,
category: “Compréhension de lecture”,
points: 2.5
},
{
type: “qcm”,
question: “Parmi ces obstacles à l’éducation des filles, lequel n’est PAS mentionné dans le texte?”,
options: [“Les traditions culturelles”, “Le coût élevé des uniformes scolaires”, “Le manque d’infrastructures adaptées”, “La distance entre l’école et le domicile”],
correct: 1,
category: “Compréhension de lecture”,
points: 2.5
},
{
type: “qcm”,
question: “Selon le texte, chaque année supplémentaire d’éducation secondaire augmente les futurs revenus de:”,
options: [“5 à 10%”, “10 à 20%”, “20 à 30%”, “30 à 40%”],
correct: 1,
category: “Compréhension de lecture”,
points: 2.5
},
{
type: “qcm”,
question: “Si toutes les filles terminaient leur éducation secondaire, de combien pourrait diminuer le nombre de mariages d’enfants?”,
options: [“44%”, “54%”, “64%”, “74%”],
correct: 2,
category: “Compréhension de lecture”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Quelle affirmation est correcte selon le texte?”,
options: [
“L’éducation des filles est principalement importante pour leur développement personnel.”,
“Les pays qui investissent dans l’éducation des filles voient leur économie s’affaiblir.”,
“Les écarts entre les sexes sont plus importants dans l’enseignement primaire.”,
“L’éducation des filles stimule la croissance économique et le développement social.”
],
correct: 3,
category: “Compréhension de lecture”,
points: 2.5
},
{
type: “text”,
question: “Qui a dit la phrase : “Un enfant, un enseignant, un livre et un stylo peuvent changer le monde” ?”,
correct: “Malala Yousafzai”,
category: “Compréhension de lecture”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Selon le texte, pourquoi est-il important de lutter contre les stéréotypes de genre dans l’éducation?”,
options: [
“Pour que les filles puissent exploiter pleinement leur potentiel.”,
“Pour que les garçons soient moins favorisés à l’école.”,
“Pour augmenter le nombre d’enseignantes.”,
“Pour réduire le coût de l’éducation.”
],
correct: 0,
category: “Compréhension de lecture”,
points: 2.5
},
{
type: “qcm”,
question: “Dans quels niveaux d’éducation les écarts entre les sexes demeurent-ils les plus importants?”,
options: [“Dans l’enseignement primaire”, “Dans l’enseignement secondaire et supérieur”, “Dans l’enseignement technique”, “Dans les programmes d’alphabétisation”],
correct: 1,
category: “Compréhension de lecture”,
points: 2.5
},
{
type: “text”,
question: “Citez deux exemples de politiques spécifiques adoptées par certains pays pour favoriser l’éducation des filles.”,
correct: “bourses d’études”,
acceptableAnswers: [“bourses d’études”, “campagnes de sensibilisation”, “construction d’écoles”],
category: “Compréhension de lecture”,
points: 2.5
},
{
type: “qcm”,
question: “Selon le texte, quel est l’un des bénéfices de l’éducation des filles au niveau individuel?”,
options: [“Elles font davantage d’enfants”, “Elles ont moins de risques de tomber malade”, “Elles se marient plus tôt”, “Elles ont moins de chances de trouver un emploi”],
correct: 1,
category: “Compréhension de lecture”,
points: 2.5
},

// Parte 2: Expresar un deseo
{
type: “text”,
question: “Complétez la phrase pour exprimer un souhait: “Tous les enfants aimeraient _____ (avoir) accès à l’éducation.””,
correct: “avoir”,
category: “Expression du souhait”,
points: 2.5
},
{
type: “text”,
question: “Complétez la phrase pour exprimer un souhait: “Nous espérons que les écoles _____ (être) mieux équipées.””,
correct: “seront”,
category: “Expression du souhait”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase qui exprime correctement un souhait:”,
options: [
“Je veux que tu as de bonnes notes.”,
“J’espère avoir de bonnes notes.”,
“Je souhaite que tu as de bonnes notes.”,
“Je veux que tu auras de bonnes notes.”
],
correct: 1,
category: “Expression du souhait”,
points: 2.5
},
{
type: “text”,
question: “Complétez la phrase pour exprimer un souhait: “Nous espérons _____ (pouvoir) participer au programme d’échange.””,
correct: “pouvoir”,
category: “Expression du souhait”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase qui exprime correctement un souhait:”,
options: [
“Elle souhaite que nous faisons nos devoirs.”,
“Elle souhaite que nous ferons nos devoirs.”,
“Elle souhaite faire ses devoirs.”,
“Elle souhaite que nous avons fait nos devoirs.”
],
correct: 2,
category: “Expression du souhait”,
points: 2.5
},

// Parte 3: Situar en el futuro (conjugación)
{
type: “text”,
question: “Conjuguez le verbe au futur simple: “L’année prochaine, nous _____ (aller) étudier à l’étranger.””,
correct: “irons”,
category: “Situer dans le futur”,
points: 2.5
},
{
type: “text”,
question: “Conjuguez le verbe au futur simple: “Dans dix ans, les technologies _____ (transformer) complètement l’éducation.””,
correct: “transformeront”,
category: “Situer dans le futur”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase correctement conjuguée au futur simple:”,
options: [
“Je serais professeur après mes études.”,
“Je suis professeur après mes études.”,
“Je serai professeur après mes études.”,
“J’ai été professeur après mes études.”
],
correct: 2,
category: “Situer dans le futur”,
points: 2.5
},
{
type: “text”,
question: “Conjuguez le verbe au futur simple: “Tu _____ (avoir) plus d’opportunités avec un diplôme universitaire.””,
correct: “auras”,
category: “Situer dans le futur”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase correctement conjuguée au futur simple:”,
options: [
“Ils font leurs examens la semaine prochaine.”,
“Ils feront leurs examens la semaine prochaine.”,
“Ils ont fait leurs examens la semaine prochaine.”,
“Ils faisaient leurs examens la semaine prochaine.”
],
correct: 1,
category: “Situer dans le futur”,
points: 2.5
},

// Parte 4: Condición con si+presente
{
type: “text”,
question: “Complétez avec le verbe au présent et au futur: “Si tu _____ (travailler) dur, tu _____ (réussir) tes examens.””,
correct: “travailles, réussiras”,
category: “Condition avec si+présent”,
points: 2.5
},
{
type: “text”,
question: “Complétez avec le verbe au présent et au présent: “Si vous _____ (vouloir) progresser, vous _____ (devoir) pratiquer tous les jours.””,
correct: “voulez, devez”,
category: “Condition avec si+présent”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase correcte avec si+présent:”,
options: [
“Si j’aurai du temps, je lirai ce livre.”,
“Si j’ai du temps, je lirai ce livre.”,
“Si j’avais du temps, je lirai ce livre.”,
“Si j’ai du temps, je lis ce livre.”
],
correct: 1,
category: “Condition avec si+présent”,
points: 2.5
},
{
type: “text”,
question: “Complétez avec le verbe au présent et au futur simple: “Si les élèves _____ (être) attentifs, ils _____ (comprendre) mieux.””,
correct: “sont, comprendront”,
category: “Condition avec si+présent”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase correcte avec si+présent:”,
options: [
“Si nous apprendrons le français, nous voyagerons en France.”,
“Si nous apprenons le français, nous voyagerons en France.”,
“Si nous apprenons le français, nous voyageons en France.”,
“Si nous avons appris le français, nous voyagerons en France.”
],
correct: 1,
category: “Condition avec si+présent”,
points: 2.5
},

// Parte 5: Vocabulario de la escuela y educación
{
type: “qcm”,
question: “Que signifie ‘redoubler’?”,
options: [“Obtenir deux fois la même note”, “Faire une année scolaire deux fois”, “Étudier deux fois plus”, “Être inscrit dans deux écoles différentes”],
correct: 1,
category: “Vocabulaire de l’école”,
points: 2.5
},
{
type: “qcm”,
question: “Complétez la phrase: ‘J’ai obtenu mon _____ de fin d’études secondaires.'”,
options: [“certificat”, “diplôme”, “baccalauréat”, “licence”],
correct: 2,
category: “Vocabulaire de l’école”,
points: 2.5
},
{
type: “matching”,
question: “Associez chaque mot à sa définition:”,
pairs: [
{item: “Un cours”, match: “Une leçon enseignée dans une matière spécifique”},
{item: “Un trimestre”, match: “Une période de trois mois dans l’année scolaire”},
{item: “Une matière”, match: “Un sujet d’étude comme les mathématiques ou l’histoire”},
{item: “Un devoir”, match: “Un travail à faire à la maison après les cours”}
],
category: “Vocabulaire de l’école”,
points: 5
},
{
type: “qcm”,
question: “Qu’est-ce qu’un ‘exposé’?”,
options: [“Un examen écrit”, “Une présentation orale”, “Un livre scolaire”, “Une réunion entre professeurs”],
correct: 1,
category: “Vocabulaire de l’école”,
points: 2.5
},
{
type: “text”,
question: “Comment appelle-t-on l’endroit où les élèves peuvent emprunter des livres dans une école?”,
correct: “bibliothèque”,
acceptableAnswers: [“bibliothèque”, “CDI”, “médiathèque”],
category: “Vocabulaire de l’école”,
points: 2.5
},

// Parte 6: Producción escrita
{
type: “essay”,
question: “Décrivez votre parcours scolaire et universitaire (réel ou imaginaire). Parlez de vos matières préférées, des difficultés que vous avez rencontrées et de vos projets d’études futurs. (80-100 mots)”,
category: “Production écrite”,
points: 15,
minWords: 80
},
{
type: “essay”,
question: “Selon vous, comment sera l’école du futur? Quels changements positifs ou négatifs voyez-vous dans l’éducation de demain? (80-100 mots)”,
category: “Production écrite”,
points: 15,
minWords: 80
}
];

// Función para iniciar el examen
document.getElementById(‘start-btn’).addEventListener(‘click’, function() {
// Mostrar la barra de progreso y controles
document.querySelector(‘.progress-container’).style.display = ‘block’;
document.querySelector(‘.controls’).style.display = ‘flex’;

// Ocultar el botón de inicio
this.style.display = ‘none’;

// Recuperar datos del estudiante
studentData = {
name: sessionStorage.getItem(‘student_name’) || ”,
email: sessionStorage.getItem(‘student_email’) || ”,
course: sessionStorage.getItem(‘student_course’) || ”
};

// Iniciar el examen
startExam();

// Iniciar el temporizador
examTimer = setInterval(updateTimer, 1000);
});

// Función para iniciar el examen
function startExam() {
// Crear un orden aleatorio para las preguntas (excepto la introducción del texto)
const firstQuestion = questionsData[0]; // Guardamos la primera pregunta (intro de texto)
const remainingQuestions = questionsData.slice(1);

// Ordenar aleatoriamente las preguntas restantes
questionOrder = […Array(remainingQuestions.length).keys()].sort(() => Math.random() – 0.5);

// Reconstruir el array de preguntas
questionOrder = [0].concat(questionOrder.map(i => i + 1));

// Mostrar la primera pregunta
showQuestion(0);
}

// Función para mostrar una pregunta
function showQuestion(index) {
if (index >= questionOrder.length) {
calculateResults();
return;
}

currentQuestionIndex = index;
const questionIdx = questionOrder[index];
const question = questionsData[questionIdx];

// Actualizar la barra de progreso
const progressPercentage = Math.round((index / questionOrder.length) * 100);
document.querySelector(‘.progress-bar’).style.width = progressPercentage + ‘%’;
document.querySelector(‘.progress-bar’).textContent = progressPercentage + ‘%’;

// Construir el HTML para la pregunta
let questionHTML = `

`; // Cierre del question-container

document.getElementById(‘question-area’).innerHTML = questionHTML;

// Añadir contador de palabras para ensayos
if (question.type === “essay”) {
document.getElementById(‘essay-answer’).addEventListener(‘input’, function() {
const wordCount = this.value.trim().split(/s+/).filter(Boolean).length;
document.getElementById(‘word-count’).textContent = wordCount + ‘ mots (minimum: ‘ + question.minWords + ‘)’;

if (wordCount {
if (select.value) {
const matchIndex = parseInt(select.closest(‘.match-definition’).dataset.match);
answer.push({
itemIndex: parseInt(select.value),
matchIndex: matchIndex
});
}
});
}

// Guardar la respuesta
userAnswers[questionIdx] = answer;
}

// Función para calcular los resultados
function calculateResults() {
// Detener el temporizador
clearInterval(examTimer);

let totalScore = 0;
let categoryScores = {};

// Calcular puntuación por cada pregunta
questionsData.forEach((question, index) => {
if (question.type === “text_intro”) return; // Saltar la introducción

let score = 0;
const userAnswer = userAnswers[index];

if (question.type === “qcm” || question.type === “choix_phrase”) {
if (userAnswer === question.correct) {
score = question.points;
}
} else if (question.type === “text”) {
const correctAnswer = question.correct.toLowerCase();
const userAnswerLower = userAnswer ? userAnswer.toLowerCase() : “”;

if (userAnswerLower === correctAnswer) {
score = question.points;
} else if (question.acceptableAnswers && question.acceptableAnswers.some(ans => userAnswerLower.includes(ans.toLowerCase()))) {
score = question.points;
}
} else if (question.type === “essay”) {
// Para los ensayos, verificar el mínimo de palabras
const wordCount = userAnswer ? userAnswer.split(/s+/).filter(Boolean).length : 0;
if (wordCount >= question.minWords) {
// Dar la puntuación completa por ahora (en un examen real esto sería evaluado por un profesor)
score = question.points;
} else {
// Puntuación proporcional a la longitud
score = Math.round((wordCount / question.minWords) * question.points);
}
} else if (question.type === “matching”) {
// Para las preguntas de emparejamiento
if (userAnswer) {
const correctPairs = userAnswer.filter(pair => pair.itemIndex === pair.matchIndex).length;
score = Math.round((correctPairs / question.pairs.length) * question.points);
}
}

totalScore += score;

// Acumular puntuación por categoría
if (!categoryScores[question.category]) {
categoryScores[question.category] = { score: 0, total: 0 };
}
categoryScores[question.category].score += score;
categoryScores[question.category].total += question.points;
});

// Mostrar resultados
document.getElementById(‘question-area’).style.display = ‘none’;
document.querySelector(‘.controls’).style.display = ‘none’;
document.querySelector(‘.progress-container’).style.display = ‘none’;
document.getElementById(‘exam-timer’).style.display = ‘none’;

document.getElementById(‘result-section’).style.display = ‘block’;

// Dividir el nombre completo en partes
const fullName = studentData.name;
let firstName = fullName;
let lastName = “”;

if (fullName.includes(” “)) {
const nameParts = fullName.split(” “);
firstName = nameParts[0];
lastName = nameParts.slice(1).join(” “);
}

document.getElementById(‘result-nom’).textContent = lastName;
document.getElementById(‘result-prenom’).textContent = firstName;
document.getElementById(‘cert-nom’).textContent = lastName;
document.getElementById(‘cert-prenom’).textContent = firstName;

document.getElementById(‘score’).textContent = totalScore;
document.getElementById(‘cert-score’).textContent = totalScore + “/100”;

// Establecer la calificación en el sello
const gradeStamp = document.getElementById(‘grade-stamp’);
if (totalScore >= 90) {
gradeStamp.textContent = “A”;
gradeStamp.style.backgroundColor = “#4CAF50”;
} else if (totalScore >= 80) {
gradeStamp.textContent = “B”;
gradeStamp.style.backgroundColor = “#8BC34A”;
} else if (totalScore >= 70) {
gradeStamp.textContent = “C”;
gradeStamp.style.backgroundColor = “#FFC107”;
} else if (totalScore >= 60) {
gradeStamp.textContent = “D”;
gradeStamp.style.backgroundColor = “#FF9800”;
} else {
gradeStamp.textContent = “F”;
gradeStamp.style.backgroundColor = “#F44336”;
}

// Generar comentario basado en la puntuación
let feedback = “”;
if (totalScore >= 90) {
feedback = “Excellent! Vous maîtrisez très bien les concepts de français niveau A2.”;
} else if (totalScore >= 80) {
feedback = “Très bien! Vous avez une bonne compréhension du français niveau A2.”;
} else if (totalScore >= 70) {
feedback = “Bien! Continuez à pratiquer pour améliorer votre niveau de français.”;
} else if (totalScore >= 60) {
feedback = “Satisfaisant. Des révisions supplémentaires seraient bénéfiques.”;
} else if (totalScore >= 50) {
feedback = “Passable. Il est nécessaire de revoir les concepts de base.”;
} else {
feedback = “Insuffisant. Une révision approfondie est nécessaire.”;
}

document.getElementById(‘feedback’).textContent = feedback;

// Establecer la fecha actual en el certificado
const today = new Date();
const dateOptions = { year: ‘numeric’, month: ‘long’, day: ‘numeric’ };
document.getElementById(‘cert-date’).textContent = today.toLocaleDateString(‘fr-FR’, dateOptions);

// Enviar los resultados del examen al servidor
sendExamResults(totalScore, categoryScores);
}

// Función para enviar los resultados del examen
function sendExamResults(totalScore, categoryScores) {
const formData = new FormData();
formData.append(‘email’, studentData.email);
formData.append(‘nombre’, studentData.name);
formData.append(‘curso’, studentData.course);
formData.append(‘puntuacion’, totalScore);
formData.append(‘categorias’, JSON.stringify(categoryScores));
formData.append(‘accion’, ‘resultados’);

fetch(SCRIPT_URL, {
method: ‘POST’,
body: formData,
mode: ‘no-cors’
})
.catch(error => {
console.error(‘Error al enviar resultados:’, error);
});
}

// Evento para descargar el certificado
document.getElementById(‘download-badge’).addEventListener(‘click’, function() {
const badge = document.getElementById(‘badge’);

// Usar html2canvas para capturar el certificado como imagen
html2canvas(badge).then(canvas => {
// Convertir el canvas a una imagen PNG
const imgData = canvas.toDataURL(‘image/png’);

// Usar jsPDF para crear un PDF con la imagen
const { jsPDF } = window.jspdf;
const pdf = new jsPDF(‘l’, ‘mm’, ‘a4’);

// Añadir la imagen al PDF
const imgProps = pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, ‘PNG’, 0, 0, pdfWidth, pdfHeight);

// Descargar el PDF
pdf.save(‘certificat-francais-a2.pdf’);
});
});

// Evento para mostrar el formulario de email
document.getElementById(‘show-email-form’).addEventListener(‘click’, function() {
document.getElementById(‘email-form’).style.display = ‘block’;
this.style.display = ‘none’;
});

// Evento para enviar el certificado por email
document.getElementById(‘send-email’).addEventListener(‘click’, function() {
const recipientEmail = document.getElementById(‘recipient-email’).value;

if (!recipientEmail) {
alert(“Veuillez entrer une adresse email valide.”);
return;
}

// Mostrar mensaje de envío
const emailStatus = document.getElementById(‘email-status’);
emailStatus.textContent = “Envoi en cours…”;
emailStatus.style.display = ‘block’;

// Capturar el certificado como imagen
html2canvas(document.getElementById(‘badge’)).then(canvas => {
// Convertir el canvas a una imagen base64
const imgData = canvas.toDataURL(‘image/png’);

// Enviar la imagen por email
const formData = new FormData();
formData.append(‘email’, studentData.email);
formData.append(‘recipientEmail’, recipientEmail);
formData.append(‘nombre’, studentData.name);
formData.append(‘curso’, studentData.course);
formData.append(‘imagen’, imgData);
formData.append(‘accion’, ‘enviar_certificado’);

fetch(SCRIPT_URL, {
method: ‘POST’,
body: formData,
mode: ‘no-cors’
})
.then(() => {
// No podemos acceder a la respuesta debido a no-cors,
// pero asumimos que funcionó si no hubo errores
emailStatus.textContent = “Certificat envoyé avec succès!”;
emailStatus.style.backgroundColor = “#dff0d8”;
})
.catch(error => {
console.error(‘Error:’, error);
emailStatus.textContent = “Erreur lors de l’envoi du certificat.”;
emailStatus.style.backgroundColor = “#f2dede”;
});
});
});