Quiz sur le vocabulaire du Chef d’oeuvre (art, littérature et films)

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
max-width: 100%;
margin: 0 auto;
padding: 20px;
background: linear-gradient(135deg, #8e44ad 0%, #c0392b 100%);
min-height: 100vh;
}
h1, h2, h3 {
color: #2c3e50;
}
.container {
background: rgba(255, 255, 255, 0.95);
padding: 30px;
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
max-width: 100%;
margin: 0 auto;
}
.subscription-form {
background: linear-gradient(135deg, #fef5e7 0%, #fdebd0 100%);
padding: 25px;
border-radius: 12px;
margin-bottom: 30px;
border: 1px solid rgba(230, 126, 34, 0.2);
}
.exercise-container {
display: none;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #2c3e50;
}
input, select, textarea {
width: 100%;
padding: 12px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s ease;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: #e67e22;
box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1);
}
button {
background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
color: white;
border: none;
padding: 15px 25px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(230, 126, 34, 0.4);
}
.question {
margin-bottom: 25px;
padding: 25px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
border-left: 5px solid #e67e22;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.question-number {
font-weight: bold;
color: #2c3e50;
margin-bottom: 12px;
font-size: 18px;
}
.question-text {
font-size: 16px;
margin-bottom: 15px;
line-height: 1.6;
color: #2c3e50;
}
.question-type {
background: #e67e22;
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
display: inline-block;
margin-bottom: 10px;
}
.options {
display: grid;
gap: 12px;
}
.option {
display: flex;
align-items: center;
padding: 12px;
background: white;
border: 2px solid #e9ecef;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.option:hover {
border-color: #e67e22;
background: linear-gradient(135deg, #fef5e7 0%, #fdebd0 100%);
transform: translateX(5px);
}
.option input[type=”radio”], .option input[type=”checkbox”] {
margin-right: 12px;
width: auto;
transform: scale(1.2);
}
.option.correct {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
border-color: #28a745;
}
.option.incorrect {
background: linear-gradient(135deg, #f8d7da 0%, #f1b0b7 100%);
border-color: #dc3545;
}
.option.correct-answer {
background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
border-color: #17a2b8;
}
.result {
margin-top: 30px;
padding: 25px;
background: linear-gradient(135deg, #eafaf1 0%, #d4f1de 100%);
border-radius: 12px;
display: none;
border: 1px solid rgba(40, 167, 69, 0.2);
}
.certificate {
text-align: center;
margin-top: 30px;
padding: 25px;
border: 3px solid #2c3e50;
border-radius: 12px;
display: none;
background: white;
}
.error {
color: #dc3545;
font-size: 14px;
margin-top: 5px;
}
.progress-bar {
width: 100%;
height: 25px;
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
border-radius: 15px;
margin-bottom: 25px;
overflow: hidden;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.progress-fill {
height: 100%;
background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
border-radius: 15px;
transition: width 0.5s ease;
width: 0%;
box-shadow: 0 2px 4px rgba(230, 126, 34, 0.3);
}
#certificatePreview {
position: relative;
width: 100%;
height: 500px;
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
border: 12px solid transparent;
border-image: linear-gradient(45deg, #e67e22, #d35400, #c0392b, #8e44ad, #9b59b6) 1;
box-sizing: border-box;
overflow: hidden;
margin-bottom: 25px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.certificate-content {
position: relative;
z-index: 1;
padding: 25px;
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: 140px;
height: 70px;
background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 18px;
}
.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;
background: #f9f9f9;
border: 2px solid #dee2e6;
border-radius: 8px;
}
.certificate-signature {
flex-grow: 1;
text-align: center;
}
.loading {
display: none;
margin-top: 15px;
font-style: italic;
color: #6c757d;
text-align: center;
}
.instruction-box {
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
border: 2px solid #ffeaa7;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
}
.theme-section {
margin-bottom: 35px;
padding: 25px;
background: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 100%);
border-radius: 12px;
border-left: 6px solid #c0392b;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.theme-title {
color: #c0392b;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.multiple-choice-container {
display: grid;
gap: 10px;
}
.score-display {
font-size: 24px;
font-weight: bold;
color: #27ae60;
text-align: center;
margin: 20px 0;
padding: 15px;
background: linear-gradient(135deg, #d4f1de 0%, #c3e6cb 100%);
border-radius: 10px;
}

document.addEventListener(‘DOMContentLoaded’, function() {
// Configuration du quiz
const totalQuestions = 30;
const passingScore = 70;

// Références aux éléments DOM
const subscriptionForm = document.getElementById(‘subscriptionForm’);
const exerciseContainer = document.getElementById(‘exerciseContainer’);
const startButton = document.getElementById(‘startButton’);
const verifyButton = document.getElementById(‘verifyButton’);
const resultContainer = document.getElementById(‘resultContainer’);
const scoreDisplay = document.getElementById(‘scoreDisplay’);
const resultText = document.getElementById(‘resultText’);
const mistakesContainer = document.getElementById(‘mistakesContainer’);
const showCertificateButton = document.getElementById(‘showCertificateButton’);
const certificateContainer = document.getElementById(‘certificateContainer’);
const downloadCertificateButton = document.getElementById(‘downloadCertificateButton’);
const pdfLoading = document.getElementById(‘pdfLoading’);
const progressFill = document.getElementById(‘progressFill’);

// Données utilisateur
let userData = {
prenom: ”,
nom: ”,
email: ”,
score: 0
};

// Démarrer le quiz
startButton.addEventListener(‘click’, function() {
if (validateForm()) {
subscriptionForm.style.display = ‘none’;
exerciseContainer.style.display = ‘block’;
exerciseContainer.scrollIntoView({ behavior: ‘smooth’ });
}
});

// Validation du formulaire
function validateForm() {
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;

clearErrors();

let isValid = true;

if (!prenom) {
showError(‘prenomError’, ‘Veuillez entrer votre prénom’);
isValid = false;
}

if (!nom) {
showError(‘nomError’, ‘Veuillez entrer votre nom’);
isValid = false;
}

if (!email) {
showError(‘emailError’, ‘Veuillez entrer votre email’);
isValid = false;
} else if (!/^[^s@]+@[^s@]+.[^s@]+$/.test(email)) {
showError(‘emailError’, ‘Veuillez entrer un email valide’);
isValid = false;
}

if (!subscribe) {
showError(‘subscribeError’, ‘Veuillez accepter de vous abonner’);
isValid = false;
}

if (isValid) {
userData.prenom = prenom;
userData.nom = nom;
userData.email = email;
}

return isValid;
}

function clearErrors() {
const errorElements = [‘prenomError’, ‘nomError’, ‘emailError’, ‘subscribeError’];
errorElements.forEach(id => {
document.getElementById(id).textContent = ”;
});
}

function showError(elementId, message) {
document.getElementById(elementId).textContent = message;
}

// Mettre à jour la barre de progression
function updateProgress() {
const answeredQuestions = getAnsweredQuestionsCount();
const progress = (answeredQuestions / totalQuestions) * 100;
progressFill.style.width = progress + ‘%’;
}

function getAnsweredQuestionsCount() {
let count = 0;

for (let i = 1; i 0) {
count++;
}
}

return count;
}

document.addEventListener(‘change’, updateProgress);
document.addEventListener(‘input’, updateProgress);

// Vérifier les réponses
verifyButton.addEventListener(‘click’, function() {
const results = checkAnswers();
displayResults(results);
});

function checkAnswers() {
let correctAnswers = 0;
const mistakes = [];
const questions = document.querySelectorAll(‘.question’);

questions.forEach((question, index) => {
const questionNum = index + 1;
const type = question.dataset.type;
const correctAnswer = question.dataset.answer;

let isCorrect = false;
let userAnswer = ”;
let correctText = ”;

if (type === ‘single’) {
const selectedRadio = question.querySelector(`input[name=”q${questionNum}”]:checked`);
if (selectedRadio) {
userAnswer = selectedRadio.value;
isCorrect = userAnswer === correctAnswer;

const options = question.querySelectorAll(‘.option’);
options.forEach(option => {
option.classList.remove(‘correct’, ‘incorrect’, ‘correct-answer’);
});

if (isCorrect) {
selectedRadio.closest(‘.option’).classList.add(‘correct’);
} else {
selectedRadio.closest(‘.option’).classList.add(‘incorrect’);
const correctOption = question.querySelector(`input[value=”${correctAnswer}”]`);
if (correctOption) {
correctOption.closest(‘.option’).classList.add(‘correct-answer’);
}
}
}
} else if (type === ‘multiple’) {
const selectedCheckboxes = question.querySelectorAll(`input[name=”q${questionNum}”]:checked`);
const selectedValues = Array.from(selectedCheckboxes).map(cb => cb.value).sort();
const correctValues = correctAnswer.split(‘,’).sort();

isCorrect = JSON.stringify(selectedValues) === JSON.stringify(correctValues);
userAnswer = selectedValues.join(‘, ‘);
correctText = correctValues.join(‘, ‘);
}

if (isCorrect) {
correctAnswers++;
} else {
const questionText = question.querySelector(‘.question-text’).textContent;
mistakes.push({
number: questionNum,
question: questionText,
userAnswer: userAnswer || ‘Non répondu’,
correctAnswer: correctText || correctAnswer
});
}
});

return {
correct: correctAnswers,
total: totalQuestions,
score: Math.round((correctAnswers / totalQuestions) * 100),
mistakes: mistakes
};
}

function displayResults(results) {
userData.score = results.score;

scoreDisplay.textContent = `${results.score}%`;
resultText.innerHTML = `Vous avez obtenu ${results.correct} réponses correctes sur ${results.total}.`;

mistakesContainer.innerHTML = ”;
if (results.mistakes.length > 0) {
const mistakesTitle = document.createElement(‘h4’);
mistakesTitle.textContent = `📝 Questions à revoir (${results.mistakes.length}):`;
mistakesContainer.appendChild(mistakesTitle);

results.mistakes.forEach(mistake => {
const mistakeItem = document.createElement(‘div’);
mistakeItem.style.cssText = `
margin-bottom: 15px;
padding: 15px;
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
border: 1px solid #ffeaa7;
border-radius: 8px;
border-left: 4px solid #f39c12;
`;
mistakeItem.innerHTML = `
Question ${mistake.number}:
${mistake.question}
Votre réponse: ${mistake.userAnswer}
Réponse correcte: ${mistake.correctAnswer}
`;
mistakesContainer.appendChild(mistakeItem);
});
} else {
mistakesContainer.innerHTML = ‘

🎉 Parfait ! Toutes vos réponses sont correctes !

‘;
}

const encouragementMsg = getEncouragementMessage(results.score);
const encouragementDiv = document.createElement(‘div’);
encouragementDiv.style.cssText = `
margin-top: 20px;
padding: 15px;
background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
border-radius: 8px;
text-align: center;
font-style: italic;
color: #2c3e50;
`;
encouragementDiv.textContent = encouragementMsg;
resultText.appendChild(encouragementDiv);

if (results.score >= passingScore) {
showCertificateButton.style.display = ‘block’;
showCertificateButton.textContent = results.score === 100 ?
‘🏆 Certificat d’Excellence Parfaite’ :
‘🏆 Afficher mon certificat’;
} else {
showCertificateButton.style.display = ‘none’;
const encouragement = document.createElement(‘div’);
encouragement.style.cssText = `
margin-top: 20px;
padding: 15px;
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-radius: 8px;
text-align: center;
`;
encouragement.innerHTML = `

💪 Continue tes efforts !

Il faut au moins ${passingScore}% pour obtenir le certificat. Révise et réessaie !

`;
mistakesContainer.appendChild(encouragement);
}

resultContainer.style.display = ‘block’;
resultContainer.scrollIntoView({ behavior: ‘smooth’ });
}

function getEncouragementMessage(score) {
if (score === 100) {
return “Parfait ! Vous maîtrisez parfaitement le vocabulaire du chef-d’œuvre !”;
} else if (score >= 90) {
return “Excellent ! Vous avez une très bonne connaissance du vocabulaire culturel !”;
} else if (score >= 80) {
return “Très bien ! Quelques révisions et vous serez au sommet !”;
} else if (score >= 70) {
return “Bien ! Vous avez de bonnes bases. Continuez à enrichir votre vocabulaire !”;
} else if (score >= 60) {
return “Pas mal ! Avec plus de pratique, vous progresserez rapidement !”;
} else {
return “Courage ! Continuez à étudier le vocabulaire culturel !”;
}
}

showCertificateButton.addEventListener(‘click’, function() {
displayCertificate();
certificateContainer.style.display = ‘block’;
certificateContainer.scrollIntoView({ behavior: ‘smooth’ });
});

function displayCertificate() {
const now = new Date();
const dateString = now.toLocaleDateString(‘fr-FR’, {
year: ‘numeric’,
month: ‘long’,
day: ‘numeric’
});

document.getElementById(‘certificateName’).textContent =
`${userData.prenom} ${userData.nom}`;
document.getElementById(‘certificateScore’).textContent =
`${userData.score}%`;
document.getElementById(‘certificateDate’).textContent = dateString;
}

downloadCertificateButton.addEventListener(‘click’, function() {
downloadCertificate();
});

function downloadCertificate() {
pdfLoading.style.display = ‘block’;
downloadCertificateButton.disabled = true;

const certificatePreview = document.getElementById(‘certificatePreview’);

html2canvas(certificatePreview, {
scale: 2,
backgroundColor: ‘#ffffff’
}).then(canvas => {
const imgData = canvas.toDataURL(‘image/png’);
const pdf = new jsPDF({
orientation: ‘landscape’,
unit: ‘mm’,
format: ‘a4’
});

const imgWidth = 297;
const imgHeight = (canvas.height * imgWidth) / canvas.width;

pdf.addImage(imgData, ‘PNG’, 0, 0, imgWidth, imgHeight);
pdf.save(`Certificat_${userData.prenom}_${userData.nom}.pdf`);

pdfLoading.style.display = ‘none’;
downloadCertificateButton.disabled = false;
}).catch(error => {
console.error(‘Erreur lors de la génération du PDF:’, error);
pdfLoading.style.display = ‘none’;
downloadCertificateButton.disabled = false;
alert(‘Erreur lors de la génération du certificat. Veuillez réessayer.’);
});
}
});

// Al final de tu script de verificación, después de mostrar resultados:

async function enviarResultadosAlServidor(results) {
const datosEnvio = {
prenom: userData.prenom,
nom: userData.nom,
email: userData.email,
score: results.score,
correct: results.correct,
total: results.total,
mistakes: results.mistakes
};

try {
const response = await fetch(‘https://script.google.com/macros/s/AKfycbyV4TFswAlj9jRhpVwPpWTipgaEnbw1xTmlZlMDaCHOUtaVStiKUdenNJ0JORqjumtcNA/exec’, {
method: ‘POST’,
body: JSON.stringify(datosEnvio)
});

const resultado = await response.json();
console.log(resultado);

if (resultado.success) {
alert(‘Correos enviados exitosamente’);
}
} catch (error) {
console.error(‘Error al enviar:’, error);
}
}

// Llama esta función al final de displayResults()
verifyButton.addEventListener(‘click’, function() {
const results = checkAnswers();
displayResults(results);
enviarResultadosAlServidor(results); // AGREGAR ESTA LÍNEA
});