STIC Discussion:STIC I - exercice 3 (Wall-e)

De EduTech Wiki
Aller à la navigation Aller à la recherche

A propos du contenu du dispositif -- ArthurM (discussion) 10 novembre 2016 à 15:21 (CET)

Bonjour,

Pour cet exercice, je pensais réaliser un questionnaire QCM (avec Javascript, bien sûr) qui porte sur les connaissances exposées dans le dispositif SVG réalisé dans le cadre de l'exercice 2 (et éventuellement d'autres connaissances, pourquoi pas exposées directement sur la page du QCM). Cela est-il conforme aux consignes de l'exercice ? Merci d'avance pour vos éclaircissement.

Re: A propos du contenu du dispositif -- Mattia A. Fritz (discussion) 10 novembre 2016 à 15:49 (CET)

Bonjour,

le sujet est tout à fait pertinent. Par contre, le QCM faut qu'il soit "codé à la main" et non pas généré avec des générateurs de QCM qui créent du code JavaScript. De plus, il faut que votre QCM modifie le DOM (e.g. appraître un feedback, etc.).

Création d'un événement lié à la souris -- ArthurM (discussion) 18 novembre 2016 à 00:14 (CET)

Bonsoir,

Je m'acharne depuis un petit moment sur mon javascript, sans grand succès. J'essaye de créer un événement lié à la souris pour rendre interactifs les boutons de ma page HTML, sans passer par les attributs. Pour ce faire, je me suis référé à cette section du wiki. Cependant, cela ne fonctionne pas, et je ne comprends pas ce que j'ai fait de faux... J'ai téléversé mon dispositif en l'état à l'adresse suivante : http://tecfaetu.unige.ch/etu-maltt/wall-e/meratar0/stic-1/ex3/javascript_pedagogique/

Le deuxième bouton a été traité selon la méthode citée plus haut (le script figure à la toute fin du fichier javascript), mais il ne déclenche pas la fonction associée (déclarée juste au-dessus).

Pourriez-vous regarder ces fichiers et m'expliquer ce qui cloche ? Un grand merci par avance !

Arthur

Re: Création d'un événement lié à la souris -- Mattia A. Fritz (discussion) 18 novembre 2016 à 09:41 (CET)

Bonjour,

lorsque vous associez une fonction en tant que listener, il faut la passer par référence avec son nom sans les parenthèses, car si vous mettez les parenthèses vous faites exécuter la fonction au moment même de lire le code. Depuis le tutoriel que vous citez :

Le gestionnaire d'événement peut être une fonction déjà définie ou anonyme. Il faut cependant faire attention au fait qu'un gestionnaire d'événement est une référence à la fonction et non pas l'exécution de la fonction elle-même. En d'autres termes, il ne faut pas utiliser les parenthèses dans un gestionnaire d'événement : 

function faireQuelqueChose() {
    //code
}
mon-element.mon-evenement = faireQuelqueChose; //OK!
mon-element.mon-evenement = faireQuelqueChose(); //Faux, de cette manière la fonction sera exécutée de toute manière, sans attendre l'événement déclencheur

Dans votre code, vous associez le gestionnaire d'événement directement à l’exécution d'une fonction : 

var monBouton = document.getElementById("montrersolution");
monBouton.onclick = Showinganswers();

Le code correcte sera donc plutôt : 

var monBouton = document.getElementById("montrersolution");
monBouton.onclick = Showinganswers;

Re: Re: Création d'un événement lié à la souris -- Mattia A. Fritz (discussion) 18 novembre 2016 à 10:01 (CET)

Il vous faudra également déplacer votre script en bas de page comme il est conseillé dans la documentation (avant la balise /body), si non vous avez des problèmes au niveau de l’identification des éléments dans le DOM.

En alternative vous pouvez utiliser un événement "wrapper" du type window.onload, mais déplacer le script en bas de page est la solution la plus simple.

Exercice 3, comment insérer les balises d'animation? -- SirnaC (discussion) 20 novembre 2016 à 16:56 (CET)

Bonjour,

je suis en train de faire l'exercice 3. J'ai inséré des images qui s'attachent à la page html en cliquant sur des boutons. Mais j'aimerai aussi les faire tourner. J'ai essayé de le faire en utilisant la balise d'animation "rotate" dans le fichier .js, mais ça ne marche pas. En effet, si je ne me trompe pas, le fichier .js peut supporter seulement du langage js. J'ai essayé alors de mettre la balise d'animation "rotate" dans le fichier html, mais ça ne marche pas pareil.

Est-ce que vous pourriez me donner quelque conseil?

Merci d'avance pour votre réponse

Chiara

Re: Exercice 3, comment insérer les balises d'animation? -- Mattia A. Fritz (discussion) 20 novembre 2016 à 19:18 (CET)

Bonsoir,

je ne suis pas sûr de comprendre à quel type de balise "rotate" vous faîtes référence: peut-être s'agit-il du langage SMIL utilisé dans l'exercice 2? Dans ce cas, il faut faire attention à mêler les langages.

Je vous conseille plutôt de faire de rotation à travers les propriétés CSS que vous pouvez contrôler à travers JavaScript. Vous pouvez créer une classe CSS qui utilise la propriété transform: rotate(xxx) et appliquer la classe à un élément suite à un événement.

Références :

Re: Re: Exercice 3, comment insérer les balises d'animation? -- SirnaC (discussion) 20 novembre 2016 à 22:09 (CET)

Oui, merci... je me référais au langage SMIL. Et le problème était justement relatif au mélange des langages.

Je vais essayer de suivre votre conseil.

Merci,

Chiara

Faire changer la couleur d'un bouton en cliquant sur le bouton même -- SirnaC (discussion) 21 novembre 2016 à 14:33 (CET)

Bonjour,

une autre question. J'ai essayé sans succès de faire changer la couler à un bouton en cliquant au-dessus.

Le bouton s'appelle "Pilar"... j'essaye de vous copier ici ce que j'ai fait.

J'ai codé comme ça dans le fichier css:

.monBtnPilar { 

   background-color: white;
   /* Green */
   border: none;
   color: black;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   float: left;
   transition: backgroud-colour;

}

.monBtnPilar:hover { 

   background-color: green;

}

Comme ça, par contre, dans le fichier .js:

monBtnPilar.onclick = function () { 

    changeColour;
    monBtnPilar.addEventListener(onClick, changeColour)
}

Je n'arrive pas à comprendre quel est l'erreur! Merci d'avance pour votre réponse Chiara

Re: Faire changer la couleur d'un bouton en cliquant sur le bouton même -- Mattia A. Fritz (discussion) 21 novembre 2016 à 15:06 (CET)

Bonjour,

dans votre code, vous utilisez du CSS pour styliser votre bouton et vous lui appliquez une transition lors du mouseover (avec la déclaration :hover). Si vous voulez par contre faire un changement suite à un click, il faut en effet utiliser JavaScript. Votre gestionnaire d'événement est par contre incorrect. J'ai appliqué des commentaires à l'intérieur du code : 

//ça c'est une forme pour appliquer un gestionnaire d'événement à une variable monBtnPilar
//Est-ce que vous avez associé à cette variable votre bouton en l’identifiant dans le DOM?
//e.g. var monBtnPilar = document.getElementById(...) ou var monBtnPilar = document.querySelector(...)
monBtnPilar.onclick = function () {
     //Ici vous mettez juste la référence à une variable, est-ce que vous voulez plutôt appeler une fonction changeColor()? Dans ce cas, où est cette fonction? L'avez-vous déclarez?
     changeColour;
     //ça c'est une manière alternative pour appliquer un gestionnaire d'événement, cela ne sert pas car vous l'avez déjà fait avec monBtnPilar.onclick = function () ...
     //De plus la notation utilisé n'est pas correcte...
     monBtnPilar.addEventListener(onClick, changeColour)
 }
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC_Discussion:STIC_I_-_exercice_3_(Wall-e)&oldid=65070 »