alexpelan · May 24, 2017 04:02
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>Page Title</title>
    </head>
    <body>

    </body>
 </html>
diff --git a/popcode.json b/popcode.json
 {"enabledLibraries":["jquery"],"hiddenUIComponents":["editor.css","editor.html"]}
diff --git a/script.js b/script.js

 /*
 TEAM ONE, DAY ONE: CREATE THE BOARD
 1. In the HTML: Give your game a header tag and put the name of your game as its text. Then create a div with id "gameboard"
 2. In the Javascript: Create a for loop that appends 20 card images to the div. Set every image's id to its position on the board (image 0 has id=0, image 1 has id=1 etc). Set every image's class to "unmatched". Use this url for the image: https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/back.png
 3. In the CSS: Set the width of your images so there are only 5 per row
 */ 






 /*
 TEAM TWO, DAY ONE: SET UP THE CARD ARRAY, FLIP A CARD WHEN A FUNCTION IS CALLED
 1. In the Javascript: Create an array of 20 card image urls as strings. Each card image url should be repeated once (so it has a pair). Pick 10 cards and repeat them twice. Look here for card image urls: https://docs.google.com/document/d/19Ebl3siS53v2uCyl21WlQgpSfm9_PLFmNJ7-qm5UlAE/edit
 2. In the Javascript: Create a new function called flipCard. Flip card should take one parameter called "cardIndex". 
 3. In flipCard, use jquery to get the image with the id "cardIndex". Change the src attribute to the string at an index of cardIndex in the array you created. 
 4. Test your flipCard function by calling flipCard(5); The result is that the fifth card should display a the front of the card, while the other cards should still display the back.

 */









 /* DAY TWO, TEAM ONE: FLIP A CARD WHEN AN IMAGE IS CLICKED
 1. In Javascript: Write a click handler that applies to all images
 2. In that click handler, get the id of the image that was clicked and store it in a variable (hint: you'll need to use the keyword "this")
 3. In the clickhandler, call the function flipCard, and give your variable as the argument. 
 TEST: If it works, every time you click a card, it should flip and show the other side. 

 */








 /* DAY TWO, TEAM TWO: UPDATE THE STATE OF THE GAME. ONLY FLIP TWO CARDS AT A TIME.
    1. Create a variable called state. Set state equal to "TURNONE"
    2. Create a function called updateState. It should have one parameter, cardIndex
    3. In your function, if state is equal to "TURNONE", flip the card at cardIndex (by calling flipCard), and update state to "TURNTWO"
    4. In your function, if state is equal to "TURNTWO", flip the card at cardIndex, and update state to "CHECKINGCARDS"
    5. Test your function by calling it with updateState(0),updateState(1), updateState(2). If you did it right, the first two cards should flip, but the third should not. 
    6. When both team's are done, update team one's code to call updateState instead of flipCard

 */ 








 /* DAY THREE, BOTH TEAMS: CHECK IF CARDS MATCH. UPDATE BOARD.
    1. Create two variables called cardOne and cardTwo. Set them to blank strings. 
    2. In your updateState function, on TURNONE, set the cardOne variable equal to the current card index.
    2. In your updateState function, on TURNTWO, set the cardTwo variable equal to the current card index.
    3. Create a function called checkCards. 
    4. In your checkCards function, if the src URL of the image at cardOne equals the src URL of the image at cardTwo, set the class of the two images to "matched"
    5. In your checkCards function, set the src of every image on the board with the class "unmatched", to the original card image: https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/back.png
    6. In your updateState function, if it's TURNTWO, call the the checkCards function and then set turn back to CARDONE.
 */
	<!DOCTYPE html>
	<html>
	<head>
	<title>Page Title</title>
	</head>
	<body>

	</body>
	</html>

	/*
	TEAM ONE, DAY ONE: CREATE THE BOARD
	1. In the HTML: Give your game a header tag and put the name of your game as its text. Then create a div with id "gameboard"
	2. In the Javascript: Create a for loop that appends 20 card images to the div. Set every image's id to its position on the board (image 0 has id=0, image 1 has id=1 etc). Set every image's class to "unmatched". Use this url for the image: https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/back.png
	3. In the CSS: Set the width of your images so there are only 5 per row
	*/






	/*
	TEAM TWO, DAY ONE: SET UP THE CARD ARRAY, FLIP A CARD WHEN A FUNCTION IS CALLED
	1. In the Javascript: Create an array of 20 card image urls as strings. Each card image url should be repeated once (so it has a pair). Pick 10 cards and repeat them twice. Look here for card image urls: https://docs.google.com/document/d/19Ebl3siS53v2uCyl21WlQgpSfm9_PLFmNJ7-qm5UlAE/edit
	2. In the Javascript: Create a new function called flipCard. Flip card should take one parameter called "cardIndex".
	3. In flipCard, use jquery to get the image with the id "cardIndex". Change the src attribute to the string at an index of cardIndex in the array you created.
	4. Test your flipCard function by calling flipCard(5); The result is that the fifth card should display a the front of the card, while the other cards should still display the back.

	*/









	/* DAY TWO, TEAM ONE: FLIP A CARD WHEN AN IMAGE IS CLICKED
	1. In Javascript: Write a click handler that applies to all images
	2. In that click handler, get the id of the image that was clicked and store it in a variable (hint: you'll need to use the keyword "this")
	3. In the clickhandler, call the function flipCard, and give your variable as the argument.
	TEST: If it works, every time you click a card, it should flip and show the other side.

	*/








	/* DAY TWO, TEAM TWO: UPDATE THE STATE OF THE GAME. ONLY FLIP TWO CARDS AT A TIME.
	1. Create a variable called state. Set state equal to "TURNONE"
	2. Create a function called updateState. It should have one parameter, cardIndex
	3. In your function, if state is equal to "TURNONE", flip the card at cardIndex (by calling flipCard), and update state to "TURNTWO"
	4. In your function, if state is equal to "TURNTWO", flip the card at cardIndex, and update state to "CHECKINGCARDS"
	5. Test your function by calling it with updateState(0),updateState(1), updateState(2). If you did it right, the first two cards should flip, but the third should not.
	6. When both team's are done, update team one's code to call updateState instead of flipCard

	*/








	/* DAY THREE, BOTH TEAMS: CHECK IF CARDS MATCH. UPDATE BOARD.
	1. Create two variables called cardOne and cardTwo. Set them to blank strings.
	2. In your updateState function, on TURNONE, set the cardOne variable equal to the current card index.
	2. In your updateState function, on TURNTWO, set the cardTwo variable equal to the current card index.
	3. Create a function called checkCards.
	4. In your checkCards function, if the src URL of the image at cardOne equals the src URL of the image at cardTwo, set the class of the two images to "matched"
	5. In your checkCards function, set the src of every image on the board with the class "unmatched", to the original card image: https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/back.png
	6. In your updateState function, if it's TURNTWO, call the the checkCards function and then set turn back to CARDONE.
	*/