|
|
<!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</title> |
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
|
<style> |
|
|
.flashcard { |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 8px; |
|
|
margin-bottom: 15px; |
|
|
padding: 15px; |
|
|
cursor: pointer; |
|
|
background-color: #f8f9fa; |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
.flashcard:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
|
|
} |
|
|
.answer { |
|
|
display: none; |
|
|
margin-top: 10px; |
|
|
padding-top: 10px; |
|
|
border-top: 1px dashed #ccc; |
|
|
} |
|
|
.quiz-question { |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 8px; |
|
|
margin-bottom: 20px; |
|
|
padding: 15px; |
|
|
background-color: #f8f9fa; |
|
|
} |
|
|
.option { |
|
|
padding: 8px 15px; |
|
|
margin: 5px 0; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
.option:hover { |
|
|
background-color: #e9ecef; |
|
|
} |
|
|
.selected { |
|
|
background-color: #d1e7dd; |
|
|
} |
|
|
.correct { |
|
|
background-color: #d4edda; |
|
|
border-color: #c3e6cb; |
|
|
} |
|
|
.incorrect { |
|
|
background-color: #f8d7da; |
|
|
border-color: #f5c6cb; |
|
|
} |
|
|
.explanation { |
|
|
display: none; |
|
|
margin-top: 15px; |
|
|
padding: 10px; |
|
|
border-radius: 4px; |
|
|
background-color: #e2f3fc; |
|
|
} |
|
|
#loading { |
|
|
display: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container mt-5"> |
|
|
<h1 class="text-center mb-4">Générateur de Flashcards et Quiz</h1> |
|
|
|
|
|
<div class="row mb-4"> |
|
|
<div class="col-md-8 offset-md-2"> |
|
|
<div class="card"> |
|
|
<div class="card-body"> |
|
|
<div class="mb-3"> |
|
|
<label for="topic" class="form-label">Sujet</label> |
|
|
<input type="text" class="form-control" id="topic" placeholder="Entrez un sujet..."> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label class="form-label">Type de contenu</label> |
|
|
<div class="form-check"> |
|
|
<input class="form-check-input" type="radio" name="contentType" id="typeFlashcards" value="flashcards" checked> |
|
|
<label class="form-check-label" for="typeFlashcards"> |
|
|
Flashcards |
|
|
</label> |
|
|
</div> |
|
|
<div class="form-check"> |
|
|
<input class="form-check-input" type="radio" name="contentType" id="typeQuiz" value="quiz"> |
|
|
<label class="form-check-label" for="typeQuiz"> |
|
|
Quiz |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
<button id="generateBtn" class="btn btn-primary w-100">Générer</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="loading" class="text-center my-5"> |
|
|
<div class="spinner-border text-primary" role="status"> |
|
|
<span class="visually-hidden">Chargement...</span> |
|
|
</div> |
|
|
<p class="mt-2">Génération en cours... Cela peut prendre plusieurs minutes.</p> |
|
|
</div> |
|
|
|
|
|
<div id="flashcardsContainer" class="row mt-4"></div> |
|
|
<div id="quizContainer" class="row mt-4"></div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.getElementById('generateBtn').addEventListener('click', function() { |
|
|
const topic = document.getElementById('topic').value; |
|
|
if (!topic) { |
|
|
alert('Veuillez entrer un sujet.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const contentType = document.querySelector('input[name="contentType"]:checked').value; |
|
|
|
|
|
|
|
|
document.getElementById('loading').style.display = 'block'; |
|
|
document.getElementById('flashcardsContainer').innerHTML = ''; |
|
|
document.getElementById('quizContainer').innerHTML = ''; |
|
|
|
|
|
|
|
|
fetch('/generate', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
}, |
|
|
body: JSON.stringify({ topic, type: contentType }), |
|
|
}) |
|
|
.then(response => response.json()) |
|
|
.then(data => { |
|
|
|
|
|
document.getElementById('loading').style.display = 'none'; |
|
|
|
|
|
if (data.error) { |
|
|
alert('Erreur: ' + data.error); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (contentType === 'flashcards' && data.flashcards) { |
|
|
displayFlashcards(data.flashcards); |
|
|
} else if (contentType === 'quiz' && data.quiz) { |
|
|
displayQuiz(data.quiz); |
|
|
} |
|
|
}) |
|
|
.catch(error => { |
|
|
document.getElementById('loading').style.display = 'none'; |
|
|
alert('Erreur lors de la génération: ' + error); |
|
|
}); |
|
|
}); |
|
|
|
|
|
function displayFlashcards(flashcards) { |
|
|
const container = document.getElementById('flashcardsContainer'); |
|
|
container.innerHTML = ` |
|
|
<div class="col-12 mb-4"> |
|
|
<h2 class="text-center">Flashcards générées (${flashcards.length})</h2> |
|
|
<p class="text-center text-muted">Cliquez sur une carte pour voir la réponse</p> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
flashcards.forEach((card, index) => { |
|
|
const cardElement = document.createElement('div'); |
|
|
cardElement.className = 'col-md-6 col-lg-4'; |
|
|
cardElement.innerHTML = ` |
|
|
<div class="flashcard" onclick="toggleAnswer(${index})"> |
|
|
<h5 class="card-title">${card.question}</h5> |
|
|
<div id="answer-${index}" class="answer"> |
|
|
<strong>Réponse:</strong> ${card.answer} |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
container.appendChild(cardElement); |
|
|
}); |
|
|
} |
|
|
|
|
|
function toggleAnswer(index) { |
|
|
const answerElement = document.getElementById(`answer-${index}`); |
|
|
if (answerElement.style.display === 'block') { |
|
|
answerElement.style.display = 'none'; |
|
|
} else { |
|
|
answerElement.style.display = 'block'; |
|
|
} |
|
|
} |
|
|
|
|
|
function displayQuiz(quizQuestions) { |
|
|
const container = document.getElementById('quizContainer'); |
|
|
container.innerHTML = ` |
|
|
<div class="col-12 mb-4"> |
|
|
<h2 class="text-center">Quiz généré (${quizQuestions.length} questions)</h2> |
|
|
<p class="text-center text-muted">Sélectionnez une réponse pour chaque question</p> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
quizQuestions.forEach((question, qIndex) => { |
|
|
const questionElement = document.createElement('div'); |
|
|
questionElement.className = 'col-12 mb-4'; |
|
|
|
|
|
let optionsHtml = ''; |
|
|
question.options.forEach((option, oIndex) => { |
|
|
optionsHtml += ` |
|
|
<div class="option" id="q${qIndex}-o${oIndex}" |
|
|
onclick="selectOption(${qIndex}, ${oIndex}, '${question.correctAnswer}')"> |
|
|
${option} |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
questionElement.innerHTML = ` |
|
|
<div class="quiz-question"> |
|
|
<h5>${qIndex + 1}. ${question.question}</h5> |
|
|
<div class="options mt-3"> |
|
|
${optionsHtml} |
|
|
</div> |
|
|
<div class="explanation" id="explanation-${qIndex}"> |
|
|
<strong>Explication:</strong> ${question.explanation} |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
container.appendChild(questionElement); |
|
|
}); |
|
|
} |
|
|
|
|
|
function selectOption(questionIndex, optionIndex, correctAnswer) { |
|
|
const questionOptions = document.querySelectorAll(`[id^="q${questionIndex}-o"]`); |
|
|
const selectedOption = document.getElementById(`q${questionIndex}-o${optionIndex}`); |
|
|
const explanationElement = document.getElementById(`explanation-${questionIndex}`); |
|
|
|
|
|
|
|
|
questionOptions.forEach(option => { |
|
|
option.classList.remove('selected', 'correct', 'incorrect'); |
|
|
}); |
|
|
|
|
|
|
|
|
selectedOption.classList.add('selected'); |
|
|
|
|
|
|
|
|
const selectedText = selectedOption.textContent.trim(); |
|
|
if (selectedText === correctAnswer) { |
|
|
selectedOption.classList.add('correct'); |
|
|
} else { |
|
|
selectedOption.classList.add('incorrect'); |
|
|
|
|
|
questionOptions.forEach(option => { |
|
|
if (option.textContent.trim() === correctAnswer) { |
|
|
option.classList.add('correct'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
explanationElement.style.display = 'block'; |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
