SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 81
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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....

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi kelvinwright. Welcome to the forums.

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

    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.

  3. #3
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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 )

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats very good of you i will go check it out

    Kelvin

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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!

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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.

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo
    Is there an email address so i can send you a diagram??

    Cheers
    Kelvin

  11. #11
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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....b3_attachments

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tx broken up.jpg
    Quote Originally Posted by kelvinwright View Post
    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....

    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

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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?

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by kelvinwright View Post
    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.
    Snapfit lets you create your own custom javascript jigsaw puzzles and seems to be closer to what you are desiring.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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?

    Quote Originally Posted by kelvinwright View Post
    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.
    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?

  17. #17
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  18. #18
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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.

  19. #19
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    Quote Originally Posted by Pullo View Post
    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

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Amazing job, @Pullo ! Well done.

  21. #21
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Amazing job, @Pullo ! Well done.
    Hay Ralph
    Many thanks Ralph for your help too mate

    Kelv

  22. #22
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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.

  23. #23
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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

  24. #24
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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

    drag-drop-puzzle.zip

  25. #25
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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

    drag-drop-puzzle.zip
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •