DesignPLUS Flashcards

You can create flashcards on any content page of your Canvas course using the the DesignPLUS Sidebar. Students can use the arrow icons to move from flashcard to flashcard. Use the 🔄️ circular arrows icon to flip the flashcard over to the other side.

Some use cases of flashcards may include (but are not limited to):

  • Vocabulary and Language Learning: They are perfect for pairing a word in a new language with its native translation, or for learning complex jargon in fields like medicine or law.
  • Memorizing Factual Data: If an answer is absolute and unchanging, it belongs on a flashcard. This includes historical dates, geographical locations, state capitals, and the periodic table.
  • Formulas and Equations: Flashcards are excellent for drilling math, physics, or chemistry formulas so that you can recall them instantly during an exam.
  • Self-Testing: Using flashcards helps you quickly identify your knowledge gaps. If you flip the card and don’t know the answer, you immediately know where to focus your study time.
A screenshot of an interactive flashcard study interface, built within Canvas LMS using Cidi Labs' DesignPLUS Sidebar. The main area features a large, rectangular card displaying the text 'Flashcard Term 1'. The card is centered and bordered by a light gray arrow on the left for going backwards and a matching arrow on the right for going forwards. Directly below the card is a circular icon used to flip the flashcard and reveal the other side. Below that, text indicates progress, reading '1 / 2'. A control panel spans the bottom width of the interface, containing three action buttons with icons: 'Shuffle', 'Flip Sides', and 'Reset'. To the right in this panel is text that reads 'Time', followed by a dark badge displaying '0:42', and a small 'info' icon.

Adding Flashcards to a Content Page

While editing content in your Canvas course, launch the DesignPLUS Sidebar by clicking on the 🚀 rocket ship icon at the top right corner of the screen.

  • Alternatively, press Alt/Option + Shift + D on your keyboard.

Place your cursor in the RCE (Rich Content Editor) where you want to add the flashcard interface.

In the DesignPLUS Sidebar, click on the ➕ Add New Elements tab.

Click the Flashcards button (found under the Interactive or Recently Used Tools headings).

  • Alternatively, use the Search textbox to search for Flashcards. DesignPLUS will show results in real-time. Click the ✖️ icon to clear your search.
A screenshot of the Cidi Labs DesignPLUS Sidebar illustrating how to locate the Flashcards tool. Three dark purple arrows highlight key navigation elements: the top arrow points to the 'Add New Elements' tab, represented by a plus sign icon. Below that, a second arrow points to a 'Search' text box, indicating an alternative way to search for the tool. A third arrow points to the 'Flashcards' button itself, which features a code bracket icon and a green 'NEW' sash, located in the 'Recently Used Tools' section.

After clicking on the Flashcards button, that interface will be added to the RCE.

  • While editing your content page, the flashcards interface may not look exactly like what you and your students will see after the page is saved. This is by design.

To edit names of the panel headings (Example: Flashcard Term 1, Flashcard Term 2), refer to the section on Content Panel in this guide.

To edit the content within each panel (Example: Flashcard Description 1, Flashcard Description 2), place your cursor in those areas within the RCE, and make edits as needed.

A screenshot of the Canvas LMS Rich Content Editor (RCE) interface showing top menus (Edit, View, Insert, Format, Tools, Table) and a standard formatting toolbar. Inserted within the content area is a structured Flashcards tool template, defined by hierarchical dashed purple borders, with the overall container labeled "Flashcards" in the upper right. The layout features an "Instructions" section followed by a "Description List" area containing two rows of side-by-side placeholder content. The first row includes a left box labeled "Flashcard Term" with centered placeholder text "Flashcard Term 1" and an adjacent right box labeled "Flashcard Description" with centered text "Flashcard Description 1". The second row mirrors this setup with "Flashcard Term 2" and "Flashcard Description 2" text in their respective term and description boxes.

Design Assistant Panel

The Design Assistant is currently a beta tool in the DesignPLUS Sidebar. It uses AI (Artificial Intelligence) to generate content that can be inserted into flashcards.

After adding flashcards to your content page, if you do not see the Design Assistant panel within the DesignPLUS Sidebar, you will need to enable beta tools in your Sidebar.

In the Design Assistant panel, enter a topic or comma separated list of terms for your flashcards.

Click the Generate button to generate panel content.

Click the History button to see previous AI-generated content that is date and time stamped.

Click the Options button to see additional options: Replace content in the editor, Number of responses, Grade level, and Output language.

A screenshot of the "Design Assistant BETA" AI tool interface within the Cidi Lab DesignPLUS Sidebar. The screen is titled "Flashcards Generator" and provides a large text input box where the user is instructed to "Enter a topic or comma separated list of terms." Below the input box, three buttons are visible: "Generate," "History," and an "Options" dropdown menu. There is a checkbox labeled "Replace content in the editor." Further configuration fields are present with default settings: "Number of responses" with an input box set to "5" (with plus and minus buttons), a "Grade level" dropdown set to "5," and an "Output language" dropdown set to "English." An "AI Transparency" link is at the top right of the inner interface. This tool is for generating content to be used as flashcards on a Canvas course content page.
A screenshot of the Cidi Lab DesignPLUS Sidebar's Flashcards Generator tool, showing the interface of the "Design Assistant BETA" AI content generation tool. At the top, a blue header is labeled "Design Assistant BETA," with an "AI Transparency" link to its right. The title below reads "Flashcards Generator," followed by an instruction to "Enter a topic or comma separated list of terms". There is a text input field, which contains descriptive sentences about panda biology. Below this field are three buttons with AI symbols: "Generate," "History," and "Options" dropdown. A checkbox labeled "Replace content in the editor" is checked. The tool parameters at the bottom include a field for "Number of responses" set to "5," a "Grade level" dropdown menu set to "13", and an "Output language" dropdown set to "English".

The Design Assistant will display AI-generated content based on the content provided and options selected. Place a ☑️ checkmark next to those items you wish to include in your flashcards. Place a ☑️ checkmark next to Select all from this response to include all AI-generated content.

A screenshot showing the response generated by the Design Assistant AI tool within the Cidi Lab DesignPLUS Sidebar. A dark blue banner at the top features a sparkle icon and the text 'Here is the response:'. Below this, a white panel with rounded corners displays preview content for the generated flashcards, accompanied by a scroll bar on the right. The panel contains individual cards, with the first showing a checked checkbox next to the term 'Carnivorous Herbivores' with an arrow, followed by the description 'Although classified as carnivores, their diet is predominantly plant-based, mainly bamboo'. The second card shows a checked checkbox next to the term 'A Built-in Bamboo Grasp' with an arrow, followed by the description 'They have a modified wrist bone that acts like a thumb to grasp bamboo'. At the very bottom, below the preview panel, a checked checkbox is labeled 'Select all from this response'.

Click the Add Flashcards button to add the AI-generated content in within the RCE.

If you need to further refine your content, use the Refine results textbox to provide more details, and then click the ✨ Refine button.

A screenshot shows the interface for the Cidi Lab DesignPLUS Sidebar Flashcards tool. A light blue callout box at the top, featuring an informational icon, contains the text: "Design Assistant content is generated by AI. It should be reviewed for accuracy and edited as needed." Below this box are two prominent buttons: a blue button labeled "Add Flashcards" with an icon of a document and arrow, and a white button labeled "Start Over" with a circular icon. The lower portion of the screen is the "Refine results" section, which includes a label and a large text input box with the placeholder "What would you like to change?". Underneath this input box are two more buttons: a dark blue button labeled "Refine" with a sparkle icon, and a dark gray button labeled "Options" with a dropdown arrow.

After clicking on the Add Flashcards button, the AI-generated content will be added to the RCE.

A screenshot of the Canvas LMS content editor interface showing a 'Flashcards' block inserted on a page using the Cidi Labs DesignPLUS Sidebar. The central content area features a purple-bordered region with a large purple heading 'Flashcards' next to a page icon, and a section for 'Instructions' with placeholder dotted lines. Below this is a list containing two flashcards. The first card has the term 'Carnivorous Herbivores' and the description 'Although classified as carnivores, their diet is predominantly plant-based, mainly bamboo.'. The second card has the term 'A Built-in Bamboo Grasp' and the description 'They have a modified wrist bone that acts like a thumb to grasp bamboo.'. Various small, dotted purple text labels, such as 'Flashcards', 'Description List', 'Flashcard Term', and 'Flashcard Description', are visible within the purple region, acting as block-type indicators from the DesignPLUS sidebar. Above the editing area, a standard content toolbar is partially visible with formatting controls.

From a student perspective, the flashcards interface appears similar to what is shown below. Click on the 🔄️ circular arrows icon at the bottom center of a flashcard to “flip” it to the other side. Click the < or > buttons to view additional flashcards.

A screenshot of an interactive flashcard interface within the Canvas LMS. The central element is a large, white rectangular card prominently displaying the text 'A Built-in Bamboo Grasp'. This main card is flanked by smaller grey rectangular buttons containing a left-facing directional arrow and a right-facing directional arrow. Positioned directly beneath the card is a circular icon of rotating arrows, indicating the function to flip the card. At the very bottom center, a numerical progress indicator reads '2 / 5'.
A screenshot of an interactive flashcard interface within the Canvas LMS. The central element is a large, white rectangular card prominently displaying the text: 'They have a modified wrist bone that acts like a thumb to grasp bamboo.' This main card is flanked by smaller gray rectangular buttons containing a left-facing directional arrow and a right-facing directional arrow. Positioned directly beneath the card is a circular icon of rotating arrows, indicating the function to flip the card. At the very bottom center, a numerical progress indicator reads '2 / 5'.

Content Panel

The Content panel allows you to edit certain properties of your flashcards.

  1. Flashcards: Type a number in the textbox to increase/decrease the number of flashcards in your set, and press Enter. Increase/Decrease the number of flashcards using the ➕ / ➖ buttons.
  2. ➕ and ➖: Add or remove a flashcard.
  3. Move: Click and drag the six vertical dots to move a flashcard item up/down.
  4. Text: Update the flashcard name text, or click the ✖️ icon to clear the text completely.
  5. 🗑️ Delete: Remove a flashcard.
A screenshot of the DesignPLUS Sidebar's "Content" panel for the Flashcards tool, displaying configuration options and a list of five flashcard items annotated with yellow callout letters A through E. The panel features a blue expandable header labeled "Content". In the top control row, callout A points to a numerical input field showing '5' next to the label 'Flashcards', while callout B points to a prominent plus button for adding new cards. Below this is a stacked list containing text input fields for five card terms: 'Carnivorous Herbivores', 'A Built-in Bamboo Grasp', 'Massive Appetites', 'Conservation Success', and 'Unique Vocalizations'. The first item in the list features three specific callouts: callout C points to a vertical grip icon on the far left used for reordering, callout D points to a gray circular button with an 'X' inside the text input field, and callout E points to a red trash can delete icon on the far right.

Style Panel

The Style panel of the Flashcards tool allows you to customize the look of your flashcards.

  • 🎨 Background Color: Change the color of the background behind flashcards, not the color of the flashcards themselves.
  • Font Style: Select a font style for your flashcards.
  • Controls Corners: Select between Square and Rounded. This affects the area below the flashcards with the Shuffle, Flip Sides, Reset buttons and the timer.
  • Controls Outline: Select between None and Outline. This affects the area below the flashcards and also adds an outline around the entire flashcards interface.
  • ☑️ Hide the solution from students: Works in conjunction with the Input Check option in the Advanced panel.
  • ☑️ Hide the controls from students: Hides the Shuffle, Flip Sides, and Reset buttons.
  • ☑️ Hide the timer from students: Hides the timer displayed at the bottom right corner of the flashcards interface.
A screenshot of the DesignPLUS Sidebar Style panel for creating Canvas course flashcards, featuring the blue 'Style' header bar. The panel includes an icon-labeled button for selecting a 'Background Color', followed by a 'Font Style' selection area that shows a scrollable list with visible options including 'Default', and three fonts rendered in their actual style: a thin, all-caps 'AMATIC SC', a script-like 'Architects Daughter', and a clear 'Arial'. Below this, controls for card elements are presented: segmented buttons for 'Controls Corners' with 'Square' (currently selected) and 'Rounded' options, and buttons for 'Controls Outline' with 'None' (currently selected) and 'Outline' options. The panel concludes with three empty checkboxes, each with its respective label: 'Hide the solution from students', 'Hide the controls from students', and 'Hide the timer from students'.

Advanced Panel

The Advanced panel contains additional settings for your flashcards that can give modify the way your flashcards function for your students.

  • Card Order: Select between Default and Shuffle. Optionally, you may ☑️ Hide the shuffle button from students.
  • Visible Side: Select between Term and Description. Optionally, you may ☑️ Hide the flip sides button from students.
  • Check Answers: Select among None, Self-Check, and Input Check.
Self-Check
Input Check

The Input Check option removes the option to “flip” cards over. Instead, a student inputs his/her answer into a textbox and clicks a ✔️ Check button (or presses Enter) to see if the answer is correct/incorrect.

A correct response will display a green outline around the textbox, and a ✅ checkmark icon will display on the progress bar.

IMPORTANT NOTE: There is no integration or tie-in to the Canvas Gradebook for Input Check Flashcards.

A screenshot of a DesignPLUS-generated interactive math flashcard interface on a Canvas LMS content page. The current active flashcard, which is the first of five, shows the problem '3 + 4' above a text input box containing the answer '7' outlined in green. Previous and next navigation buttons with left and right arrow icons are positioned on either side of the card. Below the card is a sequence of circular status indicators: a green checkmark marked with a blue underline indicating it is the active card with a correct answer, followed by a red 'X', and then two grey-outlined empty circles. The text '1 / 5' is centered at the very bottom of the interface.

An incorrect response will display a red outline around the textbox along with the correct answer. A red ✖️ icon will display on the progress bar.

This screenshot shows an interactive math flashcard interface on a Canvas LMS content page, displaying the second card of five. The central flashcard features the arithmetic problem '7 - 2'. Below it, inside a text input field outlined in red, the user has entered '6'. A feedback message in red text directly beneath the field provides the correct information: 'Correct answer is 5'. Large, light-grey buttons with chevron arrows are positioned on the left and right sides of the main flashcard area for navigating between cards. Progress and results are tracked below the card with a row of icons: a green checkmark circle for a previous correct answer, a red 'X' circle with a distinct blue underline beneath it (indicating the current incorrect card), and three subsequent empty grey-outlined circles representing future, unanswered cards. The text '2 / 5' is centered at the bottom, confirming the current position in the stack.

  • Data Tracking Title: Enter a name if you would like to track anonymous data about the Flashcards interactive tool.
  • ☑️ Disable data tracking for this interactive: Select this checkbox if you do not want to view anonymous data about the Flashcards interactive tool.
  • ☑️ Show feedback when 100% correct: Create a custom message for your students.
  • ☑️ Show feedback when incorrect: Create a custom message for your students.

When either of these checkboxes are selected, areas to edit the feedback text will display within the RCE.

A detailed screenshot from the DesignPLUS Flashcards tool within the Canvas LMS editor displays an expanded view of an editing interface for a specific math problem. Within an expanded grey-purple container, a math problem is visible with "6 + 2" on the left and a box containing "8" on the right. Directly below this problem, specifically configured for feedback, are two color-coded rows. The upper row is dark green with a white checkmark icon on the left, containing a text field with the placeholder text 'Feedback when 100% correct.' and a small magenta dashed label box with the word 'Feedback' in its upper-right corner. The lower row is red with a white 'X' icon on the left, holding a text field with the placeholder text 'Feedback when incorrect.' and a similar magenta dashed label box, also marked 'Feedback'. This view confirms the placement and content of the spaces provided to add correct and incorrect feedback for the Input Check flashcard interaction.

From a student perspective, correct or incorrect feedback will look similar to the following:

Correct Feedback
Incorrect Feedback

If a student does not get all questions correct, he/she will see your custom feedback message in a red area below the flashcards.

A Try Again button returns all questions as unanswered. It does not keep track of questions that were answered correctly.

A screenshot of a Canvas LMS content page shows the completed final state of an incorrect interactive math flashcard sequence, demonstrating the incorrect feedback display for the Input Check feature. The central flashcard area displays the math problem '6 + 2' above a red-outlined input field containing the incorrect response '2'. Directly beneath this field, red text explicitly states, 'Correct answer is 8'. Previous and next navigation chevrons flank the main card. Below the card, a progress track of five icons shows two red X's, two green checkmarks, and a fifth red X with a blue underline indicating this last incorrect card, and centered text reading '5 / 5'. At the bottom, a detailed feedback panel contains a grey 'Try Again' button with a reset icon. Next to it is a 'Score' section with a progress bar and text '2/5', a timer showing 'Time 0:20', and an information icon. The panel includes a text box marked by a red 'X' which displays the generic configured feedback message: 'Feedback when incorrect.'.

  • ☑️ Hide “Next” until all interactives completed: The “Next” button to advance to the next page with your course will not display until all interactives on the page have been completed.
A screenshot of the DesignPLUS Sidebar 'Advanced' panel for creating Canvas course flashcards. Under the blue 'Advanced' panel, there are three distinct configuration blocks, each with a dark grey header: 'Card Order' features a segmented control with 'Default' (currently selected) and 'Shuffle' buttons, plus a checkbox labeled 'Hide the shuffle button from students'; 'Visible Side' includes buttons for 'Term' (currently selected) and 'Description', along with a checkbox labeled 'Hide the flip sides button from students'; and 'Check Answers' contains buttons for 'None' (currently selected), 'Self-Check', and 'Input Check'. Below these blocks is a 'Data Tracking Title' text input currently displaying 'Flashcards 1', followed by four unchecked boxes with the labels: 'Disable data tracking for this interactive', 'Show feedback when 100% correct', 'Show feedback when incorrect', and 'Hide "Next" until all interactives completed'.

Additional Resources

Flashcards

Flashcards: [New] DesignPLUS User Guide