Building the Metro Flash Cards App
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 
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..! 
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:
 |
 |
 |
| Main Screen | Edit Settings Screen | About Screen |
 |
 |
|
| Game Board – Question | Game Board - Answer |
Let’s start working on each layout:
CSS – a bit self explanatory
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:
- I used CSS to build the gradient effects instead of using images. I used this website here: https://gradients.glrzad.com/. I did not really know what to keep and what to exclude, so I pasted the CSS as is, and it worked
- I set the height and the width to a fixed size of 1366 X 768 pixels which is the least minimum resolution besides the 1280 for Windows 8. Click for more information about screen scale guidelines
Main Screen
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
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
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
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="https://metroflashcards.codeplex.com/" target="_blank">
11: CodePlex</a>.
12: </p>
13: <p>
14: Enjoy..!
15: <br />
16: Bandar - <a href="https://blogs.msdn.com/balsharfi" target="_blank">https://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: });
- As you can see also from above is that I used the WinJS Selectors to lookup controls and set their style. Stephen Walther really made it simple for me. https://stephenwalther.com/blog/archive/2012/02/23/metro-query-selectors.aspx
- I used the local application data to store the questions and the answers. Check this URL: https://msdn.microsoft.com/en-us/library/windows/apps/hh465118.aspx. The link also attends to how read/write files.
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