Brèves

WebTV

Actualité de la scène

Compétitions

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, 2059 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 #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