You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
4.0 KiB
135 lines
4.0 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Manage groups</title><!-- Vos liens de styles et de scripts -->
|
|
</head>
|
|
<body>
|
|
<section id="quiz">
|
|
<h1>Quiz</h1>
|
|
<div id="questionContainer">
|
|
{% if translations is defined %}
|
|
{% for translation in translations %}
|
|
<h2 id="question">{{ translation.word1 }}</h2>
|
|
{% set correctAnswer = translation.word2 %}
|
|
{% if randomtranslations is defined %}
|
|
{% set otherTranslations = [correctAnswer] %}
|
|
{% for randomtranslation in randomtranslations %}
|
|
{% if randomtranslation.word2 != correctAnswer and otherTranslations|length <= 3 %}
|
|
{% set otherTranslations = otherTranslations|merge([randomtranslation.word2]) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
<form id="quizForm" method="post">
|
|
<div id="answers">
|
|
<input type="radio" name="answer" value="{{ correctAnswer }}"> {{ correctAnswer }}<br>
|
|
</div>
|
|
{% for otherTranslation in otherTranslations %}
|
|
<input type="radio" name="wrong" value="{{ otherTranslation }}"> {{ otherTranslation }}<br>
|
|
|
|
{% endfor %}
|
|
<input type="hidden" name="action" value="test">
|
|
<button value="submit" type="submit" >soumettre</button>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#quizForm').submit(function(event) {
|
|
event.preventDefault();
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: '/../controller/AbsController.php',
|
|
data: $(this).serialize(),
|
|
success: function(response) {
|
|
$('#result').html(response);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
{% if submitted %}
|
|
{% if isCorrect %}
|
|
<p>Correct answer!</p>
|
|
{% else %}
|
|
<p>Wrong answer!</p>
|
|
{% endif %}
|
|
{% endif %}
|
|
</section>
|
|
|
|
<h1>Translator</h1>
|
|
<form action="quiz" method="POST">
|
|
{% if translations is defined %}
|
|
{% for translation in translations %}
|
|
<label for="wordInput{{ translation.id }}">Traduire {{ translation.word1 }}</label>
|
|
<input type="text" id="wordInput{{ translation.id }}" name="wordInput{{ translation.id }}">
|
|
<input type="hidden" name="vocabID" value="{{ translation.listVocab }}">
|
|
<button type="submit">Translate</button>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</form>
|
|
</section>
|
|
</body>
|
|
</html>
|
|
<script>
|
|
const questions = [
|
|
|
|
{
|
|
question: "Question 2?",
|
|
answers: ["Answer A", "Answer B", "Answer C"],
|
|
correctAnswer: "Answer B"
|
|
},
|
|
// Ajoutez d'autres questions ici
|
|
];
|
|
|
|
let currentQuestion = 0;
|
|
const questionContainer = document.getElementById('questionContainer');
|
|
const questionElement = document.getElementById('question');
|
|
const answersElement = document.getElementById('answers');
|
|
const resultElement = document.getElementById('result');
|
|
|
|
function showQuestion() {
|
|
const question = questions[currentQuestion];
|
|
questionElement.textContent = question.question;
|
|
|
|
answersElement.innerHTML = '';
|
|
question.answers.forEach(answer => {
|
|
const label = document.createElement('label');
|
|
const input = document.createElement('input');
|
|
input.type = 'radio';
|
|
input.name = 'answer';
|
|
input.value = answer;
|
|
label.appendChild(input);
|
|
label.appendChild(document.createTextNode(answer));
|
|
answersElement.appendChild(label);
|
|
answersElement.appendChild(document.createElement('br'));
|
|
});
|
|
}
|
|
|
|
function checkAnswer(event) {
|
|
event.preventDefault();
|
|
const selectedAnswer = document.querySelector('input[name="answer"]:checked');
|
|
if (!selectedAnswer) {
|
|
resultElement.textContent = 'Please select an answer.';
|
|
return;
|
|
}
|
|
|
|
if (selectedAnswer.value === questions[currentQuestion].correctAnswer) {
|
|
resultElement.textContent = 'Correct answer!';
|
|
} else {
|
|
resultElement.textContent = 'Wrong answer!';
|
|
}
|
|
|
|
currentQuestion++;
|
|
if (currentQuestion < questions.length) {
|
|
showQuestion();
|
|
} else {
|
|
questionContainer.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
document.getElementById('quizForm').addEventListener('submit', checkAnswer);
|
|
showQuestion();
|
|
</script> |