It was a project given to me, writing an HTML5 application helping study of a foreign language.
You have to connect points with others, in order to combine words or sentences with their equivalent in another language.
I’ve used the HTML5 canvas element and JavaScript. A lot of games like this one are using proprietary Flash plugin, we can do exactly the same with HTML5.
In this example you have to find the equivalent of French and German words.
It is possible to embed this example on your website using an iframe linked to this or you can just reuse my work, it’s open source! (MIT licence)
Full code, including server-side, is on GitHub: https://github.com/baptx/connect-points
Also available from my server: connect-points.zip
If you have JavaScript disabled and the application does not load, here is what it looks like with JavaScript enabled: screenshot.
Updates:
- After points correction, application displays wrong lines in another color (black) instead of returning wrong points number (asked by Sébastien in comments).
- Since Chrome 25, the CSS3 cursor position is broken but it looks like it is fixed in Chrome 42. To prevent my application being unusable on some browsers, it is now possible to use it without CSS cursor here.
Bravo ! C’est exactement ce que je recherchais.
Je vais voir le code de plus près et installer le pack sur mon serveur.
Deux petits commentaires :
– Il faudrait laisser la possibilité de relier plusieurs puces au même résultat, sinon on pourrait simplement faire un exercice d’association.
– Pour la correction, soit il faudrait supprimer les liens incorrects soit les afficher d’une autre couleur et c’est à l’utilisateur de les supprimer.
Merci encore…
Oups ! Je devrais bien regarder le code avant de te proposer n’importe quoi.
La connection multiple est possible (multisel).
J’ai trouvé un moment pour gérer la correction, les traits faux sont affichés dans une autre couleur (ça n’avait pas été fait par manque de temps). Si un exercice, contient plus de mots à gauche qu’à droite ou inversement, la connexion multiple est activée. Ca serait mieux de pouvoir choisir si l’on veut un exercice en particulier qui autorise de connecter plusieurs fois un point. J’avais pensé à le faire mais ça n’était pas une priorité dans le projet. Eventuellement, quand j’aurais du temps, je regarderais pour que la sélection multiple soit gérée entièrement (et sans bug, car le code PHP et JavaScript plante par moment en multisel).