Brainscape's flashcard authoring system provides a convenient set of tools to help guarantee that your flashcards will look beautiful on any screen or device. Below are some tips to help you navigate your options on the web or mobile (scroll down). Please feel free to drop our tech support team (support@brainscape.com) an email if you find other shortcuts not included in this article!
WEB EDITOR TIPS
Basic Flashcard Formatting
If you are typing a flashcard using the "advanced" editing option in Brainscape's web editor, you will see a basic formatting toolbar appear on that side of the flashcard, supporting options for bold, italics, links, bulleted lists, and numbered lists.
You can easily highlight any passage of text and transform it into the format you'd like, by simply clicking the appropriate icon.
However, unlike many apps that may show you the "formatted" text immediately after clicking the icon, Brainscape's editor will actually show you the formatting "code" that you can edit in-line. (Navigating away from the text field, in contrast, will show you the rendered text.)
Being able to manipulate this basic code will allow you to edit your flashcards' format from the Brainscape mobile app, as well as helping you avoid and troubleshoot any formatting issues, as well as allowing.
Below is a cheat sheet for Brainscape's formatting code syntax (which is based on a version of the popular new "markdown" protocol):
Format |
Brainscape Syntax |
Rendered Output(when done editing) |
Italics Single asterisk with no spaces between asterisks and text. |
Hi, I am *italics* |
Hi, I am italics |
Bold Double asterisks with no spaces between asterisks and text. |
Hi, I am **bold text** | Hi, I am bold text |
Numbered List Note: Only the first number matters. The trailing items will increment regardless of the number in the source. |
10. Short list item 11. Longer item that should NOT wrap under the number once it's rendered |
|
Bulleted List New lines starting with a hyphen (or asterisk) and a space. |
- Short list item - Longer item that should not wrap under the bullet once it's rendered |
|
Hyperlink [text](URL) |
Hi, I am a [link](https://brainscape.com) | Hi, I am a link |
Code Block Start the block with a line that contains three backticks (also called grave accents) and end the block with the same. Note: The styled version will have a border and a background color to set it apart. |
``` # Output "I love Ruby" say = "I love Ruby" puts say ``` |
# Output "I love Ruby" say = "I love Ruby" puts say |
Code Span Wrap the code span in a single backtick (also called a grave accent). |
This is a `code span`. | This is a code span. |
Superscript Wrap the characters to superscript with the <sup>2</sup> tags. |
Area = πr<sup>2</sup> | Area = πr2 |
Subscript Wrap the characters to subscript with the <sub> 2</sub> tags. |
Water: H<sub>2</sub>O | Water: H2O |
Fill in the blank Use backslash after each underscore |
First Name: _\_\_\_\ |
First Name: _____ |
Escape auto-formatting If you want your text to show up as is, without the markdown formatting, you can escape the formatting characters with a backslash. |
This is not a \`code span\`. | This is not a `code span`. |
Underlining You can easily underline any words (not characters), by placing an underscore on either side of the word you'd like to underline. (Can not be shown as an icon in the toolbar due to a technical reason in markdown, but supported nonetheless.) |
_Underline_ | Underline |
Card Media
Also note that you can easily add an image or sound to any flashcard, by clicking the respective icon on the appropriate side of the card. Media can be dragged or uploaded from your computer.
Image files must be in .png, .jpg, or .gif format, with other formats being considered for the future. Images are scaled down to fit inside the flashcard but can often be expanded by clicking or tapping for full size. For our full media guide, click here.
Sound files must be in .mp3 format. When you or other users are eventually studying your flashcards, the sound playback happens immediately as soon as that side of the flashcard is revealed, and can be replayed manually on demand.
Foreign Language Characters
Brainscape supports all foreign language characters included in standard UTF-8 conventions. All you have to do is either configure your computer's (or mobile device's) keyboard into the foreign language of your choosing (typically found in your system preferences), or -- for just a one-off usage of a foreign character -- use the appropriate foreign character keyboard commands (<---- see our handy guide).
Advanced Card Formatting
If you'd like a bit more control over your relative font size and alignment -- in order to make key points more salient while subordinating others -- you may prefer Brainscape's Advanced editing view.
In Brainscape's web Editor, you can easily switch to the Advanced view by clicking the Advanced icon above your flashcard canvas, which will reveal several additional "fields" that were previously hidden from your view.
You may notice that Advanced cards do not allow you to manually adjust font size or alignment. The reason is that while those old manual font choices may have sometimes looked acceptable on one device (e.g. a large web monitor), they ended up looking terrible on other devices (e.g. a small monitor or an iPhone), and were thus harder to use as a study tool.
Brainscape's new optional "fields" now ensure that all your flashcards will appear easier on the eyes and brain. All you need to do is determine the correct structure of the information on your cards, and Brainscape will take care of the rest:
Flashcard Field |
Size / Alignment |
Purpose |
Example |
Prompt | Small / Top-left | Explain what should the learner do with the content in the Main Question field |
Define: |
Main Question | Variable size / Centered (if short), else Left-aligned | A practice test question, or perhaps just a vocab word | temerity |
Clarifier | Small / Centered | A short rephrasing of the question, such as a translation, date range, or pronunciation | (tuh-meh-rih-tee) |
Main Answer | Variable size / Centered (if short), else Left-aligned | The primary answer or definition | (n.) reckless boldness |
Footnote | Small / Left-aligned / Below the image | Supplementary info that isn't quite as salient as the main Question or Answer, but is nice to know. e.g. a sample sentence | She had the temerity to suggest I lose weight |
And remember that all of these fields are optional. You can use only one or two fields, and on only one or two flashcards, if that's all you need. But you can also feel free to make all your flashcards as richly organized and "field-ified" as you'd like. Go nuts!
Super Advanced
If for whatever reason you need to troubleshoot your flashcards' format more deeply, or if you want to edit them more flexibly from the Brainscape mobile app, you can reveal all of their code syntax, including the "labels" for the fields described above. For this option, you can click on the
Note the syntax rules for the fields described in the previous section:
Flashcard Field |
Syntax |
Example |
Prompt | Start a row of text with a # and a space | # Define |
Main Question |
[No special syntax needed] | temerity |
Clarifier | A blank row of text after the Main Q or A, followed by a new line of text with a pipe | and a space. | | (tuh-meh-ri-tee) |
Main Answer | [No special syntax needed] | (n.) reckless boldness |
Footnote | Start a row with the text ##Footnote and add a line break |
##Footnote She had the temerity to tell me to lose weight |
Nested List |
Add four leading spaces before the item you want nested. New lines starting with a hyphen (or asterisk) and a space. 1. Types of cats: * Siamese * British Shorthair * Persian |
1. Types of cats:
|
The raw formatted text above will be rendered on the actual flashcard as shown below:
Editing on the Mobile App
You may take advantage of a streamlined editor on the mobile app for those classes you have created.
If you are editing your flashcards on mobile for a class that you have created, you can access the editor by clicking the pencil icon on the top of the card, or clicking the "+" from the card list view.
At the bottom of the card view, there is an icon tray that allows you to:
1. Add an image from your photos
2. Access your camera to take a picture to add to the card
3. Access image files to be added to the card
4. Add audio
5. Access tool tips for formatting the text
This handy toolbar (highlighted in green) allows you to apply some advanced editing to your flashcards on the app.
Additional Features
Many users have requested additional flashcard editing features such as tables, custom font colors, an equation editor, and other advanced tools. These may be on our long-term road map.
You can use AI to create your flashcards on our mobile app and you can learn more here.
We are constantly considering new ideas and weighing their priority with the thousands of other projects on Brainscape's development backlog. Please let us know what features are most important to you! Be sure to check out our feature forum and suggest or vote for your top features!
Still have questions and can't find the answer? Be sure to email our Tech Support Team (support@brainscape.com).
And for more FREE study advice don't forget to check out the Brainscape Academy.
Comments
13 comments
Are these features only available on the pro version? Or available for everyone?
As we roll out the new 2022 editor, the formatting features (e.g., bold, italics, generic list bullet) will be available to everyone. Adding images and sounds is only available to Pro users.
Chuckee@Brainscape
Ok thank you! I'm asking because I am using the free version with some students. My account does not have the ability to use bold, italics, etc... but some of their accounts do. Couldn't figure out how they had the tools and I didn't when we are both using the free version. Do you have an ETA of the rollout?
Hi Russell, thanks so much for the great questions! Feel free to reach out to our help desk (support@brainscape.zendesk.com) and request to be added to the beta test for the new editor. Enjoy!
I noticed that the markdown language allows to insert images within the content (see the explanation here: https://www.markdownguide.org/basic-syntax/#images-1).
Will you support it soon?
And will you support more and more syntaxes of the markdown language in the near future?
Thanks a lot!
@lfalipou, great question! Yes, we will be looking at other markdown editing in future releases. Stay tuned for updates. In terms of adding images, we already have that feature in our editor, and you can add an image or audio file on the Q/A side of flashcards. For any other questions or help, feel free to reach out to our Help Desk, or post your comments in our Community page. Thanks!
@Dholtz
I meant inserting one or more pictures wherever we want rather than one single image always at the bottom.
And by the way, do you have an ETA for supporting SVG images?
Why was the option to underline removed?
@Squirreloffers, please see the update in the article - you can still add underlining. Further questions can be directed to our Help Desk (support@brainscape.zendesk.com), and any new features requests can be posted in Community.
Hi !
Thank you.
I would like to add sounds and images directly to the flashcard, without having to save them on the computer first. Is this possible? Thanks.
@Sara, our help desk will be in touch, but in the future, please reach out directly to support@brainscape.zendesk.com or search Brainscape Help Center for answers to your questions.
How does one add lettered lists in markdown? I have no experience with coding/ scripting from previously. Any workaround to manually align text?
Article is closed for comments.