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.
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.
Re: Re: Coordonée d'un input -- Mattia A. Fritz (discussion) 2 décembre 2015 à 20:20 (CET)
Bonjour Stéphanie,
je crains que votre problème relève de l'utilisation de la fonction versBas() de manière récursive. En effet, si vous passez bien l'argument nbre lors de son première appel, ce n'est ensuite pas le cas quand vous l'appelez de manière recursive avec la fonction setTimeout(versBas, 5). La fonction setTimeout accepte éventuellement des arguments après la fonction de callback et le nombre de milliseconds après laquelle il faut à nouveau l'exécuter. Je ne vous conseille cependant pas cette option, plutôt je vous propose d'évaluer les possibilités suivantes :
- Déclarer une variable globale pour le stopPoint de l'animation et lui associer les coordonnées du textbox une fois que l'utilisateur clique sur le bouton calculer. À ce moment vous devrez donc limiter votre structure de contrôle à comprare la position actuelle de l'image contre la variable globale, sans la nécessité de passer un argument;
- Révoir votre code et utiliser plutôt la fonction setInterval() au lieu de setTimeout() de manière récursive;
De plus, lors de la phase de test, je vous déconseille d'utiliser les alert() pour vos messages car ils sont très intrusives pour le codage du browser. Il serait mieux d'utiliser la fonction console.log() qui est moins invasive (mais qui, hélas, ne peut pas être utilisé en codepen).
Mattia