Skip to content

E
edx-ora2
Commit e3e90829 by Will Daly
Options

JS error message handling

parent b5bb705a
Showing with 70 additions and 74 deletions
apps/openassessment/templates/openassessmentblock/grade/oa_grade_waiting.html
...@@ -11,12 +11,4 @@ ...@@ -11,12 +11,4 @@
</span> </span>
</h2> </h2>
</header> </header>
</li> </li>
\ No newline at end of file
apps/openassessment/templates/openassessmentblock/oa_base.html
...@@ -65,32 +65,6 @@ ...@@ -65,32 +65,6 @@
</li> </li>
{% endfor %} {% endfor %}
<li class="openassessment__steps__step has--error">
<header class="step__header">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">Your Response</span>
<div class="message message--error message--error-server">
<div class="message__content">
<p>There was a problem communicating with the server. Please try again.</p>
</div>
</div>
</span>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="icon-warning-sign"></i>
<span class="copy">Unable to Load</span>
</span>
</span>
</span>
</header>
</li>
</ol> </ol>
</div> </div>
</div> </div>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
...@@ -105,12 +105,10 @@ ...@@ -105,12 +105,10 @@
</ol> </ol>
</fieldset> </fieldset>
<div class="peer-assessment__actions has--error"> <div class="peer-assessment__actions">
<div class="message message--error message--error-server"> <div class="message message--error message--error-server">
<h3 class="message__title">We could not submit your assessment</h3> <h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content"> <div class="message__content"></div>
<p>There was a problem communicating with the server. Please try again.</p>
</div>
</div> </div>
<ul class="list list--actions"> <ul class="list list--actions">
......
apps/openassessment/templates/openassessmentblock/response/oa_response.html
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
</li> </li>
</ol> </ol>
<div class="response__submission__actions has--error"> <div class="response__submission__actions">
<ul class="list list--actions"> <ul class="list list--actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="submission__save" class="action action--save submission__save is--disabled">Save Your Progress</button> <button type="submit" id="submission__save" class="action action--save submission__save is--disabled">Save Your Progress</button>
...@@ -57,20 +57,16 @@ ...@@ -57,20 +57,16 @@
<div class="message message--error message--error-server"> <div class="message message--error message--error-server">
<h3 class="message__title">We could not save your progress</h3> <h3 class="message__title">We could not save your progress</h3>
<div class="message__content"> <div class="message__content"></div>
<p>There was a problem communicating with the server. Please try again.</p>
</div>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<div class="step__actions has--error"> <div class="step__actions">
<div class="message message--error message--error-server"> <div class="message message--error message--error-server">
<h3 class="message__title">We could not submit your response</h3> <h3 class="message__title">We could not submit your response</h3>
<div class="message__content"> <div class="message__content"></div>
<p>There was a problem communicating with the server. Please try again.</p>
</div>
</div> </div>
<ul class="list list--actions"> <ul class="list list--actions">
......
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
...@@ -75,12 +75,10 @@ ...@@ -75,12 +75,10 @@
</ol> </ol>
</fieldset> </fieldset>
<div class="self-assessment__actions has--error"> <div class="self-assessment__actions">
<div class="message message--error message--error-server"> <div class="message message--error message--error-server">
<h3 class="message__title">We could not submit your assessment</h3> <h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content"> <div class="message__content"></div>
<p>There was a problem communicating with the server. Please try again.</p>
</div>
</div> </div>
<ul class="list list--actions"> <ul class="list list--actions">
<li class="list--actions__item"> <li class="list--actions__item">
......
apps/openassessment/xblock/static/js/src/oa_base.js
...@@ -68,18 +68,22 @@ OpenAssessment.BaseUI.prototype = { ...@@ -68,18 +68,22 @@ OpenAssessment.BaseUI.prototype = {
var sel = $('#openassessment__response', ui.element); var sel = $('#openassessment__response', ui.element);
sel.replaceWith(html); sel.replaceWith(html);
// If we have a saved submission, enable the submit button
ui.responseChanged();
// Install change handler for textarea (to enable submission button) // Install change handler for textarea (to enable submission button)
$('#submission__answer__value', ui.element).keyup( $('#submission__answer__value', ui.element).keyup(
function(eventData) { function(eventData) { ui.responseChanged(); }
var blankSubmission = ($(this).val() === '');
$('#step--response__submit', ui.element).toggleClass('is--disabled', blankSubmission);
$('#submission__save', ui.element).toggleClass('is--disabled', blankSubmission);
}
); );
// Install a click handler for submission // Install a click handler for submission
$('#step--response__submit', ui.element).click( $('#step--response__submit', ui.element).click(
function(eventObject) { ui.submit(); } function(eventObject) {
// Override default form submission
eventObject.preventDefault();
ui.submit();
}
); );
// Install a click handler for the save button // Install a click handler for the save button
...@@ -92,11 +96,21 @@ OpenAssessment.BaseUI.prototype = { ...@@ -92,11 +96,21 @@ OpenAssessment.BaseUI.prototype = {
); );
} }
).fail(function(errMsg) { ).fail(function(errMsg) {
ui.showError('load', errMsg); ui.showLoadError('response');
}); });
}, },
/** /**
Enable/disable the submission and save buttons based on whether
the user has entered a response.
**/
responseChanged: function() {
var blankSubmission = ($('#submission__answer__value', this.element).val() === '');
$('#step--response__submit', this.element).toggleClass('is--disabled', blankSubmission);
$('#submission__save', this.element).toggleClass('is--disabled', blankSubmission);
},
/**
Render the peer-assessment step. Render the peer-assessment step.
Args: Args:
...@@ -133,7 +147,7 @@ OpenAssessment.BaseUI.prototype = { ...@@ -133,7 +147,7 @@ OpenAssessment.BaseUI.prototype = {
); );
} }
).fail(function(errMsg) { ).fail(function(errMsg) {
ui.showError('load', errMsg); ui.showLoadError('peer-assessment');
}); });
}, },
...@@ -172,7 +186,7 @@ OpenAssessment.BaseUI.prototype = { ...@@ -172,7 +186,7 @@ OpenAssessment.BaseUI.prototype = {
); );
} }
).fail(function(errMsg) { ).fail(function(errMsg) {
ui.showError('load', errMsg); ui.showLoadError('self-assessment');
}); });
}, },
...@@ -189,7 +203,7 @@ OpenAssessment.BaseUI.prototype = { ...@@ -189,7 +203,7 @@ OpenAssessment.BaseUI.prototype = {
$('#openassessment__grade', ui.element).replaceWith(html); $('#openassessment__grade', ui.element).replaceWith(html);
} }
).fail(function(errMsg) { ).fail(function(errMsg) {
ui.showError('load', errMsg); ui.showLoadError('grade', errMsg);
}); });
}, },
...@@ -201,13 +215,13 @@ OpenAssessment.BaseUI.prototype = { ...@@ -201,13 +215,13 @@ OpenAssessment.BaseUI.prototype = {
var submission = $('#submission__answer__value', this.element).val(); var submission = $('#submission__answer__value', this.element).val();
var ui = this; var ui = this;
$('#response__save_status', this.element).html('Saving...'); $('#response__save_status', this.element).html('Saving...');
this.toggleActionError('save', null);
this.server.save(submission).done(function() { this.server.save(submission).done(function() {
// Update the "saved" icon
$('#response__save_status', this.element).html("Saved but not submitted"); $('#response__save_status', this.element).html("Saved but not submitted");
}).fail(function(errMsg) { }).fail(function(errMsg) {
ui.showError('response', errMsg); $("#response__save_status", ui.element).html('Error');
ui.toggleActionError('save', errMsg);
}); });
}, },
/** /**
...@@ -217,6 +231,7 @@ OpenAssessment.BaseUI.prototype = { ...@@ -217,6 +231,7 @@ OpenAssessment.BaseUI.prototype = {
// Send the submission to the server // Send the submission to the server
var submission = $('#submission__answer__value', this.element).val(); var submission = $('#submission__answer__value', this.element).val();
var ui = this; var ui = this;
this.toggleActionError('response', null);
this.server.submit(submission).done( this.server.submit(submission).done(
// When we have successfully sent the submission, expand the next step // When we have successfully sent the submission, expand the next step
function(studentId, attemptNum) { function(studentId, attemptNum) {
...@@ -224,7 +239,7 @@ OpenAssessment.BaseUI.prototype = { ...@@ -224,7 +239,7 @@ OpenAssessment.BaseUI.prototype = {
ui.renderPeerAssessmentStep(true); ui.renderPeerAssessmentStep(true);
} }
).fail(function(errCode, errMsg) { ).fail(function(errCode, errMsg) {
ui.showError('response', errMsg); ui.toggleActionError('submit', errMsg);
}); });
}, },
...@@ -244,6 +259,7 @@ OpenAssessment.BaseUI.prototype = { ...@@ -244,6 +259,7 @@ OpenAssessment.BaseUI.prototype = {
// Send the assessment to the server // Send the assessment to the server
var ui = this; var ui = this;
this.toggleActionError('peer', null);
this.server.peerAssess(submissionId, optionsSelected, feedback).done( this.server.peerAssess(submissionId, optionsSelected, feedback).done(
function() { function() {
// When we have successfully sent the assessment, // When we have successfully sent the assessment,
...@@ -253,7 +269,7 @@ OpenAssessment.BaseUI.prototype = { ...@@ -253,7 +269,7 @@ OpenAssessment.BaseUI.prototype = {
ui.renderGradeStep(false); ui.renderGradeStep(false);
} }
).fail(function(errMsg) { ).fail(function(errMsg) {
ui.showError('peer', errMsg); ui.toggleActionError('peer', errMsg);
}); });
}, },
...@@ -272,6 +288,7 @@ OpenAssessment.BaseUI.prototype = { ...@@ -272,6 +288,7 @@ OpenAssessment.BaseUI.prototype = {
// Send the assessment to the server // Send the assessment to the server
var ui = this; var ui = this;
this.toggleActionError('self', null);
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,
...@@ -280,7 +297,7 @@ OpenAssessment.BaseUI.prototype = { ...@@ -280,7 +297,7 @@ OpenAssessment.BaseUI.prototype = {
ui.renderGradeStep(true); ui.renderGradeStep(true);
} }
).fail(function(errMsg) { ).fail(function(errMsg) {
ui.showError('self', errMsg); ui.toggleActionError('self', errMsg);
}); });
}, },
...@@ -289,23 +306,43 @@ OpenAssessment.BaseUI.prototype = { ...@@ -289,23 +306,43 @@ OpenAssessment.BaseUI.prototype = {
Report an error to the user. Report an error to the user.
Args: Args:
type (str): Which type of error. Options are "load", "response", "peer", and "self". type (str): Which type of error. Options are "save", submit", "peer", and "self".
msg (str): The error message to display. msg (str or null): The error message to display.
If null, hide the error message (with one exception: loading errors are never hidden once displayed)
**/ **/
showError: function(type, msg) { toggleActionError: function(type, msg) {
var container = null; var container = null;
if (type == 'response') { container = '.step__actions'; } if (type == 'save') { container = '.response__submission__actions'; }
else if (type == 'submit') { container = '.step__actions'; }
else if (type == 'peer') { container = '.peer-assessment__actions'; } else if (type == 'peer') { container = '.peer-assessment__actions'; }
else if (type == 'self') { container = '.self-assessment__actions'; } else if (type == 'self') { container = '.self-assessment__actions'; }
// If we don't have anywhere to put the message, just log it to the console // If we don't have anywhere to put the message, just log it to the console
if (container === null) { if (container === null) {
console.log(msg); if (msg !== null) { console.log(msg); }
} }
else { else {
var sel = container + " .message__content"; // Insert the error message
$(sel).text(msg); var msgHtml = (msg === null) ? "" : msg;
$(container + " .message__content").html('<p>' + msg + '</p>');
// Toggle the error class
$(container).toggleClass('has--error', msg !== null);
} }
},
/**
Report an error loading a step.
Args:
step (str): the step that could not be loaded.
**/
showLoadError: function(step) {
var container = '#openassessment__' + step;
$(container).toggleClass('has--error', true);
$(container + ' .step__status__value i').removeClass().addClass('icon-warning-sign');
$(container + ' .step__status__value').html('Unable to Load');
} }
}; };
......
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