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++;
} |
