You built the memory game, and you want to add some controls, not navigational controls, never add navigation to the app bar in any language.

Make sure to review the following, if you were around during the paper documentation days, you get the manual then certain pages would wear out after awhile, in this case you should refer to this document often and during idle times:

Guidelines and checklist for app bars (Metro style apps), Note: The links at the bottom of the page seem to be for C++, not HTML 5/JavaScript, have no idea why this isn’t fixed.

Then the correct QuickStart

Quickstart: adding an app bar with commands (Metro style apps using JavaScript and HTML)

Now that you have the HTML 5 Memory game working, try this article out as a way to convert your application.  Let me know via the comments how the Quickstart worked for you.

To do the design correctly you might want to do a storyboard, this will help you with keeping focus on your overall app, making changes, and finally being able to sell your idea and engine, not just the final product.  Also, it means you can delegate work easier, delegation is never, ever, easy in software.

To do design in other technologies the designers use templates and this does not mean a running sample of code, which would be impossible if you are designing a new bridge or building.  Usually the designer or engineer would use these templates to draw out basic circuits and then start the calculations for loads, transients and vectors (vectors are easily calculated using drafting tools, quite accurately too).  These templates look like this:

Then as each sheet was laid out, someone else would put together the Bill of Material to purchase the parts, and the calculations would continue.

In software we all too often like to avoid the fun of design or storyboarding.  Now that doesn’t mean that you should not start coding before finishing your storyboard, no one can afford to do that except for government jobs.  But doing a process of storyboarding, with some coding and then back to storyboarding allows you to keep the vision of your project/game in mind and able to improve.  There used to be a saying: “Paper is a place that change lives”.  Of course you could erase your design document so much it would no longer take pencil marks (the nature of the velum paper used to do blueprints).  We don’t do blueprints anymore, although that was a way to use solar energy see: http://en.wikipedia.org/wiki/Blueprint, but that was even before my time.

So how do you storyboard and then make the time useful?  With VS 12 RC, storyboarding is included with the product and is installed automatically into your power point.  This is a great idea, just wish the team had done a little more research into what a software person needs, but you can add images to the storyboard and I have.

I have added some images and it works just like Visio.  In fact when you create a storyboard image in your power point you can add it to the TFS as a workitem!  Pretty cool.