Creating a Puzzle where pieces are dragged into place

Hay Ralph
Many thanks Ralph for your help too mate

Kelv

Just a quick update.
I haven’t had as much time as I would have liked over the past couple of days.
I am still working on this and will post the code soon.

No Problem when ever you get the time that will be great

Once again its spot on and thank you

Kelvin;)

Hi there,

I tidied up the code and made a bunch of improvements.
The final code can be seen in action here.
Or downloaded from here, or from this post.

Hope that helps you :slight_smile:

Many thanks mate you have been a big help. but how do i use the code? as there are various files and im not sure what to do

I will of course give thanks to you when i put the thing on the site

Many thanks yet again Pullo its very good of you

Regards
Kelvin

Hi,

No problem :slight_smile:

You will need to ensure that all of the files are included in the page where you want the drag and drop puzzle to go.
You can copy the necessary code from index.html, just make sure that the paths are correct.

If you need any help with this just let me know.

Hi Again Pullo
Thanks again for your continued help

I am however having trouble, i am using firefox 21 and i know get the 4 boxes appear at the top of the page with the words in them and immediately below that is the message Your Browser Does Not Support HTML5 canvas! and below that nothing seems like its telling me it does not support it but according to the Firefox people it does?

I have tried IE too and get the same

Am i doing something wrong mate??

Many thanks
Kelvin

Oh dear, sorry about that.
I altered the way that the script checks for canvas support.
My demo should work in Firefox now.

Which version of IE?
The canvas element isn’t supported in IE8 or below.
For me the script works as expected in IE9 and IE10

Let me know if my demo now works for you and I’ll update the zip archive accordingly.

Hi Pullo
Its IE 10 and your original Demo worked fine mate its the zip one im having problems with

Once again
Many Thanks
Kelvin

Hi,

I updated the zip file, too.
I tested them in both FF and IE10 on my PC, so hopefully they should work for you, too.
Download files.

:mad:
Well Pullo
I cant keep pestering you mate you have been an Angel with all the help, but i cant get it to show at all know lol
Im using Joomla 2.5 and using a module called Anycode to put the code in, otherwise joomla strips the code out for security reasons.

Heres what i have done
I made a directory called javascript in my htp client
I have then put your files inside that.

Where you have put things like “<link href=”./css/styles.css" rel=“stylesheet” type=“text/css”>
<link href=“./css/jquery.toastmessage.css” rel=“stylesheet” type=“text/css”>

I altered them to <link href=“./javascript/css/styles.css” rel=“stylesheet” type=“text/css”>
<link href=“./javascript/css/jquery.toastmessage.css” rel=“stylesheet” type=“text/css”>
etc but cant get it to work, i will keep trying but thank you you for all your help mate

PS
Your demo works fine

Regards
kelvin

Do you need to have this embedded in your website? As an alternative, you could probably create a new folder in the root folder of your hosting account and call it whatever you like, but let’s say “puzzle”. So, in that /puzzle/ folder just dump all of Pullo’s files. Then got to

[noparse]yoursite.com/puzzle/[/noparse]

and the page will be available.

Thanks Ralph
I would like to embed it but ill give your idea a go

Cheers Mate
Kelvin

It will effectively be embedded by dong what I suggested, but if by that you mean you want the page to be styled like your other pages, that could easily be done, too.

It works great like you suggested Ralph but yes i wanted it to appear on the page that its mentioned on really but hay its cool as it is im gonna put some words of thanks on the link for all Pullos help and others too, this is a fantastic helpful place and cant thank you all enough for all your help

Cheers to you all
Kelvin

Thanks mate heres the link let me know what you think please

http://juniors.g3lrs.co.uk/index.php/site-administrator/tx

Kelvin

Question, where does the code get the background image from, the one that has the empty boxes on it?

I ask because i was going to try and edit the code for the receiver block diagram that is the only other block diagram the kids need to master for there license

Did not want to ask for any more help and thought i would have a go at altering it myself you see.

Regards
kelvin

Hi Kelvin,

The site looks great.
Nice one!

This is drawn using the HTML5 canvas element.
If you look in the file main.js you will see the code.
I commented everything so that it was easy to see what is going on.
https://www.google.com/search?q=canvas+draw+shape

One thought:
Thanks for the accreditation. However, instead of linking to my SP profile, maybe you could link to my blog (get the address from my signature).

If you run into any problems, let us know.

Hay guys, I can not thank you enough for your help, i have altered the code for the Receiver Block diagram (Took me all night lol) but im well pleased with it.
Have a look and see what you think!

I have learnt a lot thanks to your help guys…

http://www.juniors.g3lrs.co.uk/index.php/site-administrator/receiver-block-diagram

Once again Thanks Guys
Regards
kelvin