parent
778ebc0310
commit
ee57c9bb57
@ -1,135 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Manage groups</title><!-- Vos liens de styles et de scripts -->
|
||||
<meta charset="UTF-8">
|
||||
<title>Quiz</title>
|
||||
<!-- Ajoutez vos liens de styles et de scripts ici -->
|
||||
</head>
|
||||
<body>
|
||||
<section id="quiz">
|
||||
<h1>Quiz</h1>
|
||||
<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 %}
|
||||
{% if questions is defined %}
|
||||
{% for i in 0..questions|length %}
|
||||
<form id="quizForm" method="post">
|
||||
<div id="answers">
|
||||
<input type="radio" name="answer" value="{{ correctAnswer }}"> {{ correctAnswer }}<br>
|
||||
<div class="question">
|
||||
<h2>{{ questions[i] }}</h2>
|
||||
<div class="answers">
|
||||
{% for answer in answers[i] %}
|
||||
{% if answer == goodAnswers[i] %}
|
||||
<input type="radio" name="answer" value="{{ good }}"> {{ answer }}<br>
|
||||
{% else %}
|
||||
<input type="radio" name="wrong" value="{{ wrong }}"> {{ answer }}<br>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</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>
|
||||
</div>
|
||||
<input type="button" value="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>
|
||||
</div>
|
||||
</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>
|
||||
Loading…
Reference in new issue