Affichage sur un endroit précis d'une page

Signaler
Messages postés
12
Date d'inscription
samedi 17 juillet 2021
Statut
Membre
Dernière intervention
25 juillet 2021
-
Messages postés
2432
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
28 juillet 2021
-
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

Messages postés
2432
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
28 juillet 2021
454
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,
Messages postés
12
Date d'inscription
samedi 17 juillet 2021
Statut
Membre
Dernière intervention
25 juillet 2021

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
Messages postés
12
Date d'inscription
samedi 17 juillet 2021
Statut
Membre
Dernière intervention
25 juillet 2021

<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>
Messages postés
2432
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
28 juillet 2021
454
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 ?
Messages postés
12
Date d'inscription
samedi 17 juillet 2021
Statut
Membre
Dernière intervention
25 juillet 2021

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
Messages postés
2432
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
28 juillet 2021
454
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.