parent
778ebc0310
commit
ee57c9bb57
@ -1,135 +1,34 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Manage groups</title><!-- Vos liens de styles et de scripts -->
|
<title>Quiz</title>
|
||||||
|
<!-- Ajoutez vos liens de styles et de scripts ici -->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<section id="quiz">
|
<section id="quiz">
|
||||||
<h1>Quiz</h1>
|
<h1>Quiz</h1>
|
||||||
<div id="questionContainer">
|
<div id="questionContainer">
|
||||||
{% if translations is defined %}
|
{% if questions is defined %}
|
||||||
{% for translation in translations %}
|
{% for i in 0..questions|length %}
|
||||||
<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">
|
<form id="quizForm" method="post">
|
||||||
<div id="answers">
|
<div class="question">
|
||||||
<input type="radio" name="answer" value="{{ correctAnswer }}"> {{ correctAnswer }}<br>
|
<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>
|
</div>
|
||||||
{% for otherTranslation in otherTranslations %}
|
</div>
|
||||||
<input type="radio" name="wrong" value="{{ otherTranslation }}"> {{ otherTranslation }}<br>
|
<input type="button" value="button">
|
||||||
|
|
||||||
{% endfor %}
|
|
||||||
<input type="hidden" name="action" value="test">
|
|
||||||
<button value="submit" type="submit" >soumettre</button>
|
|
||||||
</form>
|
</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 %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</div>
|
||||||
{% 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>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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