Creating a Puzzle where pieces are dragged into place

First i have had a nasty experience from another forum they were very rude, so if im not in the correct place i will say sorry now, but wanted to ask if any one could point me in the correct direction with the following…:mad:

Hi
Could any one assist please

I want to make a puzzle with say 6 pieces in it and have it appear on my site in a jumbled up manner.

I then want to be able to grab a bit and place it into a position, with the ultimate aim that when all pieces are in the correct position that it will say “That is the correct order”

Is this possible as I do not understand coding please folks???

Many thanks for reading this post

Kelvin :wink:

Hi kelvinwright. Welcome to the forums. :slight_smile:

I’m sorry you had a bad experience elsewhere. We try to be friendly around here. :slight_smile:

You are definitely in the right place, in terms of the kind of thing you need for this. JavaScript would indeed allow for something like this, although it takes quite a bit of skill to set something like this up—more than I have, I’m afraid. So someone smarter will need to help you out.

That said, I suspect your bad reception in another forum might have been due to the nature of your question. In general, people in forums are happy to help with a problem but don’t want to do all the work for you, as otherwise it’s like providing a free service. So I’d say yes, you are in the right place to be asking about this issue, as this sort of thing can be done with javaScript. But if this sort of thing is way beyond your skills to achieve, it might be better to pay a programmer for something like this. Because I’m not even able to get to first base with a task like this, even though I spend a lot of time around here, I personally would hire a programmer to do this for me. Hope that makes sense. :slight_smile:

Hi Kelvin,

SitePoint recently posted a tutorial on this very thing.
You can find it here:

Part 1
Part 2
Demo

Hope that helps.

(n.b. when I said ‘recently’, part two was the recent part :))

Many thanks and i can accept what you are saying, i just wanted to be pointed in the correct direction to have a go myself lol

Many thanks
Kelvin

Thats very good of you i will go check it out

Kelvin

Ha this is not what i need, as i said i want to have say 4 images that i can slide into order and when correct to have it say Well done that is correct.

But thank you anyway for you help
Kelvin

Well, as Ralph said, you are unlikely to find someone who will simply program what you need.
The tutorial was meant to point the way.
Good luck!

Thats fine i dont mind paying but dont know who to contact, its for my Radio club for juniors to help them get there radio licence and we are non profit making, but as i say dont mind paying as it will help the young ones out.

Thanks
kelvin

Ok, so I didn’t get what you mean.

Could you describe in more detail what it is you are trying to accomplish?
How should the images be arranged?
How do you want the user to interact with the puzzle (by clicking, by drag and drop etc.)?
Are these four separate images, or one image broken into four pieces?
Do you have any other examples of this kind of puzzle online?

If you want to pay someone to do this, there is always SitePoint’s market place.

Hi Pullo
Is there an email address so i can send you a diagram??

Cheers
Kelvin

Hi,

You can send me an email by clicking my name (from any of my posts) and selecting send email.

I would however, prefer it if you posted the image here.
Here’s how: http://www.sitepoint.com/forums/faq.php?faq=vb3_reading_posting#faq_vb3_attachments

Thanks again for the reply

With ref to the picture i have added…

The bottom pictures with no writing in the boxes want to be static, and the top ones (With writing in them need to be mixed up and have the drag and drop feature so that the youngsters can click and drag them and drop them in the correct order over the static boxes, and if they put them in the correct order I want it to say well done that is correct otherwise to say sorry incorrect please try again.

Hope this makes sense

Regards
Kelvin

Ah ok, then I misunderstood your initial post. Sorry!
Let me have a think about this and I’ll get back to you later on (I’m at work right now).
Do you have any experience with JavaScript / HTML5?

Snapfit lets you create your own custom javascript jigsaw puzzles and seems to be closer to what you are desiring.

I had a look at this, and although it seems like a great plugin, it only seems to work with individual images.
Did I miss something?

I was having a play around with this and came up with a small demo.
We could easily adapt this to suit your needs. What do you think?

Hay thats getting there, thanks for all the trying, many many thanks on behalf of our juniors, i just want to help the young ones achieve there goals, thats all i want to do.

So thanks again
Kelvin;)

Hi there,

You know when i said you wouldn’t find anyone to write the thing for you?
Well … here you go.

I tested it in IE9, IE10, Chrome (latest), Firefox (latest), Opera(latest), Safari (latest Windows)
It works, but the code is very shoddy and there is still a small bug in the collision detection.
I’ll tidy it up in the next day or so, then post back here with a complete listing.

Also, hats off to @ralph_m ; for providing the CSS.

Hi Pullo
Hay mate thats spot on what we are after the kids will love it mate, cant thank you enough, im even happy with it as it is, its brilliant.

God you done us proud mate please let me know the cost.

Once again Thank you

Please let me have the code asap (After payment of course lol)

Kelvin

Amazing job, @Pullo! Well done. :slight_smile: