Github download link

First, this new glossary format is not intend to replace your existing flashcard module or flash card lesson. It combines the flash card and glossary together as a tool to help students memorise terminologies. Users can click on the link (or anywhere on the card – this is on my to-do list:) ), it will flip the card and show them the description of that concept.

One big advantage of using this format over old formats is this is more interactive, and students will have incentives to add more entries as they can use this glossary later on to help their study new concepts.

It has some limitations at the moment, such as the card border is fixed, if you insert an image that is bigger than the card size, you won’t be able to flip the card back to front; the other concern I have is I used a non-official javascript library, jQuery. In terms of page loading efficiency, it might not be the best approach to do, but it’s much easier to find some useful plugins in jQuery than in YUI.

To install this new glossary format:

1. Unzip the flashcard zip file, and drop the folder to mod/glossary/formats/.

2. Modify style.css file under mod/glossary/, add the following css style sheets.

/** Flashcard styles **/

.quickFlip{height:216px;width:322px}

.backPanel,.frontPanel{text-align:center}

.quickFlip .frontPanel,.quickFlip .backPanel{background:#F7F7F7;-moz-border-radius:8px;-webkit-border-radius:8px}

.quickFlip .frontPanel{border:1px outset #ddd}

.quickFlip .backPanel{border:1px outset #ddd}

.frontPanel .nolink {padding-top:40px;}

.backPanel .nolink {padding-top:40px;}

3. Add the following line to your lang file under mod/glossary/lang/en/ folder

$string['displayformatflashcard'] = ‘Flashcard style’;

4. You’re done:)