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, 1913 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

	olofmeister	3938 viewers
	maleK	237 viewers
	1PV	140 viewers
	aunni	59 viewers
	DEVIL	44 viewers
	mslooxie	18 viewers
	ESWC PGW Open
	Gaming LIVE
	EPSILAN 13
	Leetgamerz 2

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

Gaimin Gladiators recrute...

AMKAL remplace NickelBack...

Preasy, c'est fini

GamerLegion avec aNdu et...

Bravado débarque en Europe

NiP parie sur un autre AWP...

"Memories of CS:GO - The...

Actualité de la scène

3DMAX officialise Graviti et wasiNk

Dust2 de retour, l'Overwatch et l'arme à...

Diviiii quitte Lausanne SE pour Verdant

Cloud9 écarte HObbit et Perfecto

OG promeut Lambert et appelle killazoo en...

FURIA se passe d'arT

electronic file chez Virtus.pro

Alban Dechelotte, CEO de G2 Esports : De...

GamerLegion écarte Keoz

dupreeh se relance chez Falcons

ZywOo, son histoire en Major autour de...

Compétitions

ESL Pro League S19 : L'arbre

ESL Pro League S19 : Poules terminées

CCT S2 Europe #2 : Neityu et MOUZ NXT...

CCT S2 Europe #1 : AMKAL s'impose

RES Regional Series #3 : Nemiga fait...

YaLLa Compass Spring : Sashi...

Hellcase Cup #9 : MOUZ NXT forfait le...

ESEA S49 : Le classement après six...

ESL Chall. Melbourne : MIBR titrée

lun	mar	mer	jeu	ven	sam	dim
29	30	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	31	01	02

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
29	30	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	31	01	02

lun	mar	mer	jeu	ven	sam	dim
29	30	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	31	01	02