Affichage sur un endroit précis d'une page

Résolu/Fermé
Nirsab Messages postés 78 Date d'inscription samedi 17 juillet 2021 Statut Membre Dernière intervention 8 août 2022 - 19 juil. 2021 à 08:33
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 19 juil. 2021 à 11:46
Bonjour,

J'ai déjà réussi à faire ceci, mais je bloque complet sur le script...




<label for="Equipe1" class="col-sm-4 col-form-label">Equipe 1:</label>
<div class="col-sm-3">
<input id="Equipe1" type="Name" class="name form-control" id="inputName">
</div>

<div>
<label for="Equipe1" class="col-sm-1 col-form-label">SCORE:</label>
<div class="col-sm-1">
<id="Score1" type="Score" class="score form-control">
</div>



<div>
<button onclick="button1" style=background-color:green>+1</button>
<button onclick="button2" style=background-color:orange>+2</button>
<button onclick="button3" style=background-color:red>+3</button>
<button onclick="button4" style=background-color:gray>Faux: -1</button>
</div>



<script>


<!--Initialiser 0 points dans la case Score1, et ajouter/sanctionner le nombre de points choisis en fonction du bouton, tout en préservant le score...-->



</script>



Quelqu'un aurait-il le cœur, la bonté, la soif d'aider un débutant professionnel de mon espèce tel que moi, svp?

Merci beaucoup.

A+
Nirsab

3 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 543
19 juil. 2021 à 10:37
Bonjour,

Peux tu stp préciser sur quoi tu bloques ?

Pour te guider un minimum, commence par ajouter des parenthèses après le nom dans les attributs onclick car il s'agit d'un appel à des fonctions (donc avec des parenthèses) :
<button onclick="button1()" style=background-color:green>+1</button>

function button1(){
    // ici le code pour modifier le nombre de point
}


Pour modifier le nombre de point, tu peux sélectionner l'élément html correspondant avec getElementById() par exemple puis modifier la propriété value de cet élément (si c'est un input) ou la propriété innerHTML (si c'est un div).

Bonne journée,
0
Nirsab Messages postés 78 Date d'inscription samedi 17 juillet 2021 Statut Membre Dernière intervention 8 août 2022
19 juil. 2021 à 11:06
Merci pour ta réponse Pitet.

En langage naturel, voici ce que je souhaite (pour 4 équipes):

- Initialiser 0 pt à toute les équipe en début de partie
- Afficher une question aléatoire (je cherche comment faire, si tu sais, je prends, stp)
- Afficher compte à rebours de 8 secondes dès l'affichage de la question
- Afficher la valeur de la question (1, 2, ou 3pts)
- En fonction de quelle équipe répond et de la valeur de la question, ajouter le nombre de pts nécessaires ou sanctionner de -1 en cas de mauvaise réponse.
- Afficher score à l'emplacement déjà créé.

Tu crois que c'est possible, stp ?

Merci.
A+
Nirsab
0
Nirsab Messages postés 78 Date d'inscription samedi 17 juillet 2021 Statut Membre Dernière intervention 8 août 2022
19 juil. 2021 à 11:19
<label for="Equipe1" class="col-sm-4 col-form-label">Equipe 1:</label>
<div class="col-sm-3">
<input id="Equipe1" type="Name" class="name form-control" id="inputName">
</div>

<div>
<label for="Equipe1" class="col-sm-1 col-form-label">SCORE:</label>
<div class="col-sm-1">
<id="Score1" type="Score" class="score form-control">
</div>






<div>
<button onclick="button1()" style=background-color:green>+1</button>
<button onclick="button2()" style=background-color:orange>+2</button>
<button onclick="button3()" style=background-color:red>+3</button>
<button onclick="button4()" style=background-color:gray>Faux: -1</button>
</div>

<script>
message ci-dessus
</script>
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 543
19 juil. 2021 à 11:26
Oui c'est possible.

- Initialiser 0 pt à toute les équipe en début de partie
-> Tu peux initialiser 4 variables js au début de ton script qui serviront de compteur de point pour chaque équipe. C'est ces 4 variables qu'il faudra utiliser dans les fonctions permettant d'ajouter ou soustraire les points ainsi qu'à l'affichage des scores.

- Afficher une question aléatoire
-> Une solution possible serait de stocker la liste des questions dans un tableau js puis d'utiliser la fonction Math.random() pour sélectionner aléatoirement un élément de ce tableau.

- Afficher compte à rebours de 8 secondes dès l'affichage de la question
-> Tu peux utiliser les fonctions js setTimeout() ou setInterval() pour réaliser un compte à rebours

Comment vont participer les différentes équipes ? Tous les participants seront-ils derrière le même ordinateur ou pourront-ils participer à distance chacun sur leurs propres ordinateurs ?
0
Nirsab Messages postés 78 Date d'inscription samedi 17 juillet 2021 Statut Membre Dernière intervention 8 août 2022
19 juil. 2021 à 11:35
Merci, je vais essayer.
Je peux revenir vers toi si je bloque, stp ?

Ce sera un jeu que je ferais en visio. Mais s'il y a possiblité de faire un buzzer et de partager le jeu, je suis preneur... Je n'y ai pas encore trop refléchi...

Pour l'instant je vais essayer de suivre tes conseils...

Merci beaucoup.

Nirsab
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 543
Modifié le 19 juil. 2021 à 11:46
Si tu veux que chaque participant puisse jouer à distance avec leur propre ordinateur, il faudra une partie serveur à ton application pour gérer la communication entre les différents ordinateurs.
Si tu veux faire jouer tes participants en faisant par exemple un partage de ton écran en visio (l'application ne sera donc que sur ton ordinateur), tu pourras alors tout réaliser en javascript coté client, ce qui me semble plus simple pour commencer.

Oui n'hésites pas à revenir sur le forum si tu as des questions.
0