What it is

vlcards is a simple browser-based program to show flashcards with textual, audio or visual content. It is freely available for personal use and contains no ads or cookies. The program is extensible and editable, so users can create new card decks or edit existing ones.

How to use it

The framework of the program is a single web page. When it is opened you will see something like this:

The page includes the cards, some navigation and control buttons and some instructions. In this example, the first card will have the digit 1 on it. This is the face. Clicking on the card will show its back, which will look like this:

The two arrows below the card navigate forward and backward in the deck. At the end of the deck the start is shown again, allowing a user to loop continuously. Similarly, when moving backwards, after the start card is passed the next one shown is the last card in the deck.

Below the arrows are two toggle buttons. Clicking on the first one (Shuffle cards)) puts the cards in random order and replaces the button by the Unshuffle cards button which puts the cards back in their regular order.

Below the shuffle button is one labelled See back first. Clicking on it ensures then when subsequent cards are shown the back is shown first and the button is replaced by its opposite (See front first) which when clicked reverts to showing each card's front first.

Finally, the About button opens a window with instructions about using the software.

Multimedia cards

vlcards has been designed to allow cards to show text, like we have seen above, but also to show images and play sounds in any combination.

For example, the animals card set shows text and images. When it is loaded the front of a card will have text:

while the back will have an image:

In the case of the animals2 card set, the first page shows a speaker icon and a sound is played:

and if the card is clicked, the corresponding image appears:

Repeatedly clicking on the card will alternate between playing the sound and showing the image. In this way, no written language skills are needed, a useful trait in the case of cards for children or early learners of a second language.

How to edit or create cards

vlcards is easy to edit either to add or remove cards from an existing deck or to create a new deck. This is possible because the content of cards themselves is specified inside the html file as an array, essentially a kind of table. For example, a simple version of the html file (click here to see it) contains an array that looks like this:

In JavaScript, an array is surrounded by square brackets ([]). It can also have a name. So here the array name (cards is followed by an equal sign then the opening square bracket. Also, an array can include other arrays, called subarrays, inside it. So the cards array contains one subarray for each card. Each subarray has two elements, separated by a comma. Each element is enclosed in double quotes. The first represents the face of the card and the second the back.

Each subarray is separated from the next one by a comma. Note that the last subarray has no comma. Finally, the main array is closed by a semi-colon (;).

Changing this cards array can be done with an editor. (N.B. NOT a word processor, which enters many invisible codes in a text.) Free text editors are included in all operating systems, including Notepad in Windows, TextEdit in Mac and a whole range of editors like nano, vi, emacs and many others in Linux and Unix.

In a nutshell, one opens the vlcards.html file with a text editor, moves to the cards array and changes it by editing the contents of a line, adding lines or removing them. Consider the following modified version of the cards array:

When this modified file has been saved and opened in a browser, the back of the first card now looks like this:

It's as simple as that! Any new or edited version should be saved under a new name but should retain the .html suffix. The new version may then be posted on a website.

Because multimedia cards need to combine various files, each card deck is placed in a directory (sometimes called a folder) with the following format:

The directory and the html file should share the same name while the media files can have any names since they are called by the html file. With respect to format, vlcards currently requires that audio files have the mp3 format and image files the jpg format.

Here is an image of the file structure for the animals card deck provided as a sample on this site:

Inside a directory, the .html file uses its cards array to provide the menu for how to use multimedia files. So, for example, the animals.html file contains a cards array that looks like this:

Sharing policy

Like all the software on the VinciLingua site, vlcards is freely available for personal use. Users should feel free to share the software but should not remove mention of the original author.

Users are encouraged to share stories of use by writing to vincilingua@protonmail.com. We are particularly interested in cases of use involving teaching and learning of underresourced languages. Suggestions for improvement are welcome, although we cannot commit to making any requested changes.

For-profit institutions (including those that charge for teaching and learning like colleges, universities and online teaching entities) who wish to incorporate vlcards in courses should contact vincilingua@protonmail.com to discuss terms of access.