|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>SmartLearn - Quiz Generation</title> |
|
<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;600&display=swap'); |
|
|
|
body { |
|
font-family: 'Poppins', sans-serif; |
|
margin: 0; |
|
padding: 0; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
min-height: 100vh; |
|
background-image: url('../static/quiz.jpg'); |
|
background-size: cover; |
|
background-position: center; |
|
background-attachment: fixed; |
|
} |
|
|
|
.container { |
|
border-radius: 20px; |
|
padding: 40px; |
|
width: 90%; |
|
max-width: 500px; |
|
text-align: center; |
|
position: relative; |
|
z-index: 2; |
|
background: rgba(255, 255, 255, 0.1); |
|
backdrop-filter: blur(10px); |
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); |
|
border: 1px solid rgba(255, 255, 255, 0.18); |
|
} |
|
|
|
.quiz-form { |
|
padding: 20px; |
|
border-radius: 10px; |
|
} |
|
|
|
.form-group { |
|
margin-bottom: 20px; |
|
text-align: left; |
|
} |
|
|
|
.form-group label { |
|
display: block; |
|
margin-bottom: 5px; |
|
color: #fff; |
|
font-weight: 600; |
|
} |
|
|
|
.form-group input, |
|
.form-group select { |
|
width: 100%; |
|
padding: 10px; |
|
border: none; |
|
border-radius: 5px; |
|
background: rgba(255, 255, 255, 0.8); |
|
color: #000; |
|
font-size: 16px; |
|
} |
|
|
|
.form-group select { |
|
appearance: none; |
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
|
background-repeat: no-repeat; |
|
background-position: right 10px center; |
|
background-size: 20px; |
|
} |
|
|
|
.btn { |
|
background-color: #3498db; |
|
color: white; |
|
border: none; |
|
padding: 12px 24px; |
|
border-radius: 30px; |
|
cursor: pointer; |
|
font-size: 18px; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.btn:hover { |
|
background-color: #2980b9; |
|
transform: translateY(-2px); |
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
|
} |
|
|
|
h1, h2, h3 { |
|
color: #fff; |
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.5); |
|
} |
|
|
|
.score-circle { |
|
width: 150px; |
|
height: 150px; |
|
background-color: rgba(52, 152, 219, 0.8); |
|
border-radius: 50%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
margin: 0 auto 30px; |
|
font-size: 36px; |
|
font-weight: bold; |
|
color: white; |
|
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3); |
|
} |
|
|
|
.areas-to-improve { |
|
background-color: rgba(248, 249, 250, 0.1); |
|
border-radius: 10px; |
|
padding: 20px; |
|
text-align: left; |
|
color: #fff; |
|
} |
|
|
|
.areas-to-improve ol { |
|
padding-left: 20px; |
|
} |
|
|
|
.areas-to-improve li { |
|
margin-bottom: 10px; |
|
} |
|
|
|
.validation-container { |
|
display: none; |
|
justify-content: center; |
|
align-items: center; |
|
flex-direction: column; |
|
} |
|
|
|
.loader { |
|
border: 5px solid rgba(255, 255, 255, 0.3); |
|
border-top: 5px solid #3498db; |
|
border-radius: 50%; |
|
width: 50px; |
|
height: 50px; |
|
animation: spin 1s linear infinite; |
|
} |
|
|
|
@keyframes spin { |
|
0% { transform: rotate(0deg); } |
|
100% { transform: rotate(360deg); } |
|
} |
|
|
|
.validation-text { |
|
margin-top: 20px; |
|
font-size: 18px; |
|
color: #fff; |
|
} |
|
|
|
.correct { color: #2ecc71; } |
|
.incorrect { color: #e74c3c; } |
|
#areas-to-improve { margin-top: 20px; } |
|
|
|
.options li { |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 10px; |
|
color: #fff; |
|
} |
|
|
|
.options li input { |
|
margin-right: 10px; |
|
} |
|
|
|
.back-button { |
|
position: absolute; |
|
top: 20px; |
|
left: 20px; |
|
background-color: #6c757d; |
|
color: white; |
|
border: none; |
|
padding: 10px 20px; |
|
border-radius: 30px; |
|
cursor: pointer; |
|
transition: background-color 0.3s; |
|
font-size: 16px; |
|
} |
|
|
|
.back-button:hover { |
|
background-color: #5a6268; |
|
} |
|
|
|
.fade-in { |
|
animation: fadeIn 0.5s ease-in-out; |
|
} |
|
|
|
@keyframes fadeIn { |
|
from { opacity: 0; transform: translateY(20px); } |
|
to { opacity: 1; transform: translateY(0); } |
|
} |
|
|
|
.icon { |
|
margin-right: 10px; |
|
} |
|
|
|
.loading-animation { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
margin-top: 20px; |
|
} |
|
|
|
.loading-animation p { |
|
margin-top: 10px; |
|
color: #fff; |
|
font-weight: 600; |
|
} |
|
|
|
@keyframes pulse { |
|
0% { transform: scale(1); } |
|
50% { transform: scale(1.1); } |
|
100% { transform: scale(1); } |
|
} |
|
|
|
.loading-icon { |
|
font-size: 48px; |
|
color: #3498db; |
|
animation: pulse 1.5s infinite; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container fade-in"> |
|
<button class="back-button" onclick="goBack()"><i class="fas fa-arrow-left"></i> Back</button> |
|
<h1><i class="fas fa-graduation-cap icon"></i>Generate Your Custom Quiz</h1> |
|
<form class="quiz-form"> |
|
<div class="form-group"> |
|
<label for="subject"><i class="fas fa-book icon"></i>Subject:</label> |
|
<input type="text" id="subject" name="subject" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="topic"><i class="fas fa-lightbulb icon"></i>Topic:</label> |
|
<input type="text" id="topic" name="topic" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="num-questions"><i class="fas fa-list-ol icon"></i>Number of Questions:</label> |
|
<select id="num-questions" name="num-questions"> |
|
<option value="2">2</option> |
|
<option value="5">5</option> |
|
<option value="10">10</option> |
|
<option value="15">15</option> |
|
<option value="20">20</option> |
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="difficulty"><i class="fas fa-signal icon"></i>Difficulty Level:</label> |
|
<select id="difficulty" name="difficulty"> |
|
<option value="easy">Easy</option> |
|
<option value="medium">Medium</option> |
|
<option value="hard">Hard</option> |
|
</select> |
|
</div> |
|
<button type="submit" class="btn"><i class="fas fa-magic icon"></i>Generate Quiz</button> |
|
</form> |
|
|
|
<div id="loading-animation" class="loading-animation" style="display: none;"> |
|
<i class="fas fa-cog loading-icon"></i> |
|
<p id="loading-text">Generating Quiz...</p> |
|
</div> |
|
|
|
<div id="quiz-result" class="quiz-result" style="display: none;"> |
|
|
|
</div> |
|
<div id="validation-container" class="validation-container"> |
|
<div id="loader" class="loader"></div> |
|
<div id="validation-text" class="validation-text">Validating...</div> |
|
</div> |
|
<div id="quiz-score" style="display: none;"></div> |
|
<div id="areas-to-improve" class="areas-to-improve" style="display: none;"></div> |
|
</div> |
|
|
|
<script> |
|
let quizData = []; |
|
let studentId = 'alice.johnson@stateu.edu'; |
|
|
|
document.querySelector('.quiz-form').addEventListener('submit', function(e) { |
|
e.preventDefault(); |
|
const formData = new FormData(this); |
|
const data = { |
|
subject: formData.get('subject'), |
|
topic: formData.get('topic'), |
|
'num-questions': formData.get('num-questions'), |
|
difficulty: formData.get('difficulty') |
|
}; |
|
|
|
|
|
this.style.display = 'none'; |
|
document.getElementById('loading-animation').style.display = 'flex'; |
|
|
|
let loadingTexts = [ |
|
"Crafting challenging questions...", |
|
"Digging deep into the subject...", |
|
"Polishing the perfect quiz for you...", |
|
"Almost there, finalizing details..." |
|
]; |
|
let currentTextIndex = 0; |
|
|
|
|
|
const loadingInterval = setInterval(() => { |
|
document.getElementById('loading-text').textContent = loadingTexts[currentTextIndex]; |
|
currentTextIndex = (currentTextIndex + 1) % loadingTexts.length; |
|
}, 3000); |
|
|
|
fetch('/generate_quiz', { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json', |
|
}, |
|
body: JSON.stringify(data) |
|
}) |
|
.then(response => response.json()) |
|
.then(data => { |
|
|
|
clearInterval(loadingInterval); |
|
|
|
|
|
document.getElementById('loading-animation').style.display = 'none'; |
|
|
|
quizData = parseQuizData(data.quiz); |
|
showQuiz(quizData); |
|
}) |
|
.catch(error => { |
|
console.error('Error:', error); |
|
|
|
clearInterval(loadingInterval); |
|
|
|
document.getElementById('loading-animation').style.display = 'none'; |
|
alert('An error occurred while generating the quiz. Please try again.'); |
|
}); |
|
}); |
|
|
|
function parseQuizData(quizString) { |
|
const questions = quizString.split('Question:').filter(q => q.trim() !== ''); |
|
return questions.map((question, index) => { |
|
const [questionText, ...options] = question.split('\n').filter(line => line.trim() !== ''); |
|
const answerLine = options.pop(); |
|
const correctAnswer = parseInt(answerLine.split(':')[1].trim()); |
|
return { |
|
id: index + 1, |
|
text: questionText.trim(), |
|
options: options.map(opt => opt.replace('<<o>>', '').trim()), |
|
correctAnswer: correctAnswer, |
|
concept: questionText.match(/\[(.*?)\]/)[1] |
|
}; |
|
}); |
|
} |
|
|
|
function showQuiz(questions) { |
|
const quizResult = document.getElementById('quiz-result'); |
|
let quizHtml = '<h2>Your Custom Quiz</h2>'; |
|
|
|
questions.forEach((question, index) => { |
|
quizHtml += ` |
|
<div class="question fade-in"> |
|
<h3>${question.id}. ${question.text}</h3> |
|
<ul class="options"> |
|
`; |
|
|
|
question.options.forEach((option, optionIndex) => { |
|
quizHtml += ` |
|
<li> |
|
<input type="radio" name="q${index}" value="${optionIndex + 1}" id="q${index}o${optionIndex}"> |
|
<label for="q${index}o${optionIndex}">${option}</label> |
|
</li> |
|
`; |
|
}); |
|
|
|
quizHtml += ` |
|
</ul> |
|
</div> |
|
`; |
|
}); |
|
|
|
quizHtml += '<button onclick="submitQuiz()" class="btn">Submit Quiz</button>'; |
|
|
|
quizResult.innerHTML = quizHtml; |
|
quizResult.style.display = 'block'; |
|
} |
|
|
|
function submitQuiz() { |
|
const validationContainer = document.getElementById('validation-container'); |
|
const quizResult = document.getElementById('quiz-result'); |
|
const quizScore = document.getElementById('quiz-score'); |
|
const areasToImprove = document.getElementById('areas-to-improve'); |
|
|
|
quizResult.style.display = 'none'; |
|
validationContainer.style.display = 'flex'; |
|
|
|
setTimeout(() => { |
|
validationContainer.style.display = 'none'; |
|
const score = calculateScore(); |
|
displayResults(score); |
|
|
|
|
|
let improveAreas = []; |
|
let incorrectQuestions = quizData.filter((question, index) => { |
|
const selectedAnswer = document.querySelector(`input[name="q${index}"]:checked`); |
|
return !selectedAnswer || parseInt(selectedAnswer.value) !== question.correctAnswer; |
|
}); |
|
|
|
if (incorrectQuestions.length > 0) { |
|
improveAreas = incorrectQuestions.map(question => question.concept); |
|
} |
|
|
|
|
|
fetch('/update_student_areas', { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json', |
|
}, |
|
body: JSON.stringify({ student_id: studentId, areas_to_improve: improveAreas }) |
|
}) |
|
.then(response => response.json()) |
|
.then(data => { |
|
if (data.status === 'success') { |
|
console.log('Student areas to improve updated successfully.'); |
|
} else { |
|
console.error('Failed to update student areas to improve.'); |
|
} |
|
}) |
|
.catch(error => console.error('Error:', error)); |
|
|
|
}, 2000); |
|
} |
|
|
|
function calculateScore() { |
|
let score = 0; |
|
quizData.forEach((question, index) => { |
|
const selectedAnswer = document.querySelector(`input[name="q${index}"]:checked`); |
|
if (selectedAnswer && parseInt(selectedAnswer.value) === question.correctAnswer) { |
|
score++; |
|
} |
|
}); |
|
return score; |
|
} |
|
|
|
function displayResults(score) { |
|
const quizScore = document.getElementById('quiz-score'); |
|
const areasToImprove = document.getElementById('areas-to-improve'); |
|
|
|
quizScore.innerHTML = ` |
|
<div class="score-circle">${score}/${quizData.length}</div> |
|
<h3>You have scored</h3> |
|
<p>Performance: ${getPerformanceEvaluation(score, quizData.length)}</p> |
|
`; |
|
quizScore.style.display = 'block'; |
|
|
|
let incorrectQuestions = quizData.filter((question, index) => { |
|
const selectedAnswer = document.querySelector(`input[name="q${index}"]:checked`); |
|
return !selectedAnswer || parseInt(selectedAnswer.value) !== question.correctAnswer; |
|
}); |
|
|
|
if (incorrectQuestions.length > 0) { |
|
let improveHtml = '<h3>Areas to be improved</h3><ol>'; |
|
incorrectQuestions.forEach(question => { |
|
improveHtml += `<li>${question.concept}</li>`; |
|
}); |
|
improveHtml += '</ol>'; |
|
areasToImprove.innerHTML = improveHtml; |
|
areasToImprove.style.display = 'block'; |
|
} |
|
} |
|
|
|
function getPerformanceEvaluation(score, total) { |
|
const percentage = (score / total) * 100; |
|
if (percentage >= 80) return 'Excellent'; |
|
if (percentage >= 60) return 'Good'; |
|
if (percentage >= 40) return 'Average'; |
|
return 'Needs Improvement'; |
|
} |
|
|
|
function goBack() { |
|
window.history.back(); |
|
} |
|
</script> |
|
</body> |
|
</html> |
