|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Générateur de Flashcards et Quiz | Apprentissage Amélioré</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #f8fafc; |
|
|
background-image: linear-gradient(to bottom, #f0f9ff, #ffffff); |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
|
|
|
.flashcard { |
|
|
perspective: 1000px; |
|
|
height: 240px; |
|
|
cursor: pointer; |
|
|
} |
|
|
.flashcard-inner { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
transition: transform 0.7s; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
.flashcard.flipped .flashcard-inner { |
|
|
transform: rotateY(180deg); |
|
|
} |
|
|
.flashcard-front, .flashcard-back { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
-webkit-backface-visibility: hidden; |
|
|
backface-visibility: hidden; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 0.75rem; |
|
|
padding: 1.5rem; |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); |
|
|
text-align: center; |
|
|
} |
|
|
.flashcard-front { |
|
|
background-color: #ffffff; |
|
|
border: 1px solid #e2e8f0; |
|
|
color: #1f2937; |
|
|
} |
|
|
.flashcard-back { |
|
|
background-color: #0ea5e9; |
|
|
color: white; |
|
|
transform: rotateY(180deg); |
|
|
} |
|
|
|
|
|
|
|
|
.quiz-option label { |
|
|
transition: all 0.3s ease; |
|
|
border: 2px solid #e5e7eb; |
|
|
padding: 1rem 1.5rem; |
|
|
border-radius: 0.5rem; |
|
|
cursor: pointer; |
|
|
display: block; |
|
|
} |
|
|
.quiz-option input[type="radio"]:checked + label { |
|
|
border-color: #0ea5e9; |
|
|
background-color: #e0f2fe; |
|
|
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2); |
|
|
} |
|
|
.quiz-option.correct label { |
|
|
border-color: #10b981; |
|
|
background-color: #d1fae5; |
|
|
} |
|
|
.quiz-option.incorrect label { |
|
|
border-color: #ef4444; |
|
|
background-color: #fee2e2; |
|
|
} |
|
|
|
|
|
|
|
|
.shake { |
|
|
animation: shake 0.5s ease-in-out; |
|
|
} |
|
|
@keyframes shake { |
|
|
0%, 100% { transform: translateX(0); } |
|
|
25% { transform: translateX(-5px); } |
|
|
75% { transform: translateX(5px); } |
|
|
} |
|
|
|
|
|
.confetti { |
|
|
position: fixed; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
background-color: #f00; |
|
|
opacity: 0; |
|
|
animation: confetti-fall 3s linear forwards; |
|
|
} |
|
|
@keyframes confetti-fall { |
|
|
0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; } |
|
|
100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } |
|
|
} |
|
|
|
|
|
|
|
|
.btn-primary { |
|
|
@apply bg-sky-600 text-white px-6 py-3 rounded-lg shadow-md hover:bg-sky-700 transition duration-300 ease-in-out transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-opacity-50 flex items-center justify-center disabled:bg-sky-300 disabled:cursor-not-allowed; |
|
|
} |
|
|
.btn-secondary { |
|
|
@apply bg-white text-sky-600 border border-sky-600 px-6 py-3 rounded-lg shadow-md hover:bg-sky-50 transition duration-300 ease-in-out transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-opacity-50 flex items-center justify-center; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="text-slate-800"> |
|
|
<div class="min-h-screen"> |
|
|
<header class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<a href="#" class="text-2xl font-bold text-sky-700 flex items-center"> |
|
|
<i class="fas fa-brain mr-3 text-sky-500"></i> |
|
|
<span>Mariam Quizz</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="container mx-auto px-4 py-8 md:py-12"> |
|
|
<div id="configSection" class="max-w-3xl mx-auto"> |
|
|
|
|
|
<div class="text-center mb-10"> |
|
|
<h1 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-4">Apprenez plus vite, retenez plus longtemps.</h1> |
|
|
<p class="text-lg text-slate-600">Transformez n'importe quel sujet en flashcards ou en quiz interactifs en quelques secondes.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 md:p-8"> |
|
|
<div class="relative z-10"> |
|
|
<h2 class="text-2xl font-semibold text-slate-800 mb-6 text-center md:text-left">1. De quoi voulez-vous parler ?</h2> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i> |
|
|
<input type="text" id="topic" class="w-full px-4 py-3 border-2 border-slate-300 rounded-lg focus:border-sky-500 focus:ring-sky-200 focus:ring transition-colors duration-300 pl-12" placeholder="Ex: Les capitales du monde, la photosynthèse..."> |
|
|
<div id="topicError" class="text-red-500 text-sm mt-1 ml-2 hidden">Veuillez entrer un sujet.</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-2xl font-semibold text-slate-800 mb-4 text-center md:text-left">2. Comment voulez-vous apprendre ?</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="relative"> |
|
|
<input type="radio" id="typeFlashcards" name="contentType" value="flashcards" checked class="peer absolute opacity-0"> |
|
|
<label for="typeFlashcards" class="flex flex-col items-center justify-center p-5 border-2 border-slate-200 rounded-lg cursor-pointer transition-all duration-300 hover:shadow-md peer-checked:border-sky-500 peer-checked:bg-sky-50 peer-checked:shadow-lg"> |
|
|
<div class="w-16 h-16 rounded-full bg-sky-100 flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-clone text-2xl text-sky-600"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-slate-800">Flashcards</h3> |
|
|
<p class="text-sm text-slate-600 text-center mt-1">Idéal pour mémoriser des faits et définitions.</p> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<input type="radio" id="typeQuiz" name="contentType" value="quiz" class="peer absolute opacity-0"> |
|
|
<label for="typeQuiz" class="flex flex-col items-center justify-center p-5 border-2 border-slate-200 rounded-lg cursor-pointer transition-all duration-300 hover:shadow-md peer-checked:border-sky-500 peer-checked:bg-sky-50 peer-checked:shadow-lg"> |
|
|
<div class="w-16 h-16 rounded-full bg-sky-100 flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-question-circle text-2xl text-sky-600"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-slate-800">Quiz</h3> |
|
|
<p class="text-sm text-slate-600 text-center mt-1">Parfait pour tester et valider vos connaissances.</p> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row items-center justify-between pt-4 gap-4"> |
|
|
<div class="text-sm text-slate-500 italic"> |
|
|
<i class="fas fa-info-circle mr-1"></i> La génération peut prendre jusqu'à 1 minute. |
|
|
</div> |
|
|
<button id="generateBtn" class="btn-primary w-full sm:w-auto"> |
|
|
<span class="mr-2">Lancer la magie</span> |
|
|
<i class="fas fa-wand-magic-sparkles"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="loading" class="hidden max-w-3xl mx-auto"> |
|
|
<div class="bg-white rounded-xl shadow-lg p-8 text-center"> |
|
|
<div class="flex flex-col items-center justify-center space-y-4"> |
|
|
<div class="relative w-24 h-24"> |
|
|
<div class="absolute inset-0 border-4 border-sky-100 rounded-full"></div> |
|
|
<div class="absolute inset-0 border-4 border-t-sky-500 rounded-full animate-spin"></div> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<i class="fas fa-lightbulb text-3xl text-sky-500 animate-pulse"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-2xl font-semibold text-slate-800">Création en cours...</h3> |
|
|
<p class="text-slate-600">Notre IA prépare votre contenu d'apprentissage personnalisé.</p> |
|
|
|
|
|
<div class="w-full max-w-md mt-6 pt-4 border-t border-slate-200"> |
|
|
<div id="loadingSteps" class="text-left space-y-3"> |
|
|
<div id="step1" class="flex items-center text-slate-500 transition-all duration-500"> |
|
|
<div class="w-6 h-6 rounded-full flex items-center justify-center mr-3 bg-sky-500 text-white"><i class="fas fa-check text-xs"></i></div> |
|
|
<span class="font-medium">Analyse du sujet</span> |
|
|
</div> |
|
|
<div id="step2" class="flex items-center text-slate-500 transition-all duration-500 opacity-50"> |
|
|
<div class="w-6 h-6 rounded-full flex items-center justify-center mr-3 bg-slate-300 text-white"><i class="fas fa-spinner fa-spin text-xs"></i></div> |
|
|
<span>Recherche des informations clés</span> |
|
|
</div> |
|
|
<div id="step3" class="flex items-center text-slate-500 transition-all duration-500 opacity-50"> |
|
|
<div class="w-6 h-6 rounded-full flex items-center justify-center mr-3 bg-slate-300 text-white"><i class="fas fa-hourglass-half text-xs"></i></div> |
|
|
<span>Génération des questions/réponses</span> |
|
|
</div> |
|
|
<div id="step4" class="flex items-center text-slate-500 transition-all duration-500 opacity-50"> |
|
|
<div class="w-6 h-6 rounded-full flex items-center justify-center mr-3 bg-slate-300 text-white"><i class="fas fa-paper-plane text-xs"></i></div> |
|
|
<span>Finalisation</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="resultsContainer" class="mt-12 max-w-4xl mx-auto hidden"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="errorContainer" class="mt-8 max-w-3xl mx-auto"></div> |
|
|
|
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
const generateBtn = document.getElementById('generateBtn'); |
|
|
const configSection = document.getElementById('configSection'); |
|
|
const loadingIndicator = document.getElementById('loading'); |
|
|
const resultsContainer = document.getElementById('resultsContainer'); |
|
|
const errorContainer = document.getElementById('errorContainer'); |
|
|
const topicInput = document.getElementById('topic'); |
|
|
const topicError = document.getElementById('topicError'); |
|
|
|
|
|
|
|
|
topicInput.focus(); |
|
|
|
|
|
const steps = [ |
|
|
document.getElementById('step2'), |
|
|
document.getElementById('step3'), |
|
|
document.getElementById('step4') |
|
|
]; |
|
|
|
|
|
let loadingInterval; |
|
|
|
|
|
function simulateLoading() { |
|
|
let currentStep = 0; |
|
|
const stepDurations = [2500, 3000, 1500]; |
|
|
|
|
|
function nextStep() { |
|
|
if (currentStep < steps.length) { |
|
|
const stepEl = steps[currentStep]; |
|
|
stepEl.classList.remove('opacity-50'); |
|
|
stepEl.querySelector('div').classList.remove('bg-slate-300'); |
|
|
stepEl.querySelector('div').classList.add('bg-sky-500'); |
|
|
stepEl.querySelector('i').className = 'fas fa-check text-xs'; |
|
|
|
|
|
if(currentStep + 1 < steps.length) { |
|
|
const nextStepEl = steps[currentStep + 1]; |
|
|
nextStepEl.querySelector('div').querySelector('i').className = 'fas fa-spinner fa-spin text-xs'; |
|
|
} |
|
|
|
|
|
currentStep++; |
|
|
loadingInterval = setTimeout(nextStep, stepDurations[currentStep]); |
|
|
} |
|
|
} |
|
|
loadingInterval = setTimeout(nextStep, stepDurations[0]); |
|
|
} |
|
|
|
|
|
function createConfetti() { |
|
|
const confettiCount = 100; |
|
|
const colors = ['#0ea5e9', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6']; |
|
|
const container = document.body; |
|
|
for (let i = 0; i < confettiCount; i++) { |
|
|
const confetti = document.createElement('div'); |
|
|
confetti.className = 'confetti'; |
|
|
confetti.style.left = `${Math.random() * 100}vw`; |
|
|
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; |
|
|
confetti.style.width = `${Math.random() * 8 + 5}px`; |
|
|
confetti.style.height = confetti.style.width; |
|
|
confetti.style.animationDuration = `${Math.random() * 3 + 2}s`; |
|
|
confetti.style.animationDelay = `${Math.random() * 0.2}s`; |
|
|
container.appendChild(confetti); |
|
|
setTimeout(() => confetti.remove(), 5000); |
|
|
} |
|
|
} |
|
|
|
|
|
function flipCard(card) { |
|
|
card.classList.toggle('flipped'); |
|
|
} |
|
|
|
|
|
function showError(message) { |
|
|
loadingIndicator.classList.add('hidden'); |
|
|
configSection.classList.remove('hidden'); |
|
|
generateBtn.disabled = false; |
|
|
|
|
|
errorContainer.innerHTML = ` |
|
|
<div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-md"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-exclamation-circle text-red-500 mt-0.5"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm text-red-700">${message}</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
generateBtn.addEventListener('click', function() { |
|
|
const topic = topicInput.value.trim(); |
|
|
if (!topic) { |
|
|
topicInput.classList.add('shake', 'border-red-500'); |
|
|
topicError.classList.remove('hidden'); |
|
|
setTimeout(() => { |
|
|
topicInput.classList.remove('shake', 'border-red-500'); |
|
|
topicError.classList.add('hidden'); |
|
|
}, 2000); |
|
|
return; |
|
|
} |
|
|
|
|
|
const contentType = document.querySelector('input[name="contentType"]:checked').value; |
|
|
|
|
|
generateBtn.disabled = true; |
|
|
configSection.classList.add('hidden'); |
|
|
loadingIndicator.classList.remove('hidden'); |
|
|
resultsContainer.innerHTML = ''; |
|
|
resultsContainer.classList.add('hidden'); |
|
|
errorContainer.innerHTML = ''; |
|
|
|
|
|
simulateLoading(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
clearTimeout(loadingInterval); |
|
|
const isSuccess = Math.random() > 0.1; |
|
|
|
|
|
if (!isSuccess) { |
|
|
showError("Désolé, une erreur est survenue lors de la communication avec le serveur. Veuillez réessayer."); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const mockData = { |
|
|
flashcards: Array.from({ length: 9 }, (_, i) => ({ |
|
|
question: `Quelle est la question numéro ${i + 1} sur "${topic}" ?`, |
|
|
answer: `Ceci est la réponse détaillée pour la question ${i + 1}.` |
|
|
})), |
|
|
quiz: Array.from({ length: 5 }, (_, i) => ({ |
|
|
question: `Question de quiz n°${i + 1} sur "${topic}" ?`, |
|
|
options: ['Option A', 'Option B (correcte)', 'Option C', 'Option D'], |
|
|
correctAnswer: 'Option B (correcte)', |
|
|
explanation: `L'option B est correcte car elle représente la meilleure réponse possible pour la question ${i + 1}.` |
|
|
})) |
|
|
}; |
|
|
|
|
|
loadingIndicator.classList.add('hidden'); |
|
|
resultsContainer.classList.remove('hidden'); |
|
|
createConfetti(); |
|
|
|
|
|
if (contentType === 'flashcards') { |
|
|
displayFlashcards(mockData.flashcards, topic); |
|
|
} else { |
|
|
displayQuiz(mockData.quiz, topic); |
|
|
} |
|
|
}, 7000); |
|
|
}); |
|
|
|
|
|
function displayFlashcards(flashcards, topic) { |
|
|
resultsContainer.innerHTML = ` |
|
|
<div class="text-center mb-8"> |
|
|
<h2 class="text-3xl font-bold text-slate-800">Flashcards sur : <span class="text-sky-600">${topic}</span></h2> |
|
|
<p class="text-slate-600 mt-2">Cliquez sur une carte pour voir la réponse. Répétez jusqu'à maîtriser le sujet !</p> |
|
|
</div> |
|
|
<div id="flashcardsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div> |
|
|
<div class="mt-12 flex justify-center"> |
|
|
<button id="newTopicBtn" class="btn-primary"> |
|
|
<i class="fas fa-plus mr-2"></i> Créer un nouveau jeu |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
const flashcardsGrid = document.getElementById('flashcardsGrid'); |
|
|
flashcards.forEach((card, index) => { |
|
|
const cardElement = document.createElement('div'); |
|
|
cardElement.className = 'flashcard'; |
|
|
cardElement.onclick = () => flipCard(cardElement); |
|
|
cardElement.innerHTML = ` |
|
|
<div class="flashcard-inner"> |
|
|
<div class="flashcard-front"> |
|
|
<div> |
|
|
<div class="absolute top-3 left-3 text-xs font-bold text-slate-400">#${index + 1}</div> |
|
|
<h3 class="text-lg font-semibold">${card.question}</h3> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flashcard-back"> |
|
|
<div> |
|
|
<div class="absolute top-3 left-3 text-xs font-bold text-white/70">#${index + 1}</div> |
|
|
<p class="font-medium">${card.answer}</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
flashcardsGrid.appendChild(cardElement); |
|
|
}); |
|
|
|
|
|
document.getElementById('newTopicBtn').addEventListener('click', backToTop); |
|
|
} |
|
|
|
|
|
function displayQuiz(quizQuestions, topic) { |
|
|
let currentScore = 0; |
|
|
let answeredQuestions = 0; |
|
|
|
|
|
resultsContainer.innerHTML = ` |
|
|
<div class="text-center mb-8"> |
|
|
<h2 class="text-3xl font-bold text-slate-800">Quiz sur : <span class="text-sky-600">${topic}</span></h2> |
|
|
<p class="text-slate-600 mt-2">Testez vos connaissances et apprenez de vos erreurs.</p> |
|
|
</div> |
|
|
<div class="sticky top-20 z-40 mb-8 flex justify-center"> |
|
|
<div class="bg-white/80 backdrop-blur-sm px-6 py-3 rounded-full shadow-lg flex items-center"> |
|
|
<span class="text-slate-700 font-medium">Score: </span> |
|
|
<span id="score" class="ml-2 text-sky-700 font-bold text-lg">0 / ${quizQuestions.length}</span> |
|
|
</div> |
|
|
</div> |
|
|
<div id="questionsContainer" class="space-y-8"></div> |
|
|
<div id="quizResultContainer" class="mt-12"></div> |
|
|
`; |
|
|
|
|
|
const questionsContainer = document.getElementById('questionsContainer'); |
|
|
quizQuestions.forEach((q, qIndex) => { |
|
|
const questionElement = document.createElement('div'); |
|
|
questionElement.className = 'bg-white rounded-xl shadow-md p-6 transition-all duration-300'; |
|
|
questionElement.id = `question-${qIndex}`; |
|
|
|
|
|
const optionsHtml = q.options.map((option, oIndex) => ` |
|
|
<div class="quiz-option"> |
|
|
<input type="radio" id="q${qIndex}-o${oIndex}" name="question-${qIndex}" value="${option}" class="absolute opacity-0"> |
|
|
<label for="q${qIndex}-o${oIndex}"> |
|
|
${option} |
|
|
</label> |
|
|
</div> |
|
|
`).join(''); |
|
|
|
|
|
questionElement.innerHTML = ` |
|
|
<p class="text-sm font-semibold text-sky-600 mb-2">Question ${qIndex + 1} sur ${quizQuestions.length}</p> |
|
|
<h3 class="text-xl font-medium text-slate-800">${q.question}</h3> |
|
|
<div class="mt-4 space-y-3">${optionsHtml}</div> |
|
|
<div class="explanation hidden mt-4 p-4 bg-sky-50 border border-sky-200 rounded-lg"> |
|
|
<p class="font-semibold text-sky-800">💡 Explication</p> |
|
|
<p class="mt-1 text-sky-700 text-sm">${q.explanation}</p> |
|
|
</div> |
|
|
`; |
|
|
questionsContainer.appendChild(questionElement); |
|
|
|
|
|
const radios = questionElement.querySelectorAll('input[type="radio"]'); |
|
|
radios.forEach(radio => { |
|
|
radio.addEventListener('change', (e) => handleAnswer(e, q, qIndex)); |
|
|
}); |
|
|
}); |
|
|
|
|
|
function handleAnswer(event, questionData, qIndex) { |
|
|
answeredQuestions++; |
|
|
const selectedValue = event.target.value; |
|
|
const parentDiv = event.target.parentElement; |
|
|
|
|
|
|
|
|
const allRadios = document.querySelectorAll(`input[name="question-${qIndex}"]`); |
|
|
allRadios.forEach(r => r.disabled = true); |
|
|
|
|
|
if (selectedValue === questionData.correctAnswer) { |
|
|
currentScore++; |
|
|
parentDiv.classList.add('correct'); |
|
|
} else { |
|
|
parentDiv.classList.add('incorrect'); |
|
|
|
|
|
allRadios.forEach(r => { |
|
|
if (r.value === questionData.correctAnswer) { |
|
|
r.parentElement.classList.add('correct'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
document.getElementById('score').textContent = `${currentScore} / ${quizQuestions.length}`; |
|
|
parentDiv.closest('.bg-white').querySelector('.explanation').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
if (qIndex < quizQuestions.length - 1) { |
|
|
document.getElementById(`question-${qIndex + 1}`).scrollIntoView({ behavior: 'smooth', block: 'center' }); |
|
|
} else if (answeredQuestions === quizQuestions.length) { |
|
|
displayQuizResults(currentScore, quizQuestions.length); |
|
|
} |
|
|
}, 2000); |
|
|
} |
|
|
} |
|
|
|
|
|
function displayQuizResults(score, total) { |
|
|
const percentage = Math.round((score / total) * 100); |
|
|
let resultMessage, resultClass, resultIcon; |
|
|
|
|
|
if (percentage >= 80) { |
|
|
resultMessage = 'Excellent travail ! Vous êtes un expert !'; |
|
|
resultClass = 'bg-green-500'; |
|
|
resultIcon = 'fas fa-trophy'; |
|
|
createConfetti(); |
|
|
} else if (percentage >= 50) { |
|
|
resultMessage = 'Pas mal ! Continuez comme ça.'; |
|
|
resultClass = 'bg-sky-500'; |
|
|
resultIcon = 'fas fa-medal'; |
|
|
} else { |
|
|
resultMessage = 'Continuez à étudier, vous allez y arriver !'; |
|
|
resultClass = 'bg-amber-500'; |
|
|
resultIcon = 'fas fa-book-open'; |
|
|
} |
|
|
|
|
|
const resultsElement = document.getElementById('quizResultContainer'); |
|
|
resultsElement.innerHTML = ` |
|
|
<div class="bg-white rounded-xl shadow-lg p-8 text-center"> |
|
|
<i class="${resultIcon} text-5xl text-yellow-400 mb-4"></i> |
|
|
<h3 class="text-2xl font-bold">Quiz Terminé !</h3> |
|
|
<p class="text-slate-600 mt-2 mb-4">${resultMessage}</p> |
|
|
<p class="text-4xl font-bold my-4">${score} / ${total}</p> |
|
|
<div class="w-full bg-slate-200 rounded-full h-4"> |
|
|
<div class="${resultClass} h-4 rounded-full" style="width: ${percentage}%"></div> |
|
|
</div> |
|
|
<div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center"> |
|
|
<button id="newQuizBtn" class="btn-primary"> |
|
|
<i class="fas fa-plus mr-2"></i> Nouveau Quiz |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
resultsElement.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
|
|
document.getElementById('newQuizBtn').addEventListener('click', backToTop); |
|
|
} |
|
|
|
|
|
function backToTop() { |
|
|
resultsContainer.classList.add('hidden'); |
|
|
configSection.classList.remove('hidden'); |
|
|
generateBtn.disabled = false; |
|
|
topicInput.value = ''; |
|
|
window.scrollTo(0, 0); |
|
|
topicInput.focus(); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
