Skip to content

E
edx-ora2
Commit 0d71cad7 by Will Daly
Options

Merge pull request #143 from edx/will/js-expansion 

Will/js expansion
parents 26a8eaf3 71276752
Showing with 57 additions and 66 deletions
apps/openassessment/xblock/static/js/src/oa_base.js
...@@ -26,11 +26,25 @@ OpenAssessment.BaseUI = function(runtime, element, server) { ...@@ -26,11 +26,25 @@ OpenAssessment.BaseUI = function(runtime, element, server) {
OpenAssessment.BaseUI.prototype = { OpenAssessment.BaseUI.prototype = {
/** /**
* collapse/expand UI functionality Install click handlers to expand/collapse a section.
*/
toggleExpansion: function(component) { Args:
component.toggleClass('is--collapsed'); parentSel (JQuery selector): CSS selector for the container element.
onExpand (function): Function to execute when expanding (if provided). Accepts no args.
**/
setUpCollapseExpand: function(parentSel, onExpand) {
parentSel.find('.ui-toggle-visibility__control').click(
function(eventData) {
var sel = $(eventData.target).closest('.ui-toggle-visibility');
// If we're expanding and have an `onExpand` callback defined, execute it.
if (sel.hasClass('is--collapsed') && onExpand !== undefined) {
onExpand();
}
sel.toggleClass('is--collapsed');
}
);
}, },
/** /**
...@@ -40,7 +54,7 @@ OpenAssessment.BaseUI.prototype = { ...@@ -40,7 +54,7 @@ OpenAssessment.BaseUI.prototype = {
this.renderSubmissionStep(true); this.renderSubmissionStep(true);
this.renderPeerAssessmentStep(false); this.renderPeerAssessmentStep(false);
this.renderSelfAssessmentStep(false); this.renderSelfAssessmentStep(false);
this.renderGradeStep(false); this.renderGradeStep();
}, },
/** /**
...@@ -53,15 +67,13 @@ OpenAssessment.BaseUI.prototype = { ...@@ -53,15 +67,13 @@ OpenAssessment.BaseUI.prototype = {
var ui = this; var ui = this;
this.server.render('submission').done( this.server.render('submission').done(
function(html) { function(html) {
// Load the HTML // Load the HTML
$('#openassessment__response', ui.element).replaceWith(html); $('#openassessment__response', ui.element).replaceWith(html);
var sel = $('#openassessment__response', ui.element); var sel = $('#openassessment__response', ui.element);
// Install a click handler for collapse/expand // Install a click handler for collapse/expand
sel.find('.step__header', '.ui-toggle-visibility__control').click( ui.setUpCollapseExpand(sel);
function(eventObject) {
ui.toggleExpansion($('#openassessment__response'));
}
);
// If we have a saved submission, enable the submit button // If we have a saved submission, enable the submit button
ui.responseChanged(); ui.responseChanged();
...@@ -115,26 +127,13 @@ OpenAssessment.BaseUI.prototype = { ...@@ -115,26 +127,13 @@ OpenAssessment.BaseUI.prototype = {
var ui = this; var ui = this;
this.server.render('peer_assessment').done( this.server.render('peer_assessment').done(
function(html) { function(html) {
// Load the HTML // Load the HTML
$('#openassessment__peer-assessment', ui.element).replaceWith(html); $('#openassessment__peer-assessment', ui.element).replaceWith(html);
var sel = $('#openassessment__peer-assessment', ui.element); var sel = $('#openassessment__peer-assessment', ui.element);
// Install a click handler for collapse/expand
sel.find('.step__header', '.ui-toggle-visibility__control').click(
function(eventObject) {
if (sel.hasClass('is--collapsed')) {
// We're expanded into turbo mode. Get a new peer
ui.renderContinuedPeerAssessmentStep()
} else {
sel.toggleClass('is--collapsed');
}
}
);
sel.find('.assessment__rubric__question', '.ui-toggle-visibility').click( // Install a click handler for collapse/expand
function(eventObject) { ui.setUpCollapseExpand(sel, $.proxy(ui.renderContinuedPeerAssessmentStep, ui));
ui.toggleExpansion($(this));
}
);
// Install a change handler for rubric options to enable/disable the submit button // Install a change handler for rubric options to enable/disable the submit button
sel.find("#peer-assessment--001__assessment").change( sel.find("#peer-assessment--001__assessment").change(
...@@ -172,21 +171,13 @@ OpenAssessment.BaseUI.prototype = { ...@@ -172,21 +171,13 @@ OpenAssessment.BaseUI.prototype = {
var ui = this; var ui = this;
this.server.renderContinuedPeer().done( this.server.renderContinuedPeer().done(
function(html) { function(html) {
// Load the HTML // Load the HTML
$('#openassessment__peer-assessment', ui.element).replaceWith(html); $('#openassessment__peer-assessment', ui.element).replaceWith(html);
var sel = $('#openassessment__peer-assessment', ui.element); var sel = $('#openassessment__peer-assessment', ui.element);
// Install a click handler for collapse/expand
sel.find('.step__header', '.ui-toggle-visibility__control').click(
function(eventObject) {
sel.toggleClass('is--collapsed');
}
);
sel.find('.assessment__rubric__question', '.ui-toggle-visibility').click( // Install a click handler for collapse/expand
function(eventObject) { ui.setUpCollapseExpand(sel);
ui.toggleExpansion($(this));
}
);
// Install a click handler for assessment // Install a click handler for assessment
sel.find('#peer-assessment--001__assessment__submit').click( sel.find('#peer-assessment--001__assessment__submit').click(
...@@ -198,11 +189,21 @@ OpenAssessment.BaseUI.prototype = { ...@@ -198,11 +189,21 @@ OpenAssessment.BaseUI.prototype = {
ui.continuedPeerAssess(); ui.continuedPeerAssess();
} }
); );
// Install a change handler for rubric options to enable/disable the submit button
sel.find("#peer-assessment--001__assessment").change(
function() {
var numChecked = $('input[type=radio]:checked', this).length;
var numAvailable = $('.field--radio.assessment__rubric__question', this).length;
$("#peer-assessment--001__assessment__submit", ui.element).toggleClass(
'is--disabled', numChecked != numAvailable
);
}
);
} }
).fail(function(errMsg) { ).fail(function(errMsg) {
// TODO: display to the user ui.showLoadError('peer-assessment');
console.log(errMsg); });
});
}, },
/** /**
...@@ -215,20 +216,13 @@ OpenAssessment.BaseUI.prototype = { ...@@ -215,20 +216,13 @@ OpenAssessment.BaseUI.prototype = {
var ui = this; var ui = this;
this.server.render('self_assessment').done( this.server.render('self_assessment').done(
function(html) { function(html) {
// Load the HTML
$('#openassessment__self-assessment', ui.element).replaceWith(html); $('#openassessment__self-assessment', ui.element).replaceWith(html);
var sel = $('#openassessment__self-assessment', ui.element) var sel = $('#openassessment__self-assessment', ui.element);
// Install a click handler for collapse/expand
sel.find('.step__header', '.ui-toggle-visibility__control').click(
function(eventObject) {
ui.toggleExpansion($('#openassessment__self-assessment'));
}
);
sel.find('.assessment__rubric__question', '.ui-toggle-visibility').click( // Install a click handler for collapse/expand
function(eventObject) { ui.setUpCollapseExpand(sel);
ui.toggleExpansion($('#' + eventObject.id));
}
);
// Install a change handler for rubric options to enable/disable the submit button // Install a change handler for rubric options to enable/disable the submit button
$("#self-assessment--001__assessment", ui.element).change( $("#self-assessment--001__assessment", ui.element).change(
...@@ -259,11 +253,8 @@ OpenAssessment.BaseUI.prototype = { ...@@ -259,11 +253,8 @@ OpenAssessment.BaseUI.prototype = {
/** /**
Render the grade step. Render the grade step.
Args:
expand (bool): If true, expand the step.
**/ **/
renderGradeStep: function(expand) { renderGradeStep: function() {
var ui = this; var ui = this;
this.server.render('grade').done( this.server.render('grade').done(
function(html) { function(html) {
...@@ -326,11 +317,12 @@ OpenAssessment.BaseUI.prototype = { ...@@ -326,11 +317,12 @@ OpenAssessment.BaseUI.prototype = {
peerAssess: function() { peerAssess: function() {
var ui = this; var ui = this;
ui.peerAssessRequest(function() { ui.peerAssessRequest(function() {
// When we have successfully sent the assessment, // We leave the peer assessment step expanded, because (a) there might
// collapse the current step and expand the next step // be more peers for the student to grade, and (b) the "completed" state
ui.renderPeerAssessmentStep(false); // contains no content, so it will look collapsed anyway.
ui.renderPeerAssessmentStep(true);
ui.renderSelfAssessmentStep(true); ui.renderSelfAssessmentStep(true);
ui.renderGradeStep(false); ui.renderGradeStep();
}); });
}, },
...@@ -341,10 +333,8 @@ OpenAssessment.BaseUI.prototype = { ...@@ -341,10 +333,8 @@ OpenAssessment.BaseUI.prototype = {
continuedPeerAssess: function() { continuedPeerAssess: function() {
var ui = this; var ui = this;
ui.peerAssessRequest(function() { ui.peerAssessRequest(function() {
// When we have successfully sent the assessment,
// collapse the current step and expand the next step
ui.renderContinuedPeerAssessmentStep(); ui.renderContinuedPeerAssessmentStep();
ui.renderGradeStep(false); ui.renderGradeStep();
}); });
}, },
...@@ -372,7 +362,7 @@ OpenAssessment.BaseUI.prototype = { ...@@ -372,7 +362,7 @@ OpenAssessment.BaseUI.prototype = {
var ui = this; var ui = this;
this.toggleActionError('peer', null); this.toggleActionError('peer', null);
this.server.peerAssess(submissionId, optionsSelected, feedback).done( this.server.peerAssess(submissionId, optionsSelected, feedback).done(
successFunction() successFunction
).fail(function(errMsg) { ).fail(function(errMsg) {
ui.toggleActionError('peer', errMsg); ui.toggleActionError('peer', errMsg);
}); });
...@@ -397,9 +387,10 @@ OpenAssessment.BaseUI.prototype = { ...@@ -397,9 +387,10 @@ OpenAssessment.BaseUI.prototype = {
this.server.selfAssess(submissionId, optionsSelected).done( this.server.selfAssess(submissionId, optionsSelected).done(
function() { function() {
// When we have successfully sent the assessment, // When we have successfully sent the assessment,
// collapse the current step and expand the next step // collapse the current and previous steps and expand the next step
ui.renderPeerAssessmentStep(false);
ui.renderSelfAssessmentStep(false); ui.renderSelfAssessmentStep(false);
ui.renderGradeStep(true); ui.renderGradeStep();
} }
).fail(function(errMsg) { ).fail(function(errMsg) {
ui.toggleActionError('self', errMsg); ui.toggleActionError('self', errMsg);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment