Universal Drag/Drop Code-Writer and Web Page BUILDER  

(For some reason the helper app, which you will want to use, now works only on Firefox (not IE).
So, please reopen this app in something other than Internet Explorer. See the many other free javascript and flash tools for teachers at mynichecomputing.org. Especially take note of THIS.)
(For some reason, yet to be figured out, productions made with the DD Builder do not work in Internet Explorer 10.
Perhaps using a newer version of jQuery , downloaded in the html head , would fix things -- we will know soon. )

Activity TITLE:  

DIRECTIONS:


DRAGGABLES (divs you name that will be draggable and be of the size you
set them and at the location relative to the whole page at which you place them).
(In the image blank, put simply the name of the image (example: whatever.gif), if it is in the
same folder as everything else; otherwise the full http address, including that file name.
Height, Width, x, and y are just integer numbers -- from the popup 'location helper' link, below
THE SAME IS TRUE FOR THE DROP TARGETS, IN THE NEXT SECTION.) USER NOTES

Div
Name: height: width: x: y:   image: label:




CLICK HERE for a popup of a web page to help you identify desired x and y coordinates
and height and width FOR EACH DIV, for this section and for the section below.

 


DROP TARGETS (divs you name that will respond to Draggables and be of the size you
set them and at the location relative to the whole page at which you place them).
(In the image blank, put simply the name of the image (example: whatever.gif), if it is in the
same folder as everything else; otherwise the full http address, including that file name.)

Div
Name: height: width: x: y: image: label:



 




(then all the needed cells will be generated in the table below AND all the needed fields in the final section as well)
 

Table for messages (displayed either via alert OR tooltip, depending on whether correct
drag object was dropped over the correct drog target OR not).  In each cell please provide the
appropriate MESSAGE FOR THE STUDENT.

         Draggables
                       |-->
DropTargets (below):

 

 

Drop Target Correct Answer(s) (WITH the named draggable divs, separated by commas --
in the correct order, if the ORDER matters (and if it does, check the checkbox)).
(No comma after the last correct answer; also: use the names YOU gave, not numbered.)

DropTarget Name:   Correct Answer(s):   

Check if  correct order is required:

 

 


 

DIRECTIONS

The Builder builds the html for the web page.  You still have to copy the html from the bottom textarea and paste it in NotePad (or SimpleText ) and save it as whatever.html .
(You must save it as raw text with a .htm or .html extension -- for new Mac users, I recommend Really Simple Text.)   Then click the link to the zip file (BELOW) and unzip it and place those css and js files in the same location as the html file you just built (and the same location as the images you use).    Then run YOUR new html drag and drop page.

Pick images that are smaller than the divs you make for draggables and for the drop targets; ALSO allow enough extra height to accommodate the text of each label. You should know that the draggables' labels are used in some of the feedback provided to students when targets have multiple answers, so DO provide good labels, in such cases. OPTIONALLY: You may edit the body of the page as you wish; but put any new material in absolutely positioned divs, setup to be at the locations you want.

 

Get your other needed files HERE.
Try test1.htm and test2.htm for very crude examples (yet showing key functionality).
HERE is a actual simple, but realistic, example of an application built with the Builder by a teacher.

HERE is a bigger, and perhaps more impressive example (still, only very partially used, and having even more potential).

Any feedback would be appreciated lorlarz@gmail.com. I am also open to suggestions about other things you might like. Thanks.