Lists with Drag-and-Drop List Items for 
Prioritizing, Ordering Steps, and Matching Exercises

(a copy of the following text may be seen as a txt doc, as saved from, THIS LINK)

Drag-and-Drop Lists for visually ordering (and reporting priorities, order of steps, etc.) 
and a version for Visual Matching exercises and a third version, like the first, but with 
the numbers showing in the web page display seen by the student/respondent.

See them work here:

* Nine drag-and-drop lists (list content repeated only because I am lazy)
   Here is the ZIP FOR YOU CONTAINING FULL KIT

* Eight paired list (only half of each moveable) for MATCHING EXERCISES
   Here is the  ZIP FOR YOU CONTAINING FULL KIT

* List similar to the first version (but not styled with css, so line item numbers appear 
   on the web page.  Here is the ZIP FOR YOU CONTAINING FULL KIT

Now that you have seen them, here is some information:

Each of these drag-and-drop utilities have the following great features: 

* Customize the number of lists and items per list and the text (of course) 
   for YOUR needs

   A clear usable template included to repeat the repeated sections (with needed number changes) :
   repeatedTempl.txt, in the zip, shows the segment that must be repeated 
   to add such a list. Simple replace each "ZZZ" with the number of the ordered list you 
   are adding. More line items <li> ... </li> can be added to a list, as needed, if you want 
   more dragable items in a list; likewise any li's you don't need can be deleted from the 
   provided example (overall "template"), right in the html code without breaking 
   any functionality.

   If less than 9 lists are needed, those not needed can simply be deleted from 
   the html.


* The VIEWS of the web page after the student/respondent does the drag-and-drop 
   can be copied and pasted WITH EXCELLENT RESULTS into NotePad or 
   Word or other word processing programs or other textareas (this is the way 
   student/respondent responses/answers are submitted). 

   NOTE: The html of the web page never changes, so Saving the Page does 
   NOT work. The procedure is: Edit -> Select All (to select the TEXT of the web 
   page AS VIEWED after one does the drag/drops) , then Edit -> Copy , then 
   Edit -> Paste into another document or response area.

With this capablility, these drag-and-drop your response lists are great to 
put in popups to be part of an item in another course management system, 
such as Moodle OR as part of any online test.

------------------
------------------

When considering drag-and-drop activities, you should also consider the new Universal Drag and Drop Activity Maker on this site. 
This new application is very easy-to-use and is totally cross-browser and cross-platform (and I am told the one below no longer is).

Drag and Drop 'Teach Japanese' (or anything) 
JavaScript Web Page APPLICATION
(This old version now appears to work only in Internet Explorer.)

This is a cross platform JavaScript drag and drop learning tool.
It is presently set up to allow 46 objects (only 10 "correct") to 
be dragged over 10 targets.  When the correct drag object is put 
over the correct target, it snaps into place. (Presently the first 10 
drag objects are set up to have the 1st ten drop targets be the "correct 
answers" -- in same order.)  ALL THAT CAN BE CHANGED and 
directions for assigning "correct" drag objects and their 
corresponding "correct" drop targets (and to customize 
the application in every conceivable way) are provided.

The aforementioned sample of the program can be viewed at:

http://mynichecomputing.org/digitallearning/d_dTeachJap/japnf.htm

Get this program for your own, by going to: 

http://mynichecomputing.org/digitallearning/d_dTeachJap.zip

All that you need to know to use this is in directions_japnf.txt in the zip file. 
After you unzip it, you can run it from your desktop OR put the folder 
on your web site and run it from there (as I do on this present site).

------------------
------------------

HOW TO MAKE YOU WEB PAGE CONTAIN MORE INFORMATION, as needed:

USING TOOLTIP POPUPS (which aren't popups)

One way to allow your web page to contain more text &/or pictures CONTINGENTLY is to use tooltips. 
HERE IS AN EXAMPLE OF A PAGE WITH MOUSEOVER TOOLTIPS (thanks to the great js code 
from The JavaScript Anthology by Edwards and Adams (Sitepoint, 2006)

HERE IS A ZIP, WITH ALL YOU NEED (INCLUDING DIRECTIONS ALL MIGHT UNDERSTAND).

------------------
------------------

Here is a super easy way to do tooltips: NO JavaScript, CSS ONLY!:
See: http://mynichecomputing.org/JustCssPopup.html

     * Just View the page Source.
     * Put the style rules shown in the head of your web page
     * Make one span within another span, the outer span having
        classname: tooltip
     * The inner span of that span can be whatever content you want.

------------------
------------------

ADVANCED DRAG AND DROP CONTENT WITH TOOLTIPS THAT ALLOW FOR RESPONSES



Cross-Platform Group Content Display Drag-and-Drop and 
Comment 
(an application that allows for the display of 
the writings, or mini web page contents, of multiple students 
and then allows each "paragraph" -- i.e. each student content -- 
to be dragged up or down on the page; AND the application 
allows for the teacher and/or each student to provide feedback 
on each sentence of each of the other students' contents)

Well, I guess SEEING IT would help.  You will find that each "paragraph" (each "paragraph" is in a blue 
 rectangle) can be dragged up or down. (Note:  Technically each so-called "paragraph" is a line item in a 
specially formatted LIST and each "paragraph" could be made up of what looked like, and was, more than 
one paragraph.)   Second:  Each marked up span unit (typically, a sentence, but can be a single word or 
several sentences) can be clicked on to provide FEEDBACK on THAT unit of the student's writing.  Try it. 
Once you click on some span-marked-up sentence (or word or set of sentences) THAT unit will turn 
yellow and a popup box allowing for feedback and providing further directions will appear.  (NOTE: the 
various feedbacks are numerically coded and ALL feedbacks provided by the teacher and/or a given 
student get collected in a text area at the bottom of the application.  PLEASE NOTE:
(The particular example provided is missing the line of code that would allow
the actual submitting of the feedback.)
ALL FILES TO HAVE YOUR OWN 
COPY OF THIS SAMPLE INSTANCE OF THIS APPLICATION **AND** A BUILDER TO BUILD 
YOUR OWN INSTANCE OF SUCH A Drag-Drop and Feedback Display web page IS IN THIS ZIP

A word about the "Builder":  The only part you have to use is the table for marking up a page with 
"paragraphs" and adding marked up sentences (with span, i.e. w/S) or some content without feedback 
triggering spans (w/o span).  The buttons, New Page, New Paragraph, Sentence, End Paragraph, and 
End Page, must be used in a sensible order.  The other formatting (html markup) buttons in other tables 
can be experimented with to see what they do.  The basically allow for extra formatting (which CAN be 
used with the paragraph/sentence markup); the other table builds test items into a paragraph - this can 
be considered advanced and used only as desired.

Note: Because any html content can go in each "paragraph", this application can be used 
to make and critique a group web page.

Special Advanced Note:  You can add the tiny bit of code to the first form tag so the students feedback is submitted 
to a web server script and with that stored on the server - otherwise you can just have the student Copy and Paste 
the contents of the TEXTAREA into an email (also note: the student can manually add any content to that textarea 
in addition to the feedbacks that get put there automatically).  Moreover THEN, if you also put test items in the 
 "paragraphs", you must cut the first form tag from its current location and put it ABOVE the first ordered list (ol) tag.