Flash Cards are an awesome way for learning a new language, so I went on and wrote my own simple Metro Flash Cards. It's not complete but just exactly what I needed. The source code is available on CodePlex here. I might consider adding support for pictures and audio later. It should be fairly easy Smile

Windows 8 offers different models for developers when it comes to writing apps. You can use XAML with C# and VB, native C++, and you can use HTML5 and JavaScript. Coming from a Web Developer background, JavaScript looked very appealing to me..! Winking smile

Building a Flash Cards app sounds pretty much simple:

  • A place for storing the Questions and Answers – I used the App Data Local Settings, I know I should have used an XML file but this was so much easier..!
  • A screen to edit the Questions and Answers
  • A game board to play with the Flash Cards

With the web developer mindset in place, my first choice was to have one html page with 4 divs. Each div will render a different GUI. Check them below:

MFC00 MFC01 MFC04
Main Screen Edit Settings Screen About Screen
MFC02 MFC03  
Game Board – Question Game Board - Answer  

 

Let’s start working on each layout:

CSS – a bit self explanatory Smile

 1: body {
 2:     background-image: linear-gradient(bottom, rgb(33,21,41) 23%, rgb(72,31,103) 43%);
 3:     background-image: -o-linear-gradient(bottom, rgb(33,21,41) 23%, rgb(72,31,103) 43%);
 4:     background-image: -moz-linear-gradient(bottom, rgb(33,21,41) 23%, rgb(72,31,103) 43%);
 5:     background-image: -webkit-linear-gradient(bottom, rgb(33,21,41) 23%, rgb(72,31,103) 43%);
 6:     background-image: -ms-linear-gradient(bottom, rgb(33,21,41) 23%, rgb(72,31,103) 43%);
 7:     background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.23, rgb(33,21,41)), color-stop(0.43, rgb(72,31,103)) );
 8:     margin: 0px 0px 0px 0px;
 9: }
 10:  
 11: .ClearAlignment {
 12:     clear: both;
 13: }
 14:  
 15: .MainPage {
 16:     min-width: 1010px;
 17:     min-height: 768px;
 18:     max-width: 1010px;
 19:     max-height: 768px;
 20:     border: 0px solid #fff;
 21:     position: fixed;
 22:     left: 50%;
 23:     top: 50%;
 24:     overflow: auto;
 25:     margin-left: -505px;
 26:     margin-top: -384px;
 27:     display: none;
 28: }
 29:  
 30: #EditCards {
 31:     min-height: 60px;
 32:     min-width: 650px;
 33:     max-height: 60px;
 34:     max-width: 650px;
 35:     font-family: 'Segoe UI Semilight';
 36:     font-size: 32px;
 37:     font-weight: bold;
 38:     color: #fff;
 39:     vertical-align: bottom;
 40:     background-image: linear-gradient(left, rgb(218,132,19) 10%, rgb(227,163,26) 62%);
 41:     background-image: -o-linear-gradient(left, rgb(218,132,19) 10%, rgb(227,163,26) 62%);
 42:     background-image: -moz-linear-gradient(left, rgb(218,132,19) 10%, rgb(227,163,26) 62%);
 43:     background-image: -webkit-linear-gradient(left, rgb(218,132,19) 10%, rgb(227,163,26) 62%);
 44:     background-image: -ms-linear-gradient(left, rgb(218,132,19) 10%, rgb(227,163,26) 62%);
 45:     background-image: -webkit-gradient( linear, left top, right top, color-stop(0.1, rgb(218,132,19)), color-stop(0.62, rgb(227,163,26)) );
 46:     border-color: #481F67;
 47:     border-style: solid;
 48:     float: left;
 49:     padding-top: 120px;
 50: }
 51:  
 52: #About {
 53:     min-height: 60px;
 54:     min-width: 345px;
 55:     max-height: 60px;
 56:     max-width: 345px;
 57:     font-family: 'Segoe UI Semilight';
 58:     font-size: 32px;
 59:     font-weight: bold;
 60:     color: #fff;
 61:     background-image: linear-gradient(left, rgb(13,136,68) 10%, rgb(16,164,83) 62%);
 62:     background-image: -o-linear-gradient(left, rgb(13,136,68) 10%, rgb(16,164,83) 62%);
 63:     background-image: -moz-linear-gradient(left, rgb(13,136,68) 10%, rgb(16,164,83) 62%);
 64:     background-image: -webkit-linear-gradient(left, rgb(13,136,68) 10%, rgb(16,164,83) 62%);
 65:     background-image: -ms-linear-gradient(left, rgb(13,136,68) 10%, rgb(16,164,83) 62%);
 66:     background-image: -webkit-gradient( linear, left top, right top, color-stop(0.1, rgb(13,136,68)), color-stop(0.62, rgb(16,164,83)) );
 67:     border-color: #481F67;
 68:     border-style: solid;
 69:     float: left;
 70:     padding-top: 120px;
 71: }
 72:  
 73: #Play {
 74:     min-height: 60px;
 75:     min-width: 1001px;
 76:     max-height: 60px;
 77:     max-width: 1001px;
 78:     font-family: 'Segoe UI Semilight';
 79:     font-size: 32px;
 80:     font-weight: bold;
 81:     color: #fff;
 82:     background-image: linear-gradient(left, rgb(64,160,167) 10%, rgb(84,191,195) 62%);
 83:     background-image: -o-linear-gradient(left, rgb(64,160,167) 10%, rgb(84,191,195) 62%);
 84:     background-image: -moz-linear-gradient(left, rgb(64,160,167) 10%, rgb(84,191,195) 62%);
 85:     background-image: -webkit-linear-gradient(left, rgb(64,160,167) 10%, rgb(84,191,195) 62%);
 86:     background-image: -ms-linear-gradient(left, rgb(64,160,167) 10%, rgb(84,191,195) 62%);
 87:     background-image: -webkit-gradient( linear, left top, right top, color-stop(0.1, rgb(64,160,167)), color-stop(0.62, rgb(84,191,195)) );
 88:     border-color: #481F67;
 89:     border-style: solid;
 90:     padding-top: 300px;
 91: }
 92:  
 93: .PageDescription {
 94:     font-family: 'Segoe UI Semilight';
 95:     font-size: 24px;
 96:     color: #fff;
 97:     padding-bottom: 50px;
 98: }
 99:  
 100: .PageTitle {
 101:     font-family: 'Segoe UI';
 102:     font-size: 48px;
 103:     color: #fff;
 104:     font-weight: bold;
 105:     padding-bottom: 3px;
 106: }
 107:  
 108: .Label {
 109:     padding-left: 30px;
 110: }
 111:  
 112: .ButtonsContainer {
 113:     text-align: right;
 114:     padding-top: 10px;
 115: }
 116:  
 117: .QuestionDiv {
 118:     width: 300px;
 119:     float: left;
 120: }
 121:  
 122: .AnswerDiv {
 123:     width:  300px;
 124:         float: left;
 125: }
 126:  
 127: .TextInputBox {
 128:     width: 200px;
 129: }
 130:  
 131: .SettingsContent {
 132:     overflow: auto;
 133:     height:  500px;
 134: }
 135:  
 136: #GameBoard {
 137:     height:  480px;
 138:     background-color: white;
 139:     color: #000;
 140:     padding: 20px 20px 20px 20px;
 141:     font-size: 36px;
 142: }

Couple of notes here:

Main Screen 

MFC00

 1: <div id="HomePage" class="MainPage" style="display: inherit">
 2:     <div class="PageTitle">METRO FLASH CARDS</div>
 3:     <div class="PageDescription">Play, learn, and customize you own cards..!</div>
 4:     <div class="Content">
 5:         <div id="EditCards">
 6:             <span class="Label">SETTINGS</span>
 7:         </div>
 8:         <div id="About"><span class="Label">ABOUT</span></div>
 9:     </div>
 10:     <div class="ClearAlignment"></div>
 11:     <div id="Play"><span class="Label">PLAY CARDS</span></div>
 12: </div>

Edit Settings Screen

MFC01

 1: <div id="SettingsPage" class="MainPage">
 2:         <div class="PageTitle">METRO FLASH CARDS</div>
 3:         <div class="PageDescription">Play, learn, and customize you own cards..!</div>
 4:         <div>
 5:             <h2>Settings </h2>
 6:             <div class="SettingsContent">
 7:                 <div class="QuestionDiv">
 8:                     Question:
 9:                     <input id="Question0" type="text" class="TextInputBox" />
 10:                 </div>
 11:                 <div class="AnswerDiv">
 12:                     Answer:
 13:                     <input id="Answer0" type="text" class="TextInputBox" />
 14:                 </div>
 15:                 <div class="ClearAlignment"></div>
 16:                 <div class="QuestionDiv">
 17:                     Question:
 18:                     <input id="Question1" type="text" class="TextInputBox" />
 19:                 </div>
 20:                 <div class="AnswerDiv">
 21:                     Answer:
 22:                     <input id="Answer1" type="text" class="TextInputBox" />
 23:                 </div>
 24:                 <div class="ClearAlignment"></div>
 25:                 <div class="QuestionDiv">
 26:                     Question:
 27:                     <input id="Question2" type="text" class="TextInputBox" />
 28:                 </div>
 29:                 <div class="AnswerDiv">
 30:                     Answer:
 31:                     <input id="Answer2" type="text" class="TextInputBox" />
 32:                 </div>
 33:                 <div class="ClearAlignment"></div>
 34:                 <div class="QuestionDiv">
 35:                     Question:
 36:                     <input id="Question3" type="text" class="TextInputBox" />
 37:                 </div>
 38:                 <div class="AnswerDiv">
 39:                     Answer:
 40:                     <input id="Answer3" type="text" class="TextInputBox" />
 41:                 </div>
 42:                 <div class="ClearAlignment"></div>
 43:                 <div class="QuestionDiv">
 44:                     Question:
 45:                     <input id="Question4" type="text" class="TextInputBox" />
 46:                 </div>
 47:                 <div class="AnswerDiv">
 48:                     Answer:
 49:                     <input id="Answer4" type="text" class="TextInputBox" />
 50:                 </div>
 51:                 <div class="ClearAlignment"></div>
 52:                 <div class="QuestionDiv">
 53:                     Question:
 54:                     <input id="Question5" type="text" class="TextInputBox" />
 55:                 </div>
 56:                 <div class="AnswerDiv">
 57:                     Answer:
 58:                     <input id="Answer5" type="text" class="TextInputBox" />
 59:                 </div>
 60:                 <div class="ClearAlignment"></div>
 61:                 <div class="QuestionDiv">
 62:                     Question:
 63:                     <input id="Question6" type="text" class="TextInputBox" />
 64:                 </div>
 65:                 <div class="AnswerDiv">
 66:                     Answer:
 67:                     <input id="Answer6" type="text" class="TextInputBox" />
 68:                 </div>
 69:                 <div class="ClearAlignment"></div>
 70:                 <div class="QuestionDiv">
 71:                     Question:
 72:                     <input id="Question7" type="text" class="TextInputBox" />
 73:                 </div>
 74:                 <div class="AnswerDiv">
 75:                     Answer:
 76:                     <input id="Answer7" type="text" class="TextInputBox" />
 77:                 </div>
 78:                 <div class="ClearAlignment"></div>
 79:                 <div class="QuestionDiv">
 80:                     Question:
 81:                     <input id="Question8" type="text" class="TextInputBox" />
 82:                 </div>
 83:                 <div class="AnswerDiv">
 84:                     Answer:
 85:                     <input id="Answer8" type="text" class="TextInputBox" />
 86:                 </div>
 87:                 <div class="ClearAlignment"></div>
 88:                 <div class="QuestionDiv">
 89:                     Question:
 90:                     <input id="Question9" type="text" class="TextInputBox" />
 91:                 </div>
 92:                 <div class="AnswerDiv">
 93:                     Answer:
 94:                     <input id="Answer9" type="text" class="TextInputBox" />
 95:                 </div>
 96:             </div>
 97:             <div class="ButtonsContainer">
 98:                 <button id="ClearAllFields">Clear Fields</button>
 99:                 <button id="BackFromSettings">Cancel Changes</button>
 100:                 <button id="SaveSettings">Save Changes</button>
 101:             </div>
 102:         </div>
 103:     </div>

Game Board

MFC02

 1: <div id="GamePage" class="MainPage">
 2:     <div class="PageTitle">METRO FLASH CARDS</div>
 3:     <div class="PageDescription">Play, learn, and customize you own cards..!</div>
 4:     <div class="Content">
 5:         <h2>Game Play</h2><br />
 6:         <div id="GameBoard">
 7:         </div>
 8:         <div class="ButtonsContainer">
 9:             <button id="FlipCard">Flip Card</button>
 10:             <button id="NextCard">Next Card</button>
 11:             <button id="BackFromGame">Leave Game Play</button>
 12:         </div>
 13:     </div>
 14: </div>

 

About Screen

MFC04

 1: <div id="AboutPage" class="MainPage">
 2:     <div class="PageTitle">METRO FLASH CARDS</div>
 3:     <div class="PageDescription">Play, learn, and customize you own cards..!</div>
 4:     <div class="Content">
 5:         <h2>About</h2>
 6:         <p>
 7:             Metro Flash Cards was developed over the weekend for fun using HTML5 and JavaScript
 8:             to help me and my wife quickly learn German.
 9:             <br />
 10:             The source code is avilable on <a href="http://metroflashcards.codeplex.com/" target="_blank">
 11:                 CodePlex</a>.
 12:         </p>
 13:         <p>
 14:             Enjoy..!
 15:             <br />
 16:             Bandar - <a href="http://blogs.msdn.com/balsharfi" target="_blank">http://blogs.msdn.com/balsharfi
 17:             </a>
 18:         </p>
 19:         <div class="ButtonsContainer">
 20:             <button id="BackFromAbout">Back</button>
 21:         </div>
 22:     </div>
 23: </div>

OK. Now we are done with the UI. Let’s work on the logic. I used the default.js file which was created by the VS Project Template. The code is fairly commented so it should be really easy to follow. Just to note couple of things before we dig through the code:

  • I used listeners to hook up the event handlers for creating the hover effects and responding to clicks. For example:

Hover

 1: WinJS.Utilities.query("#EditCards").listen("mouseover", function () {
 2:     WinJS.Utilities.id("EditCards").setStyle("border-color", "#a183b8");
 3: });

Click

 1: WinJS.Utilities.query("#About").listen("mousedown", function () { WinJS.Utilities.id("About").setStyle("border-style", "inset"); });
 2: WinJS.Utilities.query("#About").listen("mouseup", function () {
 3:     WinJS.Utilities.id("About").clearStyle("border-style");
 4:     WinJS.Utilities.id("HomePage").setStyle("display", "none");
 5:     WinJS.Utilities.id("AboutPage").setStyle("display", "block");
 6:  
 7: });

 

Finally, the execution flow:

  • Initialize access to the local app data
  • Check if the user have stored any cards before, if not then it will load and save my last German cards
  • When you start playing, the app loads the first question and sets a variable called turn to 1
  • Every time the user clicks Next, the app will increase the turn.
  • Every time the user clicks on Flip, the app simply changes a variable called side to 2 and then change some colors to indicate that we are on a different side
  • turn will help us track our position
  • side will help us track our card face
 1: (function () {
 2:     "use strict";
 3:  
 4:     var app = WinJS.Application;
 5:  
 6:     app.onactivated = function (eventObject) {
 7:  
 8:         if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
 9:             var isReady = false;
 10:             var turn = -1;
 11:             var side = 1;
 12:  
 13:             //Initialize local app storage access
 14:             var applicationData = Windows.Storage.ApplicationData.current;
 15:             var localSettings = applicationData.localSettings;
 16:  
 17:             //Load local app storage content
 18:             var value = localSettings.values["flashCardsSettings"];
 19:  
 20:             if (!value) {
 21:                 // No data. Loading my old German Flash Cards
 22:                 var flashCards = new Windows.Storage.ApplicationDataCompositeValue();
 23:                 flashCards["Q0"] = "Man sieht sich!";
 24:                 flashCards["Q1"] = "Sich an die Arbeit machen";
 25:                 flashCards["Q2"] = "Kita";
 26:                 flashCards["Q3"] = "Fahrschule";
 27:                 flashCards["Q4"] = "Anmieten";
 28:                 flashCards["Q5"] = "Stromversorgung";
 29:                 flashCards["Q6"] = "Hinaufsteigen";
 30:                 flashCards["Q7"] = "Nicht der Rede wert";
 31:                 flashCards["Q8"] = "Weckruf";
 32:                 flashCards["Q9"] = "Auto";
 33:                 flashCards["A0"] = "See you!, Bye!";
 34:                 flashCards["A1"] = "To sit down to work, to start working";
 35:                 flashCards["A2"] = "Daycare Center";
 36:                 flashCards["A3"] = "Driving School";
 37:                 flashCards["A4"] = "To rent, to hire";
 38:                 flashCards["A5"] = "Power Supply";
 39:                 flashCards["A6"] = "To climb up, to ascend";
 40:                 flashCards["A7"] = "Not worth mentioning";
 41:                 flashCards["A8"] = "Wake-up call";
 42:                 flashCards["A9"] = "Car";
 43:                 localSettings.values["flashCardsSettings"] = flashCards;
 44:  
 45:                 document.getElementById("Question0").value = flashCards["Q0"];
 46:                 document.getElementById("Question1").value = flashCards["Q1"];
 47:                 document.getElementById("Question2").value = flashCards["Q2"];
 48:                 document.getElementById("Question3").value = flashCards["Q3"];
 49:                 document.getElementById("Question4").value = flashCards["Q4"];
 50:                 document.getElementById("Question5").value = flashCards["Q5"];
 51:                 document.getElementById("Question6").value = flashCards["Q6"];
 52:                 document.getElementById("Question7").value = flashCards["Q7"];
 53:                 document.getElementById("Question8").value = flashCards["Q8"];
 54:                 document.getElementById("Question9").value = flashCards["Q9"];
 55:                 document.getElementById("Answer0").value = flashCards["A0"];
 56:                 document.getElementById("Answer1").value = flashCards["A1"];
 57:                 document.getElementById("Answer2").value = flashCards["A2"];
 58:                 document.getElementById("Answer3").value = flashCards["A3"];
 59:                 document.getElementById("Answer4").value = flashCards["A4"];
 60:                 document.getElementById("Answer5").value = flashCards["A5"];
 61:                 document.getElementById("Answer6").value = flashCards["A6"];
 62:                 document.getElementById("Answer7").value = flashCards["A7"];
 63:                 document.getElementById("Answer8").value = flashCards["A8"];
 64:                 document.getElementById("Answer9").value = flashCards["A9"];
 65:  
 66:                 isReady = true;
 67:             }
 68:             else {
 69:                 // Load Flash Cards
 70:                 var flashCards = new Windows.Storage.ApplicationDataCompositeValue();
 71:                 flashCards = localSettings.values["flashCardsSettings"];
 72:  
 73:                 document.getElementById("Question0").value = flashCards["Q0"];
 74:                 document.getElementById("Question1").value = flashCards["Q1"];
 75:                 document.getElementById("Question2").value = flashCards["Q2"];
 76:                 document.getElementById("Question3").value = flashCards["Q3"];
 77:                 document.getElementById("Question4").value = flashCards["Q4"];
 78:                 document.getElementById("Question5").value = flashCards["Q5"];
 79:                 document.getElementById("Question6").value = flashCards["Q6"];
 80:                 document.getElementById("Question7").value = flashCards["Q7"];
 81:                 document.getElementById("Question8").value = flashCards["Q8"];
 82:                 document.getElementById("Question9").value = flashCards["Q9"];
 83:                 document.getElementById("Answer0").value = flashCards["A0"];
 84:                 document.getElementById("Answer1").value = flashCards["A1"];
 85:                 document.getElementById("Answer2").value = flashCards["A2"];
 86:                 document.getElementById("Answer3").value = flashCards["A3"];
 87:                 document.getElementById("Answer4").value = flashCards["A4"];
 88:                 document.getElementById("Answer5").value = flashCards["A5"];
 89:                 document.getElementById("Answer6").value = flashCards["A6"];
 90:                 document.getElementById("Answer7").value = flashCards["A7"];
 91:                 document.getElementById("Answer8").value = flashCards["A8"];
 92:                 document.getElementById("Answer9").value = flashCards["A9"];
 93:  
 94:                 isReady = true;
 95:             }
 96:  
 97:             //Hover Effects
 98:             WinJS.Utilities.query("#EditCards").listen("mouseover", function () {
 99:                 WinJS.Utilities.id("EditCards").setStyle("border-color", "#a183b8");
 100:             });
 101:             WinJS.Utilities.query("#EditCards").listen("mouseout", function () { WinJS.Utilities.id("EditCards").setStyle("border-color", "#481F67"); });
 102:             WinJS.Utilities.query("#About").listen("mouseover", function () { WinJS.Utilities.id("About").setStyle("border-color", "#a183b8"); });
 103:             WinJS.Utilities.query("#About").listen("mouseout", function () { WinJS.Utilities.id("About").setStyle("border-color", "#481F67"); });
 104:             WinJS.Utilities.query("#Play").listen("mouseover", function () { WinJS.Utilities.id("Play").setStyle("border-color", "#a183b8"); });
 105:             WinJS.Utilities.query("#Play").listen("mouseout", function () { WinJS.Utilities.id("Play").setStyle("border-color", "#481F67"); });
 106:  
 107:             //Edit Cards
 108:             WinJS.Utilities.query("#EditCards").listen("mousedown", function () { WinJS.Utilities.id("EditCards").setStyle("border-style", "inset"); });
 109:             WinJS.Utilities.query("#EditCards").listen("mouseup", function () {
 110:  
 111:             //Render Settings Page
 112:             WinJS.Utilities.id("EditCards").clearStyle("border-style");
 113:             WinJS.Utilities.id("HomePage").setStyle("display","none");
 114:             WinJS.Utilities.id("SettingsPage").setStyle("display", "block");
 115:  
 116:             });
 117:  
 118:             //About
 119:             WinJS.Utilities.query("#About").listen("mousedown", function () { WinJS.Utilities.id("About").setStyle("border-style", "inset"); });
 120:             WinJS.Utilities.query("#About").listen("mouseup", function () {
 121:                 WinJS.Utilities.id("About").clearStyle("border-style");
 122:                 WinJS.Utilities.id("HomePage").setStyle("display", "none");
 123:                 WinJS.Utilities.id("AboutPage").setStyle("display", "block");
 124:  
 125:             });
 126:  
 127:             //Play
 128:             WinJS.Utilities.query("#Play").listen("mousedown", function () { WinJS.Utilities.id("Play").setStyle("border-style", "inset"); });
 129:             WinJS.Utilities.query("#Play").listen("mouseup", function () {
 130:                 WinJS.Utilities.id("Play").clearStyle("border-style");
 131:                 if (isReady) {
 132:                     WinJS.Utilities.id("HomePage").setStyle("display", "none");
 133:                     WinJS.Utilities.id("GamePage").setStyle("display", "block");
 134:  
 135:                     //Load first question
 136:                     document.getElementById("GameBoard").innerHTML = document.getElementById("Question0").value;
 137:                     WinJS.Utilities.id("GameBoard").setStyle("background-color", "#fff");
 138:                     WinJS.Utilities.id("GameBoard").setStyle("color", "#000");
 139:  
 140:                     turn = 1;
 141:                     side = 1;
 142:                 }
 143:             });
 144:  
 145:             //Next Card
 146:             WinJS.Utilities.query("#NextCard").listen("click", function () { 
 147:  
 148:                 if (turn < 10) {
 149:                     document.getElementById("GameBoard").innerHTML = document.getElementById("Question" + turn).value;
 150:                 }
 151:                 else {
 152:                     turn = 0;
 153:                     document.getElementById("GameBoard").innerHTML = document.getElementById("Question" + turn).value;
 154:                 }
 155:  
 156:                 if (side == 2) {
 157:                     side = 1;
 158:                     WinJS.Utilities.id("GameBoard").setStyle("background-color", "#fff");
 159:                     WinJS.Utilities.id("GameBoard").setStyle("color", "#000");
 160:                 }
 161:  
 162:                 turn++;
 163:             });
 164:  
 165:             //Flip Card
 166:             WinJS.Utilities.query("#FlipCard").listen("click", function () {
 167:                 side = 2;
 168:  
 169:                 var sideTurn = turn -1;
 170:  
 171:                 WinJS.Utilities.id("GameBoard").setStyle("background-color", "#000");
 172:                 WinJS.Utilities.id("GameBoard").setStyle("color", "#fff");
 173:  
 174:                 document.getElementById("GameBoard").innerHTML = document.getElementById("Answer" + sideTurn).value;
 175:             });
 176:  
 177:  
 178:             //Back Buttons
 179:             WinJS.Utilities.query("#BackFromSettings").listen("click", function () {
 180:                 WinJS.Utilities.id("HomePage").clearStyle("display");
 181:                 WinJS.Utilities.id("HomePage").setStyle("display", "inherit");
 182:                 WinJS.Utilities.id("SettingsPage").setStyle("display", "none");
 183:                 WinJS.Utilities.id("AboutPage").setStyle("display", "none");
 184:                 WinJS.Utilities.id("GamePage").setStyle("display", "none");
 185:             });
 186:             WinJS.Utilities.query("#BackFromGame").listen("click", function () {
 187:                 WinJS.Utilities.id("HomePage").clearStyle("display");
 188:                 WinJS.Utilities.id("HomePage").setStyle("display", "inherit");
 189:                 WinJS.Utilities.id("SettingsPage").setStyle("display", "none");
 190:                 WinJS.Utilities.id("AboutPage").setStyle("display", "none");
 191:                 WinJS.Utilities.id("GamePage").setStyle("display", "none");
 192:             });
 193:             WinJS.Utilities.query("#BackFromAbout").listen("click", function () {
 194:                 WinJS.Utilities.id("HomePage").clearStyle("display");
 195:                 WinJS.Utilities.id("HomePage").setStyle("display", "inherit");
 196:                 WinJS.Utilities.id("SettingsPage").setStyle("display", "none");
 197:                 WinJS.Utilities.id("AboutPage").setStyle("display", "none");
 198:                 WinJS.Utilities.id("GamePage").setStyle("display", "none");
 199:             });
 200:  
 201:             //Clear Settings
 202:             WinJS.Utilities.query("#ClearAllFields").listen("click", function () {
 203:                 document.getElementById("Question0").value = "";
 204:                 document.getElementById("Question1").value = "";
 205:                 document.getElementById("Question2").value = "";
 206:                 document.getElementById("Question3").value = "";
 207:                 document.getElementById("Question4").value = "";
 208:                 document.getElementById("Question5").value = "";
 209:                 document.getElementById("Question6").value = "";
 210:                 document.getElementById("Question7").value = "";
 211:                 document.getElementById("Question8").value = "";
 212:                 document.getElementById("Question9").value = "";
 213:                 document.getElementById("Answer0").value = "";
 214:                 document.getElementById("Answer1").value = "";
 215:                 document.getElementById("Answer2").value = "";
 216:                 document.getElementById("Answer3").value = "";
 217:                 document.getElementById("Answer4").value = "";
 218:                 document.getElementById("Answer5").value = "";
 219:                 document.getElementById("Answer6").value = "";
 220:                 document.getElementById("Answer7").value = "";
 221:                 document.getElementById("Answer8").value = "";
 222:                 document.getElementById("Answer9").value = "";
 223:             });
 224:  
 225:             //Save Settings
 226:             WinJS.Utilities.query("#SaveSettings").listen("click", function () {
 227:  
 228:                 var flashCards = new Windows.Storage.ApplicationDataCompositeValue();
 229:                 flashCards["Q0"] = document.getElementById("Question0").value;
 230:                 flashCards["Q1"] = document.getElementById("Question1").value;
 231:                 flashCards["Q2"] = document.getElementById("Question2").value;
 232:                 flashCards["Q3"] = document.getElementById("Question3").value;
 233:                 flashCards["Q4"] = document.getElementById("Question4").value;
 234:                 flashCards["Q5"] = document.getElementById("Question5").value;
 235:                 flashCards["Q6"] = document.getElementById("Question6").value;
 236:                 flashCards["Q7"] = document.getElementById("Question7").value;
 237:                 flashCards["Q8"] = document.getElementById("Question8").value;
 238:                 flashCards["Q9"] = document.getElementById("Question9").value;
 239:                 flashCards["A0"] = document.getElementById("Answer0").value;
 240:                 flashCards["A1"] = document.getElementById("Answer1").value;
 241:                 flashCards["A2"] = document.getElementById("Answer2").value;
 242:                 flashCards["A3"] = document.getElementById("Answer3").value;
 243:                 flashCards["A4"] = document.getElementById("Answer4").value;
 244:                 flashCards["A5"] = document.getElementById("Answer5").value;
 245:                 flashCards["A6"] = document.getElementById("Answer6").value;
 246:                 flashCards["A7"] = document.getElementById("Answer7").value;
 247:                 flashCards["A8"] = document.getElementById("Answer8").value;
 248:                 flashCards["A9"] = document.getElementById("Answer9").value;
 249:  
 250:                 localSettings.values["flashCardsSettings"] = flashCards;
 251:  
 252:                 isReady = true;
 253:  
 254:                 //Render Home Page
 255:                 WinJS.Utilities.id("HomePage").clearStyle("display");
 256:                 WinJS.Utilities.id("HomePage").setStyle("display", "inherit");
 257:                 WinJS.Utilities.id("SettingsPage").setStyle("display", "none");
 258:                 WinJS.Utilities.id("AboutPage").setStyle("display", "none");
 259:                 WinJS.Utilities.id("GamePage").setStyle("display", "none");
 260:             });
 261:  
 262:             WinJS.Utilities.query("#About").listen("mousedown", function () { WinJS.Utilities.id("About").setStyle("border-style", "inset"); });
 263:             WinJS.Utilities.query("#About").listen("mouseup", function () { WinJS.Utilities.id("About").clearStyle("border-style"); });
 264:             WinJS.Utilities.query("#Play").listen("mousedown", function () { WinJS.Utilities.id("Play").setStyle("border-style", "inset"); });
 265:             WinJS.Utilities.query("#Play").listen("mouseup", function () { WinJS.Utilities.id("Play").clearStyle("border-style"); });
 266:  
 267:             WinJS.UI.processAll();
 268:         }
 269:     };
 270:  
 271:     app.start();
 272: })();

Well that’s about it..! Enjoy Smile