STIC Discussion:STIC II - exercice 14 (Nestor-Pixel)
Reinitialiser la page ou le formulaire -- Sylviane 21 avril 2008 à 00:08 (CEST)
Je n'arrive pas à trouver comment réinitialiser le questionnaire en cliquant sur un bouton "recommencer". J'ai essayé "windows.location.reload();" ça ne marche pas terrible..
Merci
Re: Reinitialiser la page ou le formulaire -- Davidc 21 avril 2008 à 01:02 (CEST)
Plus simple (enfin si j'ai compris ta question), utilises un bouton Reset :
<input type="reset" />
ps. window.location , ça fait référence à l'adresse de la page. Si tu lances cette commande (ex. window.location = google.ch), tu vas te retrouver sur le site de Google.
Re: Re: Reinitialiser la page ou le formulaire -- Daniel K. Schneider 21 avril 2008 à 14:57 (CEST)
oui juste :) Enfin mettez quand-même une value pour que l'utilisateur puisse voir le bouton:
<input type="reset" value="recommencer">
Puis pour le DOM c'est plutot
window.location.href
... à utiliser pour fabriquer des menus de navigation simples par exemple (en tout cas pas ici)
Finalement, si depuis le formulaire vous appelez une fonction pour le traiter:
- si cette fontion retourne false, le formulaire rempli va rester (mieux pour tester)
- sinon, une nouvelle page va être chargée (la même) et tout sera remis à zéro.
the entity name must follow the & in the entity reference -- Sylviane 22 avril 2008 à 21:21 (CEST)
Merci pour vos explications ci-dessus pour "reset". En fait on l'avait déjà vu dans un autre exercice mais je croyais que c'était beaucoup compliqué. J'aurais dû y penser...
J'ai un autre problème, j'ai écris :
function monscore ()
{
if ((q1 == 1) && (q2 == 6) && (q3 == 7))
{
alert ("C'est tout bon, vous pouvez aller à la peche");
}
else
{
alert ("vous auriez peut-être besoin d'un cours");
}
}
Le validateur de Exchanger me dit pour la ligne if ((q1 == 1) && (q2 == 6) && (q3 == 7)) "the entity name must follow the & in the entity reference"
je n'arrive pas à comprendre comment il faut l'écrire pour que ça aille. Ce qui est bizarre, c'est que le validateur de Firefox ne me trouve pas d'erreur.
Re: the entity name must follow the & in the entity reference -- Bertrand Schneider 22 avril 2008 à 21:36 (CEST)
je suis pas un pro en javascript, mais tu n'as pas besoin de mettre de parenthèses dans la condition du if. Essaie avec
if (q1 == 1 && q2 == 6 && q3 == 7)
ça change quelque chose? --Bertrand Schneider 22 avril 2008 à 21:36 (CEST)
Re: Re: the entity name must follow the & in the entity reference -- Sylviane 22 avril 2008 à 21:47 (CEST)
Non ça ne change rien. J'avais d'ailleurs déjà essayé, ainsi que d'autres config (avec ou sans espaces etc). Dans le validateur en ligne, j'ai ceci comme info :
if (q1 == 1 && q2 == 6 && q3 == 7) ✉ This message may appear in several cases: You tried to include the "<" character in your page: you should escape it as "<" You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&",which is always safe. Another possibility is that you forgot to close quotes in a previous tag.
C'est le && qui pose problème.
Re: Re: Re: the entity name must follow the & in the entity reference -- Bertrand Schneider 23 avril 2008 à 12:09 (CEST)
hmmm je sais pas trop alors. C'est peut-être exchanger qui bug, si ça marche dans firefox je pense pas que tu doives t'arrêter là-dessus... au pire demande à mister coll, c'est lui le fana de javascript ;)
--Bertrand Schneider 23 avril 2008 à 12:09 (CEST)
Re: Re: Re: Re: the entity name must follow the & in the entity reference -- Sylviane 23 avril 2008 à 12:24 (CEST)
Oui ça marche dans Firefox (Tidy le valide) mais ce n'est pas validé par le validateur en ligne. Et pour Mister Coll, il a l'air déprimé en ce moment, je ne vais pas lui casser les pieds (faudrait vraiment qu'on ait un forum où on puisse se remonter le moral et rigoler, ça manque. J'ai bien été voir le Moo mais bof..) Bon tant pis de toutes manières faut passer aux autres exercices.. Merci Bertrand
=Re: Re: Re: Re: Re: the entity name must follow the & in the entity reference -- Bertrand Schneider 23 avril 2008 à 13:43 (CEST)=
oui c'est le point qui avait été soulevé pendant la dernière séance de régulation (c'est d'ailleurs david qui en avait parlé)... le fait qu'on manque d'un espace commun pour déconner un peu.
Bah le moo je suis sûr que ça peut être vraiment sympa, mais il aurait fallu qu'on aille tous dessus régulièrement. T'es rebuté par l'aspect console ou bien? :) moi je trouve cool...
bon ben à toute dans une autre discussion stic ^^ cya
Re: the entity name must follow the & in the entity reference -- Daniel K. Schneider 23 avril 2008 à 20:01 (CEST)
Hmm non le problème est tout simple: Le valideur valide XML, et plâtrer du JavaScript dans XML est illégal. Particulièrement les & qui indiquent le début d'une entité. Effectivement on l'a déjà vu, mais en STIC I. XML possède une syntaxe qu'il faut absolument respecter. Donc tout cela n'a aucun rapport avec JavaScript:
Solutions:
- Faire HTML au lieu de XHTML
- Utiliser un autre éditeur qu'un éditeur XML pour valider (enfin cela veut dire mettre le problème sous le tapis)
- Mettre le JavaScript dans un fichier externe (et c'est actuellement la seule bonne solution facile si vous tenez à faire du XHTML transitionnel). Donc faites cela !
- Enfermer le JS dans une section CDATA (c'est expliqué qq. par dans les transparents) si par hasard la page doit être servie comme XML ou XHTML. Rappel: IE 7 ne comprends pas XHTML en tant qu'XML ... il traduit en HTML. Donc va flipper avec *.xhtml.
<script language="text/javascript">
<![CDATA[
alert ("wow JS avec XHTML");
]]> </script>
C.f. http://tecfa.unige.ch/guides/js/ex-intro/test1.xhtml (c'est bien du XHTML servi comme XML, pas du pseudo XHTML ...)
fonctions dans javascript -- Sugarch0 28 avril 2010 à 18:27 (CEST)
Comme souvent la théorie dépasse la pratique, les idées et la compréhension sont là mais l'application est plus difficile!
Pour l'exercice 14, j'essaie la chose suivante:
j'ai un formulaire html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<LINK REL="STYLESHEET" HREF="styleASC.css" TYPE="text/css">
<script type="text/javascript" language="javascript" src="exercice14.js"></script>
<!-- Created by: Daniel Schneider, 13-May-1994 -->
<!-- Changed by: Aviva Sugar Chmiel, 28-Apr-2010 -->
</head>
<body>
<h1>Charactéristiques de l'apprentissage par problème</h1>
<script type="text/javascript">
alert
("commencer le quiz")
</script>
<p>
Quelles sont les principales charactéristiques de l'apprentissage par problème?</br>
Veuillez cliquer vrai ou faux dans la liste ci-dessous:
</p>
<form>
<ul>
<li>
L'apprentissage par problème demande une participation active des apprenants.
<input id="particip1" type="radio" name="particip" value="1"/>vrai
<input id="particip0" type="radio" name="particip" value="0"/>faux
</li>
<li id=""social">
Les compétences sociales et de communication sont développées dans cette approche.
<input type="radio" name="social" value="1"/>vrai
<input type="radio" name="social" value="0"/>faux
</li>
<li id="maths">
Le domaine privilégié sont les mathématiques.
<input type="radio" name="maths" value="1"/>vrai
<input type="radio" name="maths" value="0"/>faux
</li>
<li id="theorie">
Cette approche est très théorique.
<input type="radio" name="theorie" value="1"/>vrai
<input type="radio" name="theorie" value="0"/>faux
</li>
< li id="modele">
Il existe plusieurs modèles d'apprentissage par problème.
<input type="radio" name="modele" value="1"/>vrai
<input type="radio" name="modele" value="0"/>faux
</li>
</ul>
</form>
</body>
</html>
Je souhaite créer une variable si possible par réponse, et faire une fonction qui regarde si la variable a la valeur vrai ou faux (j'ai mis boolean mais on pourrait mettre le string "vrai" ou "faux"). Ensuite, la fonction doit créer un pop-up donnant un feed-back pour chaque cas (vrai:"oui vous avez raison, cette approche s'appuie sur une approche constructiviste"), faux ("votre réponse est fausse")
J'ai fait un fichier .js séparé:
// Made by Daniel K. Schneider, TECFA, March 2008. Modified by Aviva Chmiel, April 2010.
// Needs file exercice14.html
function feedback() {
var p=document.getElementById("particip1");
for (var p="1")
alert ("oui vous avez raison, cette approche s'appuie sur une approche constructiviste")
}
Mais je n'arrive pas à faire marcher cette fonction.
Re: fonctions dans javascript -- Daniel K. Schneider 28 avril 2010 à 23:34 (CEST)
En fait, il y a pas mal à faire là. Vais vous trouver une solution propre demain sinon envoyez-moi un mail pour me rappeler. En gros, avec un minimum de variété de code "moderne" cela donne la chose suivante. Mais c'est pas très "informaticien", car des tonnes de répétions:
Dans le JS - erreurs
- for est une boucle, pas un test
- un test d'égalité se fait avec == !!
- déclarer UNE seule fois une variable
Dans le JS - ce qui manquait
- Il y a rien qui déclenche votre fonction. Donc il faut un moyen pour lancer cela, soit des boutons, soit qc. qui écoute les mouse click. Avec JavaScript je lance une fonction start quand la page se charge. Celle-ci associe des événements click sur les boutons radio à des fonctions.
Ensuite j'ai défini 2 de ces fonctions.
A faire (en principe): Avec UNE seule fonction à la place de XXX ramasser les boutons et définir la gestion de clics avec UNE autre fonction. Enfin, ma solution rapide marche, l'est juste idiote.
Dans le HTML
- vous avez des guillemets en trop, faut utiliser un vrai éditer qui colorie la syntaxe
- votre jeu de caractères est à la fois déclaré UTF-8 et ISO, faut se décider (changé en UTF-8 car c'est cela que vous tapez ...)
Le JS
window.onload = start;
function start(){
var particip = document.getElementsByName("particip");
for (var radio_item in particip) {
// alert ("P=" + particip[radio_item].nodeType);
if (particip[radio_item].nodeType == 1)
particip[radio_item].onclick = feedback_particip;
}
var social = document.getElementsByName("social");
for (var radio_item in social) {
if (social[radio_item].nodeType == 1)
social[radio_item].onclick = feedback_social;
}
}
function feedback_particip (event) {
var item = event.target.value;
if (item == "1") {
alert ("oui vous avez raison, cette approche s'appuie sur une approche constructiviste")
}
else {
alert ("raté");
}
}
function feedback_social (event) {
var item = event.target.value;
if (item == "1") {
alert (" etc etc")
}
else {
alert ("raté");
}
}
Le HTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<LINK REL="STYLESHEET" HREF="styleASC.css" TYPE="text/css">
<script type="text/javascript" language="javascript" src="exercice14.js"></script>
</head>
<body>
<h1>Charactéristiques de l'apprentissage par problème</h1>
<script type="text/javascript">
</script>
<p>
Quelles sont les principales charactéristiques de l'apprentissage par problème?</br>
Veuillez cliquer vrai ou faux dans la liste ci-dessous:
</p>
<form>
<ul>
<li>
L'apprentissage par problème demande une participation active des apprenants.
<input type="radio" name="particip" value="1"/>vrai
<input type="radio" name="particip" value="0"/>faux
</li>
<li>
Les compétences sociales et de communication sont développées dans cette approche.
<input type="radio" name="social" value="1"/>vrai
<input type="radio" name="social" value="0"/>faux
</li>
<li id="maths">
Le domaine privilégié sont les mathématiques.
<input type="radio" name="maths" value="1"/>vrai
<input type="radio" name="maths" value="0"/>faux
</li>
<li id="theorie">
Cette approche est très théorique.
<input type="radio" name="theorie" value="1"/>vrai
<input type="radio" name="theorie" value="0"/>faux
</li>
<li id="modele">
Il existe plusieurs modèles d'apprentissage par problème.
<input type="radio" name="modele" value="1"/>vrai
<input type="radio" name="modele" value="0"/>faux
</li>
</ul>
</form>
</body>
</html>
Re: fonctions dans javascript -- Daniel K. Schneider 29 avril 2010 à 16:06 (CEST)
Désolé je n'ai pas le temps pour faire un exemple d'une solution propre. Mais je vous donne en échange une solution moins propre mais facile, style ancien mais qui devrait marcher partout en échange. Désavantage: Le HTML devient inutilisable pour autre chose (genre un script PHP).
Bien entendu vous pouvez mettre le JS dans un autre fichier aussi.
Utilisez un vrai éditeur qui colorie ! Faut absolument avoir les " et les ' juste .....
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link REL="STYLESHEET" HREF="styleASC.css" TYPE="text/css">
<body>
<h1>Charactéristiques de l'apprentissage par problème</h1>
<script type="text/javascript">
function feedback (message) {
alert (message);
}
</script>
<p>
Quelles sont les principales charactéristiques de l'apprentissage par problème?</br>
Veuillez cliquer vrai ou faux dans la liste ci-dessous:
</p>
<form>
<ul>
<li>
L'apprentissage par problème demande une participation active des apprenants.
<input type="radio" name="particip" value="1"
onclick="feedback('yes super');"
/> vrai
<input type="radio" name="particip" value="0"
onclick="feedback('buhh');"
/> faux
</li>
<li>
Les compétences sociales et de communication sont développées dans cette approche.
<input type="radio" name="social" value="1"
onclick="feedback('Jamais de la vie \n Faut vivre les choses pour de vrai ...');"
/>vrai
<input type="radio" name="social" value="0"/>faux
</li>
<li id="maths">
Le domaine privilégié sont les mathématiques.
<input type="radio" name="maths" value="1"/>vrai
<input type="radio" name="maths" value="0"/>faux
</li>
<li id="theorie">
Cette approche est très théorique.
<input type="radio" name="theorie" value="1"/>vrai
<input type="radio" name="theorie" value="0"/>faux
</li>
<li id="modele">
Il existe plusieurs modèles d'apprentissage par problème.
<input type="radio" name="modele" value="1"/>vrai
<input type="radio" name="modele" value="0"/>faux
</li>
</ul>
</form>
</body>
</html>
Re: Re: fonctions dans javascript -- Sugarch0 29 avril 2010 à 18:50 (CEST)
- OK merci beaucoup je vais essayer de faire qqchose avec ces versions ou bien vieilles ou bien pas propres ;-)