It looks great.
Dude, you rock!
:spf:
BTW, when you get the order of the pieces wrong, you don’t have to reload the page, rather you can just drag the pieces back up to the grey area and leave them there.
Hi Pullo
I have added your blog address to your name mate.
I have also managed to embed the code now into my articles too.
Many Thanks Again
Kelvin 
Im doing ok at editing this code, have done loads more block diagrams that work ok but guess what im stuck now, i am trying to add up to 3 more boxes, i have added them but dont know where to add the code so they display “That’s Correct” or “Oops” when i put the boxes in place, they do work otherwise but not much use if it dont tell them if they are correct or not lol
Im having a good go at it thou and studying on the net
Thanks again
Kelvin;)
Hiya Pullo
Im stuck on this, it has extra boxes to what you did for me but no matter what order i put these boxes it says im wrong, any chance of pointing me in the right direction mate
Hi Kelvin,
The way that the script checks to see if the pieces have been dragged into the correct position is as follows.
Every draggable div has a data-piece attribute.
<div class="draggable" data-piece="one"><span>Audio Stage</span></div>
And every box onto which a piece can be dropped has a data-box attribute, indicating which piece it expects to be dropped onto it.
<div data-box="one"></div>
Then, in the file main.js, every time a draggable div is dropped onto a box, the following occurs:
The box is disabled, so that no further draggable divs can be dropped onto it:
$(this).droppable({ disabled: true });
Then, the draggable div is assigned a data-over attribute, in which a reference is stored to the box with which it is currently docked.
ui.draggable.data("over", $(this));
After that a function called checkIfChoiceCorrect is called, which checks if the draggable piece has bee dropped onto the correct box.
It does this by checking if the data-piece attribute of the draggable div, matches the data-box attribute of the element it has been dragged on to. If these two match it assigns a class of correct to the draggable div:
if(drag.data("piece") === drop.data("box")){
drag.addClass("correct");
}
After that has happened, a function called checkWinners is called, which checks if all four boxes have been disabled:
if($(".ui-state-disabled").length === 4){...}
If they have, the script knows that it has to make a decision about whether the draggable pieces are in the correct order.
It does this by checking if there are four elements with the class of “correct” on the page.
If there are, it displays a success message and removes the drag functionality from the draggable divs.
If there aren’t, it displays an error message.
function checkWinners(){
if($(".ui-state-disabled").length === 4){
if ($(".correct").length === 4){
showSuccessMessage();
$(".draggable").draggable({ disabled: true }).css("cursor", "auto");
} else {
showErrorMessage();
}
}
}
I hope that helps you.
Hay Pullo
Many Thanks Again, sorted it mate, that was a big help it all works fine now
Cheers mate
Wow what a forum this is you guys are great
Kelvin:)
Another question Pullo if you don’t mind
I have 4 blocks across the top and one block underneath
I want to move the block underneath from below box 1 at the top, to below the second top box
Would you mind explaining how i would do it please
I am sorry that i keep asking but i am learning as i go and quite pleased with it so far mate
Best regards
Kelvin
Hi Kelvin,
This sounds like a CSS issue, rather than a JS one.
You could try positioning the box using position:absolute and the appropriate coordinates, but I don’t know how that will play with various screen sizes.
If that doesn’t work, then it’s probably better to try the CSS forum
Many thanks mate ill try the CSS forum but just wandered if Ralph (I think that was his name) would know as he did the CSS i think
But thanks anyway mate
Kelvin
No problem.
You could try mentioning him, see if he turns up.
You do this by writing an @ symbol, followed by his user name, followed by a space and then a semi-colon.
Like this: @ralph_m ;
Now he will see that he has been mentioned in his notifications and will be aware of this thread again.
I have 4 blocks across the top and one block underneath Number 1 to 4 on the top row and 5 on the bottom
I want to move the block 5 from below box 1 at the top, to below the box 2 at the top
So that box 5 ends up under box 2
Can any one explain how i would do it please
Hi Mate
I sent this to Pullo wandered if you could help mate…
Another question Pullo if you don’t mind
I have 4 blocks across the top and one block underneath
I want to move the block underneath from below box 1 at the top, to below the second top box
Would you mind explaining how i would do it please
I am sorry that i keep asking but i am learning as i go and quite pleased with it so far mate
Best regards
Kelvin
Do you write this at the start of the article?
Cheers again
Kelvin
Kelvin, I saw your post in the CSS forum and downloaded your attachment, but it looks like you are referring to the lower boxes, in the canvas area, rather than at the top of the page. Is that right? If so, TBH I don’t really know how the positioning is being done there, as it seems to be controlled in the JS somewhere. Maybe @Pullo can explain how that part of the page is laid out.
Hi Mate
Umm Pullo thinks a CSS issue and yes i am indeed referring to the lower boxes
Seems im stuck then as pullo seems unable to help lol
But hay thanks for both of your help thus far
Kelvin
:mad:
Hi there,
I’m off to work now 
but I’ll have a look later on. I’m sure we’ll be able to work something out.
I’ll download the files from the post in the CSS forum. The ones in this post are currently still pending approval.
Am I going mad?
I just looked in the CSS forum, but could find no post by Kelvin.
I also looked at Kelvin’s “Started threads” on his profile, but there is only the one - this one.
[ot]
Sorry, I moved it here (post #51) and the attachment is now approved.[/ot]
Hi Kelvin,
I just downloaded your files and had a look.
I think I understand what you want, but just to avoid confusion, do you think you could make me a simple image of how you would like things to look (like you did in post#12).
Hi Pullo
Many thanks yet again here is the picture, the one that has 1234&5 is the one im working on now, but later on I will want to do another one, that will be the one with 6 boxes, ignore the no6 box being in black it will be the same as the others when its done mate.
Hope this clarify’s the problem.
Think the issue is, the css controls all the sizes for all the boxes at least that what it looks like to me, so I think some how I need a separate div for the new boxes so I can manipulate them independently lol, I might be wrong but during my messing around with the CSS this is the impression I get.
Once again Pullo many thanks for your and Ralph’s assistance
Kelvin