Download the source code for this lesson at http://absolutebeginner.codeplex.com/

In this lesson we're going to take what we've learned previously and we're going to create an entire app, a very silly little game using the WebView App project template featuring the WebView control.  We'll base our game on this app that I've built for the Javascript Fundamentals for Absolute Beginners series on Channel9.  You can find it here:

https://channel9.msdn.com/Series/Javascript-Fundamentals-Development-for-Absolute-Beginners/jQuery-Events-16

In that lesson I explained jQuery Events and to demonstrate the concepts of that lesson I created the Click-a-Bob game.  It features a little cartoon “bob head” and you keep clicking on the cartoon bob head and it gives you a score.  You can reset the score by hovering over the Start Over button on the right.


Important: Make sure you download the assets that are available for this lesson in the Lesson14.zip file.  Inside of that .zip file there should be an Assets folder containing the icons, the images, the source code, etc. required to follow along and complete this lesson.



Note: This project was inspired by the Clow Clicker app.  The guy who built it just wanted to parody some of those mindless social games and, to his surprise, it became an instant success.  People just kept clicking the cow to get more click points.

http://en.wikipedia.org/wiki/Cow_Clicker

Our plan is to take the Click-a-Bob and turn it into a Phone app called Whack-a-Bob.

To begin, we’ll create a new (1) WebView App project (2) named WhackABob and (3) clicking OK:



The first task is to copy over all of the assets and code from the Assets folder.  To begin I’ll select all of the current files in the project’s Assets folder:



… and select the Delete key on my keyboard.  It will ask me to confirm the deletion and I’ll select the OK button.



Next, I’ll select all of the numerical bob head images for use as app tiles in Windows Explorer and drag and drop these into the Assets folder in Visual Studio’s Solution Explorer:
           


Your Assets folder should now look like this:



Next, I’ll create a sub-folder called scripts and images.  I’ll right-click on the Html folder and select New Folder:



And name the first folder: scripts



I’ll repeat, this time naming the sub-folder: images



Next, I’ll (1) drag the bobtabor.jpg image from Windows Explorer into (2) the new images sub-folder in Visual Studio:



In preparation for copying the HTML from the original web page into the new index.html page in Visual Studio, I’ll right-click the C9JS_16.html file in Windows Explorer and select Open with > Notepad.



Next, I’ll (1) drag and drop the script16.js file from Windows Explorer into (2) the new scripts sub-folder in Visual Studio’s Solution Explorer:



Finally, I’ll (1) drag and drop the style16.css file from Windows Explorer into (2) the css sub-folder in Visual Studio’s Solution Explorer:


When finished, your Solution Explorer should have the same file structure as mine:



Next, we’ll begin to edit the index.html page by copying HTML from the original C9JS_16.html page (which we opened in Notepad).  I'll highlight and copy the references to jQuery to our Script16.js and to our style16.css files …



… and paste into the head section of the index.html document:



(1) I want to make sure I reference the correct locations for these files so to make sure I'm referencing the scripts folder, and (2) I’ll remove the reference to jquery in the CDN.



When you're building an app on the phone you don't want to include any references to outside resources even though jQuery is best served up from a Content Delivery Network when building web page consumed by web browsers over the internet.  So, we’;; copy jQuery down into our local project and r