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:

[qdeck]

(flashcard questions and answers – fronts and back – go here)

[/qdeck]


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

[qdeck]
[q] In the diagram, which number refers to a primary consumer?  (click for answer)numbered_food_chain
[a] Number 2 refers to a primary consumer.
[/qdeck]


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:

[qdeck][q] In the diagram, which number refers to a primary consumer?  (click for answer)


[a] Number 2 refers to a primary consumer.
[/qdeck]

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:

[qdeck]

[q] Who was the Austrian monk who discovered many of the principles of modern genetics?  (enter your answer and click on the card)
[textentry]

[a] The correct response is “Mendel.”
[/qdeck]

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:

[qdeck]

[q] In a eukaryotic cell, the genetic material is normally in the [hangman].

The genetic material consists of [hangman], which is short for [hangman].

[c] nucleus

[c] DNA

[c] deoxyribonucleic acid

[a] Yes. In a eukaryotic cell, the genetic material is normally in the nucleus.

The genetic material consists of DNA, which is short for deoxyribonucleic acid.

[/qdeck]

 

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

Here is the flashcard:

[qdeck]

[q] In a eukaryotic cell, the genetic material is normally in the [hangman].

The genetic material consists of [hangman], which is short for [hangman].

[c] nucleus

[c] DNA

[c] deoxyribonucleic acid

[a] Yes. In a eukaryotic cell, the genetic material is normally in the nucleus.

The genetic material consists of DNA, which is short for deoxyribonucleic acid.

[/qdeck]

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

[qdeck]

[q] This diagram illustrates [textentry]

(click card after entering text)

cell-division-diagram

[c] meiosis

[a] This diagram illustrates meiosis.

cell-division-diagram

[/qdeck]

 

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

[qdeck]

[q] This diagram illustrates [textentry]

(click card after entering text)

[c] meiosis

[a] This diagram illustrates meiosis.

[/qdeck]

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,

[c] meiosis

[a] Yes, the diagram illustrates meiosis.

[c] mitosis

[a] The diagram does illustrate cell division, but it’s a particular type. How many chromosomes does each “daughter” cell have?

 

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

[c] *
[a] No, that’s not correct. This is a type of cell division.

 

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

[q] What is the primary component of cell membranes?[textentry]

[c] lipids; lipid bilayer

[a] Yes, cell membranes are composed primarily of lipids, or, more specifically, phospholipids.

[c] phospholipids; phospholipid bilayer

[a] Yes.

[c] *

[a] Cell membranes are composed primarily of phospholipids.

 

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:

[qdeck]

Welcome to this set of flashcards about genetics. Here’s how it works:

  1. Click ‘Check answer’ to see the answer to each card.
  2. If you don’t know it as well as you’d like to, click ‘Need more practice,’ and that card will go to the bottom of the stack so you can practice it again.
  3. If you know it, click ‘Got it.’
  4. ‘Shuffle’ lets you shuffle the deck.

[start]

[q] Who was the Austrian monk who discovered many of the principles of modern genetics?
[textentry]
gregorMendel
[a] The correct response is “Mendel.”

[q] Define “gene”

[a] The unit of heredity.

[q] Define “heredity.”

[a] The passing of traits from parent to offspring.

[/qdeck]


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

[qdeck]

Welcome to this set of flashcards about genetics. Here’s how it works:

  1. Click ‘Check answer’ to see the answer to each card.
  2. If you don’t know it as well as you’d like to, click ‘Need more practice,’ and that card will go to the bottom of the stack so you can practice it again.
  3. If you know it, click ‘Got it.’
  4. ‘Shuffle’ lets you shuffle the deck.

[start]

[q] Who was the Austrian monk who discovered many of the principles of modern genetics?
[textentry]

[a] The correct response is “Mendel.”

[q] Define “gene”

[a] The unit of heredity.

[q] Define “heredity.”

[a] The passing of traits from parent to offspring.

[x]
You can learn more about genetics at sciencemusicvideos.com

[restart]

[/qdeck]

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:

[h] <p style=”background: green;”><strong> Genetics flashcards </strong></p>

Here’s a sample flashcard deck:

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

[h] Genetics flashcards

[q] Who was the Austrian monk who discovered many of the principles of modern genetics?
[textentry]

[a] The correct response is “Mendel.”

[q] Define “gene”

[a] The unit of heredity.

[q] Define “heredity.”

[a] The passing of traits from parent to offspring.

[x]
You can learn more about genetics at sciencemusicvideos.com

[restart]

[/qdeck]

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:

[qdeck card_back=”white”]

 

You can specify your own background image with card_back_image=”//qwizcards.net/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:

[qdeck random=”true”]

 

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.

94 thoughts on “Flashcard shortcodes

  1. IITian Academy

    Thanks for creating a Wonderful plugin. We are using this for our website . We need your help to align texts in the flashcards to left in certain cases. How can I achieve this. Tried everything but it is not working. Alignment in WordPress editor id getting replaced with central text alignment in all cases.

    Reply

  2. Simon

    Thank you for this wonderful plugin. Is there any way to add a button at the end summary card to only show the cards which are marked as “need more practice” thanks

    Reply

    1. Dan Kirshner Post author

      Hello Simon. Thanks. I think what you’re asking for is an option for the user to go through the cards again, seeing only those that they previously marked “need more practice” (though the user did eventually have to click “Got it!” on every card in order to see the summary). While we do have a feature that does pretty much what you ask, it’s a bit round-about (as you’ll see in a moment). Your suggestion is a good one — perhaps a button, “Repeat cards that you marked ‘Need more practice'”. We’ll put it on the to-do list.

      To use what’s available now you need to do two things with the Qwizcards editing menu (inside the WordPress editor): (1) “enable progress recording” and (2) save the quiz as a “dataset”. “Enable progress recording” lets Qwizcards keep a record of what a user has done (so it knows which are marked “Need more practice”). For this to work users need to create a login account. “Save as dataset” means that the flashcard deck has an intro that includes options for a user who returns to the deck to choose which cards to do, including an option for only those cards marked “Need more practice”.

      Reply

  3. Camille

    Hi Dan, thanks for the amazing plugin. I was wondering whether it was possible to hide the Got it! button and also is it possible to make the buttons smaller on a mobile.

    Kind regards

    Camille

    Reply

    1. Dan Kirshner

      Thanks, Camille. Is what you have in mind is just a “Next card” button (in place of “Need more practice” )? So just an “endless” deck, right? We don’t have that, but we’ll put it on the to-do list. With regard to mobile button size, my fingers are already pretty fat compared to button size I see (for example, with the Qwizcards home page deck). Are you getting something different, or what is the case for smaller buttons? –Dan

      Reply

  4. Uli

    First of all, thank you for the fantastic plugin. My students love it. Is it possible to change the font size? I tried with and but with no success. I am working with non-Roman fonts, and students need to see them in 24px size. Any way to do this? Thank you

    Reply

    1. Dan Kirshner

      Thanks! I assume you’re talking about making your own flashcards. The simplest thing to do, I think, is to install the TinyMCE Advanced plugin, which lets you add a toolbar pulldown for font size to the WordPress editor. Perhaps quicker for one-time use is to select “Text” mode to add <span style="font-size: 24px;"> ... </span> around your content.

      Update: Uli replied (down below)

      I tried span, div, p, all to no avail. It doesn’t change the font size. But after having received your email I thought: “Let’s try it on another site.” And yes, it works!! I was using the Masterstudy LSM plugin and theme. A disaster. Nothing works on that platform.

      Sorry for having bothered you!

      No problem; good to know! Thanks.

      Reply

  5. Vincent

    Hello, I have a problem with the “hint” button and every other button actually. They are all taking the whole width. The hint button (which shows even if I selected “Never” in the options) hides the text field, and the 4 bottom buttons are not horizontally aligned. Could you help me fix this?

    Reply

    1. Dan Kirshner

      Hello Vincent. Thanks for the info — the “whole width” issue is probably some conflict with your theme styling. Do you have a sample page I could view (URL)? What theme are you using?

      For the “Never” issue, note that there are two different hint settings on the Qwizcards admin page — one for free-form input cards, and one for hangman cards. Try both? Thanks again –Dan

      Reply

      1. Vincent

        Wow, thank you for your super quick answer. It solved the two problems I shared :-)
        Now I might have a last problem…

        I tried flashcards with images and sounds.
        –> Images aren’t showing (see here : http://www.formation-musicale.be/flashcards-lecture-de-notes-a/)
        –> MP3 are working fine but when I click play, it’s a click so the cards flips. Not a very big deal but maybe it’s solvable?

        Again, thank you very much for your assistance and your awesome plugin :-)

        Reply

        1. Dan Kirshner

          Thanks, great. For images, the issue is that your theme sets images to “invisible” first (opacity: 0) and then has them “fade in”. But the flashcard images aren’t there until after your theme has “finished its work,” so they remain invisible. We can provide a work-around for that. (Or perhaps your theme has an option to turn that off?)

          For audio, can you provide an example? We’ve run into this problem before; we just need to know how to identify your audio player so we can disable “flip on click” for it. As a quick fix, you can turn off “flip on click” for that flashcard deck. See https://qwizcards.net/flashcards-quickstart/#Turn%20off%20click%20flip

          Reply

          1. Vincent

            Hello,

            Images : I don’t know how to turn off the “fade in” of the images. I’d really appreciate a work-around :-)
            Audio : I added an MP3 in one of the two flashcards I put as an example.

            Reply

          2. Vincent

            Hello, It solves the image problem, but the sound problem is still there (when I click on play, card flips). Is that solvable? :-) Thanks

            Reply

          3. Dan Kirshner

            Hi Vincent: My hope was that it was solved. Three approaches now:
            1. Try try again. I don’t see an example with an audio player. Can you create or point me to one on your site?
            2. Put this shortcode pair around your audio player (shortcode or image or whatever it is): [no_click_flip] ... [/no_click_flip]
            3. Turn off click-flip. Do [qdeck click_flip=”false”] (see above)
            Thanks –Dan

            Reply

          4. Vincent

            Hi Dan,

            The [no_click_flip] [/no_click_flip] worked for the first card of the stack, but it doesn’t work any more for the second card : i can click on play but nothing happens (no play, no flip).

            Any idea?

            Reply

          5. Dan Kirshner

            Hi Vincent: I installed mp3-jplayer on my own site (as I should have done before!) and debugged with that. I have a fix now (main issue is that flashcards after the first are not on the page until you get to them, while mp3-jplayer expects everything to be there when the page loads — it’s an initialization issue. I now force re-initialization with new audio flashcards.) I can release an update now if you want, but I’ve got a few other updates to do if you’re willing to wait a few days. Thanks! –Dan

            Reply

          6. Dan Kirshner

            OK, released in version 3.48. This time for sure! Note: you’ll have turn off MP3-jPlayer’s “Encode URLs” setting. Go to Dashboard > MP3jPlayer > Settings > Advanced. Under “Misc File Settings” uncheck “Encode URLs”. Remember to “Save All Changes” at the bottom.

            Reply

          7. Vincent

            Hi Dan,

            I created plenty of flashcards sets for music lessons with your awesome plugin, thank you very much! I shared it with colleagues to help more students to work during this pandemic weeks (schools are still closed here in Belgium).

            I did what you said (turn off “encode URLs”) but the card still flips when I click on play. The students see the answer before they get a chance to guess what they hear :-)

            Could you help me?
            I posted the URL in the “website” textbox of this comment.

            Reply

          8. Dan Kirshner

            Thanks, Vincent. MP3-jPlayer is presenting a bit of a moving target — yours has changed from what I see in my installation. Not a big deal. Please update to the beta version (very minor change; no worries!) by doing this: Dashboard > Settings > Qwizcards. At the bottom, under “Revert to an earlier version” enter 0.00 and click “Save changes”. You’ll get “beta 2 for 3.50” and hopefully the right behavior! –Dan

            Reply

    2. Uli

      I tried span, div, p, all to no avail. It doesn’t change the font size. But after having received your email I thought: “Let’s try it on another site.” And yes, it works!! I was using the Masterstudy LSM plugin and theme. A disaster. Nothing works on that platform.

      Sorry for having bothered you!

      Reply

  6. Charles

    Great product! I have one problem. I put topics in each question, but when the deck is done there’s not report of performance by topic. Am I missing some output code somewhere? What should I do? Thanks!

    Reply

    1. Dan Kirshner

      This might be the issue: For flashcard decks, topic-by-topic summaries are only shown for those topics where the user clicked “Need more practice” at least once. Here’s a simple example that you can try:
      [qdeck]
      [q topic=”TOPIC_ONE”] FRONT1
      [a] BACK1 
      [q topic=”TOPIC_TWO”] FRONT2
      [a] BACK2 
      [/qdeck]

      Reply

  7. Sam

    Loving the plugin! It’s great.

    Just a quick question:
    I can see from the docs that when you want to change the style you can add CSS code in the short code, eg:
    [qdeck style=”width: 700px; height: 420px; border: 4px solid green;”]

    If I wanted to change the style using an internal style sheet instead of inline css, what is the reference to the quizcard?
    For example:

    #??? {
    width:700px;
    height:420px;
    border: 4px solid green;
    }

    What would #??? be so that I can access the quizcard.

    Thanks!

    Reply

    1. Sam

      The reason I ask is that I think I’ll be able to change the size of the card depending on it being viewed on a mobile device or not, if the card width can be styled in an internal style sheet. Thanks again. Looking forward to your reply. Sam :) I’d be happy to share the solution if this is possible as I know many would love it to respond to screen sizes. Thanks once more.

      Reply

      1. Dan Kirshner

        Hello Sam: Thanks for the thought. Currently, it’s not that simple. There’s quite a bit of active JavaScript-controlled resizing of flashcards. We have cards expand to accommodate larger content (unless scroll=”true”); because of the way “flip” is implemented (front and back “absolutely” positioned on top of each other) the content is out of the page “flow”, and the rest of the page does not automatically move down; we work around this by actively resizing the card container (which is not absolutely positioned and is thus in the “flow”). However! We should be able to accommodate your request if you specify scroll=”true” (see http://dsl.lin.mybluehost.me/qwizcards/reference/). We’ll need to rejigger things a bit in this case to make sure that cards take their sizing cue from the stylesheet rather than allowing JavaScript to override. Give us a bit… –Dan

        Reply

      2. sergei

        Hi, my temporary solution is to set the width to 100% and play with css [code]qwizcards.js
        function create_qdeck_divs (i_deck, qdeck_tag) {

        // Capture any style info or other attributes provided. If styles not set
        // for width and height, do so now (do as style in order to override
        // any WordPress theme class for ).
        var m = qdeck_tag.match (/\[qdeck([^\]]*)\]/m);
        var attributes = m[1];
        var default_style = ‘ style=”width: 100%!important; min-height: 265px;”‘;
        deckdata[i_deck].card_width_setting = ‘100%!important;’;[/code]

        Reply

      3. Dan Kirshner

        Update: version 3.23 includes “responsive design” when you get to the “mobile view” of a quiz or flashcard deck — hopefully no further tweaks necessary!

        Reply

      4. Dan Kirshner

        Update (as noted elsewhere): version 3.23 includes “responsive design” when you get to the “mobile view” of a quiz or flashcard deck — hopefully no further tweaks necessary!

        Reply

  8. Herman

    Hello Dan, Flashcard question — Can the questions or answers be multimedia (video – mp4 or other vid formats OR audio (mp3)?) I run a language learning site and this would be useful in vocabulary. Also, regarding the quizzes, can an answer include multimedia (video/sound selected from user’s local pc?) Thanks very much!

    Reply

    1. Dan Kirshner

      Yes, whatever is supported by WordPress (which is quite a bit!). Use the WordPress editor’s “Add Media” button.

      I’m not sure I understand your question about “user’s local pc.” If the user is you, the quiz-maker, yes, “Add Media” lets you do that. If the “user” is someone taking a quiz or doing flashcards on your WordPress site, then no — the quiz/flashcard content comes from your WordPress site, not the user’s PC.

      Reply

      1. Herman

        Thanks, Dan. I will give it a try. Looks like a great quizzing tool judging from the examples you provide. I wonder though, what would it take in terms of time, resources to make this plugin fully responsive? I read in an earlier response you gave another commentator that it might not be worth the effort, but I’m just throwing this out there. A responsive feature, despite how “tiny” the words/UI may appear, will I’m confident give a cleaner/smoother look to this plugin on mobile devices. With this said, I haven’t looked at any quiz from this plugin on a mobile device, so I don’t know really. But I just thought a responsive feature would be nice. Thanks for taking it into consideration, Dan. I appreciate very much what you’ve done already. Great tool!

        Reply

  9. Sam

    Brilliant plugin, thank you. Exactly what I’m looking for. I wonder if you could help. When in desktop view, the specified height and width is great, however, when viewing on a mobile phone the width of the flashcards remains static. Is it possible for the flashcards to resize (get smaller and keep within the page width) when the page width reduces on a mobile device? Thanks

    Reply

    1. Dan Kirshner

      Great, thanks! We opted not to resize content for small screens — worried that things might get too small to see. Plus rotating the phone to landscape mode usually accommodates a card. However, we could add an option for cards to resize as you suggest. We’ll put it on the to-do list!

      Reply

      1. Dan Kirshner

        It occurs to us that, though we could do the resizing, it really doesn’t accomplish anything that can’t be quickly accomplished with pinch-zoom on mobile devices. Wondering if it’s worth the effort…

        Reply

  10. jason

    Viewing my site on my mobile, there seems to be a bug with the flashcards. When I view flashcards that are centered on a web page, the entire view sometimes “auto-scrolls” me back to the left side when I flip a card. Then I have to re-center the deck on my screen again, and it is rather annoying. Thank you for your help.

    Reply

    1. jason

      please go to the /verbs section of my site to get a better idea of what I’m talking about..
      the deck on the front page doesn’t show the problem because it’s oversized

      Reply

      1. Dan Kirshner

        Thanks, I’d appreciate it. I’ve tried to replicate the problem you describe — I see some minor unnecessary resizing of the card, but not the behavior you describe. Please, however, provide a URL!

        Reply

  11. jason

    I can’t seem to change the font color. I try using the tag but it only works in the heading. How do i change font of the main content of the card?

    Reply

    1. Dan Kirshner

      No, the “Need more practice” button can’t be removed, currently. We’ll add that to the to-do list!

      Restart button: [x] (for “exit text”) at the end, then include the shortcode [restart].

      Reply

  12. Michael

    hello,
    Is there a way to prevent the card from “shrinking” after clicking the “Got it” button? or shuffle button. it’s a very small but i am using the flashcard next to each other on a page and it’s very noticeable and appears to me to be a defect would prove to be an annoyance to my customers.

    Reply

    1. Dan Kirshner

      (Sorry not to respond sooner — somehow missed or didn’t get notification.)

      We’re not seeing this behavior — for example, in the demos on the Flashcards quickstart page. There are a few possibilities. Cards will “expand” to accommodate images; clicking “Got it” moves to the next card, which may have a different image, etc. It’s also possible that your WordPress theme has its own ideas about sizing — that override what Qwizcards may be trying to do.

      Can you provide a URL to your example? Thanks!

      Reply

    1. Dan Kirshner

      (For everyone else: “spaced repetition” is repeating tests of specific knowledge items just often enough to reinforce memory — not so infrequent that you forget, and not often that it’s easy/unnecessary.)

      You could certainly accomplish something like that with the flashcard or question ordering — but nothing formal (or even better, interactive/responsive) yet.

      Thanks for the tip! We’ll certainly put it on the to-do list. –Dan

      Reply

  13. Jim Heinz

    From above I copied and pasted

    [qdeck]
    [q] In the diagram, which number refers to a primary consumer?numbered_food_chain
    [a] Number 2 refers to a primary consumer.
    [/qdeck]

    which included image, a test Post at http://carbswitch.com/?p=8516&preview=true# , a WordPress site, but the page appears Blank when previewed. Suggestions as to what I can do to fix ?

    I’ve used shortcodes successfully on other Posts for other plug-ins.

    Thanks for any help on this you can provide.

    Reply

  14. John

    Hi Dan,

    Thanks for making such an awesome plugin. It works fantastically! I do have a question though. Is it possible to make is so that the card doesn’t flip unless you hit the “Check answer” button or you answer correctly in the text-entry box? Thanks.

    Reply

    1. Dan Kirshner

      Thanks, John. For the most part, the only time the card flips is if you click on the card or if you hit “Check answer.” You can turn off the “flip-on-click” with click_flip=”false” (see above). But it sounds like you’re interested in something else in general.

      For textentry, it seems you want “Check answer” to remain grayed-out/disabled until you enter the correct answer (right now, “Check answer” is ungrayed/enabled as soon as the user selects something from the suggestions list). I suppose this could be an option, but it seems not in the spirit of flashcards! Flashcards aren’t supposed to grade you on right or wrong — you’re just supposed to make your “best guess” and see whether you got it right. And I think there is evidence that getting things wrong is actually a powerful learning technique.

      Any thoughts?

      Reply

      1. John

        Hi Dan,

        Thanks for the swift reply! Sorry if my original questions wasn’t clear. I disabled the flip-on-click but the card flips when I hit the enter button. What I was wondering was if it’s possible to make it so that the card only flips if you click the “Check answer” button or if you type in the correct answer and hit enter. So the “Check answer” button is always available if you need to check the answer but the card won’t flip if you accidentally type in the wrong answer then hit enter.

        Reply

        1. Dan Kirshner

          Hi John: I’m still not sure I’m getting it! Are you talking about the “Optional-text-entry box” rather than the “Free-form-required-entry” flashcard?

          Yes, in the “Optional” case, “Check answer” is always available. You would like “Enter” to NOT flip the card until you enter the correct answer. One problem is that in the “Optional” case, Qwizcards doesn’t know what the correct answer is! If you use [c*] then the [textentry] becomes “free-form-required-entry.” I suppose we could come up with some other way of indicating the correct answer. At a minimum, “Enter” could be disabled until at least something was entered in [textentry] box. Would that be a step in the right direction?

          Reply

          1. John

            Hi Dan,

            Thanks again for the quick response! Sorry I didn’t specify the entry type. I guess what I was thinking was like a cross between free-form-required-entry and textentry where you can click the “check answer button” to flip the card like with textentry but hitting the enter button won’t flip the card until the whole answer is typed in like with free-form-required-entry. But after testing the free-form-required-entry flashcards it seems to be working for me.
            Thanks!

            Reply

  15. Mikkaela

    Hi again Dan, I’m trying to make my flashcards stylistically right before publishing a bunch of sets on my website. I’ve been able to successfully change the flashcard dimensions, formatting etc, but I haven’t been able to figure out how to place the whole box in the centre of my page / content box – they all appear stuck in left-alignment. Is this a characteristic that can be edited? Thanks very much.

    Reply

    1. Dan Kirshner

      That’s a good question. The only thing I’ve found that works for centering is to put the whole thing in a <div> with margin set to “auto” AND to set the width the same as the flashcard width (which won’t necessarily be 500px if you’ve set the width yourself):
      <div style="margin: auto; width: 500px;">
       [qdeck]
       ...
       [/qdeck]
      </div>

      Note: you have to edit in Text mode for this to work!

      I’ll try to include this in the instructions (above) somewhere. Actually, this is rather a bother; I’ll try to include some kind of shortcut for this!

      Reply

      1. Dan Kirshner

        Please note: version 3.00 includes “align=” options for quizzes and flashcard decks. For example [qdeck align=”center”].

        Thanks for getting us to address this!

        Reply

  16. Jennifer

    Hello, when the plugin is active, the product listings (title, quantity, buy button) for our WooCommerce store page are disappearing. Any thoughts as to why this would be happening?

    Reply

    1. Dan Kirshner

      Ah, sorry about that. Both Qwizcards and WooCommerce had a rather non-specific CSS class, “summary” (which Qwizcards was setting to “display: none”). Re-named the Qwizcards class so wouldn’t clash. Qwizcards version 2.35 has the fix!

      Reply

  17. Trucco

    Awesome plugin full of features, but I was wondering if there’s a way to make the flashcard flip by clicking anywhere on it instead of having a button for it.

    Reply

    1. Dan Kirshner

      Thanks! Hmm… since version 2.30 <Enter> should work as a substitute for “Check answer”. So it shouldn’t be too difficult to make a click work, too. I’ll try to get it into the next version, which should be out pretty soon!

      Update: 2.34 has “Click for flip”

      Reply

        1. Dan Kirshner

          Thanks. New version 2.34 has click doing “Flip”. You can disable this by putting click_flip=”false” in the [qcard] shortcode.

          Reply

  18. Lorraine

    So far I’m loving your plug-in. It does just what I want it to do. But, I’m having some trouble getting the flashcards to center on my page. And when I make the border green and then add the header, the header is black instead of the green I added in the code. This is how the code now appears:

    [qdeck random=”true” style=”width: 700px; height: 420px; border: 4px solid green;”]
    [h] Genetics flashcards

    Thanks.

    Reply

    1. Dan Kirshner

      Probably the simplest thing to do for centering is to put the whole thing in a <div> with margin set to “auto”:

      <div style=”margin: auto;”>

      [qdeck]

      [/qdeck]

      </div>

      For the header, just need to add the <p style=”background: green;”> to the header.

      Reply

  19. martin

    hi,
    is there a way to add audio to flash cards? I would like to add audio as a question. I have tried the add media button but I get an error message saying update required to play this media either update browser or flash plugin, but both are up to date. any help would be greatly appreciated.

    best regards
    martin

    Reply

    1. Dan Kirshner

      I don’t know. WordPress.com (https://en.support.wordpress.com/audio/) says

      Upload audio to your site
      You can upload the files to your site if you have the WordPress.com Premium or WordPress.com Business plan.

      But that shouldn’t be a matter of an update. I was able to upload and insert a .wav file using my local installation of WordPress. However, it wouldn’t play in Firefox, though it did in Chrome.

      It’s certainly a nice idea. But I don’t know the ins-and-outs of this! The WordPress audio page (link above) also suggests some alternatives, such as the SoundCloud player. I haven’t tried them, however.

      –Dan

      Reply

    2. Sergei

      Hi, I tried inserting Compact WP Audio Player shortcode inside question or answer flashcard and it works well!

      Reply

  20. Denis Slota

    When I attempt to display the above test page (example from help), I get a blank screen. On a bare bones site (minimal plug-ins) the same code works. From your help files I am thinking that I need different Qwiz-content HTML element(s) to trigger on, but I don’t actually know where to get them. I made an attempt at looking at the source code and trying a few different elements, but I must have picked the wrong ones since I get the same result (blank screen). Any help would be greatly appreciated.

    The qwiz example page may also be accessed from a link at the bottom of the main page of the site.

    Reply

    1. Dan Kirshner

      This appears to be a problem I was just working on. Could you please try this: go to Dashboard > Settings > Qwiz, check the box for “download beta version”, and “Save Changes”. You should then see “beta – Visual Composer fix?”. Activate that (click radio button and Save Changes).

      Let me know if that works! Thanks.

      –Dan

      Reply

        1. Dan Kirshner

          Sure, beta is fine (you can do Settings > “Deploy for all users”). But the fix has been released in version 2.24 — you can do a regular update.

          Reply

  21. Marcus

    Hi Dan,

    thank you for your great plugin!
    Everything works fine, but I am not able to create two or more independent sets of flashcards on one side, like you did. Is there a certain shortcode?

    Thank you in advance

    Marcus

    Reply

    1. Dan Kirshner

      Thanks!

      Do you mean “one page”? That should be a simple matter of multiple [qdeck] … [/qdeck] opening and closing shortcode pairs. If you have a test page URL I could look at that would be helpful.

      –Dan

      Reply

      1. Marcus

        Thank you very much for your quick response!

        I just found the solution to my problem: I had placed each pair of [qdeck] … [/qdeck] shortcode in another div-container. Putting them all in the same container did the trick, yipeeh!

        Marcus

        Reply

  22. Mikkaela

    Hi Dan,

    I installed your plug in into my educational website today and have been creating some learning flashcard sets. I just wanted to say that your plug-in is awesome! It’s incredibly simple to use and works impressively well, doing exactly what I wanted it to do. I’m looking forward to creating more elaborate image-based quizzes using your labeled diagram feature in the future. You have my enthusiastic congratulations and sincere thanks!
    – MM

    Reply

    1. Dan Kirshner

      Thanks so much! Glad to hear it.

      Please note: as of version 2.15 you can customize the button names in the Qwiz admin menu; these will “stick” through plugin updates. Dashboard > Settings > Qwiz.

      Reply

  23. Matt

    Hi,

    Really awesome job. But is there a way to have the flashcard deck randomize itself, so it displays a different order each time it is viewed?

    Reply

    1. Dan Kirshner

      Thanks!

      That’s a good idea. I’ll make it an option!

      By the way, for teaching/learning purposes, we didn’t want the default to be random — you want to be able to direct students from easier to harder, say. Of course, they can bypass that by hitting “shuffle.”

      Reply

    2. Dan Kirshner

      FYI, that is now an option (version 2.09). Add ‘random=”true”‘ to the [qdeck] shortcode:

      [qdeck random=”true”]

      Reply

  24. Mamun

    Hello Admin,

    Thank you so much for this nice and useful flashcard. I am really happy to find this. I am going to use this in my study for the students. But one thing I need to know is that- Is it possible to change the button name appeared below the flashcard. For example, instead of ‘flip’ I would prefer ‘check your answer/ concept’. If Possible, how could I change the button names. I would highly appreciate for your kind assistance. Thank You.

    Mamun
    The University of Queensland
    Australia

    Reply

Leave a Reply to Matt Cancel reply

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


The reCAPTCHA verification period has expired. Please reload the page.