Bonjour à tous,
j'ai créé un jeu avec l'aide du forum pour mes élèves :
https://codepen.io/cyril-gomez/pen/eYjERxE?editors=0100
et après avoir joué avec mes élèves de CP, je me rends compte qu'il faut que je l'améliore encore un peu.
Dans le jeu, les élèves cliquent sur 10 images, vérifient leur dizaine et recommence pour compter le nombre d'images affichées.
Je souhaiterais que lorsqu'une dizaine vérifiée est correcte, elle s'affiche pour une meilleure lisibilité du nombre de dizaines réalisées.
Pour cela, j'ai créé un bandeau d'affichage des images sur le côté et j'ai aussi créé les images qui doivent s'afficher.
la couleur du bord change pour chaque dizaine réalisée et correspond aux cercles des images.
Du coup je me suis dit que je mettais dans le html ça
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 <div class="bandeau-domino"> <div> <output id="titre-domino">Dizaine réalisée</output> </div> <div class="affichage-domino"> <img id="affichage_coeur1" src="imgs/coeur/coeur1.jpg" name="image" width="150" height="120" /> <img id="affichage_coeur2" src="imgs/coeur/coeur2.jpg" name="image" width="150" height="120" /> </div> </div>
dans le css, j'ai mis display: none; pour chaque idenfin dans le script, dans la fonction verifier(), j'ai mis
pour afficher l'image.
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById("affichage_coeur1").style.display = "inline-block";
Mais là où je bloque, c'est sur l'affichage de la deuxième image, je pourrais faire
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 if nbrDizaines==1 {document.getElementById("affichage_coeur1").style.display = "inline-block";} if nbrDizaines==2 {document.getElementById("affichage_coeur1").style.display = "inline-block"; ...
je pense que ça fonctionnera mais c'est pas très synthétique.
Surtout que j'aimerais bien évidemment que s'affiche d'autres dominos, si les images à cliquer sont des chiens, des ours, des poissons...
Je me suis dit aussi que peut être je pouvais faire quelque chose comme ça:
avec toutes les images et un affichage au fur et à mesure.
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 Pics= [ ["coeur","https://www.espritterroirs.fr/wpsacco/wp-content/uploads/coeur-150x150.png"], ["pomme","https://www.educol.net/image-fruit-pomme-verte-dl27813.jpg"], ["ours","https://www.waouo.com/wp-content/uploads/2014/03/oursonavecunballon-576x576.jpg"], ["chien","https://iheartcraftythings.com/wp-content/uploads/2021/04/Dog-DRAWING-%E2%80%93-STEP-10.jpg"], ["soleil","https://verbnow.com/wp-content/uploads/2022/03/Sun-Fin-735x490.jpg"], ["poisson","https://iheartcraftythings.com/wp-content/uploads/2021/04/Fish-DRAWING-%E2%80%93-STEP-10.jpg"] ];
Mais ça je sais pas faire du tout.
https://codepen.io/cyril-gomez/pen/LYBzroR
Merci par avance.
Partager