parent
43066a391b
commit
577d0872d7
@ -0,0 +1,52 @@
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#quiz {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
width: 800px;
|
||||
height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.question {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.answers {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
background-color: #3498db;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
var currentQuestion = 0;
|
||||
var score = 0;
|
||||
|
||||
|
||||
function nextQuestion() {
|
||||
var currentQuestionDiv = document.getElementById("question" + currentQuestion);
|
||||
currentQuestionDiv.style.display = "none";
|
||||
|
||||
currentQuestion++;
|
||||
if (currentQuestion < len) {
|
||||
var nextQuestionDiv = document.getElementById("question" + currentQuestion);
|
||||
nextQuestionDiv.style.display = "block";
|
||||
} else {
|
||||
// Toutes les questions ont été posées, afficher le score
|
||||
alert("Quiz terminé. Votre score est de " + score + "/" + len);
|
||||
}
|
||||
}
|
||||
|
||||
function validateAndNext() {
|
||||
|
||||
var currentForm = document.getElementById("quizForm" + currentQuestion);
|
||||
var selectedAnswer = currentForm.querySelector('input[name="answer' + currentQuestion + '"]:checked');
|
||||
|
||||
if (selectedAnswer) {
|
||||
// L'utilisateur a sélectionné une réponse
|
||||
if (selectedAnswer.classList.contains("correct")) {
|
||||
// C'est la bonne réponse, augmenter le score
|
||||
score++;
|
||||
}
|
||||
// Passer à la question suivante
|
||||
nextQuestion();
|
||||
} else {
|
||||
// Aucune réponse sélectionnée, afficher un message d'erreur
|
||||
alert("Veuillez sélectionner une réponse avant de passer à la question suivante.");
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
var firstQuestionDiv = document.getElementById("question0");
|
||||
firstQuestionDiv.style.display = "block";
|
||||
};
|
||||
@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
</head>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="" />
|
||||
<title>Quiz</title>
|
||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
||||
<!-- Google fonts-->
|
||||
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
|
||||
rel="stylesheet" />
|
||||
<!-- Core theme CSS (includes Bootstrap)-->
|
||||
<link href="{{base}}/css/styles.css" rel="stylesheet" />
|
||||
<link href="{{base}}/css/quiz.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<section id="quiz">
|
||||
<h1>Quiz</h1>
|
||||
<div id="questionContainer">
|
||||
{% if questions is defined %}
|
||||
{% for i in 0..questions|length %}
|
||||
<div class="question" id="question{{ i }}">
|
||||
<h2>{{ questions[i] }}</h2>
|
||||
<div class="answers">
|
||||
<form id="quizForm{{ i }}" method="post">
|
||||
{% for answer in answers[i] %}
|
||||
{% if answer == goodAnswers[i] %}
|
||||
<input type="radio" name="answer{{ i }}" value="{{ answer }}" class="correct"> {{ answer }}<br>
|
||||
{% else %}
|
||||
<input type="radio" name="answer{{ i }}" value="{{ answer }}"> {{ answer }}<br>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<input type="button" value="Suivant" onclick="validateAndNext()">
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var len = JSON.parse('{{ questions | length }}');
|
||||
</script>
|
||||
|
||||
<script src="{{base}}/js/quiz.js"></script>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Quiz</title>
|
||||
<!-- Ajoutez vos liens de styles et de scripts ici -->
|
||||
</head>
|
||||
<body>
|
||||
<section id="quiz">
|
||||
<h1>Quiz</h1>
|
||||
<div id="questionContainer">
|
||||
{% if questions is defined %}
|
||||
{% for i in 0..questions|length %}
|
||||
<form id="quizForm" method="post">
|
||||
<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>
|
||||
</div>
|
||||
<input type="button" value="button">
|
||||
</form>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue