The Qwizcards plugin lets you create a quiz question with drag-and-drop labels.  The labels can have “drop zones” (“targets”) on an image, or within text.  The labels themselves can be images, so you could make a jigsaw puzzle if you wanted!

The Qwizcards wizard provides a menu-driven WYSIWYG interface to create labeled diagrams (choose “Qwizcards interactive editing wizard” from the Qwizcards editing menu within the WordPress editor).  You can also-use a shortcode-based method (choose Edit shortcodes directly – labeled diagram options”).  This page describes the shortcode-based method for creating and editing labeled diagrams.

Lightening Quickstart

1. Enter the shortcodes [qwiz] (start quiz), [q] (question), [l] (labels), and [/qwiz] (close quiz).
2. After the [q] shortcode, use the WordPress editor “Add Media” button to add an image, or you can add text, or both text and images.
3. After each [l] shortcode, enter the text of a label you want to the user to drag and drop on the diagram.
4. Click the “Q” icon in the WordPress editor menu.  The “Qwiz menu” pops up.
5. Click “Create target for a label” in the Qwiz menu.
6. Click on one of your labels.
7. Click on the image to create the target “drop zone” for that label.

Repeat the last three steps for each label.

Options

Placement of drag-and-drop labels

You can specify where the list of drag-and-drop labels will be placed by adding the attribute labels=”top”, for example, to the [q] shortcode:

You may enter “top”, “bottom”, “left”, or “right”.  The default is “right”.

When the list of labels is placed at the top or bottom the the list stretches across the qwiz box (as many labels as will fit on each line) rather than one label per line.

Text target “drop zones” instead of images

After clicking “Create target for a label”, instead of clicking on an image you can highlight a section of your text (click and drag across the text).  This is intended for “fill in the blanks,” so a set of underscores will be best for your text!  See the example.

Step-by-step guide

To start you create a quiz with a question.  A quiz begins with the shortcode [qwiz] and ends with the shortcode [/qwiz]. A question begins with the shortcode [q].

You can add an image with the “Add Media” button. You then enter your drag-and-drop labels, each beginning with the shortcode [l], in the order you want them to appear:

Once you have entered a quiz ([qwiz]) with a question ([q]) and labels ([l]), then click the “Q” button in the WordPress editor menu (top row, third from the right here).  The “Q” button should appear once you’ve installed the Qwizcards plugin (although perhaps not in exactly the same place).

When you click the “Q” button, the Qwiz menu appears:

What you’ll do next is select each label in turn, and create a target “drop zone” — a rectangular area on the diagram — for each label you’ve selected.  To begin, click “Create target for a label”.   The Qwizcards plugin will draw a box around the diagram representing the quiz area on your page, highlight each label with a border, and add default “feedback” shortcodes ([f*] and [fx]), like this:

You can change the default feedback ( [fx] for an incorrectly-placed label , [f*] for a correctly-placed label) to what you want.  Now the menu will prompt you to click on the image where you want the target “drop zone” to be placed, as shown here:

Once you click on the image a target rectangle will be drawn, as shown here:

You can resize and reposition the target rectangle as you like. Note that the label “Chromosome” and the target rectangle for this label have the same color border; the border color, which is unique for each label-target pair, indicates which target is correct for that label.

Here’s the complete labeled-diagram quiz question in the WordPress editor, where we’ve created target rectangles for each label, and changed the feedback to be more informative:

And here’s what the labeled diagram question looks like when we save and view the page:

Text target “drop zones” instead of images – example

Note: It is hard to control the spacing of automatically-numbered lists (“Numbered list” icon in the WordPress editor menu) or of bulleted lists.  It’s easier to just enter a number manually for each paragraph (e.g., “1. _____________________”).