Metro Apps with HMTL5: Listing 3.

The modified default.js code, adding a click event.

(function () {
  "use strict";

  var app = WinJS.Application;
  var activation = Windows.ApplicationModel.Activation;
  WinJS.strictProcessing();

  app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
      if (args.detail.previousExecutionState !== 
        activation.ApplicationExecutionState.terminated) {
        // TODO: This application has been newly launched. Initialize
        // your application here.
      } else {
        // TODO: This application has been reactivated from suspension.
        // Restore application state here.
      }
      args.setPromise(WinJS.UI.processAll());

      // Get the Element ID of our OK Button and attach an event handler to it. 
      var OKButton = document.getElementById("questionButton");
      OKButton.addEventListener("click", OKbuttonClickHandler, false);

    }
  };

  app.oncheckpoint = function (args) {
    // TODO: This application is about to be suspended. Save any state
    // that needs to persist across suspensions here. You might use the
    // WinJS.Application.sessionState object, which is automatically
    // saved and restored across suspension. If you need to complete an
    // asynchronous operation before your application is suspended, call
    // args.setPromise().
  };

    
function OKbuttonClickHandler(eventInfo) {

    var answer = document.getElementById("magazineInput").value;
    if (answer == 'Visual Studio Magazine') {
      var finalanswer = "Good Answer!";
    }
    else {
      var finalanswer = "Try Again! - Hint type Visual Studio Magazine ";
    }
    document.getElementById("questionOutput").innerText = finalanswer;
   }

   app.start();
})();

About the Author

Michael Crump is a product manager that works at Microsoft on the Azure platform. He is a is a developer, blogger and speaker of topics relating to cloud development. He’s passionate about helping developers understand the benefits of the cloud in a no-nonsense way. You can reach him on Twitter at mbcrump or by following his blog at michaelcrump.net.