Réalisation fonctions javascript pour un quizz (html5,css,js)
Bonjour tout le monde et merci de me lire :D
Voilà mon soucis :
je dois créer un quiz avec "coloriage" de la bonne réponse en vert et les mauvaises en rouge en fin de "partie".
De plus je dois pouvoir revenir sur la question précédente si je veux changer d'avis.
J'ai déjà commencer .
Mon quiz est crée mais je n'arrive pas "colorier" et "revenir a la question précédente".
Les buttons sont déjà initialisés mais je pense qu'il me manque pas grand chose..
Si quelqu'un aurait une idée, je suis preneur.
fichier
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--<link rel="stylesheet" href="style.css" />
--><title>Premiers Quizz informatique</title>
</head>
<body>
<h1>Liste des quizz</h1>
<!-- Liste des quizz utilisables-->
<fieldset>
<legend>Choix de votre quizz</legend> <!-- Titre du fieldset -->
<p>
Choissisez le quizz sur lequel vous voulez vous tester : </p>
<p> <a href="quizz_java.html"><img src="https://cdn.pixabay.com/photo/2017/05/19/21/12/java-2327538_640.png" id="bonjour_java" name="java" /></a>
<a href="quizz_star_wars.html"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Star_Wars_Logo.svg/1280px-Star_Wars_Logo.svg.png" id="bonjour_star_wars" name="star_wars" /></a></p>
<p> <a href="quizz_c.html"><img src="https://cdn.pixabay.com/photo/2015/10/31/12/27/c-1015531_640.jpg" id="bonjour_c" name="ce" /></a>
<a href="quiz_cpp.html"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/C_plus_plus.svg/2000px-C_plus_plus.svg.png" id="bonjour_cpp" name="cpp" /></a>
</p>
</fieldset>
</body>
</html> |
fichier quizz_java.html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> Quiz </title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class ="grid">
<div id = "quiz">
<h1>Quiz </h1>
<hr style ="margin-top: 20px">
<p id="question"></p>
<div class="buttons">
<button id="btn0"><span id="choice0"></span></button>
<button id="btn1"><span id="choice1"></span></button>
<button id="btn2"><span id="choice2"></span></button>
<button id="btn3"><span id="choice3"></span></button>
</div>
<hr style="margin-top: 50px">
<footer>
<p id="progress">Question x sur y. </p>
</footer>
</div>
</div>
<input type="button" value="Page principale" onclick="window.location.href='\index.html'"></button>
<!--<input type="button" value="retour" onclick="www.google.com"></button>
--> <p><a href="javascript:history.go(-1)">Retour</a></p>
<input type="button" value ="HELP" onclick= "alert('Aucun retour aux questions précedente n\'est possible, en revanche vous pouvez voir vos résultats');" </button>
<script src="quiz_controller.js"></script>
<script src="question.js"></script>
<script src="app.js"></script>
</body>
</html> |
question .js
Code:
1
2
3
4
5
6
7
8
9
10
11
| function Question (text,choices,answer){
this.text=text;
this.choices = choices;
this.answer = answer;
}
Question.prototype.correctAnswer = function(choice) {
return choice === this.answer;
} |
app.js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| function populate(){
if (quiz.isEnded()){
showScores();
//showAnswer();
}
else {
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;
//show choices
var choices = quiz.getQuestionIndex().choices;
for(var i= 0; i<choices.length;i++){
var element = document.getElementById("choice"+i);
element.innerHTML = choices[i];
guess("btn" +i,choices[i]);
}
showProgress();
}
};
function guess(id, guess) {
var button= document.getElementById(id);
button.onclick = function(){
quiz.guess(guess);
populate();
}
}
function showProgress(){
var currentQuestionNumber = quiz.questionIndex +1;
var element = document.getElementById("progress");
element.innerHTML = "question " + currentQuestionNumber +" sur " +quiz.questions.length;
}
function showScores(){
var gameOverHtml = "<h1>Resultat</h1>"
gameOverHtml += "<h2 id='score'> Ton score est de : " +quiz.score +"/"+quiz.questions.length+"</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHtml;
};
function showAnswer(){
var answer = "<h1>Resultat"+ quiz.text[0] +"</h1>"
//var element = document.getElementById("quiz");
//element.innerHTML = answer;
var element2= document.getElementById("question");
element2.innerHTML = quiz.questions.correctAnswer().text;
}
var questions = [
new Question("A l'heure actuelle,de qui Java est-elle la technologie?",["Microsoft","Sun Microsystems","Oracle","Google"],"Oracle"),
new Question ("Par qui Sun Microsystems a été rachetée?",["Google","Oracle","JetBrains","Microsoft"],"Oracle"),
new Question ("Java est aussi ?",["une île française","une île indonésienne","une île américaine","un pays"],"une île indonésienne")
];
var quiz = new Quiz(questions);
populate(); |
quizz_controller.js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| function Quiz(questions) {
this.score = 0;
this.questions = questions;
this.questionIndex = 0;
}
Quiz.prototype.getQuestionIndex = function() {
return this.questions[this.questionIndex];
}
Quiz.prototype.isEnded = function() {
return this.questions.length === this.questionIndex;
}
Quiz.prototype.guess = function(answer) {
if (this.getQuestionIndex().correctAnswer(answer)){
// TESTE document.getElementById("choices").setAttribute("class", "red");
this.score++;
}
this.questionIndex++;
} |
