Creating a Simple Flashcard Set in HTML5

What you will learn:

Prerequisites:

Required time:

1-2 hours

Notes

This will be a great project for anyone starting out in HTML5 who wants a simple and fun project to build. It’s a
simple flashcard set that you can use on any website. Our sample will be English/Spanish flaschcards - you see a card with the English word on it and click on it to change it to the Spanish word. We will make it easy to add as many words as you want.

If you just want to grab the source code without following the tutorial, then that’s fine, too.

 

html

First, we will set up the html document. You don’t need any special software, you can simply use any text editor such as Textpad or Wordpad. Open your text editor and type:

 

Lines 2-6: The HEAD of the document references the external files that we will use:

- A CSS document, which we will create to control the look and feel of the page
- The JQUERY library, which adds functionality to the Javascript language. JQUERY is at common
Javascript library used by web developers. You can download JQUERY from jquery.com or get it from the project files (see the source code above). For it to work with this code, you must rename it to jquery.min.js and it must be in the same folder as our html file.
- source.js will hold the coding for our activity; we will write this shortly

Lines 7-12: The BODY of the document contains three 'div' containers, which we can refer to later via their unique ids. The first is the title of the activity (line 8). Next is the card area, where we will display the cards on the screen. Finally, we have the button area, where we will place the NEXT button for the user to progress through the flashcards.

Save this document as ‘index.html’ and let’s continue.

CSS

As with our html document, you can use a simple text editor to create our CSS document. This document will control how the flashcards and the web page look.

Lines 1-7: We ensure there is no extra margin or padding on the page. We set it so that the user cannot select text from the page (since in a game, it seems strange if they can accidentally select text when clicking). The different code statements are for the different browsers.

Lines 8-11: We wish to use a specific font for the activity. This font is called Montserrat and can be downloaded from Google Fonts for free (https://fonts.google.com/specimen/Montserrat) or you can just grab it from the source code package at the top of this page. The font must be named Montserrat-Medium.ttf and it must be in the same folder as the html file.

Lines 12-17: This is the formatting for the page/activity title. Notice on line 15, how we specify our Montserrat font, but we also specify a second, generic, font in case the first one is somehow not viewable on the user's device.

Lines 18-27: This defines the space where the cards will be displayed. Note that the width is 300px (actually 306px, including the border). This means that the entire activity can be displayed on a smartphone without any further coding as the smallest width for smartphone screens is generally 320px; The purpose of line 24 is to give slightly rounded edges. Line 26 is extremely important for our activity. It means that any content spilling outside of the box will be hidden from view. This is basically how the activity will work - when you click on the first card, the second one (hidden underneath) will slide into view, and the first one will slide out of view.

Lines 28-38: These lines define how the basic card will look, except for the background color, which we will control via our javascript code. Note that the statement begins with a dot (.) rather than a hash (#). This signifies that we are defining a class rather than an id. A class is designed to be used with more than one element on the page. Note that on line 32, we define the position as absolute. Its container, #cardArea, has a line that defines the position as relative. This enables us to position the card precisely relative to the container and, therefore, allows us to animate it later.

Lines 39-55: These two statements provide the formatting for our NEXT button, which we will use to move from one question to the next. Lines 53-55 will give a simple effect when the cursor is over the button, signalling to the user that it can be pressed.

Lines 56-61: We need to provide a message when the user has completed the series of flashcards. These lines format that message.

Save this file as main.css. You can test now, by opening index.html in a browser. You should see the title and a blank white square where the flashcard will go.

data (json)

We will hold our data in a .json document, making it easy to edit later, because you only need to edit this document to add or change questions. Once again, you can create this in a text document. Simply create a new text document and rename it activity.json, then open it and add the following lines:

The nice thing about using .json in this way is that it is human- and machine-readable. Someone with no coding expertise can edit the document and change the activity. We will write the code in such a way that if you wish to add more cards, you can just add them on at the end of the document (following line 19). However, you must follow the formatting very strictly - do not miss out a comma or quote mark.

 

javascript

Now for the final part - the code. Once again, simply open a text editor, such as Notepad, and create a document called source.js, then add the following code:

01$(document).ready(function () {
02
03 var colorArray=["#019875","#1E8BC3","#D91E18","#D35400","#8E44AD","#C0392B"];
04 var cardState;
05 var currentQuestion=0;
06 var qbank=new Array;
07
08 loadDB();
09
10 function loadDB(){
11  $.getJSON("activity.json", function(data) {
12   for(i=0;i<data.questionlist.length;i++){
13    qbank[i]=[];
14    qbank[i][0]=data.questionlist[i].cardfront;
15    qbank[i][1]=data.questionlist[i].cardback;
16   }//for
17   beginActivity();
18  })//gtjson
19 }//loadDB
20
21 function beginActivity(){
22  cardState=0;
23  var color1=colorArray[Math.floor(Math.random()*colorArray.length)];
24  $("#cardArea").empty();
25  $("#cardArea").append('<div id="card1" class="card">' + qbank[currentQuestion][0] + '</div>');
26  $("#cardArea").append('<div id="card2" class="card">' + qbank[currentQuestion][1] + '</div>');
27  $("#card1").css("background-color",color1);
28  $("#card2").css("background-color","#34495E");
29  $("#card2").css("top","200px");
30  $("#cardArea").on("click",function(){
31   if(cardState!=1){
32    cardState=1;
33    //togglePosition();
34    $("#card1").animate({top: "-=200"}, 150, function() {cardState=0;togglePosition();});
35    $("#card2").animate({top: "-=200"}, 150, function() {togglePosition2();});
36   }//if
37  });//click function
38  currentQuestion++;
39  $("#buttonArea").empty();
40  $("#buttonArea").append('<div id="nextButton">NEXT</div>');
41  $("#nextButton").on("click",function(){
42   if(currentQuestion<qbank.length){beginActivity();}
43   else{displayFinalMessage();}
44  });//click function
45 }//beginactivity
46
47 function togglePosition(){
48  if($("#card1").position().top==-200){$("#card1").css("top","200px");};
49 }//toggle
50
51 function togglePosition2(){
52  if($("#card2").position().top==-200){$("#card2").css("top","200px");};
53 }//toggle2
54
55 function displayFinalMessage(){
56  $("#buttonArea").empty();
57  $("#cardArea").empty();
58  $("#cardArea").append('<div id="finalMessage">You have finished the activity.</div>');
59 }//final message
60
61});

Lines 1 & 61: Everything within these lines will execute as soon as the page is fully loaded (the document is ready).

Lines 3-6: These are the variables that we will use. First we have an array that holds references to various colors, which we will use at random for the flashcards. These colors are all from the excellent site: http://www.flatuicolorpicker.com/.

Next we need a variable to hold the state of the card. More on this later. We need to track the current question number so that we know when the activity is finished. And we need an array to hold the data that we will load in.

Line 8: This calls the first of our functions, to load the data from our .json file.

Lines 10-19: We use the .getJSON command to load our .json file and then run the following code once it is successfully loaded. We loop through each of the sets of data and assign it to qbank, which we further define as a two-dimensional array on line 13. This means that qbank[0]=["cat","gato"] or that qbank[0][0]="cat" and qbank[0][1]="gato", for example. This is the way we will reference our data. Once this is established, we call the function beginActivity().

Lines 21-38: Firstly, we set the variable cardState to 0. It will be zero when it is ready to be clicked and it will be 1 when it is undergoing animation. We do not want to be able to click the card while it is moving and this is the reason we assign it a state.

Next we choose a random color from our list. Then, on line 24, we ensure that the card is blank before adding content.

On lines 25-26, we add the content into our "two" cards based on the current question number. At this moment, the two cars will be stacked on top of each other. Note that the two cards have different IDs ("#card1" and "#card2"), but the same class (".card");

Lines 27 - 29: We apply our randomly chosen color to card 1 and a standard dark grey color to card 2. Then, we position card 2 200px from the top of the container (cardArea). Because the container only has a height of 200px, this means that it is hidden from view, but located directly underneath card 1.

Lines 30-37: This code deals with a click on the card, but only if the state does not equal 1 (line 31). We then immediately set the state to 1 and we will reset it to 0 as soon as the animation is complete. Because we have actually two separate cards, we need to apply animation to both of them (lines 34-35). They will move upwards by 200 pixels within 150 milliseconds, and then we will toggle the position if necessary. To toggle the position, if either card is located directly above the card area, we will move it below the card area, so that we can repeat the animation from the fixed position. We do this in two separate functions, lines 47-49 and lines 51-53.

Lines 38-44: Now, we turn our attention to moving on to the next flashcard. We use line 38 to increase the counter, currentQuestion, that we use to track the question we are on. We then place the button (line 40) and put in code to track when it is clicked (lines 41-44). If we have not depleted the question bank, we call the current function again and it will display the next question (line 42), but if we have depleted the question bank, then we call a function that will display a message to tell the user the activity is finished (line 43).

Lines 55-59: As mentioned, we need to inform the user that they have reached the end of the activity. First, we clear the current components off the screen (lines 56-57), then we display the message (line 58). We take a little shortcut here and simply display it where the card was displayed.

And that’s it! Save the javascript file as source.js and test it out and see if it works. When testing offline, use Firefox (Chrome will block .json when used offline.)

If you’re still having trouble getting your head around how it works, try temporarily removing line 26 of the CSS (overflow:hidden;) and you will be able to see the ‘mechanics’ in action.

 

troubleshooting and other versions

If you have trouble getting it to work, check the following:

• You should have six files in the same folder. These should be: index.html, main.css, source.js, activity.json, jquery.min.js and Montserrat-Medium.ttf.
• When working with JSON, use Firefox when testing offline. Because of security features, Chrome will not work. However, Chrome WILL work when online.
• Some website providers have JSON turned off by default. However, you can turn it on by changing the settings under MIME types and adding the extension (or asking the support to do this). If this is not an option, you can grab a version HERE which does not use JSON.
• For a version where the questions are randomized, grab it from HERE.

A final word: You can find more tutorials of this kind here: flashbynight.com/tutes. And please check out the games and stuff at flashbynight.com. If you like anything you see, please like it on Facebook or post it on Twitter or any other social media.

Happy Coding!

 

 

blog  |  twitter  |  tutes | about