STIC Discussion:STIC I - exercice 3 (Volt)

Design ? -- Joyce Maurin (discussion) 3 novembre 2015 à 09:53 (CET)

Bonjour,

Dans le rapport, vous nous demandez de discuter le "design". S'agit-il du design pédagogique - le dessein, le but - ou du design graphique - l'aspect de notre design pédagogique ?

Bien à vous,

Joyce

Re: Design ? -- Daniel K. Schneider (discussion) 3 novembre 2015 à 10:31 (CET)

Bonjour,

les deux, et donc aussi montrer comment le design graphique implémente le design pédagogique :)

Re: Re: Design ? -- Joyce Maurin (discussion) 3 novembre 2015 à 11:22 (CET)

D'accord ! Merci beaucoup pour votre réponse :)

Coordonée d'un input -- Stephanie Perrier (discussion) 1 décembre 2015 à 22:47 (CET)

Bonjour,

J'ai une question concernant une méthode ou une fonction Javascript. Dans mon code, j'ai une image que j'aimerais animer. Lorsque l'utilisateur entre une suite de nombre à calculer et clique sur le bouton "calcul", l'image (portrait de Fibonacci) se déplace du haut vers le bas de la page où se trouve la suite de nombre affichée.

J'ai créé une fonction (versBas) qui déplace cette image jusqu'a un point fixe écrit en dure dans le code. Je souhaiterais que cette image s'arrète en fonction de la coordonnée y du textebox "Chiffre de départ" et non d'un chiffre fixe. J'ai cherché sur Internet comment récupérer cette coordonnée mais je n'ai rien trouvé de satisfaisant.

Dans les tutoriels du Wiki, il y a quelque chose(créé par Mattia) mais en fonction d'un rond vert SVG. Mon image n'est pas en svg.

Pouvez-vous m'aider pour créer quelque chose d'élégant ?

Mes fichiers se trouvent ici :

http://tecfaetu.unige.ch/etu-maltt/volt/perrisd0/stic-1/ex3/fibonacci.html

Merci de votre aide, Stéphanie

Re: Coordonée d'un input -- Mattia A. Fritz (discussion) 2 décembre 2015 à 00:03 (CET)

Bonsoir Stéphanie,

si j'ai bien compris ce que vous voulez obtenir comme résultat, je vous suggère de considérer la méthode getBoundingClientRect() associé à un élément du DOM. Cette fonction returne les coordonnées top, left, right, et bottom de l'élément par rapport à la fenêtre du navigateur (donc ses coordonées absolues en termes de CSS). J'ai créé un codepen que j'espère pourra vous être utile.

• http://codepen.io/mafritz/pen/MKgyNK

Si ce n'est pas le cas, n'hésitez pas à relancer.

Mattia

Re: Coordonée d'un input -- Stephanie Perrier (discussion) 2 décembre 2015 à 19:32 (CET)

Bonsoir Mattia,

Merci pour votre réponse. C'est effectivement ce dont j'ai besoin. Je l'ai utilisé dans mon code mais cela ne fonctionne toujours pas. Ci-dessous les méthodes que j'ai crée. Dans ma fonction "versBas", il y a un paramètre qui est la coordonée top du textebox où l'image doit s'arrêter. Ce que je ne comprends pas, c'est que dans la fonction "versBas", au bout d'un moment, la valeur du paramètre "nbre" devient undefined et donc la condition n'est jamais vérifée. Pouvez-vous m'aider et me dire ce que je fais de faux ? Merci beaucoup.

btn2.onclick = function() {
				var textbox = document.getElementById("myText");
				var x=textbox.value;
				var coord = textbox.getBoundingClientRect(); // Récupération des coordonnées.
				var y = document.getElementById("myText2").value;
			alert("Top: " +coord.top);
				var texte = document.getElementById('p1');

				if (texte.textContent != "")
				{
					texte.innerHTML="";
				}
					// appel de la fonction récursive fibo dans la boucle for
					for( i = x; i <= y ; i++)
					{
						texte.innerHTML+= fibo(i) + " ";
					}
					//appel de la fonction permettant de déplacer le portrait de Fibonnaci
					versBas(coord.top);
			}

			/ Script permettant d'animer le portrait de fibonnaci et qui le fait se déplacer au moment où l'utilisateur souhaite calculer une suite de nombre.
			//création des variables
			var imgObj = null;
			var animate ;
			// Fonction d'initialisation pour le load du document
			function init(){
				imgObj = document.getElementById('visage');
				imgObj.style.position= 'absolute'; 
				imgObj.style.top = '10px'; 
			}

			//fonction de déplacement vers le bas
			function versBas(nbre){
				imgObj.style.top = parseInt(imgObj.style.top) + 10 + 'px';
				animate = setTimeout(versBas, 5); // va à droite en 20msec
				alert("Top: " + nbre +" img"+ imgObj.style.top); // le alert ci-dessous renvoie 916,875 pour la coordonée du textbox -> et 10px pour la coordonée top de l'image. Après 2 clics sur le ok de l'alert nbre  devient undefined...donc la condition ci-dessous n'est jamais vérifiée et le clearTimout n'est jamais appelé.
				//stop le parcourt du portrait.
				if(parseInt(imgObj.style.top) >= nbre)
				{
					clearTimeout(animate);
				}
			}
			window.onload =init;

Re: Re: Coordonée d'un input -- Stephanie Perrier (discussion) 2 décembre 2015 à 19:36 (CET)

J'ai uploadé la nouvelle version du fichier sur le serveur tecfa si jamais. Merci pour tout.