Code html pour une barre de réponse
Forum Programmation : Code html pour une barre de réponse
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.
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.
Java est bien trop compliquer a apprendre. Puisque tu es debutant penche toi vers le javascript
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.
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...
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 ?
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"
ok merci beaucoup pour tes réponses. Je vais me renseigner.
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
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
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 ?
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
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
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
| world2world a écrit :
|
Ha, à mon humble avis une sécurité supplémentaire n'est pas nécessaire car les enfants iront rarement chercher jusque là.
Message édité par Maniak_31 le 09-11-2009 à 07:22:04
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....
Message édité par tiblond29 le 09-11-2009 à 12:11:26
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...
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 ?
Message édité par tiblond29 le 10-11-2009 à 12:14:14
Dans le fichier .js, ne mets pas les balises <script> et </script>
Répondre à crazycat@idn
Mème sans ces balises, ca ne fonctionne pas.
ç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>
Message édité par Maniak_31 le 11-11-2009 à 11:41: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();" />
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.
Il y a 640 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.
