STIC:ECOTEC - Période 2 (Gaïa)

Cet article n'est plus d'actualité et est en cours de révision Les informations ou les images peuvent faire encore référence à des informations qui nécessitent une mise à jour.

Introduction à Javascript

Cette partie du cours concerne le développement de page/application web interactives avec JavaScript.

Objectifs

À l'issue de cette période vous devez avoir acquis les connaissances/compétences suivantes :

Principe de pages dynamiques dans une architecture client-serveur
Bases de la programmation et ses composantes principales (variables, types de données, structure de contrôle, etc.)
Reconnaître et créer des interactions à travers la combinaison d'événements déclencheurs, de gestionnaire d'événement, de manipulation du DOM
Concevoir des petites interfaces utilisateur en technologie éducative, en respectant quelques principes ergonomiques (lisibilité, guidage notamment)

Prérequis

JavaScript côté-client

JavaScript côté-client, c'est-à-dire l'utilisation la plus répandue de JavaScript, se réfère à l'utilisation de JavaScript dans les pages web. Ce mécanisme est rendu possible grâce à la présence d'un interprète JavaScript dans le navigateur web :

Présentation "Interactivité avec JavaScript"

Extension d'une application sur la lecture

Voici deux applications concernant l'apprentissage de la lecture :

esrever
: entraînement de la voie d'assemblage (construction des mots à travers le déchiffrage des lettres)
Mot clignotant
: entraînement de la voie d'adressage (reconnaissance des mots par leur "forme")

Activité pratique par groupes

Désignez une codeuse ou un codeur par groupe de 3/4 personnes et essayez d'effectuer les tâches suivantes en discutant le code ensemble.

Préparation

Téléchargez le code des applications MALTT-STIC/stic-1-app-examples
Concentrez-vous sur l'application Mot clignotant dans le dossier 02-blink

Ouvrez le fichier assets/js/app.js :

/**
 * Code pour construire une simple application interactive qui affiche aléatoirement un mot à l'envers depuis une liste
 */

//Liste de mots
var wordList = [
  "maison",
  "chien",
  "chat",
  "avion",
  "lettre",
  "marionette",
  "chaise",
  "école",
  "mathématique",
  "livre",
  "français",
  "géographie",
  "cahier",
  "stylo"
];

//Fonction pour récupérer un mot aléatoire
function getRandomWord() {
  var randomIndex = Math.floor(Math.random() * wordList.length);
  return wordList[randomIndex];
}

//Ajouter le gestionnaire d'événement au bouton
document.querySelector("#randomWordBtn").addEventListener("click", function () {
  //Sélectionner un mot aléatoire
  var randomWord = getRandomWord();

  //Associr le mot aléatoire au placeholder
  var targetWord = document.querySelector("#targetWord");
  targetWord.textContent = randomWord;

  //Afficher le mot s'il est caché
  var wordContainer = document.querySelector(".showWord");
  wordContainer.style.display = "block";


  //Démarrer un timer qui cache le mot après 200ms
  setTimeout(function () {
    wordContainer.style.display = "none";
  }, 200)
});

Tâches

Suivez les instructions pour modifier l'application de la manière correspondante. NB certaines tâches vont écraser ce que vous avez fait à l'étape précédente. Les tâches vont dans un ordre de difficulté croissante et c'est normal si vous n'arrivez pas à toutes les faire. Testez l'application pour contrôler que tout marche correctement. Ouvrez toujours la console JavaScript pour détecter des éventuelles erreurs.

Ajoutez 3 nouveaux mots à la liste
Modifiez le code afin que le mot s'affiche pour 500ms au lieu de 200ms
Modifiez le code afin que le mot s'affiche pour une durée proportionnelle à la longueur du mot, par exemple 40ms pour chaque lettre
Hint : il vous faudra chercher une manière de connaître la longueur d'une suite de caractères. Voir par exemple Méthodes utiles pour les chaînes de caractères sur MDN.
Modifiez l'application afin que l'utilisateur puisse déterminer la durée d'affichage du mot
Ajouter le code mis en évidence dans le fichier index.html. Ceci ajoute un champ de texte après le paragraphe Cliquer sur le bouton pour afficher... afin que l'utilisateur puisse déterminer le nombre de milliseconds, fixé à 200 initialement et que vous avez changé avec 500 à l'étape précédente.
```
<p>
     Cliquer sur le bouton pour afficher un mot pour une durée limitée de
     temps.
</p>
<p>
     <input
        type="number"
        value="200"
        id="showTime"
        style="width:100px; font-size: 2rem; text-align: right;"
      />
      ms
</p>
```
Ensuite modifier le code dans app.js pour que la valeur du champ de texte soit utilisée pour déterminer la durée d'affichage du mot

Hint : voir Identifier un élément de input et sa valeur si vous êtes bloqués
Modifiez l'application afin d'éviter que le même mot ne s'affiche deux fois de suite
Hint : il existe plusieurs manières pour obtenir ce résultat

Si vous n'y arrivez pas avec le code, essayez au moins de penser à la logique qui pourrait vous permettre d'obtenir le résultat souhaité

Activité individuelle

À choix, vous pouvez suivre des exemples progressifs ou vous lancez avec des exemples/challenges/solutions comme pour les autres workshops :

A. Répliquer/terminer les 4 tâches de l'application "Mot clignotant"
B. Suivre les exemples de la page Interactivité avec JavaScript (lecture obligatoire pour travail à distance)
C. Pour les personnes très avancées, télécharger les fichiers du workshop JavaScript client side

B. Interactivité avec JavaScript

L'accès (même si limité) que JavaScript a sur le DOM de la page web permet d'intégrer des comportements interactifs aux pages web. Cela se traduit par le changement programmé de la structure du DOM à travers les instructions qui ont été téléchargées à travers le(s) fichier(s) JavaScript contenu(s) dans la page.

Entraînez une lecture selective basée sur le code :

Lisez d'abord le bout de code correspondant
Si vous le comprenez (vraiment !) passez à l'étape suivante
Si non, lisez les explications

Suivre les exemples étape par étape de la page :

Interactivité avec JavaScript

L'exemple 4.1 Bouton reprend en grand partie le concept de base déjà vu en Premiers pas avec JavaScript, mais les expliquent de manière plus approfondie. Si vous trouvez cela trop simple, commencez déjà avec 4.2 Plusieurs boutons.

Tous les exemples de cette page sont disponibles dans un repository de GitHub :

Repository MALTT-STIC/stic-1-interaction-with-js
pour télécharger les fichiers ou voir le code source complet.

C. Workshop JavaScript côté-client

Workshop sur JavaScript côté-client :

MALTT-STIC/stic-1-javascript-client-side

Design d'Interface Utilisateur (UI)

L'interactivité prévoit la nécessité de manier des éléments à l'interface utilisateur (UI), c'est-à-dire qu'il ne faut pas simplement penser en terme d'architecture de l'information (e.g. comment afficher un texte, une image, ...), mais également en termes de flux d'interaction (e.g. que se passe-t-il quand je fais X ?).

Le design d'interface est un sujet qui sera abordé plus spécifiquement dans le domaine ERGO, mais il peut être utile d'avoir déjà quelques repères pour vos exercices.

Principes de design visuel

Il existe des philosophies ou des principes de design qui essayent de maximiser l'utilisabilité des interfaces. Dans le contexte introductif de ce coursm vous pouvez vous référer par exemple aux principes du design visuel, plus particulièrement à l'acronyme CRAP :

Contraste : distinction des éléments du background/foreground grâce à l'utilisation du contraste clair/foncé
Répétition : le système visuel humain apprécie les régularités, les patterns qui se répètent pour créer une uniformité
Alignement : la recherche d'information est facilité si les éléments sont placés en fonction de guides du regard (e.g. c'est plus facile de lire un long texte aligné à gauche que centré)
Proximité : le système visuel a la tendance à traiter des éléments proche spatialement comme entraînant une relation sémantique plus étroite par rapport aux éléments éloignés

Les principes CRAP

Utiliser SVG comme UI

Il est également possible d'utiliser un ou plusieurs éléments SVG pour créer une interface utilisateur plus complexe ou graphique par rapport aux boites de HTML5.

SVG avec JavaScript

Synthèse des principes de base de l'interactivité avec JavaScript

Faire le trait d'union entre l'Introduction à la programmation et Interactivité avec JavaScript
Interactivité = inputs générés par les utilisateurs
Fonctionnement de JavaScript côté-client : l'utilisateur télécharge les instructions avec le contenu de la page
- JavaScript a accès à la page grâce à l'objet global window et au DOM grâce à l'objet window.document
- Tout élément d'une page peut être rendu interactif avec la même démarche :
  1. Identifier l'élément parmi tous les éléments
  2. Lui appliquer un gestionnaire d'événements
  3. Appliquer à l'intérieur du gestionnaire une règle qui génère une modification
  Structure d'une interaction, adaptation de What is a microinteraction de Saffer (2014)
Possibilité d'animer le DOM (Animation avec JavaScript)
Accès à travers le navigateur à d'autres API (e.g. Canvas (HTML5), Géolocalisation, Webcam, ...)
- Lien avec exercice 4 : HTML5 audio et video
Importance du guidage pour suggérer les interactions attendues par l'application et orienter l'attention au(x) bon(s) endroit(s)
- « Tout le monde sait ce qu’est l’attention. C’est la prise de possession par l’esprit, sous forme claire et vive, de l’un parmi ce qui semble plusieurs objets ou trains de pensée simultanément possibles. La focalisation, la concentration de la conscience, participent de son essence. Elle implique un retrait de certaines choses afin de traiter efficacement les autres (…) » (William James, Principes de psychologie, 1890, p.404).

À retenir :

L'interactivité avec JavaScript consiste dans le changement programmé du DOM à travers les instructions contenues dans un ou plusieurs scripts. Ces changements se reflètent dans la mise à jour de l'interface utilisateur affichée par le navigateur.

Projet 3 / Tâche

Voici la description détaillée de la tâche et les ressources à votre disposition pour compléter l'exercice pendant la période à distance.

Lectures et ressources

Ces articles proposent les contenus utiles aux finalités pédagogiques du cours. Pour compléter l'exercice ou atteindre les objectifs spécifiques à votre dispositif (voir plus bas), d'autres ressources peuvent être nécessaires.

Interactivité avec JavaScript
: aspects théoriques et pratiques, lecture commune avec exercice 4, niveau des exemples à calibrer en fonction de vos besoins et intérêts. Cette page est associé à la référence Tutoriel JavaScript côté client dont la consultation peut être également utile.
Computation avec JavaScript
: principes généraux de programmation, illustrés avec JavaScript, à partir de la section 3. Cette page est associée à la référence Tutoriel JavaScript de base dont la consultation peut être également utile.

Tutoriels vidéos d'accompagnement à cet exercice (accès UNIGE nécessaire) :

Tutoriel vidéo "Rendre un élément HTML5 interactif avec JavaScript" ➔ Tutoriel vidéo "Rendre un élément HTML5 interactif avec JavaScript"

Tutoriel vidéo "Créer une application interactive sur les noms des couleurs" ➔ Tutoriel vidéo "Créer une application interactive sur les noms des couleurs"

Dispositif

Imaginez un design pédagogique interactif dans lequel l'utilisateur puisse déterminer des modifications par rapport au contenu initial.

Créez une page HTML5/CSS qui contient des éléments interactifs (e.g. click, mouseover, etc.)
Ajoutez une ou plusieurs manipulations du DOM suite à un événement (e.g. afficher un feedback, remplacer une image, etc.)
Le tout doit servir à un objectif déclaré dans votre rapport (pas juste votre propre objectif d'apprentissage !)

Vous pouvez adapter/revisiter tous les exemples disponibles dans le matériel de support, voir également :

SVG avec JavaScript

si vous voulez rendre un dessin SVG interactif en continuité avec l'exercice 2. Mais ne répétez pas simplement le principe de la Flash card !

Contraintes

Contenu de la page selon vos envies, mais en rapport avec une thématique d'apprentissage
Vous devez inclure un fichier JavaScript externe
Vous devez créer au moins une action interactive déclenchée par l'utilisateur qui modifie le contenu de la page en modifiant le DOM
- C'est-à-dire gestionnaire d'événement + règle de comportement + feedback à l'interface
- Pas de drag&drop (on le verra en P3)
Votre code doit contenir au moins l'une de ces caractéristiques (à choix) :
- Une structure de contrôle de type if... else...
- La génération d'un élément aléatoire
- L'utilisation d'une boucle for..., while, ou forEach
Vous pouvez utiliser du clipart (SVG ou autre) fait par d'autres, mais citez la source dans le rapport et dans la page de votre dispositif
Vous pouvez vous appuyer sur des exemples vus en cours ou disponibles dans le matériel pédagogique, mais il faudra au moins adapter le code JavaScript (pas simplement changer/adapter le contenu HTML)
Vous ne pouvez pas combiner sur la même page les exercices 3 et 4
- Mais vous pouvez utiliser le même sujet (e.g. mini-site avec deux pages)

Conseils

Voici quelques conseils pour cet exercice :

Ne vous lancez pas tout de suite dans votre projet d'application. Essayez d'abord des exemples, donnez-vous un petit objectif atteignable (e.g. faire marcher un bouton) et gagnez confiance dans la compréhension du code.
Commentez votre code, pas seulement/forcément en fonction de ce que le code fait, mais surtout pour la raison (quelle est l'intention du code ?)
Utilisez console.log("...") pour décomposer votre code et identifier la source d'un éventuel problème. Par exemple, prenons le cas d'une page avec un bouton qui déclenche une fonction quelconque. Vous cliquez sur le bouton et ça ne marche pas. Votre problème peut-être :
1. Le gestionnaire d'événement associé au bouton ne marche pas
2. La fonction déclenchée ne marche pas

var myBtn = document.getElementById("clickMe");
//Gestionnaire d'événement
myBtn.addEventListener(function () {
  //Mettez ici un console.log pour être sûr que votre événement est déclenché
  console.log("Le bouton clickMe marche!");
  //Puis votre fonction quelconque
  doSomething();
});

//Définissez votre fonction
function doSomething() {
  //Mettez ici un console.log pour être sûr que la fonction est invoquée
  console.log("doSomething a été invoquée!");
  //suite de votre code...
}

Avec ce type de décomposition vous pouvez savoir si le problème est dans le gestionnaire d'événement ou dans la fonction.

Pour les plus ambitieux

En général, si vous maîtrisiez bien JavaScript, concentrez-vous sur les aspects interactifs/ergonomiques/pédagogiques de l'application : il ne suffit pas de savoir coder pour créer un bon dispositif !

Critères d'évaluation

Malus

Mauvais liens (fichier JavaScript, CSS)
Copier/coller d'un snippet de code présenté au cours ou tiré d'internet sans aucune modification
Agencement de la page approximatif
Interactions pas claires/pas bien indiquées

Bonus

Code bien organisé et "élégant"
Documentation du code (raisonnable : pas plus de commentaires que de code...)
Utilisation de techniques de programmation (cycles, structure de contrôle, etc.)
Indications pertinentes sur les interactions disponibles (e.g. guidage, texte descriptif, ...)
Design graphique soigné (e.g. bonne utilisation CSS)
Pour une très bonne note : l'application peut être "réutilisable" (e.g. génération aléatoire, bouton "start again", etc.)
- Essayez d'aller au-delà de "poser une seule question et donner un feedback juste/faux"
- Dans l'idéal, cherchez d'exploiter la capacité de l'ordinateur à faire des choses automatiquement

Rapport

Faites un rapport selon les guidelines habituelles :

voir STIC:Rapport STIC I et II

En particulier pour cet exercice, essayez d'expliquer :

En quoi les interactions que vous avez créées soutiennent les objectifs de votre dispositif ?
Illustrez brièvement les interactions prévues/attendues et expliquez leur sens

Contribution Wiki

Contribution libre comme d'habitude :

STIC:Contribution Wiki

Si vous créez un dispositif qui aborde un sujet traité dans une page EduTechWiki, vous pouvez ajouter le lien à la fin de la page, par exemple dans une section Ressources.

Délai

Lundi 24 novembre 2025, midi

Ressources

Théoriques

Techniques

Exemples

Collection de simples exemples sur Codepen.io

Références de base

Tutoriel JavaScript de base
Tutoriel JavaScript côté client
SVG avec JavaScript
Review de ressources pour débuter JavaScript
JavaScript sur Mozilla Developer Network (ressources pour plusieurs niveaux)
Tutoriel JavaScript sur W3schools
JavaScript and HTML DOM reference on W3Schools
Cours gratuit OpenClassroom pour débuter avec javascript. Les premiers chapitres posent les bases, les suivants traitent d'éléments non nécessaires pour le cours STIC 1.
Il existe des dizaines de tutos sur le web et des livres mais attention : contrôlez qu'il s'agit de ressources récentes, si non il y a le risque de suivre des pratiques obsolètes.

Références plus avancées

Animation avec JavaScript
Canvas (HTML5) - API pour déssiner
Géolocalisation sur MDN ou W3Schools
Speech Recognition (very experimental)
Vidéo sur le fonctionnement des événements en JavaScript par Philip Roberts (en anglais, environ 25min.)

Bibliographie

Livres pour débutants/intermédiares avec aussi de la théorie (free on the web/pay printable version)

Haverbeke, M. (2018). Eloquent JavaScript. A modern Introduction to Programming. Third Edition. San Francisco, CA: No Starch Press. Accès libre depuis internet: http://eloquentjavascript.net/
Simpson, K. (2015). You Don’t Know JS: Up & Going. O’Reilly Media. Accès libre à la version non editée de toute la série de livres https://github.com/getify/You-Dont-Know-JS

Livre sur les microinteractions (pas de code)

Saffer, D. (2014). Microinteractions. Designing with details. Sebastopol, CA: O’Reilly Media.

Livres sur informatique/codage (pas de code)

Denning, P. J., & Martell, C. H. (2015). Great Principles of Computing. Cambridge, MA: MIT press.
Petzold, C. (2000). Code. The Hidden Language of Computer Hardware and Software. Redmond, WA: Microsoft Press.

Aide

Discussion de cette page

Utilisez la page discussion de cette page pour poser des questions. Pour insérer un nouveau titre, utilisez simplement le "+".

Important: Si vous cliquez sur l'étoile ("Ajouter cette page à votre liste de suivi"), le wiki vous enverra un mail après chaque modification de la page.

Est ce que l'utilisation de png/jpg est proscrite pour ce dispositif ?

ANCIEN EXERCICE 5

Cette page fait partie des cours STIC I et STIC II

Introduction

Cet exercice continue la découverte de l'interactivité avec JavaScript avec l'introduction du glisser-déposer (drag&drop en anglais). Pour ce faire, les bibliothèques JQuery et JQuery UI seront abordées.

Connaissances/compétences envisagées

À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes :

Comprendre le fonctionnement de JQuery par rapport au "vanilla" JavaScript
Savoir consulter et utiliser une API différente/supplémentaire par rapport au langage de base
Comprendre les enjeux techniques et quelques aspects théoriques du drag&drop
- Savoir identifier et rendre un élément "draggable"
- Savoir identifier et rendre une zone "droppable"
- Savoir relier le drag&drop à la logique d'une application
Réfléchir aux avantages/désavantages en termes pédagogiques d'une interaction drag&drop par rapport à d'autres interactions possibles

Activité en salle de classe

Introduction au drag&drop

Présentation

Présentation de l'application Number Sorting Games avec 3 modalités interactives différentes :

Présentation général sur la technique du glisser-déposer (ne marche pas bien surtout avec Firefox) :

Slides interactives sur le glisser-déposer

Synthèse des points principaux

Évolution des Graphical User Interfaces (GUI) dans le temps
- Logiciels desktop vs. Web : les interfaces graphiques des logiciels ont évolué à partir des années 1960 environ et elles ont fait rapidement des progrès sur le plan des actions (plus lent au niveau esthétique). En revanche, les pages web qui sont apparues au début des années 1990 n'avaient que du texte et des liens hypertextuels, car le web était à ses débuts avant tout un moyen de naviguer dans du contenu distribué. Avec les années et surtout l'idée du web 2.0 dans les années 2000, les pages web aussi ont commencé à avoir des interfaces graphiques complexes, au point qu'il n'y a pratiquement plus de différence entre interfaces graphiques logiciels et pages/applications web.
- Activité drag&drop vraiment intuitive ? En dépit du fait que la glisser-déposer soit très répandu dans plusieurs types de logiciels ou applications web, son utilisabilité a fait l'objet de nombreuses recherches. En effet, l'action en elle-même n'est parfois pas très évidente ou cohérente. Par exemple, dans un gestionnaire de fichier, le fait de glisser-déposer un fichier depuis un dossier à un autre peut entraîner l'action de bouger le fichier ou de le copier selon certains conditions du dossier de départ ou de destination. L'action en elle-même ne permet pas de distinguer donc si on copie ou on bouge le fichier. Autre exemple : pendant un certain temps, quand on utilisait encore souvent des CD/DVD, sur les dispositifs Apple on pouvait glisser-déposer le CD sur la corbeille pour l’éjecter, mais pour certains utilisateurs cette action était en peu effrayante car ils pensaient détruire les fichiers du support !

Recommandations ergonomiques
- Bien signaler la possibilité du glisser-déposer (concept d'affordance)
- Indiquer clairement le résultat attendu ou des éventuelles erreurs (ne pas laisser un élément à la mauvaise place sans rien indiquer en retour)
- Nécessite de la motricité fine (à ne pas sous-estimer en fonction du public cible)
- Bien penser le sens associé au glisser-déposer (ce n'est pas toujours intuitif)

Trois applications pédagogiques possibles (non mutuellement exclusives) :
1. Relation item-conteneur (e.g. classer les éléments par catégorie)
2. Degré d'approximation spatiale (e.g. placer un élément le plus proche possible à sa position correcte)
3. Correspondance visuo-spatiale (e.g. placer des éléments sur une carte géographique)

Exemples

Dans le cadre d'une relation item-groupe/catégorie, il est intéressant d'exploiter le drag&drop dans ce qu'on appelle la catégorisation multiple, qui est une facette de la flexibilité cognitive (Deák & Wiseheart, 2015; Scheibling-Sève, 2021). Voici des exemples tirés du projet pilote d'introduction du numérique au primaire. Les applications sont censées être utilisées sur tablette et en salle de classe, avec les instructions fournies par l'enseignant-e :

Catégorisation multiple d'objets
(voir le code on GitHub)
Tri multiple de formes
(voir le code on GitHub)

JQuery

Présentation JQuery & jQueryUI

Page de référence
JQuery
Petits exemples:
- Compteur --> voir la différence avec exemple en "vanilla JavaScript"
- Utilisation avec une liste de noeuds
- Enchaînement des manipulations
- Avancé : Utilisation avec l'API de EduTechWiki

JQuery UI

Page de référence
JQuery UI
- En particulier La section sur le drag&drop

Exemples (code + liens)

Le code des exemples est disponibles :

Repository MALTT-STIC/stic-1-jquery-ui
pour le download
Liste des exemples
pour tester

À voir particulièrement :

Drag simple (ex03): comment appliquer facilement le comportement draggable à un élément
Drag avec options (ex04) : fournir des options au comportement draggable, par exemple pour limite l'axe de mouvement ou modifier le type de curseur pour signaler l'affordance
Drop basic (ex05) : comment appliquer le comportement droppable à un élément, et accepter seulement certains élément draggable

Exemples de référence technique

Application sur nations/continents. Voir exemple 06 pour le code :

jQuery UI - application drag and drop sans code supplémentaire

Il s'agit d'un exemple de référence technique ! D'un point de vue pédagogique, ce type d'application n'exploite pas vraiment le drag&drop et même la catégorisation pourrait être plus intéressante (e.g. fluide, multiple, etc.)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>
      jQuery Ui Exemple : application drag and drop sans code supplémentaire
    </title>
    <!-- Le fichier CSS -->
    <link
      rel="stylesheet"
      href="../assets/vendor/jquery-ui/jquery-ui.min.css"
    />
    <style>
      .item {
        float: left;
        width: 150px;
        border: 1px solid #999;
        background-color: #f9f6d0;
        padding: 10px 15px;
        font-weight: bold;
        font-size: 16px;
        margin-right: 20px;
        margin-bottom: 50px;
      }

      .clear {
        clear: both;
        overflow: hidden;
      }

      .container {
        float: left;
        width: 200px;
        height: 250px;
        border: 1px solid #999;
        background-color: #def8fc;
        padding: 10px 15px;
        margin-right: 20px;
      }
    </style>
  </head>

  <body>
    <h1>jQuery UI - application drag and drop sans code supplémentaire</h1>
    <p>
      Ce petit jeu concernant la géographie est développé exclusivement à l'aide
      des méthodes, options et événements disponibles &quot;out of the box&quot;
      avec jQuery UI, c'est-à-dire qu'il n'a pas fallu écrire du code JavaScript
      spécifique.
    </p>
    <p><strong>Trainer les pays dans le continent correspondant.</strong></p>
    <div class="item amerique">Bolivie</div>
    <div class="item afrique">Côte d'Ivoire</div>
    <div class="item europe">Grèce</div>
    <div class="item asie">Thailande</div>
    <div class="item amerique">Canada</div>
    <div class="item asie">Inde</div>
    <div class="item oceanie">Nouvelle Zelande</div>
    <div class="item afrique">Tanzanie</div>
    <div class="item europe">Moldavie</div>
    <div class="item oceanie">Australie</div>
    <div class="clear"></div>
    <div class="container afrique-container"><h2>Afrique</h2></div>
    <div class="container amerique-container"><h2>Amérique</h2></div>
    <div class="container asie-container"><h2>Asie</h2></div>
    <div class="container europe-container"><h2>Europe</h2></div>
    <div class="container oceanie-container"><h2>Oceanie</h2></div>
    <div class="clear"></div>
    <p>Voici le code pour cet exemple :</p>
    <pre>
&lt;script&gt;
$(&quot;.item&quot;).draggable({
   revert: &quot;invalid&quot;,
   cursor: &quot;move&quot;
});</pre
    >
    <pre>
$(&quot;.afrique-container&quot;).droppable({
   accept: &quot;.afrique&quot;
});
$(&quot;.amerique-container&quot;).droppable({
   accept: &quot;.amerique&quot;
});
$(&quot;.asie-container&quot;).droppable({
   accept: &quot;.asie&quot;
});
$(&quot;.europe-container&quot;).droppable({
   accept: &quot;.europe&quot;
});
$(&quot;.oceanie-container&quot;).droppable({
   accept: &quot;.oceanie&quot;
});
&lt;/script&gt;</pre
    >
    <hr />
    <p><a href="https://tecfa.unige.ch/perso/mafritz/">MAF</a> (29.11.2018)</p>
    <!-- Les fichiers JavaScript dans l'ordre suivant -->
    <script src="../assets/vendor/jquery-ui/external/jquery/jquery.js"></script>
    <script src="../assets/vendor/jquery-ui/jquery-ui.min.js"></script>
    <script>
      $(".item").draggable({
        revert: "invalid",
        cursor: "move"
      });

      $(".afrique-container").droppable({
        accept: ".afrique"
      });
      $(".amerique-container").droppable({
        accept: ".amerique"
      });
      $(".asie-container").droppable({
        accept: ".asie"
      });
      $(".europe-container").droppable({
        accept: ".europe"
      });
      $(".oceanie-container").droppable({
        accept: ".oceanie"
      });
    </script>
  </body>
</html>

Petit exercice

Adaptez l'exemple de référence du point précédent de la manière suivante :

Ajoutez deux nations pour qu'elles puissent être placées dans les conteneurs correspondants (seulement HTML)
Complexifiez l'exercice avec un conteneur supplémentaire :
1. Insérez deux items draggable avec des noms de villes ou régions ou autre (tout sauf le nom d'un pays)
2. Insérez un conteneur droppable labellisé "Pas un pays"
3. Adaptez le code HTML et JavaScript pour ajouter le mécanisme de contrôle comme pour les autres conteneurs/continents

Faites attention à modifier le code dans le script, pas le texte affiché à l'intérieur de la balise <pre>...</pre> que vous pouvez d'ailleurs effacer si cela vous gêne.

Projet 5 / Tâche

Lectures et matériel de support

Ces articles proposent les contenus utiles aux finalités pédagogiques du cours. Pour compléter l'exercice ou atteindre les objectifs spécifiques à votre dispositif, d'autres ressources peuvent être nécessaires.

Bibliothèques JavaScript
: aspects théoriques et pratiques, lecture commune avec exercice 6, niveau des bibliothèques à calibrer en fonction de vos besoins et intérêts
jQuery
: aspects pratiques, lecture conseillée pour se familiariser avec la syntaxe
jQuery UI
: aspects pratiques, niveau des exemples à calibrer en fonction de vos besoins et intérêts

Tutoriel vidéo d'accompagnement à cet exercice (accès UNIGE nécessaire) :

Tutoriel vidéo "Glisser-déposer avec catégorisation multiple" ➔ Tutoriel vidéo "Glisser-déposer avec catégorisation multiple"

Dispositif

Faites une application JavaScript/JQuery qui implémente une application pédagogique "drag and drop" que vous avez conçue vous-même.

Créez une page HTML5/CSS qui contient plusieurs éléments "draggable"
Ajoutez à la page une ou plusieurs zones "droppable"
L'action du drag&drop doit servir à un objectif d'apprentissage déclaré dans votre rapport, pour les utilisateur-ices du dispositif.

Contraintes

Vous pouvez reprendre le code des exemples proposés dans le matériel pédagogique à condition de le modifier de manière substantielle (e.g. ne pas se limiter à changer les labels des items et des conteneurs). En particulier :
- Vous devez déclencher au moins une fonction depuis votre configuration de la méthode .draggable() ou .droppable(), par exemple :
- ```
$(".vos-elements-glissables").draggable({
  ...,
  drag: function(event, ui) {
    // Faire quelque chose d'utile au niveau pédagogique ou ergonomique
  }
})

$(".votre-target").droppable({
  ...,
  drop: function (event, ui) {
    // Faire quelque chose d'utile au niveau pédagogique ou ergonomique
  }
})
```
Il faut veiller à bien introduire la tâche à l'utilisateur. Cela peut se faire avec une page d'entrée qui explique le contexte et donne éventuellement une petite aide ou directement sur la page du dispositif lui-même, par exemple à travers une manipulation du DOM qui cache/affiche le texte.
Vous pouvez utiliser des éléments graphiques externes (e.g. SVG) et/ou du code JavaScript/JQuery fabriqué par d'autres, mais vous devez citer la source et vérifier les droits.
Vous ne pouvez pas combiner sur la même page les exercices 5 et 6
- Mais vous pouvez utiliser le même sujet (e.g. mini-site avec deux pages)

Conseils

Pour un exercice très bien fait et original, vous pouvez considérer les éléments suivants :

Vous pouvez rendre presque tout type d'élément "draggable" (e.g. images, audio, vidéos, ...)
- Attention : très probablement vous ne pouvez pas faire du drag&drop à l'intérieur d'un élément SVG, mais vous pouvez trainer des éléments SVG séparés. Même principe pour un SVG en tant que target "droppable", à la limite vous pouvez construire un "wrapper" HTML autour :
  <div class="draggable-element"><svg ...></div>)
Pensez à une scénarisation qui exploite les dimensions visuo-spatiales du drag&drop
Pour faciliter l'agencement des items draggable et/ou des zones droppable vous pouvez vous appuyer sur Flexbox ou Grid
- Voir également la page Flexbox sur ce Wiki (à améliorer)

Exercice alternatif

Si vous n'aimez pas la syntaxe jQuery/jQuery UI ou vous voulez essayer quelque chose de différent, vous pouvez :

Utiliser l'API JavaScript de base pour le Drag&Drop (i.e. pas de bibliothèque externe réquise). Dans ce cas, il faudra également documenter l'API et améliorer la page Drag and drop javascript créée par un étudiant des volées précédentes
Utilisez (et documenter) une autre bibliothèque JavaScript, par exemple :
- InteractJS (pas testé par l'équipe STIC)
- DraggableJS (pas testé par l'équipe STIC)
- SortableJS (pas testé par l'équipe STIC)
- Autres...

Critères d'évaluation

Malus

Mauvais liens (fichier JavaScript, CSS)
Agencement des éléments "draggable" et de la zone "droppable" approximatif (e.g. trop distant)
Action de drag&drop pas signalée, difficile à comprendre
Zones "droppables" trop petites en fonction de la taille et/ou du nombre des éléments "droppable" à placer

Bonus

Éléments "draggable" facile à reconnaître et de taille convenable
Zone(s) "draggable" facile à identifier et de taille convenable
Distance entre drag et drop réduite par un bon agencement de la page
Indications pertinentes sur les modalités d'utilisation (mais pas trop de texte!)
Code bien organisé et élégant
Design graphique soigné
Organisation du contenu

Rapport

Faites un rapport selon les consignes habituelles :

voir STIC:Rapport STIC I et II

En particulier pour cet exercice, essayez d'expliquer en quoi les interactions drag&drop que vous avez créées soutiennent vos objectifs d'apprentissage/d'utilisation.

Contribution Wiki

Contribution libre pour la période selon les guidelines habituelles :

STIC:Contribution Wiki

Délai

Lundi 12 janvier 2026 à midi

Liens

Théoriques

Techniques

Bibliographie

Norman, D. A. (2013). The Design of Everyday Things. New York, NY: Basic Books.
Gibson, J. J. (1979). The Ecological Approach to Visual Perception. Boston, MA: Houghton Mifflin Harcourt
Deák, G. O., & Wiseheart, M. (2015). Cognitive flexibility in young children : General or task-specific capacity? Journal of Experimental Child Psychology, 138, 31‑53. https://doi.org/10.1016/j.jecp.2015.04.003
MacKenzie, I. S. (2018). Fitts’ law. Handbook of human-computer interaction, 1, 349-370. Disponible depuis le site de l'auteur : https://www.yorku.ca/mack/hhci2018.pdf
Scheibling-Sève, C., Pasquinelli, E., & Sander, E. (2021). Critical Thinking and Flexibility. In E. Clément (Ed.), Cognitive Flexibility. ISTE Ltd, London, and Wiley, New York.

Aide

Utilisez la page discussion de cette page pour poser des questions. Pour insérer un nouveau titre, utilisez simplement le "+".

Important: Si vous cliquez sur l'étoile ("Ajouter cette page à votre liste de suivi"), le wiki vous enverra un mail après chaque modification de la page.

STIC:ECOTEC - Période 2 (Gaïa)

Introduction à Javascript

Objectifs

Prérequis

JavaScript côté-client

Extension d'une application sur la lecture

Activité pratique par groupes

Activité individuelle

B. Interactivité avec JavaScript

C. Workshop JavaScript côté-client

Design d'Interface Utilisateur (UI)

Principes de design visuel

Utiliser SVG comme UI

Synthèse des principes de base de l'interactivité avec JavaScript

Projet 3 / Tâche

Lectures et ressources

Dispositif

Contraintes

Conseils

Pour les plus ambitieux

Critères d'évaluation

Rapport

Contribution Wiki

Délai

Ressources

Théoriques

Techniques

Exemples

Références de base

Références plus avancées

Bibliographie

Aide

Discussion de cette page

ANCIEN EXERCICE 5

Introduction

Connaissances/compétences envisagées

Activité en salle de classe

Introduction au drag&drop

Présentation

Synthèse des points principaux

Exemples

JQuery

JQuery UI

Exemples (code + liens)

Exemples de référence technique

Petit exercice

Projet 5 / Tâche

Lectures et matériel de support

Dispositif

Contraintes

Conseils

Exercice alternatif

Critères d'évaluation

Rapport

Contribution Wiki

Délai

Liens

Théoriques

Techniques

Bibliographie

Aide

Menu de navigation

Rechercher