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.
Sections
Lightening quickstart
Options
Add questions and answers
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 for whole deck
Turn off click flip for single image, button, or shortcode
Add “comment text” that users will not see
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)
[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:
[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:
[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)
[c] meiosis
[a] This diagram illustrates meiosis.
[/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:
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:
- Click ‘Check answer’ to see the answer to each card.
- 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.
- If you know it, click ‘Got it.’
- ‘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.
[/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:
- Click ‘Check answer’ to see the answer to each card.
- 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.
- If you know it, click ‘Got it.’
- ‘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.
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.
Thanks! In an example using the Qwizcards Wizard, it looks like this for me: https://qwizcards.net/wp-content/uploads/2024/09/Flashcard_front.png
So it seems to work fine. I did have a case where I had a few blank characters at the beginning of a line, so it didn’t look left-justified. But it looked fine again after deleting the blanks.
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
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”.
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
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
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
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)
No problem; good to know! Thanks.
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?
If you want to see what I’m talking about : http://vincentdb.be/175-2/
Thanks, Vincent. Your theme set button width:100% (why???). New version 3.45 works around this.
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
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 :-)
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
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.
Thanks, Vincent. Try new version 3.46! –Dan
Yes, it seems to work.
Thank you for you GREAT support :-)
Hello, It solves the image problem, but the sound problem is still there (when I click on play, card flips). Is that solvable? :-) Thanks
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
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?
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
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.
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.
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
Thank you! It worked :-)
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!
(I copied your reply up above.) No problem; good to know!
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!
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]
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!
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.
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
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]
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!
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!
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!
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.
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!
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
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!
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…
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.
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
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!
How do you get rid of the lines on the back of the card?
Update. Version 3.16 has this feature. See Hide or change the ruled lines on the flashcard back, above.
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?
You should be able to use the WordPress editor. Highlight the text and use the text-color icon.
Is there a way to remove the need more practice button, and how do you create a restart button at the end of the deck?
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].
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.
(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!
Hi,
Great plugin! Is it possible to set the border color with rgb or hex values?
Thanks!
Sure. Any standard css/html will work. See the example here: Change the style. Instead of “green” you could use “#008000” or “rgb(0, 128, 0)”.
That’s great, thanks! I really like this plugin, thanks for sharing it!
Hi,This plugin has spaced repetition system? Like SuperMemo? Thanks!
(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
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.
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.
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?
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.
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?
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!
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.
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!
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!
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?
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!
Awesome, thank you so much!
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.
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”
Great and thanks again for making such a great tool available
Thanks. New version 2.34 has click doing “Flip”. You can disable this by putting click_flip=”false” in the [qcard] shortcode.
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.
Probably the simplest thing to do for centering is to put the whole thing in a <div> with margin set to “auto”:
For the header, just need to add the <p style=”background: green;”> to the header.
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
I don’t know. WordPress.com (https://en.support.wordpress.com/audio/) says
Upload audio to your siteYou 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
hey dan,
thanks for the response I will try it with .wav files and looking at the wordpress audio page.
Hi, I tried inserting Compact WP Audio Player shortcode inside question or answer flashcard and it works well!
Thanks, good to know. For those interested, the Compact WP Audio Player plugin is here: https://wordpress.org/plugins/compact-wp-audio-player/
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.
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
Working with Beta version.
Should I continue to use it?
DS
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.
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
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
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
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
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.
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?
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.”
FYI, that is now an option (version 2.09). Add ‘random=”true”‘ to the [qdeck] shortcode:
[qdeck random=”true”]
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
As of version 2.15, the Qwiz admin page provides an option to change button labels. Dashboard > Settings > Qwiz.