Skip to content

Making Personal Flashcards

Jump to bottom Edit New page
tararoys edited this page Jul 16, 2012 · 5 revisions

It is possible to use Khan Academy to make your own flashcards with photos, but it is a little tricky. You have to use variables to compose an image tag.

In order to be able to load different pictures each time we load a new question, we need the ability to swap out the pathname in an image tag. Since it isn't possible to put inside an img tag, we need to use vars to stitch together a string that becomes our image tag.

So let's start stitching. Let's create a variable that is a string for the unchanging bit of the image tag.

        <var id="IMG">"img class=flashcard src="</var>

Now let's create a variable for the changing bit of the image string.

        <var id="F_NAME">randFromArray([
        ["CreativeCommonsPlants/AlpineHoneysuckle.jpg", "Alpine Honeysuckle"],
 		["CreativeCommonsPlants/CelandinePoppy.jpg","Celandine Poppy"],
        ["CreativeCommonsPlants/Comandra.jpg","Comandra"],
		["CreativeCommonsPlants/CommonFalseSolomonsSeal.jpg","Common False Solomon's Seal"],
		["CreativeCommonsPlants/EasternPoisonIvy.jpg","Eastern Poison Ivy"],
		["CreativeCommonsPlants/Jimsonweed.jpg","Jimsonweed"],
		["CreativeCommonsPlants/Passionflower.jpg","Passionflower"],
		["CreativeCommonsPlants/StarryFalseSolomonsSeal.jpg","Starry False Solomon's Seal"],
		["CreativeCommonsPlants/Yucca.jpg","Yucca"],
        
        
        ])</var>

The above bit is complicated, so let's go through it step by step. The F_NAME variable acts as your flashcard database. It contains an array of all the flashcards. Each element of the array contains all of the information you need for that particular flashcard. In this case, the array contains just two elements: the path fo the flashcard picture, and the solution the flashcard. In this case, the flashcards are plants, and the answer is the plantname.

        ["CreativeCommonsPlants/AlpineHoneysuckle.jpg", "Alpine Honeysuckle"],

Of course, we only want to pass one flashcard, not the whole array, so we pass the whole array into the randFromArray function. This gives us one random flashcard from our array.

Now let's stitch everything together.

        <var id="IMG_STR">  
        ( function() {
                        
                        var qstn =  "<"+IMG+F_NAME[0]+">";
                       
                        return qstn;
                    } )()
        
        </var>

The var tag acts like a very specific <script></script> tag. It takes a javascript variable and makes it availible for display on the page. As a result, you can use javascript inside the page to make a javascript variable. The code above returns a string that is the image tag for the picture of our current flashcard. This string is inserted into the question div and is rendered as an image in the html code. And voila! We have made a flashcard.

Below is the code for the whole flashcard program. In order to make it work, you will have to change the filename paths in the F_NAME variable to something in your local path to make it work.

<!DOCTYPE html> 
<html data-require="math graphie graphie-helpers">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Identifying Berry Plants</title>
    <script src="../khan-exercise.js"></script>
</head>
<body>
    <div class="exercise">
    <div class="vars" >
    	
	
        
        <var id="IMG">"img class=flashcard src="</var>
            <!-- use the form [IMAGE_PATHNAME, ANSWER] -->
        
        <var id="F_NAME">randFromArray([
        ["CreativeCommonsPlants/AlpineHoneysuckle.jpg", "Alpine Honeysuckle"],
 		["CreativeCommonsPlants/CelandinePoppy.jpg","Celandine Poppy"],
        ["CreativeCommonsPlants/Comandra.jpg","Comandra"],
		["CreativeCommonsPlants/CommonFalseSolomonsSeal.jpg","Common False Solomon's Seal"],
		["CreativeCommonsPlants/EasternPoisonIvy.jpg","Eastern Poison Ivy"],
		["CreativeCommonsPlants/Jimsonweed.jpg","Jimsonweed"],
		["CreativeCommonsPlants/Passionflower.jpg","Passionflower"],
		["CreativeCommonsPlants/StarryFalseSolomonsSeal.jpg","Starry False Solomon's Seal"],
		["CreativeCommonsPlants/Yucca.jpg","Yucca"],
        
        
        ])</var>
        
        
        <var id="IMG_STR">  
        ( function() {
                        
                        var qstn =  "<"+IMG+F_NAME[0]+">";
                       
                        return qstn;
                    } )()
        
        </var>
        
        
    </div>

    <div class="problems">
        <div>
        	<div class="question">
                <p><var>IMG_STR</var></p>
            </div>
            
            <div class="solution" data-type="text"><var>F_NAME[1]</var></div>
            <div class="hints">
            <p>Plant Name: <var>F_NAME[1]</var>

			</p>
            
            </div>
            
        </div>
    
        
    </div>
    </div>
</body>
</html>
Add a custom footer
Add a custom sidebar
Clone this wiki locally