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 stich together a string that is our image tag.

So let's start stiching. Let's create a string fo the unchanging bit so the image tag. "img class=flashcard src="

In order to create flashcards, you need three variables.

<!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