|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Flashcards et Quiz</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<style> |
|
|
body { |
|
|
background: linear-gradient(135deg, #1e3a8a, #6b7280); |
|
|
min-height: 100vh; |
|
|
} |
|
|
.container { |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
|
|
padding: 2rem; |
|
|
} |
|
|
.progress-bar { |
|
|
height: 10px; |
|
|
background: #e5e7eb; |
|
|
border-radius: 5px; |
|
|
overflow: hidden; |
|
|
} |
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
background: linear-gradient(to right, #10b981, #3b82f6); |
|
|
transition: width 0.5s ease-in-out; |
|
|
} |
|
|
.question-card { |
|
|
transform: scale(0.9); |
|
|
opacity: 0; |
|
|
animation: slideIn 0.5s forwards; |
|
|
} |
|
|
@keyframes slideIn { |
|
|
to { transform: scale(1); opacity: 1; } |
|
|
} |
|
|
.correct-answer { |
|
|
animation: correctFlash 0.8s; |
|
|
} |
|
|
.wrong-answer { |
|
|
animation: wrongShake 0.5s; |
|
|
} |
|
|
@keyframes correctFlash { |
|
|
0% { background-color: #10b981; transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { background-color: #d1fae5; transform: scale(1); } |
|
|
} |
|
|
@keyframes wrongShake { |
|
|
0%, 100% { transform: translateX(0); } |
|
|
25% { transform: translateX(-10px); } |
|
|
75% { transform: translateX(10px); } |
|
|
} |
|
|
.explanation-container { |
|
|
display: none; |
|
|
margin-top: 1rem; |
|
|
padding: 1rem; |
|
|
background: #f8fafc; |
|
|
border-left: 4px solid #ef4444; |
|
|
border-radius: 5px; |
|
|
animation: slideFromRight 0.5s ease-in-out; |
|
|
} |
|
|
@keyframes slideFromRight { |
|
|
from { transform: translateX(100%); opacity: 0; } |
|
|
to { transform: translateX(0); opacity: 1; } |
|
|
} |
|
|
.character { |
|
|
width: 100px; |
|
|
height: 100px; |
|
|
background: url('chemin/vers/professeur.png') center/contain no-repeat; |
|
|
margin-right: 1rem; |
|
|
} |
|
|
.popup { |
|
|
position: fixed; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%) scale(0); |
|
|
background: linear-gradient(135deg, #ffd700, #ff6347); |
|
|
padding: 2rem; |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); |
|
|
z-index: 1000; |
|
|
animation: popupIn 0.5s forwards; |
|
|
border: 4px solid #ffd700; |
|
|
color: #fff; |
|
|
} |
|
|
@keyframes popupIn { |
|
|
to { transform: translate(-50%, -50%) scale(1); } |
|
|
} |
|
|
.overlay { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
z-index: 999; |
|
|
} |
|
|
.popup h2 { |
|
|
font-size: 2.5rem; |
|
|
font-weight: bold; |
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
.popup p { |
|
|
font-size: 1.2rem; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
.popup button { |
|
|
background: #ff4500; |
|
|
border: none; |
|
|
padding: 0.75rem 1.5rem; |
|
|
font-size: 1.1rem; |
|
|
font-weight: bold; |
|
|
border-radius: 10px; |
|
|
transition: transform 0.2s; |
|
|
} |
|
|
.popup button:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans"> |
|
|
<div class="container mx-auto mt-8 px-4"> |
|
|
<h1 class="text-4xl font-bold text-center text-gray-800 mb-6">Révisons un peu</h1> |
|
|
|
|
|
|
|
|
<div class="max-w-2xl mx-auto mb-8"> |
|
|
<div class="bg-white rounded-lg shadow-md p-6"> |
|
|
<div class="mb-4"> |
|
|
<label for="topic" class="block text-sm font-medium text-gray-700 mb-1">Sujet</label> |
|
|
<input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" id="topic" placeholder="Balance ton sujet..."> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Type</label> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<input id="typeFlashcards" name="contentType" type="radio" value="flashcards" checked class="h-4 w-4 text-indigo-600"> |
|
|
<label for="typeFlashcards" class="ml-2 block text-sm text-gray-900">Flashcards</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="typeQuiz" name="contentType" type="radio" value="quiz" class="h-4 w-4 text-indigo-600"> |
|
|
<label for="typeQuiz" class="ml-2 block text-sm text-gray-900">Quiz</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button id="generateBtn" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"> |
|
|
GO ! |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="loading" class="hidden text-center my-10"> |
|
|
<svg class="animate-spin h-8 w-8 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> |
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> |
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> |
|
|
</svg> |
|
|
<p class="mt-2 text-gray-600">Ça charge, attends deux secs...</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="quizContainer" class="mt-6 max-w-3xl mx-auto hidden"> |
|
|
<div class="progress-bar mb-6"> |
|
|
<div class="progress-fill" id="progressFill"></div> |
|
|
</div> |
|
|
<div id="currentQuestion"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const generateBtn = document.getElementById('generateBtn'); |
|
|
const loadingIndicator = document.getElementById('loading'); |
|
|
const quizContainer = document.getElementById('quizContainer'); |
|
|
const topicInput = document.getElementById('topic'); |
|
|
let quizQuestions = []; |
|
|
let currentQuestionIndex = 0; |
|
|
let score = 0; |
|
|
|
|
|
generateBtn.addEventListener('click', function() { |
|
|
const topic = topicInput.value.trim(); |
|
|
if (!topic) { |
|
|
alert('Rentre un sujet, bordel !'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const contentType = document.querySelector('input[name="contentType"]:checked').value; |
|
|
loadingIndicator.classList.remove('hidden'); |
|
|
quizContainer.innerHTML = ''; |
|
|
quizContainer.classList.add('hidden'); |
|
|
|
|
|
fetch('/generate', { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ topic, type: contentType }), |
|
|
}) |
|
|
.then(response => { |
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}`); |
|
|
return response.json(); |
|
|
}) |
|
|
.then(data => { |
|
|
loadingIndicator.classList.add('hidden'); |
|
|
if (data.error) { |
|
|
alert('Erreur: ' + data.error); |
|
|
return; |
|
|
} |
|
|
if (contentType === 'quiz' && data.quiz) { |
|
|
quizQuestions = data.quiz; |
|
|
currentQuestionIndex = 0; |
|
|
score = 0; |
|
|
quizContainer.classList.remove('hidden'); |
|
|
displayCurrentQuestion(); |
|
|
} |
|
|
}) |
|
|
.catch(error => { |
|
|
loadingIndicator.classList.add('hidden'); |
|
|
alert('Ça a merdé: ' + error.message); |
|
|
}); |
|
|
}); |
|
|
|
|
|
function displayCurrentQuestion() { |
|
|
if (currentQuestionIndex >= quizQuestions.length) { |
|
|
showResults(); |
|
|
return; |
|
|
} |
|
|
|
|
|
const question = quizQuestions[currentQuestionIndex]; |
|
|
const progress = (currentQuestionIndex / 10) * 100; |
|
|
quizContainer.innerHTML = ` |
|
|
<div class="progress-bar mb-6"> |
|
|
<div class="progress-fill" id="progressFill" style="width: ${progress}%"></div> |
|
|
</div> |
|
|
<div class="question-card bg-white rounded-lg shadow-lg p-6"> |
|
|
<h5 class="font-semibold text-xl mb-4 text-gray-800">${currentQuestionIndex + 1}. ${question.question}</h5> |
|
|
<div class="options mt-3"></div> |
|
|
<div class="explanation-container" id="explanation-${currentQuestionIndex}"></div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
const optionsContainer = quizContainer.querySelector('.options'); |
|
|
question.options.forEach((option, oIndex) => { |
|
|
const optionElement = document.createElement('div'); |
|
|
optionElement.className = 'option block p-3 my-2 border border-gray-200 rounded-md cursor-pointer hover:bg-gray-100 text-gray-800'; |
|
|
optionElement.textContent = option; |
|
|
optionElement.onclick = () => selectOption(option, question.correctAnswer, oIndex); |
|
|
optionsContainer.appendChild(optionElement); |
|
|
}); |
|
|
} |
|
|
|
|
|
function selectOption(selectedOption, correctAnswer, optionIndex) { |
|
|
const options = quizContainer.querySelectorAll('.option'); |
|
|
options.forEach(option => { |
|
|
option.onclick = null; |
|
|
option.classList.remove('cursor-pointer', 'hover:bg-gray-100'); |
|
|
}); |
|
|
|
|
|
const selectedElement = options[optionIndex]; |
|
|
const question = quizQuestions[currentQuestionIndex]; |
|
|
const explanationContainer = document.getElementById(`explanation-${currentQuestionIndex}`); |
|
|
|
|
|
if (selectedOption === correctAnswer) { |
|
|
selectedElement.classList.add('correct-answer', 'text-white', 'border-green-500'); |
|
|
score++; |
|
|
setTimeout(() => { |
|
|
currentQuestionIndex++; |
|
|
displayCurrentQuestion(); |
|
|
}, 1000); |
|
|
} else { |
|
|
selectedElement.classList.add('wrong-answer', 'text-white', 'border-red-500'); |
|
|
options.forEach(opt => { |
|
|
if (opt.textContent === correctAnswer) { |
|
|
opt.classList.add('correct-answer', 'text-white', 'border-green-500'); |
|
|
} |
|
|
}); |
|
|
explanationContainer.innerHTML = ` |
|
|
<div class="flex items-center"> |
|
|
<div class="character"></div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-2">Explication</h3> |
|
|
<p class="text-sm text-gray-700">${question.explanation}</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
explanationContainer.style.display = 'block'; |
|
|
document.body.addEventListener('click', proceedToNextQuestion); |
|
|
} |
|
|
} |
|
|
|
|
|
function proceedToNextQuestion() { |
|
|
document.body.removeEventListener('click', proceedToNextQuestion); |
|
|
currentQuestionIndex++; |
|
|
displayCurrentQuestion(); |
|
|
} |
|
|
|
|
|
function showResults() { |
|
|
const overlay = document.createElement('div'); |
|
|
overlay.className = 'overlay'; |
|
|
document.body.appendChild(overlay); |
|
|
|
|
|
const popup = document.createElement('div'); |
|
|
popup.className = 'popup'; |
|
|
const percentage = (score / 10) * 100; |
|
|
let suggestion = ''; |
|
|
if (percentage < 50) { |
|
|
suggestion = 'Allez du nerf, c’est pas bon.'; |
|
|
} else if (percentage < 80) { |
|
|
suggestion = 'Pas mal, mais t’as encore du taf pour tout déchirer.'; |
|
|
} else { |
|
|
suggestion = 'WOW ! Tu gères grave, tu veux essayer un autre sujet ?'; |
|
|
} |
|
|
|
|
|
popup.innerHTML = ` |
|
|
<h2>Résultats</h2> |
|
|
<p>Score: ${score}/10 (${percentage}%)</p> |
|
|
<p class="mt-2">Détails: ${score} bonnes réponses, ${10 - score} ratées.</p> |
|
|
<p class="mt-4 font-semibold">${suggestion}</p> |
|
|
<button onclick="location.reload()">Rejouer</button> |
|
|
`; |
|
|
document.body.appendChild(popup); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
