Bonjour à tous,
Je ne maîtrise pas vraiment le html, css et js mais j'ai essayé de créer le jeu 4 mages 1 mot.
Mais au moment de valider le mot et de vérifier si c'est le même mot que la réponse, la fonction ne se lance pas. Pouvez-vous m'aider ?
Voici mon code html :
Voici mon code css :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86 <!DOCTYPE html> <html lang="fr-fr"> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="qium.css" /> <link rel="stylesheet" type="text/javascript" href="qium.js" /> <title>4 images, 1 mot</title> <meta name="description" content="4 images, 1 mot" /> </head> <body> <script type="text/javascript" src="qium.js"></script> <div id="d1"> <center> <img alt="image" src="magie1.jpg" width="250" height="150"> <img alt="image" src="magie2.jpg" width="250" height="150"><br> <img alt="image" src="magie3.jpg" width="250" height="150"> <img alt="image" src="magie4.jpg" width="250" height="150"> <form action="" method="get" class="note"> <div class="note"> <label for="note">Entrez le mot : </label> <input type="text" name="note" id="mot1"/> <input type="button" value="Valider" onClick="verif_mot(form,1,mot1);"/> <INPUT TYPE="reset" VALUE="Recommencer"> <script type="text/javascript"> document.getElementById("mot1").onclick = doFunction; </script> </div> </form> </center> </div> <br> <div id="d2"> <center> <img alt="image" src="terre1.jpg" width="250" height="150"> <img alt="image" src="terre2.jpg" width="250" height="150"><br> <img alt="image" src="terre3.jpg" width="250" height="150"> <img alt="image" src="terre4.jpg" width="250" height="150"> <form action="" method="get" class="note"> <div class="note"> <label for="note">Entrez le mot : </label> <input type="text" name="note" id="mot2"/> <input type="button" value="Valider" onClick="verif_mot(form,2,mot2);"/> <INPUT TYPE="reset" VALUE="Recommencer"> </div> </form> </center> </div> <br> <div id="d3"> <center> <img alt="image" src="pastel1.jpg" width="250" height="150"> <img alt="image" src="pastel2.jpg" width="250" height="150"><br> <img alt="image" src="pastel3.jpg" width="250" height="150"> <img alt="image" src="pastel4.jpg" width="250" height="150"> <form action="" method="get" class="note"> <div class="note"> <label for="note">Entrez le mot : </label> <input type="text" name="note" id="mot3"/> <input type="button" value="Valider" onClick="verif_mot(form,3,mot3);"/> <INPUT TYPE="reset" VALUE="Recommencer"> </div> </form> </center> </div> <br> <div id="d4"> <center> <img alt="image" src="chanter1.jpg" width="250" height="150"> <img alt="image" src="chanter2.jpg" width="250" height="150"><br> <img alt="image" src="chanter3.jpg" width="250" height="150"> <img alt="image" src="chanter4.jpg" width="250" height="150"> <form action="" method="get" class="note"> <div class="note"> <label for="note">Entrez le mot : </label> <input type="text" name="note" id="mot4"/> <input type="button" value="Valider" onClick="verif_mot(form,4,mot4);"/> <INPUT TYPE="reset" VALUE="Recommencer"> </div> </form> </center> </div> <br> <div id="score" style="font-weight: bold; text-align: center"> Gagné: 0 fois. Perdu: 0 fois. </div> </body> </html>
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
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 html { color: black; background-color: #33afff; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: small; } h1 { color:#046df8; } div{ color:black; } table { background-color: #ffffff; border-color: #046df8; border-style: solid; border-width: 2px; margin-left: auto; margin-right: auto; text-align: center; } table td { border-style: double; border-width: 1px; text-align: center; }
Voici mon code javascript :
Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79 var user = ""; var issue = Arrays.asList(); var points = 0; var mot_joueur = []; var chaine_mot_joueur = []; function reponse() """Cette fonction sert à définir quel mot est la réponse à quelles images, par exemple, pour les images 1, la réponse est magie. La chaîne de caractère est déjà mise sous forme de liste, avec chaque élément du mot, afin de diminuer les tâches.""" { if (document.getElementById(d1) == 1) issue = Arrays.asList("m","a","g","i","e") else if (document.getElementById(d2) == 2) issue = Arrays.asList("t","e","r","r","e") else if (document.getElementById(d3) == 3) issue = Arrays.asList("p","a","s","t","e","l") else if (document.getElementById(d4) == 4) issue = Arrays.asList("c","h","a","n","t","e","r") } function verif_mot(form,issue,user) """Cette fonction va servir à vérifier le mot. C'est-à-dire que lorsque l'utilisateur va rentrer sa réponse, la fonction vérifiera pour quelles images il a rentrer sa réponse, et si sa réponse est la bonne. En fonction de la réponse, le joueur perd 1 point ou le gagne.""" { List <String> mot_joueur = new ArrayList <String> (); for(int i = 0 ; i < user ; i++) { mot_joueur.add(chaine_mot_joueur); } if issue == 1 mot_joueur=document.getElementById(mot1) for(int i = 0 ; i<issue ; i++){ if issue[i]==mot_joueur[i] { alert("Gagné !"); points+=1; calcScore(form); } } else if issue == 2 mot_joueur=document.getElementById(mot2) for(int i = 0 ; i<issue ; i++){ if issue[i]==mot_joueur[i] { alert("Gagné !"); points+=1; calcScore(form); } } else if issue == 3 mot_joueur=document.getElementById(mot3) for(int i = 0 ; i<issue ; i++){ if issue[i]==mot_joueur[i] { alert("Gagné !"); points+=1; calcScore(form); } } else if issue == 4 mot_joueur=document.getElementById(mot4) for(int i = 0 ; i<issue ; i++){ if issue[i]==mot_joueur[i] { alert("Gagné !"); points+=1; calcScore(form); } } else { alert("Perdu !"); points-=1; calcScore(form); } } function calculerScore(form) """Cette fonction est utilisé pour comptabiliser les points""" { document.getElementById("score").innerHTML = "Vous avez " + points + " points." }
Merci d'avance,
Bonne journée à vous tous![]()
Partager