Labeled-diagram shortcodes

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.


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:

[q labels=”top”]

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:

Q - initial question entries

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).

Q - menu screenshot

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

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:

Q - click-on-label screenshot

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:

Q - click-on-image screenshot

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

Q - target-on-image screenshot

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:

Q - completed question

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


[q] Mitosis


[l] Chromosome

[fx] No.  The chromosome is two strands of DNA held together at their centers by the “centromere”

[f*] Correct!

[l] Spindle fibers

[fx] No.  The spindle fibers pull the chromosomes to each side of the dividing cell

[f*] Correct!

[l] Centrosome

[fx] No.  The centrosome is the “microtubule organizing center” for the spindle fibers

[f*] Correct!

[l] Nuclear membrane

[fx] No.  The nuclear membrane disappears during cell division

[f*] Excellent!


Text target “drop zones” instead of images – example


[q] Cell division

Place each Mitosis phase in the correct order.


1. _______________________________


2. _______________________________


3. _______________________________


4. _______________________________

[l] Anaphase

[fx] No.  Please try again.

[f*] Excellent!

[l] Metaphase

[fx] No, that’s not correct.  Please try again.

[f*] Excellent!

[l] Telophase

[fx] No, that’s not correct.  Please try again.

[f*] Excellent!

[l] Prophase

[fx] No, that’s not correct.  Please try again.

[f*] Good!


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. _____________________”).

4 thoughts on “Labeled-diagram shortcodes

  1. Graciela

    Hi Dan,
    Is it possible to have more than one quiz per WordPress entry (page or post)? I want a quiz and a labelled diagram but found that the “Quizcards editing menu” cannot find the second quiz on the same entry, so I can’t, for example, create targets for the labels.


    1. Dan Kirshner

      Yes — the home page has a quiz and a flashcard deck on the same page, and of course the “quickstart” pages each have multiple quizzes/decks, including labeled diagrams on the Quizzes quickstart page.

      So I don’t understand the problem you’re describing. The labeled diagram should be a new question — either in an existing quiz, or in a second (or third, or…) quiz on that page/post.

      Let me know — perhaps with a bit of additional description — if you’re still having problems.


    1. Dan Kirshner

      No, but that’s a good idea! (I assume you mean fill-in-the-blanks text-entry boxes positioned on a diagram.)

      Unfortunately, it doesn’t fit very well into the existing framework (where positioned boxes are drag-and-drop targets, and text-entry boxes aren’t positioned, and only one is allowed per “question”).

      But I’ll put it on the to-do list!


Leave a Reply to Tosca Necoechea Cancel reply

Your email address will not be published. Required fields are marked *