STIC Discussion:STIC I - exercice 2 (Drakkar)

Tutoriel vidéo flash card simplifiée

Bonsoir,

J'ai mis à disposition dans la section sur les lectures et le matériel de support de cet exercice un tutoriel vidéo qui explique les principes de la flash card dans une version simplifiée du dispositif "brain lobes". Pour accéder à la vidéo il faut l'accès UNIGE.

Bon courage pour cet exercice,

Mattia Mattia A. Fritz (discussion) 6 octobre 2023 à 23:36 (CEST)

Re: Tutoriel vidéo flash card simplifiée -- Alexandre Tsiklis (discussion) 15 octobre 2023 à 22:04 (CEST)

Bonjour Mattia,

Voici le lien vers mon exercice 2.

Dans les contraintes, je ne suis pas tout à fait sûr d'avoir compris la mention "fichiers externes" pour les images SVG. Ces dernières doivent être enregistrées dans le dossier "assets" en local, est-ce bien ça?

De plus, je souhaiterais compléter mon dispositif de telle sorte que: après avoir cliqué sur le bouton afin de vérifier la réponse, on puisse cliquer sur le bouton afin de passer à une nouvelle image (sans réponse) pour ensuite de nouveau cliquer sur le bouton afin de vérifier la réponse, et ainsi de suite pour apprendre tout le vocabulaire de l'unité. Y a-t-il un code spécial pour créer une pareille "boucle"? Une fonction "aléatoire" pour varier l'ordre de présentation des images me paraît également nécessaire (lien avec code JavaScript d'Esrever et Mot clignotant?).

J'ai pensé à créer plusieurs "clônes" de la page HTML en modifiant légèrement le code pour avoir un bouton-lien vers la page d'après en changeant simplement les images.

Toutefois, cette manière de faire ne permettra pas un ordre "aléatoire" ni même d'utiliser le compteur qui aurait à ce moment-là une grande utilité.

Auriez-vous quelques conseils et/ou ressources qui pourraient m'aider à transformer ce simple exercice en outil de travail pour mes élèves?

D'avance je vous remercie et vous souhaite un bon début de semaine!

Alexandre

Re: Re: Tutoriel vidéo flash card simplifiée -- Mattia A. Fritz (discussion) 16 octobre 2023 à 09:11 (CEST)

Bonjour Alexandre,

(1) Les images SVG doivent être incorporées en tant que fichiers externes, donc effectivement il faut les enregistrer avec le projet et puis faire un pointage aux fichiers. En d'autres termes, il faut choisir la bonne manière dans les différentes modalités d'inclure du SVG avec HTML5.

(2) Il existe plusieurs manières pour complexifier l'exercice. La plus simple, mais aussi la plus répétitive, consiste à créer effectivement d'autres pages HTML5 avec le même mécanisme, mais avec à chaque fois deux images différentes. Pour des options plus avancées, on verra déjà à partir de l'exercice 3 comment créer des boucles et des éléments aléatoires. Donc je vous conseille d'attendre pour explorer ces aspects. Dans l'attente, vous pouvez par exemple essayer d'exploiter davantage le potentiel des SVG ou des images annotées. Par exemple mettre en relief comme Fussball est le résultat de la conjonction entre le pied et la balle, ou proposer plusieurs termes dans la même image (toujours en tenant compte de la charge cognitive selon le public cible).

À bientôt, Mattia

Re: Tutoriel vidéo flash card simplifiée -- Warisara Suksamran (discussion) 24 octobre 2023 à 15:40 (CEST)

Bonjour Mattia,

Voici le lien vers mon exercice 2.

J'ai bien pris le soin de vérifier que mes images étaient exactement de la même taille. Malgré cela, l'image se déplace après avoir cliqué sur le bouton et je ne comprends pas pourquoi. Est-ce que j'aurais mal vérifié ou est-ce qu'il y aurait un problème autre part?

Merci d'avance,

Warisara

Re: Re: Tutoriel vidéo flash card simplifiée -- Mattia A. Fritz (discussion) 24 octobre 2023 à 16:15 (CEST)

Bonjour,

Il m'a fallu quelques minutes pour le réaliser, car j'étais aussi surpris du comportement car vos deux images sont effectivement de la même taille. Le problème ne vient pas de l'image, mais de la position du bouton : dans une card, le bouton est en dehors du paragraphe, tandis que dans l'autre il se trouve à l'intérieur. Lorsqu'il se trouve à l'intérieur, il apparaît à côté de l'image et donc cela déplace la pyramide vers la gauche. C'est cela qui donne l'effet décalée au dispositif.

Bien cordialement, Mattia

Re: Tutoriel vidéo flash card simplifiée -- Malika MD (discussion) 25 octobre 2023 à 20:50 (CEST)

Bonjour,

voici mon lien pour exercice 2

J'ai terminé mon flashcard, j'ai bien suivi tous les tutoriels et les instructions des pages edutechwiki, lorsque je prévisualise mon code avec visual studio code, tout est bon, tout fonctionne correctement. Puisque tout est bon, je téléverse tout dans Cyberduck et quand j'essaye de voir le résultat sur internet, ça ne fonctionne plus. Lorsque je clique sur "voir les réponses" plus rien ne s'affiche. Donc je vais vérifier le code source de la page qui m'affiche que ma deuxième image SVG a "failed to load resource...". Donc je revérifie si j'ai bien tout téléversé, tout est là, je supprime tous mes codes sur Cyberduck et je recommence, je retéléverse tout. Mais le problème persiste.

En vous remerciant d'avance pour votre réponse,

Malika