Fix exercises binding when page changed

Add base binding for quiz

theme/javascript/app.js

@@ -6,11 +6,11 @@ require([
 
     "core/state",
     "core/keyboard",
-    "core/exercise",
+    "core/navigation",
     "core/progress",
     "core/sidebar",
     "core/search"
-], function($, storage, analytic, sharing, state, keyboard, exercise, progress, sidebar, search){
+], function($, storage, analytic, sharing, state, keyboard, navigation, progress, sidebar, search){
     $(document).ready(function() {
         var $book = state.$book;
 
@@ -35,14 +35,11 @@ require([
         // Init keyboard
         keyboard.init();
 
-        // Bind exercise
-        exercise.init();
-
         // Bind sharing button
         sharing.init();
 
-        // Show progress
-        progress.show();
+        // Init navigation
+        navigation.init();
 
         // Focus on content
         $(".book-body").focus();

theme/javascript/core/navigation.js

@@ -1,38 +1,23 @@
 define([
     "jQuery",
-    "core/progress"
-], function($, progress) {
+    "core/progress",
+    "core/exercise",
+    "core/quiz"
+], function($, progress, exercises, quiz) {
     var prev, next;
 
-    // Prevent cache so that using the back button works
-    // See: http://stackoverflow.com/a/15805399/983070
-    $.ajaxSetup({
-        cache: false
-    });
-
-    // Recreate first page when the page loads.
-    history.replaceState({ path: window.location.href }, '');
-
-    // Back Button Hijacking :(
-    window.onpopstate = function (event) {
-        if (event.state === null) {
-            return;
-        }
-
-        return handleNavigation(event.state.path, false);
+    var updateHistory = function(url, title) {
+        history.pushState({ path: url }, title, url);
     };
 
-    function updateHistory (url, title) {
-        history.pushState({ path: url }, title, url);
-    }
-
-    function handleNavigation (url, push) {
+    var handleNavigation = function(url, push) {
         if (typeof history.pushState === "undefined") {
             // Refresh the page to the new URL if pushState not supported
             location.href = url;
             return
         }
 
+        console.log("load url", url);
         return $.get(url)
         .done(function (data) {
             var $newPage = $(data);
@@ -43,12 +28,21 @@ define([
             $('.book-summary').html($newPage.find('.book-summary').html());
 
             if (push) updateHistory(url, null);
-            progress.show();
+            preparePage();
         })
         .fail(function () {
             location.href = url;
         });
-    }
+    };
+
+    var preparePage = function() {
+        // Bind exercises/quiz
+        exercises.init();
+        quiz.init();
+
+        // Show progress
+        progress.show();
+    };
 
     var handlePagination = function (e) {
         e.stopPropagation();
@@ -68,11 +62,37 @@ define([
         if (url) handleNavigation(url, true);
     };
 
-    $(document).on('click', ".navigation-prev", handlePagination);
-    $(document).on('click', ".navigation-next", handlePagination);
-    $(document).on('click', ".summary [data-path] a", handlePagination);
+    
+
+    var init = function() {
+        // Prevent cache so that using the back button works
+        // See: http://stackoverflow.com/a/15805399/983070
+        $.ajaxSetup({
+            cache: false
+        });
+
+        // Recreate first page when the page loads.
+        history.replaceState({ path: window.location.href }, '');
+
+        // Back Button Hijacking :(
+        window.onpopstate = function (event) {
+            if (event.state === null) {
+                return;
+            }
+
+            return handleNavigation(event.state.path, false);
+        };
+
+        $(document).on('click', ".navigation-prev", handlePagination);
+        $(document).on('click', ".navigation-next", handlePagination);
+        $(document).on('click', ".summary [data-path] a", handlePagination);
+
+        // Prepare current page
+        preparePage();
+    };
 
     return {
+        init: init,
         goNext: goNext,
         goPrev: goPrev
     };

theme/javascript/core/quiz.js

@@ -0,0 +1,52 @@
+define([
+    "jQuery",
+    "utils/execute",
+    "utils/analytic",
+    "core/state"
+], function($, execute, analytic, state){
+    // Bind an exercise
+    var prepareQuiz = function($quiz) {
+
+        $quiz.find(".quiz-answers input").click(function(e) {
+            e.preventDefault();
+        });
+
+        // Submit: test code
+        $quiz.find(".action-submit").click(function(e) {
+            e.preventDefault();
+            analytic.track("exercise.submit");
+            $quiz.find("tr.alert-danger,li.alert-danger").removeClass("alert-danger");
+            $quiz.find(".alert-success,.alert-danger").addClass("hidden");
+
+            $quiz.find(".quiz").each(function(q) {
+                var result = true;
+                var $answers = $quiz.find(".quiz-answers").slice(q).find("input[type=radio], input[type=checkbox]");
+                $(this).find("input[type=radio],input[type=checkbox]").each(function(i) {
+                    var correct = $(this).is(":checked") === $answers.slice(i).first().is(":checked");
+                    result = result && correct;
+                    if (!correct) {
+                        $(this).closest("tr, li").addClass("alert-danger");
+                    }
+                });
+                $(this).find(result ? "div.alert-success" : "div.alert-danger").toggleClass("hidden");
+            });
+
+        });
+
+        $quiz.find(".action-solution").click(function(e) {
+            $quiz.find(".quiz, .quiz-answers").toggleClass("hidden");
+        });
+    };
+
+    // Prepare all exercise
+    var init = function() {
+        state.$book.find("section.quiz").each(function() {
+            prepareQuiz($(this));
+        });
+    };
+
+    return {
+        init: init,
+        prepare: prepareQuiz
+    };
+});