More About Online Flashcards

This type of web page offers an electronic version of flashcards, and can simulate almost all of the features that make 3x5 cards such a time-tested and valuable learning tool:

Electronic flashcards have certain advantages over their cardboard counterparts:

Online flashcards are designed to serve the widest possible audience of computer users:

Adapting Online Flashcards for Other Information

Because these online 'flashcards' are simply JavaScript-enhanced web pages, they can be easily adapted to other types of information. If you have even a basic understanding of HTML, adapting them is fairly straightforward. All you have to do is simply save the HTML file to your hard drive and then look at the source code in any text editor (i.e. open the HTML file in your word processor). What you will see at the top of the file will look something like:

<HTML><HEAD><TITLE>Swahili Vocabulary Flashcards</TITLE>
  <script language="LiveScript">
     // (c)1997, Andy Lyons,
 var NumWords = 169
 var Heading = "Swahili words - group 3 verbs"
 var Descript = "Use these flashcards to improve your knowledge of Swahili."
 function InitVars() {
   q[1] = "Mkango u-ku-thamangitsa mbuzi."
   a[1] = "The lion is chasing the goats."
   q[2] = "Mbuzi zi-ku-thamangisidwa ndi mkango."
   a[2] = "The goats are being chased by the lion."
   q[3] = "Pa mpando pa mene pa li chisoti...."
   a[3] = "On the chair on which there is hat...."
   q[4] = "M'museum m'mene muli artworks muli moto."
   a[4] = "In the museum in which there are artworks there is a fire."
   q[168] = "Ndi li ndi mzanga wamkazi"
   a[168] = "I have a female friend."
   q[169] = "Tsiku lanu la kubadwa."
   a[169] = "Your birthday ( of to be born)."

As you can see, this is not too difficult to modify, even if you only know a little bit of HTML. Simply adapt the parts that look like they need adapting, and leave everything else alone.

First, change the text that's inbetween the <TITLE> and </TITLE> tags. That text will appear in the title bar of the user's browser. Then change the value of NumWords variable (which is 169 in the example above) to the number of cards you want to have on the page. Next change the value of the Heading variable and the Descript variable, both of which will appear at the top of the page. Then, following the pattern above, put in new values for the q[] array (questions) and a[] array (answers). Your values can have any alpha-numeric character except double-quotes. If you need to use double quotes, simply type two single quotes like this ''. To insert a line break, use '\n'. For example a[1] = "First line\nsecond line". See below for an MS Word macro that will help you write the lines to fill the q[] and a[] variables if they're in an MS Word table.

Beyond that nothing else really has to be changed. Of course the actual appearance of the flashcard interface (i.e. the text that appears on the buttons, the labels, additional text add the bottom, etc.) can be modified by scrolling down and simplying changing things that look like they need changing. For example, 'View Swahili' can be altered to 'View Equation' wherever you see it. With common sense and a bit of trial and error, it will be easy to create new flashcards.

Before you can test your modified HTML files, you have to make sure that the graphic images (e.g., the menu bar and the tape player buttons), the flshcard.js file (which is a text file which contains all the JavaScript functions), and the f_instr.htm file (i.e., instructions) are all saved in the same directory as your flashcard HTML files.

Note if the first time you put them on line, instead of seeing the flashcard you see the js file with all the JavaScript functions, send this note to your webmaster.

See below for an example of a variety of type of information that can be drilled with online flashcards.

Initially show:
English only
Swahili only
Now showing: Tagged: Total tagged:

View opposite side before moving:
Scratch pad - if you want you can type your answer here

An MS Word Macro to Help Create New Online Flashcards

The most time-consuming part about creating new flashcards (i.e. altering an HTML file so it will display the new information) is writing the lines for the q[] array and a[] array (see above for example). However there is an easier way to do it. I have written an MS Word macro that will take a 2-column table in MS Word, and convert it to the lines of code for the HTML file. The first column of the MS Word table should have the questions (i.e. the front side of the flashcard which will appear on the left), and the second column should have the answers. For example, if you have a table in your MS Word document that looks like this:

famish to cause to suffer from hunger
farinaceous containing or rich in starch, having a mealy texture or surface
faradic of or relating to an asymmetric alternating current of electricity produced by an induction coil
fandango a lively Spanish or Spanish-American dance in triple time that is usually performed by a man and a woman to the accompaniment of guitar and castanets
familism a social pattern in which the family assumes a position of ascendance over individual interests

Then after you run the macro it will look like this:

   q[1] = "famish"
   a[1] = "to cause to suffer from hunger"
   q[2] = "farinaceous"
   a[2] = "containing or rich in starch, having a mealy texture or surface"
   q[3] = "faradic"
   a[3] = "of or relating to an asymmetric alternating current of electricy produced by an induction coil"
   q[4] = "fandango"
   a[4] = "a lively Spanish or Spanish-American dance in triple time that is usually performed by a man and a woman to the accompaniment of guitar and castanets"
   q[5] = "familism"
   a[5] = "a social pattern in which the family assumes a position of asendance over individual interests"

Then you can just copy and paste the text into your HTML file.

To install the macro onto your version of MS Word, simply click on the file below, save it to your hard drive when prompted, and then open the file in MS Word and follow the directions. It will add a menu item to your Tools menu so that whenever you need to run the macro you can just choose it from the Tools menu.


Online JavaScript Flashcards were written by Andy Lyons