(a copy of the following text may be seen as a txt doc, as saved from,
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
If less than 9 lists are needed, those not needed can simply be deleted from
* 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.
Drag and Drop 'Teach Japanese' (or anything)
(This old version now appears to work only in Internet Explorer.)
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:
Get this program for your own, by going to:
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:
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
HERE IS A ZIP, WITH ALL YOU NEED (INCLUDING DIRECTIONS ALL MIGHT UNDERSTAND).
* 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
* The inner span of that span can be whatever content you want.
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.