Histoires en images à reconstituer

[Philippe Dpt35]

Modification en ligne.
Si ça te convient, je referai un paquet.

[Steph]

oui c'est bien.

[Philippe Dpt35]

Nouveau paquet disponible: histoires_1.1.1_all.deb
https://primtux.fr/Documentation/applis/....1_all.deb

[zoom61]

Juste une remarque pourquoi devoir appuyer sur "Commencer", vu que l'on sélectionne une histoire au dessus, il n'y a pas de niveau de difficultés ou autre... je ne vois pas la valeur ajoutée de devoir cliquer dessus.

[Philippe Dpt35]

Le lien en début de fil est obsolète. ça a été modifié.
Teste à partir de la page https://primtux.fr/applications/
Lien direct vers cette application: https://primtux.fr/applications/histoires/index.html

[Alain]

Bonjour
On peut aussi créer des histoires séquentielles en images avec H5P
cf
https://h5p.org/node/670676


Voir cette video pour voir comment cela est possible sur primtux (le fichier précedent a été fait sous primtux avec wordpress installé sous lampp avant d être envoyé sur H5P ) https://vimeo.com/377564482

parmi les avantages de H5P
la possibilité d'intégrer une consigne sonore
l'aspect multiplate-formes (ordi tablettes etc )
la faisabilité dans l'activité de création d' exercices par des eleves à partir du cours élémentaire

le suivi des réussites ( si intégration à un wordpress ...)

Remarque
l'installation du wordpress sur une primtux n'est pas une chose facile mais si l'on dispose d'une machine windows dans la classe il faut savoir que les wordpress en versions portable sur disque dur usb sont tout à fait fonctionnels et s'adaptent à quasiment toutes les machines en gardant la base de données intacte avec identifiants, articles et medias du wordpress, exercices et configuration de l'h5P.

Alain

[Philippe Dpt35]

Pour info:

l'application permet de rajouter très facilement ses propres séries d'images.

Il suffit de rajouter les liens vers les images, dans l'ordre séquentiel, dans le tableau du fichier images.js
On rajoute un bouton pour la série d'images en faisant un copier-coller d'une des lignes de boutons en début de fichier index.html en indiquant le nom que l'on veut donner à la série, et un changeant le numéro de liste dans les différents champs, et c'est fini ! L'application les prendra en compte et les proposera dans un ordre aléatoire.

Le plus long, c'est de trouver ou créer ses images !

L'application peut ainsi être réutilisée comme "moteur" pour ses propres séries d'images.

[mothsart]

Je viens de te proposer quelques correctifs via une demande de merge : https://framagit.org/philippe-dpt35/hist...ts/1/diffs

Dedans j'ai mis :

- un pointeur sur les images
- des marges équivalentes entre les images vertical et horizontales
- un peu de ménage de css
- un peu de ménage de js : en l'état, ta fonction "auSurvol" ne faisait jamais de décalage et par conséquent ne servait à rien.
J'ai pas été capable de savoir si c'est une régression ou un oubli de suppression

[mothsart]

Une évolution qui serait sans doute approprié : la possibilité via l'URL de cibler une histoire x.
Ex: https://primtux.fr/applications/histoire...tml#le-ski qui ouvrirait directement l'histoire "Le ski"

L'idée en tâche de fond est de pouvoir proposer à l'avenir des handymenu thématiques.
Par exemple toutes les activités autours de :
- la classe de neige
- noël
- la chandeleur
- le carnaval
- pâques
etc.

Du coup, avec cette fonctionnalité, ça permettrais d'avoir des points d'entrée. Qu'en penses-tu ?
Si il faut te dev le truc, je peux le faire.

[Philippe Dpt35]

- un peu de ménage de js : en l'état, ta fonction "auSurvol" ne faisait jamais de décalage et par conséquent ne servait à rien.

Si, elle crée un espace, lors du survol, qui permet d'intercaler les images entre elles. Avec ta version, il n'est pas possible de redéplacer un image pour l'intercaler entre deux autres.

[mothsart]

Ah, ben en fait ça ne fonctionne pas sous chrome et vu que je dev dessus ben, j'en ai déduis que ça faisait rien.

Je vais corriger.

Y'a "puis clique sur [commencer]" qui n'est plus d'actualité dans les consignes.

De plus, je serais d'avis de ne pas afficher cette consigne pendant l'exercice.

[Philippe Dpt35]

ça serait utile de savoir pourquoi ça ne fonctionne pas sous Chrome.
Je regarderai ça quand j'aurai un moment.

[Philippe Dpt35]

ça serait utile de savoir pourquoi ça ne fonctionne pas sous Chrome.
Je regarderai ça quand j'aurai un moment.

C'est lié à
ev.dataTransfer.getData('Text')
dans la fonction auSurvol
qui ne renvoie rien sous Chrome alors que ça fonctionne bien sous Firefox.
Et pour l'instant je n'arrive pas à savoir pourquoi !

[mothsart]

J'ai identifié et c'est un bug lié à Chrome. (https://stackoverflow.com/questions/1901...-in-chrome)
Ca me conforte dans l'idée que ce navigateur est SUR-coté face à Firefox : sur des tests automatisés, il parait clairement en avance, sur les faits c'est loin d'être le cas.
Tout ce qui me retient c'est les outils de debug et sans doute mes habitudes avec.

La solution proposé est d'utiliser une variable globale... ce qui est franchement un avis de faiblesse.
Du coup, je vais te proposer un correctif correspondant.

Perso, j'aurais sans doute pas fait les choses de la même façon que toi : déclarer des événements dynamiquement, c'est toujours à mon sens casse-gueule à débugger... mais je vais pas non plus tout refactoriser donc on va allé au plus rapide.

[Philippe Dpt35]

Perso, j'aurais sans doute pas fait les choses de la même façon que toi : déclarer des événements dynamiquement, c'est toujours à mon sens casse-gueule à débugger...

ça m'intéresse de savoir comment tu t'y serais pris, au moins sur le principe, pour enrichir ma panoplie !
Je ne suis pas un spécialiste, et je suis déjà content quand je trouve une solution ! :lol:

[mothsart]

Bon, voilà : c'est fait.

Je voulais que la zone lors du survol soit un carré propre au dimension d'une image avec les espaces intermédiaires.
Pour cela, j'utilise :
1. la propriété css :before qui bien sur ne s'applique pas des elements html autofermant tel que <img>
2. créer un élément englobant l'image en évitant de ne drager que l'img (attribut "draggable" de la balise img forcé à false)
+ m'assurer que l'ensemble du code fonctionne avec cette balise englobante.
3. éviter que le dragover et dragleave se déclenche sur la balise img : utilisation de la règle css "pointer-events: none;"

[Philippe Dpt35]

J'ai fusionné.
C'est effectivement plus propre !
Fonctionnement OK avec Chrome sous Windows.
Le bon fonctionnement sous Chrome sera quand même à tenter d'assurer sur les applications en prévision de la mise en place de la réponse au tactile.

[mothsart]

ça m'intéresse de savoir comment tu t'y serais pris, au moins sur le principe, pour enrichir ma panoplie !
Je ne suis pas un spécialiste, et je suis déjà content quand je trouve une solution !

J'aurais créer le max de html à l'initialisation avec des éléments cachés.
Pour le drag and drop, j'aurais créer des zones de drop transparente dans receptacle de tailles équivalentes aux images.
Du coup, les événements peuvent être posé dessus dès le début.
Pareille, j'évite les positionnements avec du javascript. (je les ai d'ailleurs enlevé)

Ca évite pas mal de gymnastique intellectuel en fonctionnent ainsi.

Maintenant, je suis comme toi, j'ai pas toujours réponse à tout. (surtout sur les domaines que je pratique peu à titre pro : le drag and drop, par exemple, j'en fait pas ou peu)
Je lis beaucoup de doc, je recherche et expérimente pas mal (pour pas dire tâtonne parfois).
Le web, même si ça se standardise de plus en plus, y'a toujours une part de bidouille.

[mothsart]

Pour la proposition de ciblage par l'URL, je viens de te faire une proposition de merge.

[Philippe Dpt35]

Je vois plusieurs problèmes :

-les boutons des séries faites ne se désactivent pas
- je n'avais pas vu, mais le bug était présent dans ta branche précédente: lorsqu'on arrive en bout de ligne dans le réceptacle, si on fait glisser une image entre deux, la dernière image passe à la ligne suivante, mais ne revient pas en place si on décide de ne pas faire le drop.

[Philippe Dpt35]

Précision :
le bouton d'une série faite n'étant pas désactivé une fois la série faite et après vérification positive, si l'on reclique dessus, l'application plante.

[mothsart]

Alors, pour la désactivation des séries réalisés, c'est corrigé. (désolé, je ne connaissais pas cette fonctionnalité et par conséquent, je suis passé à côté)
Pour le soucis en bout de ligne, j'ai fait au mieux mais ça reste bancale (surtout sur chrome) avant et après : il faudrait que le carré soit toujours positionné au bon endroit ce qui n'est pas le cas.
Et là, c'est un peu patatra : si on veut faire faut tricher à fond les manettes... je vais te faire une nième proposition.

[Philippe Dpt35]

Pour le soucis en bout de ligne, j'ai fait au mieux mais ça reste bancale (surtout sur chrome) avant et après : il faudrait que le carré soit toujours positionné au bon endroit ce qui n'est pas le cas.
Et là, c'est un peu patatra : si on veut faire faut tricher à fond les manettes... je vais te faire une nième proposition.

Les fins de ligne sont effectivement délicates à gérer. C'était dans ma fonction "resize". Il est important de trouver une solution pour le faire, car sinon c'est vraiment gênant à l'usage.

Pour moi, ça n'a pas de sens de parler de "tricherie". ça doit fonctionner d'un point de vue utilisateur. Il vaut mieux un code moins joli mais qui fonctionne. L'utilisateur il s'en fiche du code. Il voit si ça fonctionne ou non.

[Philippe Dpt35]

En revérifiant, ma solution de gestion de fin de ligne n'était pas très propre non plus. Certes l'image passée en ligne suivante revenait bien à sa place si on ne déposait pas, mais pendant le drag on assiste à des clignotements et des positionnements imprécis.

[mothsart]

Voilà, j'ai effectué les modifs (sur la même demande de merge).

Oui, c'est bien les histoires de clignotement dont je te parle et c'était difficilement résoluble en l'état :
l'image se décale en dessous à l’événement "dragover" mais du coup, le curseur n'est plus au dessus de l'image et par conséquent, ça déclenche le "dragleave".

Du coup, j'ai changé le comportement en dupliquant (pendant le dragover) l'image et en jouant sur sa visibilité afin de garder le focus dessus.
Désolé mon week-end était chargé... du coup, j'ai fait ça un peu à l'emporte pièce.