Hints per lesson (#314)

Squashing and merging ...

* Each assigment should have the options to have its own set of hints #278

* Updating lessons due to changes from #278

* Enable i18n client side #312

* IDOR move hints to assignment and enable i18n #312
This commit is contained in:
Nanne Baars
2017-01-24 15:34:06 +01:00
committed by misfir3
parent 6d727b98e3
commit 0779f7a3d0
56 changed files with 488 additions and 367 deletions

View File

@ -72,6 +72,7 @@ define(['jquery',
if (this.name === name) {
this.lessonContentView.navToPage(pageNum);
this.lessonHintView.hideHints();
this.titleView.render(this.lessonInfoModel.get('lessonTitle'));
return;
}
@ -80,9 +81,7 @@ define(['jquery',
if (typeof(name) === 'undefined' || name === null) {
//TODO: implement lesson not found or return to welcome page?
}
this.lessonContent.loadData({
'name':name
});
this.lessonContent.loadData({'name':name});
this.planView = {};
this.solutionView = {};
this.sourceView = {};
@ -94,23 +93,20 @@ define(['jquery',
this.helpControlsView = new HelpControlsView({
hasPlan:this.lessonInfoModel.get('hasPlan'),
hasSolution:this.lessonInfoModel.get('hasSolution'),
hasSource:this.lessonInfoModel.get('hasSource'),
hasHints:(this.lessonInfoModel.get('numberHints') > 0)
//hasAttack:this.lessonInfo.get('hasAttack') // TODO: add attack options
hasSource:this.lessonInfoModel.get('hasSource')
});
this.listenTo(this.helpControlsView,'hints:show',this.showHints);
this.listenTo(this.helpControlsView,'lessonOverview:show',this.showLessonOverview)
this.listenTo(this.helpControlsView,'attack:show',this.hideShowAttack);
this.listenTo(this.helpControlsView,'solution:show',this.hideShowHelps);
this.listenTo(this.helpControlsView,'source:show',this.hideShowHelps);
this.listenTo(this.helpControlsView,'lesson:restart',this.restartLesson);
this.listenTo(this.developerControlsView, 'dev:labels', this.restartLesson);
this.listenTo(this,'hints:show',this.onShowHints);
this.helpControlsView.render();
this.lessonOverview.hideLessonOverview();
this.titleView.render(this.lessonInfoModel.get('lessonTitle'));
this.helpControlsView.showHideHintsButton({});
};
this.updateMenu = function() {
@ -191,19 +187,6 @@ define(['jquery',
this.lessonOverviewModel.fetch().then(this.lessonOverview.render());
};
this.hideShowAttack = function (options) { // will likely expand this to encompass
if (options.show) {
$('#attack-container').show();
$('#attack-container div.modal-header button.close, #about-modal div.modal-footer button').unbind('click').on('click', function() {
$('#attack-container').hide(200);
});
if (this.lessonInfoModel.get('numberHints') > 0) {
this.lessonContentView.$el.find('#show-hints-button').unbind().on('click',_.bind(this.showHints,this)).show();
}
}
};
this.restartLesson = function() {
var self=this;
$.ajax({

View File

@ -1,13 +1,15 @@
define(['jquery','underscore','backbone','goatApp/view/GoatRouter', 'goatApp/support/goatAsyncErrorHandler'],
function($,_,Backbone,Router, asyncErrorHandler){
'use strict'
//var goatRouter = new Router();
return {
initApp: function() {
asyncErrorHandler.init();
//TODO: add query/ability to load from where they left off
var goatRouter = new Router();
goatRouter.init();
}
};
});
define(['jquery', 'underscore', 'backbone', 'polyglot', 'goatApp/view/GoatRouter', 'goatApp/support/goatAsyncErrorHandler'],
function ($, _, Backbone, Polyglot, Router, asyncErrorHandler) {
'use strict'
return {
initApp: function () {
var locale = localStorage.getItem('locale') || 'en';
$.getJSON('service/labels.mvc?lang=' + locale, function(data) {
window.polyglot = new Polyglot({phrases: data});
asyncErrorHandler.init();
var goatRouter = new Router();
});
}
};
});

View File

@ -1,7 +1,7 @@
define(['jquery',
'underscore',
'backbone',
'goatApp/model/HintModel'],
'goatApp/model/HintModel'],
function($,
_,
@ -25,8 +25,17 @@ define(['jquery',
checkNullModel:function() {
if (this.models[0].indexOf('There are no hints defined.') > -1) {
this.reset([]);
//return this.models;
}
},
getHintsForAssignment: function(assignmentPath) {
var assignmentHints = new Array();
this.models.forEach(function(hint) {
if (assignmentPath.includes(hint.get('assignmentPath'))) {
assignmentHints.push(hint);
}
});
return assignmentHints;
}
});
});

View File

@ -17,11 +17,6 @@ define(['jquery',
DeveloperControlsView,
TitleView) {
var lessonContentView = new LessonContentView();
var menuView = new MenuView();
var developerControlsView = new DeveloperControlsView();
var titleView = new TitleView();
function getContentElement() {
return $('#main-content');
};
@ -38,7 +33,8 @@ define(['jquery',
};
var GoatAppRouter = Backbone.Router.extend({
routes: {
routes: {
'welcome': 'welcomeRoute',
'lesson/:name': 'lessonRoute',
'lesson/:name/:pageNum': 'lessonPageRoute',
@ -46,14 +42,9 @@ define(['jquery',
'reportCard': 'reportCard'
},
lessonController: new LessonController({
lessonContentView: lessonContentView,
titleView: titleView
}),
menuController: new MenuController({
menuView: menuView
}),
lessonController: null,
menuController : null,
titleView: null,
setUpCustomJS: function () {
webgoat.customjs.jquery = $; //passing jquery into custom js scope ... still klunky, but works for now
@ -75,54 +66,45 @@ define(['jquery',
}
},
init: function () {
goatRouter = new GoatAppRouter();
initialize: function () {
this.menuController = new MenuController({menuView: new MenuView()});
this.titleView = new TitleView();
this.lessonController = new LessonController({lessonContentView: new LessonContentView(), titleView: this.titleView}),
this.lessonController.start();
// this.menuController.initMenu();
webgoat = {};
webgoat.customjs = {};
this.setUpCustomJS();
goatRouter.on('route:lessonRoute', function (name) {
render();
this.lessonController.loadLesson(name, 0);
//TODO - update menu code from below
this.menuController.updateMenu(name);
});
goatRouter.on('route:lessonPageRoute', function (name, pageNum) {
render();
pageNum = (_.isNumber(parseInt(pageNum))) ? parseInt(pageNum) : 0;
this.lessonController.loadLesson(name, pageNum);
//TODO - update menu code from below
this.menuController.updateMenu(name);
});
goatRouter.on('route:welcomeRoute', function () {
render();
this.lessonController.loadWelcome();
});
goatRouter.on('route:testRoute', function (param) {
render();
this.lessonController.testHandler(param);
});
goatRouter.on("route", function (route, params) {
});
Backbone.history.start();
this.listenTo(this.lessonController, 'menu:reload', this.reloadMenu)
},
lessonRoute: function(name) {
render();
this.lessonController.loadLesson(name, 0);
this.menuController.updateMenu(name);
},
lessonPageRoute: function (name, pageNum) {
render();
pageNum = (_.isNumber(parseInt(pageNum))) ? parseInt(pageNum) : 0;
this.lessonController.loadLesson(name, pageNum);
this.menuController.updateMenu(name);
},
welcomeRoute: function () {
render();
this.lessonController.loadWelcome();
},
reloadMenu: function (curLesson) {
this.menuController.updateMenu();
},
reportCard : function () {
var self = this;
require(['goatApp/view/ReportCardView'], function (ReportCardView) {
titleView.render('Report card');
self.titleView.render('Report card');
render(new ReportCardView());
});
},

View File

@ -12,33 +12,34 @@ function($,_,Backbone) {
this.hasPlan = options.hasPlan;
this.hasSolution = options.hasSolution;
this.hasSource = options.hasSource;
this.hasHints = options.hasHints;
var self = this;
Backbone.on('navigatedToPage', function(nav) {
self.showHideHintsButton(nav)
});
},
showHideHintsButton: function(nav) {
if (typeof nav['assignmentPath'] !== 'undefined') {
this.$el.find('#show-hints-button').unbind().on('click',this.showHints.bind(this)).show();
} else {
$('#show-hints-button').hide();
}
},
render:function(title) {
//this.$el.html();
// if still showing, hide
$('#show-source-button').hide();
$('#show-solution-button').hide();
$('#show-plan-button').hide();
$('#show-hints-button').hide();
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();
}
if (true) { //FIXME: change to this.hasAttack
this.$el.find('#show-attack-button').unbind().on('click',_.bind(this.showAttack,this)).show();
}
this.$el.find('#show-lesson-overview-button').unbind().on('click', _.bind(this.showLessonOverview, this)).show();
this.$el.find('#restart-lesson-button').unbind().on('click',_.bind(this.restartLesson,this)).show();
//this.$el.append(this.helpButtons.restartLesson);
},
showHints: function() {
@ -53,10 +54,6 @@ function($,_,Backbone) {
this.trigger('solution:show','solution');
},
showAttack: function() {
this.trigger('attack:show',{show:true});
},
restartLesson: function() {
this.trigger('lesson:restart');
},

View File

@ -15,8 +15,13 @@ function($,
initialize: function() {
this.curHint=0;
this.collection = new HintCollection();
this.hintsToShow = new Array();
this.listenTo(this.collection,'loaded',this.onModelLoaded);
this.hideHints();
var self = this;
Backbone.on('navigatedToPage', function(nav){
self.selectHints(nav)
});
},
isVisible: function() {
@ -34,19 +39,38 @@ function($,
render:function() {
if (this.isVisible()) {
this.$el.hide(350);
} else {
} else if (this.hintsToShow.length > 0) {
this.$el.show(350);
}
this.toggleLabel()
if (this.collection.length > 0) {
if (this.hintsToShow.length > 0) {
this.hideShowPrevNextButtons();
}
this.displayHint(this.curHint);
},
/**
* Select the hints, we get '/WebGoat/HttpBasics/attack1' in the json (nav) we need to select all the hints
* from the model where the assignment name is contained in the assignmentPath. We do this not to mess
* with contextRoots etc and try to select the name from the url.
*
* @todo we can of course try to add the assigment name to the html form as attribute.
*
* @param nav the json structure for navigating
*/
selectHints: function(nav) {
this.curHint = 0;
var assignmentPath = nav['assignmentPath'];
if (assignmentPath != null) {
this.hintsToShow = this.collection.getHintsForAssignment(assignmentPath);
} else {
this.hintsToShow = new Array();
}
},
onModelLoaded: function() {
this.trigger('hints:loaded',{'helpElement':'hints','value':true})
},
@ -58,7 +82,7 @@ function($,
},
showNextHint: function() {
this.curHint = (this.curHint < this.collection.length -1) ? this.curHint+1 : this.curHint;
this.curHint = (this.curHint < this.hintsToShow.length -1) ? this.curHint+1 : this.curHint;
this.hideShowPrevNextButtons();
this.displayHint(this.curHint);
},
@ -70,11 +94,15 @@ function($,
},
displayHint: function(curHint) {
this.$el.find('#lesson-hint-content').html(this.collection.models[curHint].get('hint'));
if(this.hintsToShow.length == 0) {
this.hideHints();
} else {
this.$el.find('#lesson-hint-content').html(polyglot.t(this.hintsToShow[curHint].get('hint')));
}
},
hideShowPrevNextButtons: function() {
if (this.curHint === this.collection.length -1) {
if (this.curHint === this.hintsToShow.length -1) {
this.$el.find('#show-next-hint').css('visibility','hidden');
} else {
this.$el.find('#show-next-hint').css('visibility','visible');

View File

@ -189,7 +189,7 @@ define(['jquery',
if (this.currentPage < this.numPages -1) {
this.currentPage++;
window.location.href = this.model.get('lessonUrl') + '/' + this.currentPage;
//this.showCurContentPage(true);
//this.showCurContentPage(true);Con
}
if (this.currentPage > 0) {
@ -225,10 +225,21 @@ define(['jquery',
this.$el.find(this.$contentPages[this.currentPage]).show();
},
findAssigmentEndpointOnPage: function(pageNumber) {
var contentPage = this.$contentPages[this.currentPage];
var form = $('form.attack-form', contentPage);
var action = form.attr('action')
if (action !== undefined) {
return action;
}
},
navToPage: function (pageNum) {
this.setCurrentPage(pageNum);//provides validation
this.showCurContentPage(this.currentPage);
this.hideShowNavButtons();
var assignmentPath = this.findAssigmentEndpointOnPage(pageNum);
Backbone.trigger('navigatedToPage',{'pageNumber':pageNum, 'assignmentPath' : assignmentPath});
},
hideShowNavButtons: function () {

View File

@ -7,13 +7,13 @@ function($,
_,
Backbone) {
return Backbone.View.extend({
el:'#toggle-menu', //Check this,
el:'#toggle-menu',
initialize: function() {
this.$el.on('click',this.toggleMenu);
},
toggleMenu: function() {
events: {
"click": "toggleMenu"
},
toggleMenu: function(e) {
//left
if (!$('.sidebarRight').hasClass('.sidebar-toggle-right')) {
$('.sidebarRight').removeClass('sidebar-toggle-right');
@ -21,7 +21,7 @@ function($,
}
$('.sidebar').toggleClass('sidebar-toggle');
$('.main-content-wrapper').toggleClass('main-content-toggle-left');
//e.stopPropagation();
e.stopImmediatePropagation();
}
});
});

View File

@ -60,7 +60,7 @@ define(['jquery',
var categoryLessonList = $('<ul>',{class:'slideDown lessonsAndStages',id:catId}); //keepOpen
for (var j=0; j < lessons.length;j++) {
var lessonItem = $('<li>',{class:'lesson'});
var lessonName = lessons[j].name;
var lessonName = polyglot.t(lessons[j].name);
var lessonId = catId + '-' + GoatUtils.makeId(lessonName);
if (this.curLessonLinkId === lessonId) {
lessonItem.addClass('selected');

View File

@ -0,0 +1,17 @@
// (c) 2012 Airbnb, Inc.
//
// polyglot.js may be freely distributed under the terms of the BSD
// license. For all licensing information, details, and documention:
// http://airbnb.github.com/polyglot.js
//
//
// Polyglot.js is an I18n helper library written in JavaScript, made to
// work both in the browser and in Node. It provides a simple solution for
// interpolation and pluralization, based off of Airbnb's
// experience adding I18n functionality to its Backbone.js and Node apps.
//
// Polylglot is agnostic to your translation backend. It doesn't perform any
// translation; it simply gives you a way to manage translated phrases from
// your client- or server-side JavaScript application.
//
(function(e,t){typeof define=="function"&&define.amd?define([],function(){return t(e)}):typeof exports=="object"?module.exports=t(e):e.Polyglot=t(e)})(this,function(e){"use strict";function t(e){e=e||{},this.phrases={},this.extend(e.phrases||{}),this.currentLocale=e.locale||"en",this.allowMissing=!!e.allowMissing,this.warn=e.warn||c}function s(e){var t,n,r,i={};for(t in e)if(e.hasOwnProperty(t)){n=e[t];for(r in n)i[n[r]]=t}return i}function o(e){var t=/^\s+|\s+$/g;return e.replace(t,"")}function u(e,t,r){var i,s,u;return r!=null&&e?(s=e.split(n),u=s[f(t,r)]||s[0],i=o(u)):i=e,i}function a(e){var t=s(i);return t[e]||t.en}function f(e,t){return r[a(e)](t)}function l(e,t){for(var n in t)n!=="_"&&t.hasOwnProperty(n)&&(e=e.replace(new RegExp("%\\{"+n+"\\}","g"),t[n]));return e}function c(t){e.console&&e.console.warn&&e.console.warn("WARNING: "+t)}function h(e){var t={};for(var n in e)t[n]=e[n];return t}t.VERSION="0.4.3",t.prototype.locale=function(e){return e&&(this.currentLocale=e),this.currentLocale},t.prototype.extend=function(e,t){var n;for(var r in e)e.hasOwnProperty(r)&&(n=e[r],t&&(r=t+"."+r),typeof n=="object"?this.extend(n,r):this.phrases[r]=n)},t.prototype.clear=function(){this.phrases={}},t.prototype.replace=function(e){this.clear(),this.extend(e)},t.prototype.t=function(e,t){var n,r;return t=t==null?{}:t,typeof t=="number"&&(t={smart_count:t}),typeof this.phrases[e]=="string"?n=this.phrases[e]:typeof t._=="string"?n=t._:this.allowMissing?n=e:(this.warn('Missing translation for key: "'+e+'"'),r=e),typeof n=="string"&&(t=h(t),r=u(n,this.currentLocale,t.smart_count),r=l(r,t)),r},t.prototype.has=function(e){return e in this.phrases};var n="||||",r={chinese:function(e){return 0},german:function(e){return e!==1?1:0},french:function(e){return e>1?1:0},russian:function(e){return e%10===1&&e%100!==11?0:e%10>=2&&e%10<=4&&(e%100<10||e%100>=20)?1:2},czech:function(e){return e===1?0:e>=2&&e<=4?1:2},polish:function(e){return e===1?0:e%10>=2&&e%10<=4&&(e%100<10||e%100>=20)?1:2},icelandic:function(e){return e%10!==1||e%100===11?1:0}},i={chinese:["fa","id","ja","ko","lo","ms","th","tr","zh"],german:["da","de","en","es","fi","el","he","hu","it","nl","no","pt","sv"],french:["fr","tl","pt-br"],russian:["hr","ru"],czech:["cs"],polish:["pl"],icelandic:["is"]};return t});

View File

@ -18,6 +18,7 @@ require.config({
backbone: 'libs/backbone-min',
text: 'libs/text',
templates: 'goatApp/templates',
polyglot: 'libs/polyglot.min'
},
shim: {
underscore: {