This week myself and 2 other classmates selected to work on the Puzzle section for the WAM Idea Lab Application. I started to do a little bit of researching on what it will take and what languages people have used to create similar application features such as puzzles etc. I noticed a lot of people used jQuery, JavaScript, and HTML5 to create this feature. Just going to describe some of the examples I found.
jQuery: After searching a couple different sites, I found that jQuery has a library such as: jqPuzzle. This library within jQuery lets you bring in any image as a .jpg and it will create a sliding image to make a puzzle. It seems pretty straight forward once you call the jqPuzzle library inside the code all you need to do is then apply the class to any image to use theses features. Basically this sort of library will allow you to slide images around inside the square until the image is complete. It is not like a jigsaw puzzle where you can move images anywhere you would like and they would have a snap fit when they are in the correct location.
(Ex: <img src = “apple.jpg” alt=”Apple Logo” class=”jqPuzzle”/>
http://www.jqueryplugins.com/plugin/81/
javaScript has a tool called snapfit.js. This tool could be used to snap the image to the correct location when they are in range. All you need to do is set the snapfit on the image. It is a fast and easy way to work with any image. This tool does not need any other resources to run.
http://www.netzgesta.de/snapfit/
I think theses are some good tools to be used within the code for this feature and I feel that the snapFit feature will be the most efficient for the children using it because when the certain piece they are moving is close to the correct spot the piece would light up green and then snap to the location and if the image is in the incorrect spot it would highlight red and they will have to re try that piece again.
Just a couple ideas that should be thought about. I know we said we be using JavaScript, HTML5, and CSS for this application. But I think we will need to add in some jQuery libraries to be implemented with the JavaScript code.
Will post more when I get in touch with the rest of the group.
From the blog rwilliams5262 » cs-wsu by rwilliams5262 and used with permission of the author. All other rights reserved by the author.