Votre question

Code html pour une barre de réponse

Tags :
  • Html
  • Programmation
Dernière réponse : dans Programmation
6 Novembre 2009 11:50:45

Bonjour,

Voila, je suis en train de créer un site de jeux pour enfants. Je ne suis pas trés connaisseur en html ou autre.

Mon site consistera en une petite série de jeux qui demandera une réponse. Je voudrais un genre de barre pour taper la réponse avec bouton valider et si la réponse est juste, me fasse passer à une autre page. Je souhaiterais aussi faire afficher une sorte de message d'aide ou d'indice quand la réponse se rapproche.

Exemple : si la réponse est "BLEU" et que le joueur tape " ROUGE" par exemple, je voudrais un message qui lui dit : Presque... Peut être une autre couleur ...


Je ne sais pas si je me fais bien comprendre.
En espèrant une réponse. Merci d'avance.

Autres pages sur : code html barre reponse

6 Novembre 2009 19:04:09

Si tu veux que ton système d'aide ( lorsque la réponse est "BLEU" et que le joueur tape " ROUGE" par exemple, je voudrais un message qui lui dit : Presque... Peut être une autre couleur ... ) fonctionne en temps réel, que le contenu soit interactif, c'est pas possible en HTML ni en PHP. Il faut passer par du JAVA.
6 Novembre 2009 22:16:13

Java est bien trop compliquer a apprendre. Puisque tu es debutant penche toi vers le javascript
Contenus similaires
6 Novembre 2009 22:17:53

Merci, pour ta réponse mais comment procède t'on alors en java ? J'ai essayer de me renseigner un peu sur du javascript mais je n'ai rien trouvé de concluant.
6 Novembre 2009 22:32:13

Tu ne peux pas trouver que le javascript est concluant en aussi peut de temps. et crois moi oubli tout de suite java.
Pourquoi? Si deja en html tu n'es pas un connaisseur alors Java va te faire ramer jusqua t faire exploser la tete lol.

Bon un exemple en javascript:

tu as un champs en html ou on entre la reponse:
<input type="text" id="reponse" />

en javascript tu recupere la reponse de la maniere suivante:
<script>
reponse=document.getElementById('reponse').value;

if(reponse == 'rouge'){
alert('Presque, essai encore');
}else if(reponse == 'bleu'){
alert('Oui bravo');
}else{
alert('Essai encore');
}
</script>

Tu va trouver que c'est du chinois mais une fois que tu aurra chercher quelque tutos sur le javascript dans google tu pourra plus t'en passer...
6 Novembre 2009 22:52:21

bon ok je comprend, sauf que là, mon indice se fera sous forme d'alertes donc d'une petite fenetre . c'est ca ?
bon oublions pour l'instant les indices. En ce qui concerne cette barre de réponse qui amene le joueur a une autre page, comment dois je procédé ? existe t'il des script tout fait ? sinon comment se nomme ce genre de barre , ou de tutos pour faciliter mes recherches ?
6 Novembre 2009 23:03:20

Oui il s'affichera dans une fenetre d'alerte mais c'est derisoire tu peux le faire s'afficher dans un <div></div>.

En javascript pour redirer vers une autre page:
document.location='urlDElaPAGE.html';

Oublions les indices:

//on recupere la reponse
reponse=document.getElementById('reponse').value;

//si la reponse est bleu, c'est bon. on redirige le visiteur vers la page de la 2eme question
if(reponse == 'bleu'){
document.location='question2.html';
}else{
//la reponse est fausse. tu choisi ce que tu veux faire
//soit l'affciher dans une alerte soit dans un div soit redirer vers une autre page
}

Je ne connais pas un script tout fait mais meme si il en existait un, je te conseillerai d'apprendre le javascript pour que ton script soit parfaitement adapter a ce que tu veux faire.

Tu n'as pas besoin de devenir un as de javascript pour faire ca. il te suffit d'apprendre les bases et tu t'en sortira.

tape dans google "tutorial javascript"
6 Novembre 2009 23:06:50

ok merci beaucoup pour tes réponses. Je vais me renseigner.
7 Novembre 2009 00:22:19

bon j'ai regardé un peu les tutos javascript mais c'est pas évident. Les fonctions if et else, document.location etc .... Je tente malgrés tout mais rien à faire je bute sur un truc je sais pas. j'ai commençé avec ceci :

<input type="text" id="reponse"/>
<input type=submit value="Valider">
<script>
reponse=document.getElementById('reponse').value;
if(reponse=='rouge'){document.location='URLdelepage2';}
else(reponse=='bleu'){alert('Presque...');}
</script>


Mais je dois zapper quelque chose car ca fonctionne pas. Help me please lol
7 Novembre 2009 02:54:59

La ou tu t'es tromper c'est sur else(reponse=='bleu')

if = si
else if = ou si
else = sinon

Tu dois penser de cette maniere en posant les conditions avec if:
Si reponse est egal a rouge...
Ou si reponse est egal a bleu...
Sinon...

en clair:

if(reponse == 'rouge'){
//ce qu'il faut faire si la reponse est rouge
}else if(reponse == 'bleu'){
//ce qu'il faut faire si la reponse est bleu
}else{
//ce qu'il faut faire quand la reponse est egal a autre chose que rouge ou bleu
}

Voila j'espere que j'ai bien expliquer
7 Novembre 2009 11:17:17

Bonjour,
bon voila j'ai essayé ce que tu m'as dis mais ca ne fonctionne toujours pas pourtant j'ai l'impression d'avoir bien respecté les scripts enfin je crois.
Si ( donc if ) la réponse est rouge c'est ok je passe a la page 2, ou si ( donc else if )la réponse est bleu il y a alerte, sinon ( tout autre réponse donc else ) il y a alerte aussi.
Dans <head> j'ai donc mis :

<head>
<script>
reponse=document.getElementById('reponse').value;
if(reponse=='rouge'){document.location='URLdelepage2';}
else if(reponse=='bleu'){alert('Presque...');}
else{alert('Faux.. Recommence !');}
</script>
</head>

et dans <body> ceci :

<body>
Réponse : <input type="text" id="reponse"/>
<input type="submit" value="Valider">
</body>

Mais aucun résultat donc je dois encore zapper un truc.... mais quoi ?

8 Novembre 2009 09:04:48

Voila le code complet:

Dans head:

<script type="text/javascript">
<!--

function verifRep(){

var rep=document.getElementById('reponse').value;

if(rep == 'rouge'){
document.location='page2.html';
}else if(rep == 'bleu'){
alert('Presque...');
}else{
alert('Faux.. Recommence !');
}

}


-->
</script>

Dans body:

Réponse : <input type="text" id="reponse" />
<input type="button" value="Valider" onclick="verifRep();" />


Voila, tu peux te servir de ce code mais je te conseil de lire plus de tutaux pour savoir exactement ce que tu fais.

Allez courage tu va y arriver, j'ai debuter comme toi moi aussi
8 Novembre 2009 11:21:09

ok merci beaucoup ce code fonctionne super bien. Par contre j'ai un souci car en executant ce script, le joueur à juste à afficher la source pour voir la réponse ou l'adresse de la page 2....

J'aimerais rendre ces infos masquées. J'avais penser à genre type="text/css" href="/style.css" avec dans mon dossier style.css la réponse... Puis je faire ce genre de chose ? Si oui, comment l'appliquer à chaque page ?

Bref, je tente de me renseigner sur tout ca...
Merci encore


9 Novembre 2009 02:29:25

oui c'est possible.

Tu enregistre ton code javascript (celui qui ce met entre <script> et </script>) dans un fichier avec le nom verificateur.js par exemple

dans le code html pour faire appel a ce script tu fais comme ca:
<script type="text/javascript" src="verificateur.js"></script>

Mais sache qu'un utilisateur qui s'y connais pourra toujours avoir la reponse en comprenant que celle ci est dans le fichier verificateur.js

La seule facon d'y remedier c'est d'utiliser un language qui s'execute coté serveur. Tu ne sais peut etre pas ce que sa veut dire mais si tu es vraiment determiner et que tu es courageux cherche des tutos sur le language PHP
9 Novembre 2009 07:21:52

world2world a dit :

Mais sache qu'un utilisateur qui s'y connais pourra toujours avoir la reponse en comprenant que celle ci est dans le fichier verificateur.js



Ha, à mon humble avis une sécurité supplémentaire n'est pas nécessaire car les enfants iront rarement chercher jusque là.
9 Novembre 2009 12:10:25

Ok j'ai déja du mal avec javascript alors là .... lol
bon, faut pas se décourager.
En fait ce n'est qu'une simple feuille de style externe lol mais quand on a jamais fait cela ce n'est pas évident quand même.

le fichier verificateur.js par exemple, quelle extension doit il avoir ? css ? car si j'utilise css ne devrais je pas utiliser plutot

<link rel="stylesheet" type="text/css" href="verificateur.css" /> dans ma page html ?

je ne pense pas mais bon....
10 Novembre 2009 05:00:48

Non le fichier verificateur.js n'est pas un fichier css.
CSS est ce qu'on appelle une feuille de style. En clair c'est un fichier contenant un code qui permet de rendre jolie une page.

verificateur c'est le nom du fichier et .js c'est l'extension.

Tu peux faire du css directement dans la page html grace aux balises <style> comme tu peux faire du css dans un fichier externe avec pour extension .css .

Et bien c'est pareil avec javascript:
tu peux faire du javascript directement dans la page html grace aux balises <script> comme tu peux le faire dans un fichier externe avec pour extension .js

N'oublie pas de nous donner le lien de ton site...
10 Novembre 2009 12:12:50

Bonjour, j'ai essayer cette manip mais ca ne fonctionne pas.

J'ai créé un fichier " info.js " et j'y ai mis à l'interieur :

<script>
if(rep == 'rouge'){
document.location='http://www.google.fr/';
}else if(rep==''){document.location='\essai.html';
}else if(rep == 'bleu'){document.location='\enigme2.html';
}else{
document.location='\erreur.html';
}

}
</script>

Puis dans ma page html, dans <head> j'ai mis :

<script src="info.js">
</script>

Mais ca ne fonctionne pas.

Et quand j'essai d'ouvrir mon fichier " info.js " il me met un message d'erreur :

Script : C:\Documents and settings\nèan\Mes documents\info.js
Ligne : 1
Caract : 1
Erreur : Erreur de syntaxe
Source : Erreur de compilation Microsoft JScript

Est ce normal ?
a c 145 L Programmation
10 Novembre 2009 12:20:21

Dans le fichier .js, ne mets pas les balises <script> et </script>
10 Novembre 2009 12:23:29

Mème sans ces balises, ca ne fonctionne pas.
11 Novembre 2009 11:25:11

ça te renvoi quelle erreur sans les balises <script> et </script> ?
et dans les balises <head> met ça au cas où :

<script type="text/javascript" src="info.js"></script>
11 Novembre 2009 13:29:35

Quand tu clique sur le bouton "valider" tu fais appel a une fonction hors dans ton code js tu n'as pas definit de fonction.

Dans ton fichier info.js:

function verifRep(){

var rep=document.getElementById('reponse').value;

if(rep == 'rouge'){
document.location='http://www.google.fr/';
}else if(rep==''){
document.location='\essai.html';
}else if(rep == 'bleu'){
document.location='\enigme2.html';
}else{
document.location='\erreur.html';
}

}

dans ta page html:

<script type="text/javascript" src="info.js"></script>
Réponse : <input type="text" id="reponse" />
<input type="button" value="Valider" onclick="verifRep();" />
12 Novembre 2009 12:09:55

Merci world2world, ca fonctionne. Effectivement sans la fonction, ca ne pouvait pas fonctionner pffff. Et merci aussi aux autres qui m'ont aidé.

J'ai encore beaucoup de chose à apprendre. Mais j'aime bien et quand on aime on progresse vite.... Enfin j'espère lol

Merci encore à tous.
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS