Hints back on main screen

webgoat-container/src/main/resources/static/js/goatApp/controller/LessonController.js

@@ -90,6 +90,7 @@ define(['jquery',
                     //hasAttack:this.lessonInfo.get('hasAttack') // TODO: add attack options
                 });
 
+                this.listenTo(this.helpControlsView,'hints:show',this.showHints);
                 this.listenTo(this.helpControlsView,'attack:show',this.hideShowAttack);
                 this.listenTo(this.helpControlsView,'solution:show',this.hideShowHelps);
                 this.listenTo(this.helpControlsView,'source:show',this.hideShowHelps);

webgoat-container/src/main/resources/static/js/goatApp/view/GoatRouter.js

@@ -45,7 +45,6 @@ define(['jquery',
 //                this.menuController.updateMenu(scr,menu);
 //            });
             goatRouter.on('route:lessonRoute', function(name) {
-                console.log('lesson route initiated');
                 this.lessonController.loadLesson(name);
                 //TODO - update menu code from below
                 this.menuController.updateMenu(name);

webgoat-container/src/main/resources/static/js/goatApp/view/HelpControlsView.js

@@ -25,6 +25,9 @@ function($,_,Backbone) {
 
 			if (this.hasSource) {
 				this.$el.find('#show-source-button').unbind().on('click',_.bind(this.showSource,this)).show();
+			}
+			if (this.hasHints) {
+                this.$el.find('#show-hints-button').unbind().on('click',this.showHints.bind(this)).show();
             }
 			if (this.hasSolution) {
 				this.$el.find('#show-solution-button').unbind().on('click',_.bind(this.showSolution,this)).show();
@@ -38,6 +41,10 @@ function($,_,Backbone) {
 			//this.$el.append(this.helpButtons.restartLesson);
 		},
 
+		showHints: function() {
+		    this.trigger('hints:show','hint');
+		},
+
 		showSource: function() {
 			this.trigger('source:show','source');
 		},

webgoat-container/src/main/resources/static/js/goatApp/view/HintView.js

@@ -24,7 +24,11 @@ function($,
         },
 
         toggleLabel: function() {
-            this.$el.text((showing) ? 'Hide hints' : 'Show hints');
+            if (this.isVisible()) {
+                $('show-hints-button').text('Hide hints');
+            } else {
+                $('show-hints-button').text('Show hints');
+            }
         },
 
 		render:function() {

webgoat-container/src/main/resources/templates/main_new.html

@@ -115,6 +115,8 @@
                                 <button class="btn btn-primary btn-xs btn-danger help-button" id="show-source-button">
                                     <i class="fa fa-code" />
                                 </button>
+                                <button class="btn btn-primary btn-xs btn-danger help-button" id="show-hints-button">Show Hints
+                                </button>
                                 <!--<button class="btn btn-primary btn-xs btn-danger help-button" id="show-attack-button">-->
                                 <!--Attack It-->
                                 <!--</button>-->
@@ -122,6 +124,21 @@
                                     Reset Lesson
                                 </button>
                             </div>
+
+                            <div class="lesson-hint" id="lesson-hint-container">
+                                <!--<h4>Hints</h4>-->
+                                <div class="panel">
+                                    <div id="message" class="info" th:utext="${message}"></div>
+                                    <div class="panel-body" id="lesson-hint">
+                            <span class="glyphicon-class glyphicon glyphicon-circle-arrow-left"
+                                  id="show-prev-hint"></span>
+                                        <span class="glyphicon-class glyphicon glyphicon-circle-arrow-right"
+                                              id="show-next-hint"></span>
+                                        <br/>
+                                        <span id="lesson-hint-content"></span>
+                                    </div>
+                                </div>
+                            </div>
                             <div class="lesson-content">
 
                             </div>