STIC Discussion:STIC I - exercice 3 (Xerneas)

Demande de Feedback : marc -- Marc Metziger (discussion) 3 novembre 2017 à 19:42 (CET)

Bonsoir Mattia,

Bloqué dans les bouchons, j'en ai profité pour faire l'exercice 3. Pourriez-vous me faire un retour formatif, notamment sur l'élégance du code.

http://tecfaetu.unige.ch/etu-maltt/xerneas/metzige7/

Merci,

Cordialement, Marc M.

Re: Demande de Feedback : marc -- Mattia A. Fritz (discussion) 3 novembre 2017 à 21:39 (CET)

Bonsoir Marc,

j'imagine que vous faites références aux applications 4 et 5 de cette page http://tecfaetu.unige.ch/etu-maltt/xerneas/metzige7/stic-1/ex3/ex3_test/ (SVP, mettez les liens directes comme ça on est sûr de se référer au bon fichier), car le code pour les premières 3 est du code des exemples - et par conséquent il est naturellement très élégant ! ;)

Par élégance du code nous entendons en gros deux choses :

1. Sa lisibilité (indentation, ...)
2. Le principe de pouvoir comprendre quelle est l'intentionnalité du script (cf. slides interactives).

Dans ce sens, vos noms des variables et identification des éléments interactifs ne sont pas très communicatifs. Vous pouvez comparer votre bouts de code avec un autre que je vous propose.

Le votre :

// appli 4
var A = document.getElementById("entree");
var B = document.getElementById("boutton");
var C = document.getElementById("sortie");

B.onclick = function () {

    C.innerHTML = A.value * A.value;
};

Modifié :

//Fournir à l'utilisateur le carré d'une chiffre qu'il insère
var givenNumber = document.getElementById("numberToSquareInput");
var squareIt = document.getElementById("squareItBtn");
var showResult = document.getElementById("resultOutput");

//Elever au carré une fois cliqué sur le bouton
squareIt.onclick = function () {
  showResult.innerHTML = Math.pow(givenNumber.value, 2);
}

(NB Je ne suis pas certains que ce code marche correctement, c'est juste pour vous illustrer le principe)

Pour la machine ces deux bouts de code représentent des instructions équivalentes, elle n'a pas de préférence. Par contre, si vous voulez partager ce code avec d'autres ou même modifier ce code dans 2 mois, le deuxième bout de code est plus représentatif des intentions. La seule chose qui change techniquement est l'utilisation de Math.pow(), le reste c'est juste une question de nomenclature sémantique.

Bien entendu, pour votre rendu final on s'attend à une application qui soutient un processus d'apprentissage pour l'utilisateur que vous identifiez dans les objectifs. Nous donnons volontairement des exemples simplement techniques pour éviter de vous conditionner dans la volonté de répliquer ce qu'on vous propose.

Mattia

Re: Re: Demande de Feedback : marc -- Marc Metziger (discussion) 10 novembre 2017 à 13:10 (CET)

Bonjour Mattia,

Merci de votre réponse. Oui c'était la bonne page. En réponse :

- Je mettrai directement le lien par la suite. - Il s'agissait bien des application 4 et 5, je l'écrirai plus clairement. - L'objectif pédagogique de l'appli 5 est de faire travailler les apprenants sur la mise à la puissance 2 : l'apprenant entre un nombre, calcul de son côté le carré, rentre son résultat, JS dit si c'est le bon résultat ou non. cela est-il suffisant ? - ok pour l'élégance.

Merci.

A bientôt,

cdlt, Marc M.

Re: Re: Re: Demande de Feedback : marc -- Mattia A. Fritz (discussion) 10 novembre 2017 à 13:50 (CET)

Bonjour Marc,

il faut se mettre d’accord sur ce que l’on entend par “c’est suffisant”. Si vous l’interprétez comme la quantité minimale de travail pour obtenir 4, alors vous pouvez utiliser la grille d’évaluation du cours en combinaison avec les contraintes explicitées dans l’énoncé de l’exercice et évaluer si votre dispositif répond aux attentes. Je ne dis pas cela de manière critique : c’est tout à fait une stratégie envisageable.

Si vous le traduisez de manière plus ciblée, c’est-à-dire, en reprenant vos mots : est-ce que ce type d’application est suffisante pour faire travailler les apprenants sur la mise à la puissance 2 ? La réponse est donnée par l’ensemble de votre exercice, par exemple :

• La précision des objectifs définit dans votre rapport : qui sont les apprenants (est-ce envisageable de faire une application qui marche pour tout âge, tout public, etc.) ? Vont-ils l’utiliser tous seuls ou avec le soutien d’un formateur ? Etc.
• Le design : quel est l’avantage pédagogique d’utiliser une application interactive, comparé à – mettons – la table des puissances à apprendre par cœur ?
• L’ergonomie : est-ce que votre application guide suffisamment les apprenants pour qu’ils comprennent les inputs nécessaires et puissent bénéficier de l’output ?

Mattia

Re: Re: Re: Re: Demande de Feedback : marc -- Marc Metziger (discussion) 15 novembre 2017 à 18:55 (CET)

Bonjour,

Merci de votre retour et de ces précisions. Pour vous répondre, pour des raisons de temps, mon objectif est d'aller au delà du 4 sans viser la perfection.

En tout cas merci de ces retours utiles.

cdlt, Marc M.

Demande de feedback -- Nicolas Hürzeler (discussion) 19 novembre 2017 à 21:08 (CET)

Bonjour,

Je souhaiterais un retour formatif sur le module de l'exercice.

Voici le lien du rapport : http://tecfaetu.unige.ch/etu-maltt/xerneas/hurzele7/stic-1/ex3/

Merci de votre attention.

Cordialement,

Nicolas H.

Re: Demande de feedback -- Mattia A. Fritz (discussion) 20 novembre 2017 à 14:15 (CET)

Bonjour Nicolas,

votre travail est déjà bien abouti est répond amplement aux contraintes de l'exercice. Au niveau de la logique computationnelle, votre application va même bien au-delà de ce qui est demandé. Vous maîtrisez déjà très bien cette partie, donc au niveau du code je n'ai pas grand chose à ajouter. À la limite faites attention à l'utilisation de this - e.g. ligne 27 -> this.createPanelButton() - que en JavaScript n'est pas toujours très intuitive surtout si on a de l'expérience dans d'autres langages. Dans ce cas, this fait référence à l'objet global window, donc vous pouvez très bien vous en passer.

Si vous voulez améliorer votre exercice (mais on parle déjà d'un très bon exercice), mon conseil est de se concentrer plutôt sur les aspects expérience utilisateur pour le dispositif et sur le rapport d'un point de vue pédagogique.

Pour l'expérience utilisateur :

• L'une des actions les plus importantes dans votre dispositif est le choix du diviseur. Vous renforcez ce choix en changeant le titre "Chemin divisible par X". À la limite, vous pouvez penser de mettre en évidence le diviseur choisi directement au niveau des boutons (avec le diviseur qui sé démarque graphiquement par rapport aux autres boutons). Les diviseurs pourraient être plus grands aussi, car c'est en effet un des éléments centraux.
• Vous faîtes un bon guidage pour l'utilisateur, mais vous divisez le feedback à l'utilisateur entre des alertes et des modifications du DOM (i.e. texte qui s'affiche sous le grid des chiffres). À mon avis, vous pourriez combiner les deux feedback au niveau de la modification du DOM, en utilisant par exemple des couleurs pour mettre en évidence ce qui est juste de ce qui est faux.

Au niveau du rapport :

• Vous avez mis en place un très bon dispositif qui mobilise différents compétences, mais tout ce travaille ne se retrouve pas vraiment dans votre rapport.
• Par exemple, vous commencez votre partie sur les objectifs avec la phrase "Le but de l'exercice est de mettre en place un labyrinthe avec des cases contenant des nombres." Cela n'explique pas vraiment les objectifs de votre dispositif ; l'objectif pédagogique de votre dispositif est plutôt l'apprentissage de la division, notamment avec les différentes règles pour identifier les diviseurs. Le labyrinthe est le moyen à travers lequel vous atteignez cet objectif.
• Pensez bien à séparer la section Objectif et la section Design. La section Design ne concerne pas juste le design graphique, mais également - et surtout - l'interaction prévue et en quoi elle est censée soutenir les objectifs d'apprentissage. Dans cette section vous pouvez décrire la logique de votre application et illustrer, par exemple, comment les différents feedback vont renforcer/accompagner l'activité pédagogique.

Au niveau du détail, enfin, évitez les majuscules dans vos noms/chemins de fichiers ;)

Bonne suite de la période,

Mattia