Construct2

Fermer Explications

Fermer Débuter en vidéo

Fermer Images

Fermer Audio

Fermer Plugins

Fermer Commentaires

Fermer Interactions

Fermer Associations

Fermer Texte à trous

Fermer Choix audio

Fermer Puzzle

Fermer Tri d'images

Fermer Consignes

Fermer Construction

Fermer Dessin

Fermer Graphisme

Fermer Ordre

Fermer Quizz

Fermer Score

Fermer Animations

Fermer Fichiers

Fermer Masques

Fermer Données

Fermer En ligne

Fermer Générateurs

Notepad++

Fermer Les mains dedans

Visites

 228435 visiteurs

 16 visiteurs en ligne

Préférences

Se reconnecter
---

Votre nom (ou pseudo) :

Votre code secret


 Nombre de membres 4 membres


Connectés :

( personne )
Webmaster - Infos
Plugins 4.6
Les mains dedans - Zone cible

Développer en HTML5 avec un éditeur comme Notepad++
"Déplacer une image vers une zone cible
avec Auto-correction"

en HTML5 / Javascript / jQuery

 

Si vous avez pris connaissance des articles :
-Notepad++
-Structure d'un projet
-Glisser une image
-Coordonnées
-Limite
Vous pouvez suivre, sans problème, l'article ci-dessous.



- - - - - - - - - Menu - - - - - - - - - - - -
1/ Déplacer une image vers une zone cible.
2/ Utiliser ce modèle d'exercice pour créer rapidement d'autres exercices.
3/ Déplacer vers une zone cible, améliorations.
- - - - - - - - - - - - - - - - - - - - - - - - - - - -

1/ 
Déplacer une image vers une zone cible :


Cliquer pour ouvrir l'appli HTML5
coordonnees01


Que fait l'application ?
Une main, pouce levé (OK), apparaît quand l'image du chien arrive sur la bonne zone cible, ici, l'image de la niche :
limite02


Le zip du projet (cliquer ici pour le télécharger)



Le fichier HTML index.html  :
cible03


Ligne 11 : Affiche la consigne.
Ligne 12 : Affiche l'image cible1.png, la bonne cible. (id : idCible1)
Ligne 13 : Affiche l'image cible2.png, la mauvaise cible. (id : idCible2)
Ligne 14 : Affiche l'image image1.png à déplacer sur la cible. (id : idImage1)
Ligne 15 : Affiche l'image ok.png. Elle apparaît quand la cible est la bonne. (id : idOk)

structure01

Le fichier CSS style.css  :
cible05

- visibility: hidden;   : Définit la visibilité (visibility) de l'élément. (hidden = caché, visible = visible).

Les 4 images sont placées et leur taille adaptée grâce à ces définitions.
l'image ok.png est invisible au démarrage.



Le fichier Javascript leCode.js  :
cible04

Aux lignes 1 et 2, on exécute la fonction "tester" toutes les 250 millisecondes (0,25 seconde)
Aux lignes 4 à 6, on définit l'image du chien ('#idImage1') "draggable" (glissable).
Aux lignes 8 à 11, cette fonction montre l'image du pouce levé ok.png. (Bonne réponse)
Aux lignes 13 à 16, cette fonction cache l'image du pouce levé ok.png.(Mauvaise réponse)
etc.

Aux lignes 18 à 42, La fonction tester()...

  ...
des lignes 19 à 25, on calcule les coordonnées de la position de l'image qui glisse (voir schéma ci-dessous).
  ...des lignes 27 à 33, on calcule les coordonnées de la position de l'image cible qui est la bonne réponse (voir schéma ci-dessous).

  ...des lignes 35 à 38, si l'image du chien (image1.pngest glissée sur la bonne image cible : On montre l'image le pouce levé showImage('idOk').
  ...des lignes 39 à 41,si l'image du chien (image1.pngest glissée ailleurs que sur la bonne cible : On cache l'image du pouce levé hideImage('idOk').

cible10

collision04



- - - - - - - - - - - - - - - - - - - - - - - - - - - -
2/ Utiliser ce modèle d'exercice pour créer rapidement d'autres exercices :

-Télécharger le zip (Tous les dossiers et fichiers compressés en un seul fichier cible.zip) ...
cible10

...et le "dézipper".
Avec le logiciel 7-Zip (libre et gratuit) par exemple :
cible11

Voilà le résultat :
cible12

Pour créer un autre exercice, on ouvre le dossier images :
cible13

...et on change les images suivantes :
- image1.png : 400x400 pixels, l'image qui sera glissée.
- cible1.png : 400x400 pixels, l'image qui sera la bonne cible.
- cible2.png : 400x400 pixels, l'image qui sera la mauvaise cible.

On n'est pas obligé de respecter la taille des images car la taille est définie par style.css, la feuille de style CSS.
Par contre, il faut des images carrées sous peine d'avoir des images déformées !

C'est tout !

Rappel : Pour lancer l'application, il faut double-cliquer sur le fichier index.html qui s'ouvrira dans le navigateur internet par défaut.

Si l'onglet est déjà ouvert, ne pas oublier de recharger la page web (F5) à chaque modification de l'application pour juger du résultat !


- - - - - - - - - - - - - - - - - - - - - - - - - - - -
3/ Déplacer vers une zone cible, améliorations.


Cliquer pour ouvrir l'appli HTML5 :
cible02-1

Le zip du projet (cliquer ici pour le télécharger)

-Le placement des images cibles est tiré au hasard.
-Un bouton "Rejouer"
-Un bouton "Vérifier"

Le fichier HTML index.html  avec les modifications :
cible02-2


Le fichier CSS style.css  avec les modifications :
cible02-4




Le fichier Javascript leCode.js  avec les modifications :
cible02-3


Explications à venir...

- - - - - - - - - Menu - - - - - - - - - - - -
Haut de page

1/ Déplacer une image vers une zone cible.
2/ Utiliser ce modèle d'exercice pour créer rapidement d'autres exercices.
3/ Déplacer vers une zone cible, améliorations.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -





Date de création : 26/06/2016 @ 15:25
Dernière modification : 03/07/2016 @ 10:10
Catégorie : Les mains dedans
Page lue 1768 fois


Imprimer l'article Imprimer l'article

Réactions à cet article

Personne n'a encore laissé de commentaire.
Soyez donc le premier !

^ Haut ^