Convert the message number parameter into the MVC route part. Correct the result of the restart lesson button.
This commit is contained in:
parent
de71f2700e
commit
ea1d852cda
@ -1,164 +1,195 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'libs/backbone',
|
||||
'goatApp/model/LessonContentModel',
|
||||
'goatApp/view/LessonContentView',
|
||||
'goatApp/view/PlanView',
|
||||
'goatApp/view/SourceView',
|
||||
'goatApp/view/SolutionView',
|
||||
'goatApp/view/HintView',
|
||||
'goatApp/view/HelpControlsView',
|
||||
'goatApp/view/CookieView',
|
||||
'goatApp/view/ParamView',
|
||||
'goatApp/model/ParamModel',
|
||||
'goatApp/support/GoatUtils',
|
||||
'goatApp/view/UserAndInfoView',
|
||||
'goatApp/view/MenuButtonView',
|
||||
'goatApp/model/LessonInfoModel',
|
||||
'goatApp/view/TitleView'
|
||||
],
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
LessonContentModel,
|
||||
LessonContentView,
|
||||
PlanView,
|
||||
SourceView,
|
||||
SolutionView,
|
||||
HintView,
|
||||
HelpControlsView,
|
||||
CookieView,
|
||||
ParamView,
|
||||
ParamModel,
|
||||
GoatUtils,
|
||||
UserAndInfoView,
|
||||
MenuButtonView,
|
||||
LessonInfoModel,
|
||||
TitleView
|
||||
) {
|
||||
'use strict'
|
||||
|
||||
|
||||
var Controller = function(options) {
|
||||
this.lessonContent = new LessonContentModel();
|
||||
this.lessonView = options.lessonView;
|
||||
'underscore',
|
||||
'libs/backbone',
|
||||
'goatApp/model/LessonContentModel',
|
||||
'goatApp/view/LessonContentView',
|
||||
'goatApp/view/PlanView',
|
||||
'goatApp/view/SourceView',
|
||||
'goatApp/view/SolutionView',
|
||||
'goatApp/view/HintView',
|
||||
'goatApp/view/HelpControlsView',
|
||||
'goatApp/view/CookieView',
|
||||
'goatApp/view/ParamView',
|
||||
'goatApp/model/ParamModel',
|
||||
'goatApp/support/GoatUtils',
|
||||
'goatApp/view/UserAndInfoView',
|
||||
'goatApp/view/MenuButtonView',
|
||||
'goatApp/model/LessonInfoModel',
|
||||
'goatApp/view/TitleView'
|
||||
],
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
LessonContentModel,
|
||||
LessonContentView,
|
||||
PlanView,
|
||||
SourceView,
|
||||
SolutionView,
|
||||
HintView,
|
||||
HelpControlsView,
|
||||
CookieView,
|
||||
ParamView,
|
||||
ParamModel,
|
||||
GoatUtils,
|
||||
UserAndInfoView,
|
||||
MenuButtonView,
|
||||
LessonInfoModel,
|
||||
TitleView
|
||||
) {
|
||||
'use strict'
|
||||
|
||||
|
||||
var Controller = function(options) {
|
||||
this.lessonContent = new LessonContentModel();
|
||||
this.lessonView = options.lessonView;
|
||||
|
||||
_.extend(Controller.prototype,Backbone.Events);
|
||||
_.extend(Controller.prototype,Backbone.Events);
|
||||
|
||||
this.start = function() {
|
||||
this.listenTo(this.lessonContent,'content:loaded',this.onContentLoaded);
|
||||
this.userAndInfoView = new UserAndInfoView();
|
||||
this.menuButtonView = new MenuButtonView();
|
||||
};
|
||||
this.start = function() {
|
||||
this.listenTo(this.lessonContent,'content:loaded',this.onContentLoaded);
|
||||
this.userAndInfoView = new UserAndInfoView();
|
||||
this.menuButtonView = new MenuButtonView();
|
||||
};
|
||||
|
||||
this.loadLesson = function(scr,menu,stage) {
|
||||
this.titleView = new TitleView();
|
||||
this.helpsLoaded = {};
|
||||
this.lessonContent.loadData({
|
||||
'screen': scr,
|
||||
'menu': menu,
|
||||
'stage': stage
|
||||
});
|
||||
this.planView = {};
|
||||
this.solutionView = {};
|
||||
this.sourceView = {};
|
||||
this.lessonHintView = {};
|
||||
this.screen = scr;
|
||||
this.menu = menu;
|
||||
};
|
||||
this.loadLesson = function(scr,menu,stage,num) {
|
||||
console.log("Loading a lesson, scr: " + scr + ", menu: " + menu + ", stage: " + stage + ", num: " + num);
|
||||
this.titleView = new TitleView();
|
||||
this.helpsLoaded = {};
|
||||
if (typeof(scr) == "undefined") {
|
||||
scr = null;
|
||||
}
|
||||
if (typeof(menu) == "undefined") {
|
||||
menu = null;
|
||||
}
|
||||
if (typeof(stage) == "undefined") {
|
||||
stage = null;
|
||||
}
|
||||
if (typeof(num) == "undefined") {
|
||||
num = null;
|
||||
}
|
||||
this.lessonContent.loadData({
|
||||
'scr': scr,
|
||||
'menu': menu,
|
||||
'stage': stage,
|
||||
'num': num,
|
||||
});
|
||||
this.planView = {};
|
||||
this.solutionView = {};
|
||||
this.sourceView = {};
|
||||
this.lessonHintView = {};
|
||||
this.scr = scr;
|
||||
this.menu = menu;
|
||||
this.stage = stage;
|
||||
this.num = num;
|
||||
console.log("Lesson loading initiated")
|
||||
};
|
||||
|
||||
this.onInfoLoaded = function() {
|
||||
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),
|
||||
});
|
||||
this.onInfoLoaded = function() {
|
||||
console.log("Lesson info loaded")
|
||||
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),
|
||||
});
|
||||
|
||||
this.listenTo(this.helpControlsView,'plan:show',this.hideShowHelps);
|
||||
this.listenTo(this.helpControlsView,'solution:show',this.hideShowHelps);
|
||||
this.listenTo(this.helpControlsView,'hints:show',this.onShowHints)
|
||||
this.listenTo(this.helpControlsView,'source:show',this.hideShowHelps);
|
||||
this.listenTo(this.helpControlsView,'lesson:restart',this.restartLesson);
|
||||
this.listenTo(this.helpControlsView,'plan:show',this.hideShowHelps);
|
||||
this.listenTo(this.helpControlsView,'solution:show',this.hideShowHelps);
|
||||
this.listenTo(this.helpControlsView,'hints:show',this.onShowHints)
|
||||
this.listenTo(this.helpControlsView,'source:show',this.hideShowHelps);
|
||||
this.listenTo(this.helpControlsView,'lesson:restart',this.restartLesson);
|
||||
|
||||
this.helpControlsView.render();
|
||||
this.helpControlsView.render();
|
||||
|
||||
this.titleView.render(this.lessonInfoModel.get('lessonTitle'));
|
||||
};
|
||||
this.titleView.render(this.lessonInfoModel.get('lessonTitle'));
|
||||
};
|
||||
|
||||
this.onContentLoaded = function(loadHelps) {
|
||||
this.lessonInfoModel = new LessonInfoModel();
|
||||
this.listenTo(this.lessonInfoModel,'info:loaded',this.onInfoLoaded);
|
||||
this.onContentLoaded = function(loadHelps) {
|
||||
console.log("Lesson content loaded")
|
||||
this.lessonInfoModel = new LessonInfoModel();
|
||||
this.listenTo(this.lessonInfoModel,'info:loaded',this.onInfoLoaded);
|
||||
|
||||
if (loadHelps) {
|
||||
this.helpControlsView = null;
|
||||
this.lessonView.model = this.lessonContent;
|
||||
this.lessonView.render();
|
||||
|
||||
this.planView = new PlanView();
|
||||
this.solutionView = new SolutionView();
|
||||
this.sourceView = new SourceView();
|
||||
this.lessonHintView = new HintView();
|
||||
this.cookieView = new CookieView();
|
||||
//TODO: instantiate model with values (not sure why was not working before)
|
||||
var paramModel = new ParamModel({});
|
||||
paramModel.set('screenParam',this.lessonContent.get('screenParam'));
|
||||
paramModel.set('menuParam',this.lessonContent.get('menuParam'));
|
||||
paramModel.set('stageParam',this.lessonContent.get('stageParam'));
|
||||
this.paramView = new ParamView({model:paramModel});
|
||||
if (loadHelps) {
|
||||
this.helpControlsView = null;
|
||||
this.lessonView.model = this.lessonContent;
|
||||
this.lessonView.render();
|
||||
|
||||
this.planView = new PlanView();
|
||||
this.solutionView = new SolutionView();
|
||||
this.sourceView = new SourceView();
|
||||
this.lessonHintView = new HintView();
|
||||
this.cookieView = new CookieView();
|
||||
//TODO: instantiate model with values (not sure why was not working before)
|
||||
var paramModel = new ParamModel({});
|
||||
paramModel.set('scrParam',this.lessonContent.get('scrParam'));
|
||||
paramModel.set('menuParam',this.lessonContent.get('menuParam'));
|
||||
paramModel.set('stageParam',this.lessonContent.get('stageParam'));
|
||||
paramModel.set('numParam',this.lessonContent.get('numParam'));
|
||||
this.paramView = new ParamView({model:paramModel});
|
||||
|
||||
$('.lesson-help').hide();
|
||||
}
|
||||
this.trigger('menu:reload');
|
||||
};
|
||||
$('.lesson-help').hide();
|
||||
}
|
||||
this.trigger('menu:reload');
|
||||
};
|
||||
|
||||
this.addCurHelpState = function (curHelp) {
|
||||
this.helpsLoaded[curHelp.helpElement] = curHelp.value;
|
||||
};
|
||||
this.addCurHelpState = function (curHelp) {
|
||||
this.helpsLoaded[curHelp.helpElement] = curHelp.value;
|
||||
};
|
||||
|
||||
this.hideShowHelps = function(showHelp) {
|
||||
var showId = '#lesson-' + showHelp + '-row';
|
||||
var contentId = '#lesson-' + showHelp + '-content';
|
||||
$('.lesson-help').not(showId).hide();
|
||||
if (!showId) {
|
||||
return;
|
||||
}
|
||||
this.hideShowHelps = function(showHelp) {
|
||||
var showId = '#lesson-' + showHelp + '-row';
|
||||
var contentId = '#lesson-' + showHelp + '-content';
|
||||
$('.lesson-help').not(showId).hide();
|
||||
if (!showId) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ($(showId).is(':visible')) {
|
||||
$(showId).hide();
|
||||
return;
|
||||
} else {
|
||||
//TODO: move individual .html operations into individual help views
|
||||
switch(showHelp) {
|
||||
case 'plan':
|
||||
$(contentId).html(this.planView.model.get('content'));
|
||||
break;
|
||||
case 'solution':
|
||||
$(showId).html(this.solutionView.model.get('content'));
|
||||
break;
|
||||
case 'source':
|
||||
$(contentId).html('<pre>' + this.sourceView.model.get('content') + '</pre>');
|
||||
break;
|
||||
}
|
||||
$(showId).show();
|
||||
GoatUtils.scrollToHelp()
|
||||
}
|
||||
};
|
||||
if ($(showId).is(':visible')) {
|
||||
$(showId).hide();
|
||||
return;
|
||||
} else {
|
||||
//TODO: move individual .html operations into individual help views
|
||||
switch(showHelp) {
|
||||
case 'plan':
|
||||
$(contentId).html(this.planView.model.get('content'));
|
||||
break;
|
||||
case 'solution':
|
||||
$(showId).html(this.solutionView.model.get('content'));
|
||||
break;
|
||||
case 'source':
|
||||
$(contentId).html('<pre>' + this.sourceView.model.get('content') + '</pre>');
|
||||
break;
|
||||
}
|
||||
$(showId).show();
|
||||
GoatUtils.scrollToHelp()
|
||||
}
|
||||
};
|
||||
|
||||
this.onShowHints = function() {
|
||||
this.lessonHintView.render();
|
||||
};
|
||||
this.onShowHints = function() {
|
||||
this.lessonHintView.render();
|
||||
};
|
||||
|
||||
this.restartLesson = function() {
|
||||
var self=this;
|
||||
$.ajax({
|
||||
url:'service/restartlesson.mvc',
|
||||
method:'GET'
|
||||
}).then(function() {
|
||||
self.loadLesson(self.screen,self.menu);
|
||||
});
|
||||
};
|
||||
this.restartLesson = function() {
|
||||
var self=this;
|
||||
var fragment = "attack/" + self.scr + "/" + self.menu;
|
||||
console.log("Navigating to " + fragment);
|
||||
// Avoiding the trigger event - handle - navigate loop by
|
||||
// loading the lesson explicitly (after executing the restart
|
||||
// servlet).
|
||||
goatRouter.navigate(fragment);
|
||||
// Resetting the user's lesson state (assuming a single browser
|
||||
// and session per user).
|
||||
$.ajax({
|
||||
url:'service/restartlesson.mvc',
|
||||
method:'GET'
|
||||
}).done(function(text) {
|
||||
console.log("Received a response from the restart servlet: '" + text + "'");
|
||||
// Explicitly loading the lesson instead of triggering an
|
||||
// event in goatRouter.navigate().
|
||||
self.loadLesson(self.scr,self.menu);
|
||||
});
|
||||
};
|
||||
|
||||
};
|
||||
return Controller;
|
||||
});
|
||||
};
|
||||
return Controller;
|
||||
});
|
||||
|
@ -1,46 +1,54 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/model/HTMLContentModel'],
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
HTMLContentModel){
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/model/HTMLContentModel'],
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
HTMLContentModel){
|
||||
|
||||
return HTMLContentModel.extend({
|
||||
urlRoot:null,
|
||||
defaults: {
|
||||
items:null,
|
||||
selectedItem:null
|
||||
},
|
||||
initialize: function (options) {
|
||||
this.screenParam = null;
|
||||
this.menuParam = null;
|
||||
this.stageParam = null;
|
||||
this.baseUrlRoot = 'attack?Screen=';
|
||||
},
|
||||
loadData: function(options) {
|
||||
this.urlRoot = this.baseUrlRoot +options.screen + '&menu=' + options.menu + '&stage=' + options.stage;
|
||||
this.set('menuParam',options.menu);
|
||||
this.set('screenParam',options.screen);
|
||||
this.set('stageParam',options.stage)
|
||||
var self=this;
|
||||
this.fetch().then(function(data) {
|
||||
self.setContent(data);
|
||||
});
|
||||
},
|
||||
return HTMLContentModel.extend({
|
||||
urlRoot:null,
|
||||
defaults: {
|
||||
items:null,
|
||||
selectedItem:null
|
||||
},
|
||||
initialize: function (options) {
|
||||
this.scrParam = null;
|
||||
this.menuParam = null;
|
||||
this.stageParam = null;
|
||||
this.numParam = null;
|
||||
this.baseUrlRoot = 'attack';
|
||||
},
|
||||
loadData: function(options) {
|
||||
this.urlRoot = this.baseUrlRoot + "?Screen=" + options.scr + '&menu=' + options.menu;
|
||||
if (options.stage != null) {
|
||||
this.urlRoot += '&stage=' + options.stage;
|
||||
}
|
||||
if (options.num != null) {
|
||||
this.urlRoot += '&Num=' + options.num;
|
||||
}
|
||||
this.set('menuParam', options.menu);
|
||||
this.set('scrParam', options.scr);
|
||||
this.set('stageParam', options.stage)
|
||||
this.set('numParam', options.num)
|
||||
var self = this;
|
||||
this.fetch().done(function(data) {
|
||||
self.setContent(data);
|
||||
});
|
||||
},
|
||||
|
||||
setContent: function(content, loadHelps) {
|
||||
if (typeof loadHelps === 'undefined') {
|
||||
loadHelps = true;
|
||||
}
|
||||
this.set('content',content);
|
||||
this.trigger('content:loaded',this,loadHelps);
|
||||
},
|
||||
setContent: function(content, loadHelps) {
|
||||
if (typeof loadHelps === 'undefined') {
|
||||
loadHelps = true;
|
||||
}
|
||||
this.set('content',content);
|
||||
this.trigger('content:loaded',this,loadHelps);
|
||||
},
|
||||
|
||||
fetch: function (options) {
|
||||
options = options || {};
|
||||
return Backbone.Model.prototype.fetch.call(this, _.extend({ dataType: "html"}, options));
|
||||
}
|
||||
});
|
||||
});
|
||||
fetch: function (options) {
|
||||
options = options || {};
|
||||
return Backbone.Model.prototype.fetch.call(this, _.extend({ dataType: "html"}, options));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
@ -19,7 +19,9 @@ define(['jquery',
|
||||
var GoatAppRouter = Backbone.Router.extend({
|
||||
routes: {
|
||||
'welcome':'welcomeRoute',
|
||||
'attack/:scr/:menu(/:stage)':'attackRoute',
|
||||
'attack/:scr/:menu':'attackRoute',
|
||||
'attack/:scr/:menu/:stage':'attackRoute',
|
||||
'attack/:scr/:menu/*stage/:num':'attackRoute',
|
||||
},
|
||||
|
||||
lessonController: new LessonController({
|
||||
@ -35,14 +37,17 @@ define(['jquery',
|
||||
this.lessonController.start();
|
||||
// this.menuController.initMenu();
|
||||
|
||||
goatRouter.on('route:attackRoute', function(scr,menu,stage) {
|
||||
this.lessonController.loadLesson(scr,menu,stage);
|
||||
goatRouter.on('route:attackRoute', function(scr,menu,stage,num) {
|
||||
this.lessonController.loadLesson(scr,menu,stage,num);
|
||||
this.menuController.updateMenu(scr,menu);
|
||||
//update menu
|
||||
});
|
||||
goatRouter.on('route:welcomeRoute', function() {
|
||||
this.lessonController.loadWelcome();
|
||||
});
|
||||
goatRouter.on("route", function(route, params) {
|
||||
console.log("Got a route event: " + route + ", params: " + params);
|
||||
});
|
||||
|
||||
Backbone.history.start();
|
||||
this.listenTo(this.lessonController, 'menu:reload',this.reloadMenu)
|
||||
@ -57,4 +62,4 @@ define(['jquery',
|
||||
|
||||
return GoatAppRouter;
|
||||
|
||||
});
|
||||
});
|
||||
|
@ -1,59 +1,64 @@
|
||||
//LessonContentView
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'libs/jquery.form'],
|
||||
function(
|
||||
$,
|
||||
_,
|
||||
Backbone,
|
||||
JQueryForm) {
|
||||
return Backbone.View.extend({
|
||||
el:'#lesson-content-wrapper', //TODO << get this fixed up in DOM
|
||||
'underscore',
|
||||
'backbone',
|
||||
'libs/jquery.form'],
|
||||
function(
|
||||
$,
|
||||
_,
|
||||
Backbone,
|
||||
JQueryForm) {
|
||||
return Backbone.View.extend({
|
||||
el:'#lesson-content-wrapper', //TODO << get this fixed up in DOM
|
||||
|
||||
initialize: function(options) {
|
||||
options = options || {};
|
||||
},
|
||||
initialize: function(options) {
|
||||
options = options || {};
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.$el.html(this.model.get('content'));
|
||||
this.makeFormsAjax();
|
||||
this.ajaxifyAttackHref();
|
||||
$(window).scrollTop(0); //work-around til we get the scroll down sorted out
|
||||
},
|
||||
|
||||
//TODO: reimplement this in custom fashion maybe?
|
||||
makeFormsAjax: function () {
|
||||
var options = {
|
||||
success:this.reLoadView.bind(this),
|
||||
url:'attack?Screen=' + this.model.get('screenParam') + '&menu=' + this.model.get('menuParam'),
|
||||
type:'GET'
|
||||
// $.ajax options can be used here too, for example:
|
||||
//timeout: 3000
|
||||
};
|
||||
//hook forms //TODO: clarify form selectors later
|
||||
$("form").ajaxForm(options);
|
||||
render: function() {
|
||||
this.$el.html(this.model.get('content'));
|
||||
this.makeFormsAjax();
|
||||
this.ajaxifyAttackHref();
|
||||
$(window).scrollTop(0); //work-around til we get the scroll down sorted out
|
||||
},
|
||||
|
||||
//TODO: reimplement this in custom fashion maybe?
|
||||
makeFormsAjax: function () {
|
||||
var options = {
|
||||
success:this.reLoadView.bind(this),
|
||||
url: this.model.urlRoot,
|
||||
type:'GET'
|
||||
// $.ajax options can be used here too, for example:
|
||||
//timeout: 3000
|
||||
};
|
||||
//hook forms //TODO: clarify form selectors later
|
||||
$("form").ajaxForm(options);
|
||||
},
|
||||
|
||||
ajaxifyAttackHref: function() { // rewrite any links with hrefs point to relative attack URLs
|
||||
var self = this;
|
||||
$.each($('a[href^="attack?"]'),function(i,el) {
|
||||
var url = $(el).attr('href');
|
||||
$(el).unbind('click').attr('href','#').attr('link',url);
|
||||
//TODO pull currentMenuId
|
||||
$(el).click(function() {
|
||||
event.preventDefault();
|
||||
var _url = $(el).attr('link');
|
||||
$.get(_url, {success:self.reloadView.bind(self)});
|
||||
});
|
||||
});
|
||||
},
|
||||
var self = this;
|
||||
// The current LessonAdapter#getLink() generates a hash-mark link. It will not match the mask below.
|
||||
// Besides, the new MVC code registers an event handler that will reload the lesson according to the route.
|
||||
$.each($('a[href^="attack?"]'),function(i,el) {
|
||||
var url = $(el).attr('href');
|
||||
$(el).unbind('click').attr('href','#').attr('link',url);
|
||||
//TODO pull currentMenuId
|
||||
$(el).click(function(event) {
|
||||
event.preventDefault();
|
||||
var _url = $(el).attr('link');
|
||||
console.log("About to GET " + _url);
|
||||
$.get(_url)
|
||||
.done(self.reLoadView.bind(self))
|
||||
.fail(function() { alert("failed to GET " + _url); });
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
reLoadView: function(content) {
|
||||
this.model.setContent(content);
|
||||
this.render();
|
||||
this.model.setContent(content);
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
@ -104,7 +104,7 @@
|
||||
if (stages != null)
|
||||
for (int i = 0; i < stages.length; i++) {
|
||||
%>
|
||||
<tr><td class="pviimenudivstage"><%=(rla.isStageComplete(webSession, stages[i]) ? lessonComplete : "")%><a href="<%=lesson.getLink() + "&stage=" + (i + 1)%>">Stage <%=i + 1%>: <%=stages[i]%></a>
|
||||
<tr><td class="pviimenudivstage"><%=(rla.isStageComplete(webSession, stages[i]) ? lessonComplete : "")%><a href="<%=lesson.getLink() + "/" + (i + 1)%>">Stage <%=i + 1%>: <%=stages[i]%></a>
|
||||
</td></tr>
|
||||
<%
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user