VaKarM.net :: Aide pour de la création de site internet

Forum

Index du forum > VaKarM > Le bistrot > Aide pour de la création de site internet

Aide pour de la création de site internet - 9 messages, 2044 vues

	1er message
	Par mathyyyyy - 07/05/2018 13:28:49

Salut à tous,

Ma copine aurait besoin d'aide pour un projet de création de site internet pour son BAC et je me suis dit que quelqu'un sur vakarm pourra peut-être l'aider !

En gros, elle doit créer un site avec des questions et elle aimerait que lorsqu'on choisit une réponse et que l'on clique sur "valider", la réponse apparaisse soit en vert (réponse juste avec un gif validé) et en rouge (réponse fausse avec une croix). Je n'y connais absolument rien dans ce domaine, je vous mets juste en dessous le message qu'elle a posté sur un autre forum. Si jamais quelqu'un peut l'aider merci de me mp j'ai des photos de ses lignes de codes.

Son message :
"Sur mon site que j'ai créé, j'ai essayé de mettre la fonction valider. Pour cela j'ai créé un bouton "<input type="button" value="Valider" onclick="tester(choix)"/>" et je l'ai relié à mon JavaScript pour que, lorsque je clique sur le bouton il m'affiche si c'est la bonne réponse ou non. Mais cela ne fonctionne pas comme si mon java n'était pas lié avec mon html"

Merci d'avance pour elle ;)

	Réponse #2
	Par carotte - 07/05/2018 14:06:07

Salut à tous,

Ma copine aurait besoin d'aide pour un projet de création de site internet pour son BAC et je me suis dit que quelqu'un sur vakarm pourra peut-être l'aider !

En gros, elle doit créer un site avec des questions et elle aimerait que lorsqu'on choisit une réponse et que l'on clique sur "valider", la réponse apparaisse soit en vert (réponse juste avec un gif validé) et en rouge (réponse fausse avec une croix). Je n'y connais absolument rien dans ce domaine, je vous mets juste en dessous le message qu'elle a posté sur un autre forum. Si jamais quelqu'un peut l'aider merci de me mp j'ai des photos de ses lignes de codes.

Son message :
"Sur mon site que j'ai créé, j'ai essayé de mettre la fonction valider. Pour cela j'ai créé un bouton "<input type="button" value="Valider" onclick="tester(choix)"/>" et je l'ai relié à mon JavaScript pour que, lorsque je clique sur le bouton il m'affiche si c'est la bonne réponse ou non. Mais cela ne fonctionne pas comme si mon java n'était pas lié avec mon html"

Merci d'avance pour elle ;)

Faudrait plus d'éléments pour aider, genre le code (utilise pastebin(outil de partage de code(choisit bien le bon langage pour le hightlighting)))
Html + Js
Après c'est l'histoire de quelques minutes.

	Réponse #3
	Par mathyyyyy - 07/05/2018 14:17:15

https://image.noelshack.com/fichiers/2018/19/1/1525695178-received-1647562588645194.jpeg

https://image.noelshack.com/fichiers/2018/19/1/1525695246-received-1647562611978525.jpeg

Je sais pas si ça peut aider mais se sont ses lignes de codes

	Réponse #4
	Par CopLaN - 07/05/2018 14:50:18

Yoh, dit lui de faire une fonction un peu plus simple, juste afficher quelques choses quand l'utilisateur appuie sur le boutton . Sans tout le code c'est dur de jugé mais à première vue c'est une erreur de sélecteur, il me semble que qu'il faut que tu mettes un id à tes éléments.

	Réponse #5
	Par carotte - 07/05/2018 15:12:35

Pas possible d'avoir le texte plutôt que des screenshot ? je veux bien aider, mais tout recopier ça va me faire chier ^^.

	Réponse #6
	Par mathyyyyy - 07/05/2018 15:23:01

Pas possible d'avoir le texte plutôt que des screenshot ? je veux bien aider, mais tout recopier ça va me faire chier ^^.

Alors le HTML :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="CssAuvers.css" />
<title> Jeu éducatif </title>
</head>

<body>
<h1> Question 1 </h1>
<center><h2><IMG src="photos/question.jpg" width=140 height=65></h2></center>
<h1><IMG src="photos/eglise.jpg" width=550 height=450></h1>

<form name="QCM">
<h1><input type="radio" name="choix" value="choix1"/>L'école ? </br></h1>
<h1><input type="radio" name="choix" value="choix2"/>L'église ?</br></h1>
<h1><input type="radio" name="choix" value="choix3"/>La fresque ?</br></h1>
<h1><input type="radio" name="choix" value="choix4"/>Le lavoir ?</br></h1>
<h1><input type="button" value="Valider" onclick="tester(choix)"/>
</form>

<div id="text">Ici, sera la correction</div>
<script type ="java/javascript" src="java/Réponse B.js"></script>
</html>
<p><A href="1jeuq2.html"><IMG src="photos/flèche.jpg" width=140 height=65 align= right></p>
</body>

Et le java :

function modifierText(texte)//dans le paramètre texte, tu mettre la chaine de caractère à afficher
{
document.getElementById("text").innerHTML = texte; // "text" étant l'id te ta balise qui contient le texte.
}

function tester(choix)// une fonction que l'on appellera pour tester le formulaire
{
if (choix[1].checked)
{
modifierText("Bonne réponse");

}else if (choix[0].checked || choix[2].checked || choix[3].checked )
{
modifierText("Mauvaise réponse");

}
return false;
}

	Réponse #7
	Par carotte - 07/05/2018 15:39:36

Pas possible d'avoir le texte plutôt que des screenshot ? je veux bien aider, mais tout recopier ça va me faire chier ^^.

Alors le HTML :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="CssAuvers.css" />
<title> Jeu éducatif </title>
</head>

<body>
<h1> Question 1 </h1>
<center><h2><IMG src="photos/question.jpg" width=140 height=65></h2></center>
<h1><IMG src="photos/eglise.jpg" width=550 height=450></h1>

<form name="QCM">
<h1><input type="radio" name="choix" value="choix1"/>L'école ? </br></h1>
<h1><input type="radio" name="choix" value="choix2"/>L'église ?</br></h1>
<h1><input type="radio" name="choix" value="choix3"/>La fresque ?</br></h1>
<h1><input type="radio" name="choix" value="choix4"/>Le lavoir ?</br></h1>
<h1><input type="button" value="Valider" onclick="tester(choix)"/>
</form>

<div id="text">Ici, sera la correction</div>
<script type ="java/javascript" src="java/Réponse B.js"></script>
</html>
<p><A href="1jeuq2.html"><IMG src="photos/flèche.jpg" width=140 height=65 align= right></p>
</body>

Et le java :

function modifierText(texte)//dans le paramètre texte, tu mettre la chaine de caractère à afficher
{
document.getElementById("text").innerHTML = texte; // "text" étant l'id te ta balise qui contient le texte.
}

function tester(choix)// une fonction que l'on appellera pour tester le formulaire
{
if (choix[1].checked)
{
modifierText("Bonne réponse");

}else if (choix[0].checked || choix[2].checked || choix[3].checked )
{
modifierText("Mauvaise réponse");

}
return false;
}

Sa fera l'affaire =), la prochaine fois passe par https://pastebin.com/ c'est simple et adapté =). Je regarde ce qui cloche et je t'envoi une correction.

	Réponse #8
	Par DrqkoN - 07/05/2018 15:41:09 - Modifié le 07/05/2018 15:46:45

Pas possible d'avoir le texte plutôt que des screenshot ? je veux bien aider, mais tout recopier ça va me faire chier ^^.

Alors le HTML :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="CssAuvers.css" />
<title> Jeu éducatif </title>
</head>

<body>
<h1> Question 1 </h1>
<center><h2><IMG src="photos/question.jpg" width=140 height=65></h2></center>
<h1><IMG src="photos/eglise.jpg" width=550 height=450></h1>

<form name="QCM">
<h1><input type="radio" name="choix" value="choix1"/>L'école ? </br></h1>
<h1><input type="radio" name="choix" value="choix2"/>L'église ?</br></h1>
<h1><input type="radio" name="choix" value="choix3"/>La fresque ?</br></h1>
<h1><input type="radio" name="choix" value="choix4"/>Le lavoir ?</br></h1>
<h1><input type="button" value="Valider" onclick="tester(choix)"/>
</form>

<div id="text">Ici, sera la correction</div>
<script type ="java/javascript" src="java/Réponse B.js"></script>
</html>
<p><A href="1jeuq2.html"><IMG src="photos/flèche.jpg" width=140 height=65 align= right></p>
</body>

Et le java :

function modifierText(texte)//dans le paramètre texte, tu mettre la chaine de caractère à afficher
{
document.getElementById("text").innerHTML = texte; // "text" étant l'id te ta balise qui contient le texte.
}

function tester(choix)// une fonction que l'on appellera pour tester le formulaire
{
if (choix[1].checked)
{
modifierText("Bonne réponse");

}else if (choix[0].checked || choix[2].checked || choix[3].checked )
{
modifierText("Mauvaise réponse");

}
return false;
}

Alors, oui ton js n'est pas "lié" à ton HTML. Je pense que ton erreur vient de ta balise "<script type ="java/javascript" src="java/Réponse B.js"></script>". Essaye avec comme type "text/javascript" et vérifie bien ton "chemin".
Après, te casse pas la tête avec un "else if" si toute tes autres réponses sont fausses, un "else" suffit.
Et enfin, tu essaies de gérer "choix" comme si c'était un tableau, alors qu'avec des boutons radios et des values différentes tu n'as qu'à récupérer la valeur de celle coché.
Et pour finir, si tu veux faire apparaître ton GIF, il faut que tu "créer" ton image. Exemple : "modifierText("<img src='img/test.gif'/>");"

J'ai fait un pastebin rapide si jamais tu galères de trop (y'a surement des trucs a peaufiné).

html : https://pastebin.com/jg13F4su
js : https://pastebin.com/Kphftm8C

	Réponse #9
	Par mathyyyyy - 07/05/2018 16:04:02

Merci à tous pour vos réponses, j'ai tout transmis, ça a fonctionné et elle a compris son erreur donc c'est niquel ! ;-)

Encore merci pour elle !

	Réponse #10
	Par carotte - 07/05/2018 16:05:54

Pas possible d'avoir le texte plutôt que des screenshot ? je veux bien aider, mais tout recopier ça va me faire chier ^^.

Alors le HTML :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="CssAuvers.css" />
<title> Jeu éducatif </title>
</head>

<body>
<h1> Question 1 </h1>
<center><h2><IMG src="photos/question.jpg" width=140 height=65></h2></center>
<h1><IMG src="photos/eglise.jpg" width=550 height=450></h1>

<form name="QCM">
<h1><input type="radio" name="choix" value="choix1"/>L'école ? </br></h1>
<h1><input type="radio" name="choix" value="choix2"/>L'église ?</br></h1>
<h1><input type="radio" name="choix" value="choix3"/>La fresque ?</br></h1>
<h1><input type="radio" name="choix" value="choix4"/>Le lavoir ?</br></h1>
<h1><input type="button" value="Valider" onclick="tester(choix)"/>
</form>

<div id="text">Ici, sera la correction</div>
<script type ="java/javascript" src="java/Réponse B.js"></script>
</html>
<p><A href="1jeuq2.html"><IMG src="photos/flèche.jpg" width=140 height=65 align= right></p>
</body>

Et le java :

function modifierText(texte)//dans le paramètre texte, tu mettre la chaine de caractère à afficher
{
document.getElementById("text").innerHTML = texte; // "text" étant l'id te ta balise qui contient le texte.
}

function tester(choix)// une fonction que l'on appellera pour tester le formulaire
{
if (choix[1].checked)
{
modifierText("Bonne réponse");

}else if (choix[0].checked || choix[2].checked || choix[3].checked )
{
modifierText("Mauvaise réponse");

}
return false;
}

Le html -> https://pastebin.com/9G1HY4kD

Le JavaScript -> https://pastebin.com/adD1VQF8

J'ai corrigé quelques autres trucs, j'ai mis des commentaires aussi. Et attention, ne pas confondre Javaa et JavaScript qui sont deux langages très différents =).

Page 1 sur 1

	PGL	23827 viewers
	krL	2232 viewers
	olofmeister	2073 viewers
	MGG	939 viewers
	shox	190 viewers
	aunni	45 viewers
	BeHop	29 viewers
	ESWC PGW Open
	Gaming LIVE
	EPSILAN 13

G2 Esports vs. Gambit Gamin.		Ninjas in Py. vs. LGB eSports
fnatic vs. Titan		Team EnVy Us vs. Virtus.pro
Virtus.pro vs. LGB eSports		Titan vs. Ninjas in Py.
fnatic vs. EnVy Us		Ninjas in Py. vs. EnVy Us

Scoreboard

Brèves

Une pétition adressée à...

jkaem et nawwk quittent...

isak redonne un drapeau...

Gaimin Gladiators recrute...

AMKAL remplace NickelBack...

Preasy, c'est fini

GamerLegion avec aNdu et...

Actualité de la scène

Raconter Counter-Strike

L'oubli perpétuel dont personne ne parle

Voir Counter-Strike avec Anthony Perfetto,...

Voir Counter-Strike avec Maciej Kolek,...

Voir Counter-Strike avec Paul Arrivé,...

Counter-Strike et la politique

Happy, de la lumière à la galère

Au théâtre des vétos

Ex6TenZ, le parrain

Devenir leader, une étape prisée... mais...

krL, entretien avec une grande gueule

Compétitions

BLAST Premier Fall Showdown : FaZe et...

European Pro L. S18 : GUN5 s'impose

YaLLa Compass Summer : Keoz &...

IEM Rio : Qualif' ouverte terminée

IEM Cologne : Vitality triomphe, apEX...

CCT S2 Europe #10 : Revenant en ronde...

CCT S2 Europe #9 : NBK- & Nivera en...

ESL Chall. Atlanta : Qualif' ouverte...

Elisa Invitational Fall : MOUZ NXT et...

lun	mar	mer	jeu	ven	sam	dim
28	29	30	31	01	02	03
04	05	06	07	08	09	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	01

Qui sommes-nous ? Nous contacter Nous soutenir Politique de confidentialité
v4.0.5 - Développement par deStrO & Solak- Design par sUpa, deKey, LEI, Kab, Lumi, SUANN et Cerogrimm - www.VaKarM.net © 2003-2024

lun	mar	mer	jeu	ven	sam	dim
28	29	30	31	01	02	03
04	05	06	07	08	09	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	01

lun	mar	mer	jeu	ven	sam	dim
28	29	30	31	01	02	03
04	05	06	07	08	09	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	01