|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Quiz Generator</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
line-height: 1.6; |
|
padding: 20px; |
|
} |
|
#app { |
|
max-width: 800px; |
|
margin: 0 auto; |
|
} |
|
button { |
|
padding: 10px 20px; |
|
background-color: #4CAF50; |
|
color: white; |
|
border: none; |
|
cursor: pointer; |
|
border-radius: 4px; |
|
font-size: 14px; |
|
} |
|
button:hover { |
|
background-color: #45a049; |
|
} |
|
.quiz-section { |
|
margin-top: 20px; |
|
} |
|
.quiz-question { |
|
margin-bottom: 20px; |
|
border: 1px solid #ccc; |
|
padding: 15px; |
|
border-radius: 4px; |
|
background-color: #f9f9f9; |
|
} |
|
.quiz-question strong { |
|
font-weight: bold; |
|
} |
|
.quiz-answer { |
|
margin-top: 10px; |
|
font-style: italic; |
|
display: none; |
|
} |
|
#submitQuiz { |
|
display: none; |
|
margin-top: 20px; |
|
text-align: center; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="app"> |
|
<div id="quizSection" class="quiz-section"></div> |
|
|
|
<div id="submitQuiz"> |
|
<button onclick="submitQuiz()">Submit Quiz</button> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
let textWithAnswers = `{{ textWithAnswers|tojson|safe }}`; |
|
|
|
window.onload = function() { |
|
generateQuiz(); |
|
}; |
|
|
|
function handleText(text) { |
|
let lines = text.split(/\n+/); |
|
let filteredLines = []; |
|
let answersAndExplanations = []; |
|
|
|
lines.forEach(line => { |
|
line = line.trim(); |
|
|
|
if (line.startsWith("Question:")) { |
|
filteredLines.push(line); |
|
} else if (line.startsWith("Choices:")) { |
|
filteredLines.push(line); |
|
} else if (line.startsWith("Answer:")) { |
|
let answer = line.split(":")[1].trim(); |
|
answersAndExplanations.push({ Answer: answer }); |
|
} else if (line.startsWith("Explanation:")) { |
|
let explanation = line.split(":")[1].trim(); |
|
answersAndExplanations[answersAndExplanations.length - 1].Explanation = explanation; |
|
} else if (line.match(/^[A-D]\)\s*/)) { |
|
filteredLines.push(line); |
|
} else if (line.startsWith(" ")) { |
|
} else { |
|
filteredLines.push(line); |
|
} |
|
}); |
|
|
|
let filteredText = filteredLines.join("\n"); |
|
|
|
return { |
|
filteredText: filteredText, |
|
answersAndExplanations: answersAndExplanations |
|
}; |
|
} |
|
|
|
function generateQuiz() { |
|
let quizText = textWithAnswers; |
|
let { filteredText, answersAndExplanations } = handleText(quizText); |
|
|
|
let quizSection = document.getElementById('quizSection'); |
|
quizSection.innerHTML = ''; |
|
|
|
let questions = filteredText.split(/\d+\.\s+/).filter(q => q.trim() !== ''); |
|
|
|
questions.forEach((question, index) => { |
|
let parts = question.split('Choices:'); |
|
let questionText = parts[0].replace('Question:', '').trim(); |
|
let choicesText = parts[1].trim(); |
|
|
|
let div = document.createElement('div'); |
|
div.className = 'quiz-question'; |
|
div.innerHTML = `<strong>${index + 1}: ${questionText}</strong>`; |
|
|
|
let choices = choicesText.split(/\s*[A-D]\)\s*/).filter(choice => choice.trim() !== ''); |
|
let labels = choicesText.match(/\s*[A-D]\)\s*/g); |
|
choices.forEach((choice, i) => { |
|
let label = labels[i].trim().charAt(0); |
|
|
|
let choiceDiv = document.createElement('div'); |
|
|
|
let input = document.createElement('input'); |
|
input.type = 'radio'; |
|
input.name = `question_${index + 1}`; |
|
input.value = label; |
|
input.id = `q${index + 1}_${label}`; |
|
input.setAttribute('data-answered', 'false'); |
|
|
|
let choiceLabel = document.createElement('label'); |
|
choiceLabel.setAttribute('for', `q${index + 1}_${label}`); |
|
choiceLabel.textContent = `${label}) ${choice}`; |
|
|
|
choiceDiv.appendChild(input); |
|
choiceDiv.appendChild(choiceLabel); |
|
|
|
div.appendChild(choiceDiv); |
|
|
|
input.addEventListener('change', function() { |
|
input.setAttribute('data-answered', 'true'); |
|
}); |
|
}); |
|
|
|
let answerDiv = document.createElement('div'); |
|
answerDiv.className = 'quiz-answer'; |
|
answerDiv.style.display = 'none'; |
|
div.appendChild(answerDiv); |
|
|
|
let explanationDiv = document.createElement('div'); |
|
explanationDiv.className = 'quiz-answer'; |
|
explanationDiv.style.display = 'none'; |
|
div.appendChild(explanationDiv); |
|
|
|
quizSection.appendChild(div); |
|
}); |
|
|
|
document.getElementById('submitQuiz').style.display = 'block'; |
|
} |
|
|
|
function validateQuiz() { |
|
let quizSection = document.getElementById('quizSection'); |
|
let questions = quizSection.getElementsByClassName('quiz-question'); |
|
|
|
for (let i = 0; i < questions.length; i++) { |
|
let inputs = questions[i].querySelectorAll('input[type="radio"]'); |
|
let answered = false; |
|
|
|
for (let j = 0; j < inputs.length; j++) { |
|
if (inputs[j].checked) { |
|
answered = true; |
|
break; |
|
} |
|
} |
|
|
|
if (!answered) { |
|
return false; |
|
} |
|
} |
|
|
|
return true; |
|
} |
|
|
|
function submitQuiz() { |
|
if (!validateQuiz()) { |
|
alert('Please answer all questions before submitting.'); |
|
return; |
|
} |
|
|
|
let quizSection = document.getElementById('quizSection'); |
|
let answerDivs = quizSection.getElementsByClassName('quiz-answer'); |
|
let quizText = textWithAnswers; |
|
let { filteredText, answersAndExplanations } = handleText(quizText); |
|
|
|
for (let i = 0; i < answerDivs.length; i += 2) { |
|
let answer = answersAndExplanations[i / 2]?.Answer || ''; |
|
let explanation = answersAndExplanations[i / 2]?.Explanation || ''; |
|
|
|
answerDivs[i].style.display = 'block'; |
|
answerDivs[i].innerHTML = `Answer: ${answer}`; |
|
|
|
answerDivs[i + 1].style.display = 'block'; |
|
answerDivs[i + 1].innerHTML = `Explanation: ${explanation}`; |
|
} |
|
|
|
document.getElementById('submitQuiz').style.display = 'none'; |
|
} |
|
</script> |
|
</body> |
|
</html> |
|
|
