Flashcard shortcodes

For creating and editing quizzes, we recommend the Qwizcards Wizard.   In the new “Block Editor” (Gutenberg), open a “Classic” paragraph or block, and click the icon.  (In either the “Block Editor” or the “Classic Editor” you may have to click the “Toolbar Toggle” icon — the Q icon is in the second row.)

The Qwizcards Wizard is also available here.

The Wizard creates “shortcodes” – keywords enclosed in square brackets – on your page or post.  This page shows you how the shortcodes for flashcards work.

Lightening quickstart

To create a flashcard deck, first enclose your flashcard content in [qdeck] … [/qdeck] pairs:

Each question/card front begins with a [q] short code. Answers/card backs begin with an [a]. The WordPress editor “Add Media” button has been used to add the image, below. (Use the small scroll bar on the right to see all of the input.)

Note that you can use the WordPress editor to format the text – bold, color, etc. Here’s what this one-card flashcard deck looks like when you view your page:

Also note that multi-card decks will have more options than this single-card deck — there will be buttons below the deck, a “progress line” at the top, and a summary of how you did once you finish reviewing all of the cards in the deck.  (Thanks to Glenn Wolkenfeld at sciencemusicvideos.com for this example.)

Options

You can:

Add questions
Add an optional-text-entry box
Add a hangman-input flashcard
Add a free-form-required-entry flashcard
Add a header
Add an introduction
Control placement of “Start reviewing cards” button
Add “exit text”
Add a “Review this flashcard stack again” button
Assign “topics” to cards – the flashcard-reviewer’s performance will be summarized by topic at the end of the deck
Change the alignment and style of the flashcard box – size, borders, background, font, etc.
Hide or change the ruled lines on the flashcard back
Randomize the initial order of the cards
Turn off click flip
Add “comment text” that users will not see

Add questions

You can continue adding cards to your flashcard deck by adding [q] and [a] shortcodes for each card front and back. See the example below, where an additional card appears before the card in the first flashcard deck, above.

Add an optional-text-entry box

You can add a field where the user who is reviewing the flashcards can enter a guess. If the user enters a guess it will be shown on the back when the user flips the card, with the text “You wrote…”  Enter the shortcode [textentry] where you want the text-entry box to go.

Here’s an example:

Add a hangman-input flashcard

In a hangman-format flashcard, an input text box shows blanks for each letter of a target word or phrase, and users guess letters as in the popular “hangman” game.  Correct guesses cause the blanks to be filled in; incorrect guesses are added to an “incorrect” list.

A hangman input text box is specified with the shortcode [hangman].  Multiple hangman input text boxes can be specified on a card.  [c] shortcodes (one for each [hangman] shortcode) provide the target word for each input text box.  Here’s an example:

 

The card will “flip” once the user has guessed all of the letters of each target word.

Here is the flashcard:

Add a free-form-required-entry flashcard

The act of “recall” prompted by flashcards has been found to be good for learning and retention — more so than choosing among multiple-choice answers. Apparently the greater cognitive effort better “exercises” the brain’s recall circuits (see Make it Stick: the Science of Successful Learning, Peter Brown, Henry Roediger, and Mark McDaniel, Belknap Press, 2014).

Of course, the student has to make the recall effort; the improvement in retention does not occur on simple re-reading or by simply flipping the flashcard over to view the answer. Thus required entry on flashcards encourages students to make that recall effort.

On free-form-required-word-match flashcards, students select an answer from suggestions that are provided after the student has typed a few letters into the input text box.

The suggestion are based on a “loose-matching” algorithm that shows suggestions based on word sounds in addition to word spellings, to further lessen the dependence of success on spelling ability. Once the student has chosen a word from the list, then the “Check answer” button is enabled and the card back can be viewed.

On free-form-word-match flashcards, word suggestions are based on

(a)  a dictionary of English words;
(b)  a “default list” of about 500 biology-related terms; and
(c)  the correct-answer words that you specify (as shown below).

On any free-form-word-match flashcard you can specify whether the dictionary words and/or the term-list words are included (see “Free-form-word-match flashcard options,” below).  You can also provide an alternate list of terms for any quiz, and you can add terms to the default list or to the quiz-specific list.  See Free-form-word-match terms.

As in the default [textentry] input option, you specify the location of the user entry field for free-form-required-word-match flashcards with the shortcode [textentry]. You specify the required-word-match option by including a word-choice shortcode [c] followed by the target word in the list of suggested words. (In the default option, an entry is not required in the input field before the back of the card can be viewed. In both the default and required-input cases the entry will be shown on the back side of the card with a phrase like “You wrote _______”.)

Here is a simple example of a free-form-required-word-match flashcard. The front side of the card is specified after the “question” shortcode [q]. You create a free-form input text box with the shortcode [textentry]. You provide a target word with the choice shortcode [c]. The back side (“answer”) side of the card is specified after the shortcode [a].

 

Here’s how this flashcard with free-form-required-word-match appears when you view the page:

Entry-specific feedback

You can specify feedback — card-back-side/answer text — that varies depending on the word the user selects from the suggestion list. You can do this by entering a word-choice – answer pair ([c] – [a]) for each alternate entry – feedback. For example,

 

You can also provide feedback for “other” with a wildcard word:

 

Finally, you can have multiple words share the same feedback — enter words with semicolons between them after a [c] shortcode.

 

Note: when more than one [c] – [a] pair of word-choices – answers are given, but the “other” choice – answer ([c] * [a]) is not provided, then the answer from the first [c] – [a] pair will be used for other user entries.

Finally, also note that the shortcode [f] (for “feedback”) can be used as a synonym for [a] (“answer”).

Free-form-word-match flashcard options

Do not use dictionary for suggestion words.  You can specify that the English-word dictionary not be used for suggestions for this question by adding the attribute “use_dict” to the [textentry] shortcode, like this:

[textentry use_dict=”false”]

In this case suggestion words will be taken from the default list of terms or from the substitute list of terms you provide (see Free-form-word-match terms) and from the correct-answer words you provide (with [c*]).

Do not use terms lists for suggestion words. You can specify that the default or substitute terms lists for a quiz not be used for suggestions for this question by adding the attribute “use_terms” to the [textentry] shortcode, like this:

[textentry use_terms=”false”]

Plurals. You can specify that plural forms of the words in the default terms list be shown as suggestions to the user. This will be useful if your flashcard question may be most naturally posed as having a plural answer. For example, alternative answers to the question, “What is the primary component of cell membranes?” should be in plural form (such as “phospholipids”).

Flashcard-deck-specific terms. As mentioned above, you may enter or specify your own list of default terms, or add terms to the default list. This can be done separately, with distinct lists, for each flashcard deck, if you like. See Free-form-word-match terms.

Single-character entry – “instant multiple-choice.”  You can specify that the answer is only a single character with the “single_char” attribute, like this:

[textentry single_char=”true”]

In this case suggestions will not be shown.  As soon as the user types a character in the input box, the flashcard will “flip” to show the back of the card.  This is handy for a diagram with numbered features, for example: “The pancreas is at number [textentry single_char=”true”] in this diagram.”

Add a header

If you start your flashcard deck with an [h] shortcode, the text after the [h] will be placed in a header at the top of the card box. See the example, below.

Add an introduction

Use an [i] shortcode to enter an introduction. The [i] code and text go after the header [h], if present, and before the first question [q]. The introduction will appear as a separate introductory “page” with a “Start reviewing flashcards” button.

Control placement of “Start reviewing cards” button

By default, a “Start reviewing cards” button will be placed at the end of the introduction. Use the shortcode [start] to place the button where you want.

Here is a sample flashcard deck that includes both a header and an introduction:

Here’s how the flashcard deck appears when you view the page:

Add “exit text”

You can add text to the “summary card” that appears when you have finished a flashcard deck (by clicking “got it” on every card) . Enter such text after an [x] short code.

Add a “Review this flashcard stack again” button

Add the shortcode [restart] to your exit text.

Assign “topics” to cards – the flashcard-reviewers’s performance will be summarized by topic at the end of the deck

You can specify a topic for a cards by adding to the [q] shortcode:

[q topic=”Food chains”]

The double-quote marks are required.

A card may have more than one topic assigned to it. Separate the topics with a semicolon:

[q topic=”Food chains; Producers”]

Change the alignment and style of the flashcard box – size, borders, background, font, etc.

You can change the horizontal alignment of a flashcard deck on your page.  By default, flashcard decks are left-aligned with other text.  You can specify center alignment or right alignment by adding the “align” attribute to the [qdeck] shortcode.  For example:

[qdeck align=”center”]

You can change the style of the flashcards by adding a “style attribute” to the [qdeck] short code:

[qdeck style=”width: 700px; height: 420px; border: 4px solid green;”]

The style settings use the standard web syntax (called “CSS,” for Cascading Style Sheets). Here the style for the flashcard box has been set so that the overall width and height are 700 pixels by 420 pixels (compared to the default 500 by 300 pixels), and the border is 4 pixels wide, colored green (compared to the default 2 pixels wide, colored black).

To make the header consistent with the border, the “Text” mode of the WordPress editor can be used to change the format of the header paragraph. A style attribute for the text background color can be added like this:

Here’s a sample flashcard deck:

Hide or change the ruled lines on the flashcard back

You can hide the default “ruled lines” by adding card_back=”none” to the [qdeck] shortcode, or you can specify an HTML color, such as card_back=”LightGray”.  For example:

 

You can specify your own background image with card_back_image=”//swinginghotspot.com/wp-content/uploads/2016/03/SO.png”.  (You can use “Add Media” to upload an image, then copy and paste the URL.)

Randomize the initial order of the cards

You can specify that the order of the flashcards will be different each time a flashcard deck page is loaded (or when the browser window is refreshed) by adding the random=”true” attribute to the [qdeck] shortcode:

 

Turn off click flip for whole deck

By default, clicking on a flashcard will flip it front to back or back to front – as the “Check answer” and “Flip back” buttons do.  This can be a problem if images on the card are linked to their source – clicking on the image will take the user to a different page!  WordPress’s default setting is to create such links when inserting images, although Qwizcards attempts to turn this off.  If you just want your users to get used to pressing the “Check answer” and “Flip back” buttons then you can turn off the click-to-flip behavior, by adding the “click_flip” attribute to the [qdeck] shortcode:

[qdeck click_flip=”false”]

Turn off click flip for single image, button, or shortcode

You can specify individual elements that can be clicked without causing a card-flip.  If you have plugins/shortcodes that add a button to your card, for example, you can let the user click the button without have the card flip.  Surround your shortcode or element (an image that is also a link to another page, for example) with this shortcode pair:

[no_click_flip] … [/no_click_flip]

Note: by default, Qwizcards does this in effect for known media players (WordPress’s default audio/video player, and others, such as mp3-jplayer).  If you have another, let us know and we can accommodate it in the future.

Add “comment text” that users will not see

Comments that you add to a flashcard deck — text that you can see when you edit your page or post but that does not show when users view the flashcards — can be helpful in organizing your work. You can, for example, include notes, number your cards, or even temporarily exclude certain cards from the deck.

Comments can be included in a flashcard deck with a shortcode consisting of square brackets and one or more exclamation points; for example: [!] comment text [/!] or [!!!!] comment text [/!!!]. Both an opening shortcode and a closing shortcode (with the forward slash) are required for each comment.  Note: comments cannot be nested.

An alternative method to place comments in your flashcard deck is to use the HTML codes for comments: <!-- begins a comment, and --> ends a comment. In the WordPress editor, however, this can only be done in Text mode. Further, these HTML comments are only visible when you use Text mode.