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 @@
</span>
</h2>
</header>
</li>
</li>
\ No newline at end of file
apps/openassessment/templates/openassessmentblock/oa_base.html
......@@ -65,32 +65,6 @@
</li>
{% 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>
</div>
</div>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
......@@ -105,12 +105,10 @@
</ol>
</fieldset>
<div class="peer-assessment__actions has--error">
<div class="peer-assessment__actions">
<div class="message message--error message--error-server">
<h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content">
<p>There was a problem communicating with the server. Please try again.</p>
</div>
<div class="message__content"></div>
</div>
<ul class="list list--actions">
......
apps/openassessment/templates/openassessmentblock/response/oa_response.html
......@@ -48,7 +48,7 @@
</li>
</ol>
<div class="response__submission__actions has--error">
<div class="response__submission__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="submission__save" class="action action--save submission__save is--disabled">Save Your Progress</button>
......@@ -57,20 +57,16 @@
<div class="message message--error message--error-server">
<h3 class="message__title">We could not save your progress</h3>
<div class="message__content">
<p>There was a problem communicating with the server. Please try again.</p>
</div>
<div class="message__content"></div>
</div>
</div>
</form>
</div>
<div class="step__actions has--error">
<div class="step__actions">
<div class="message message--error message--error-server">
<h3 class="message__title">We could not submit your response</h3>
<div class="message__content">
<p>There was a problem communicating with the server. Please try again.</p>
</div>
<div class="message__content"></div>
</div>
<ul class="list list--actions">
......
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
......@@ -75,12 +75,10 @@
</ol>
</fieldset>
<div class="self-assessment__actions has--error">
<div class="self-assessment__actions">
<div class="message message--error message--error-server">
<h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content">
<p>There was a problem communicating with the server. Please try again.</p>
</div>
<div class="message__content"></div>
</div>
<ul class="list list--actions">
<li class="list--actions__item">
......
apps/openassessment/xblock/static/js/src/oa_base.js
......@@ -68,18 +68,22 @@ OpenAssessment.BaseUI.prototype = {
var sel = $('#openassessment__response', ui.element);
sel.replaceWith(html);
// If we have a saved submission, enable the submit button
ui.responseChanged();
// Install change handler for textarea (to enable submission button)
$('#submission__answer__value', ui.element).keyup(
function(eventData) {
var blankSubmission = ($(this).val() === '');
$('#step--response__submit', ui.element).toggleClass('is--disabled', blankSubmission);
$('#submission__save', ui.element).toggleClass('is--disabled', blankSubmission);
}
function(eventData) { ui.responseChanged(); }
);
// Install a click handler for submission
$('#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
......@@ -92,11 +96,21 @@ OpenAssessment.BaseUI.prototype = {
);
}
).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.
Args:
......@@ -133,7 +147,7 @@ OpenAssessment.BaseUI.prototype = {
);
}
).fail(function(errMsg) {
ui.showError('load', errMsg);
ui.showLoadError('peer-assessment');
});
},
......@@ -172,7 +186,7 @@ OpenAssessment.BaseUI.prototype = {
);
}
).fail(function(errMsg) {
ui.showError('load', errMsg);
ui.showLoadError('self-assessment');
});
},
......@@ -189,7 +203,7 @@ OpenAssessment.BaseUI.prototype = {
$('#openassessment__grade', ui.element).replaceWith(html);
}
).fail(function(errMsg) {
ui.showError('load', errMsg);
ui.showLoadError('grade', errMsg);
});
},
......@@ -201,13 +215,13 @@ OpenAssessment.BaseUI.prototype = {
var submission = $('#submission__answer__value', this.element).val();
var ui = this;
$('#response__save_status', this.element).html('Saving...');
this.toggleActionError('save', null);
this.server.save(submission).done(function() {
// Update the "saved" icon
$('#response__save_status', this.element).html("Saved but not submitted");
}).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 = {
// Send the submission to the server
var submission = $('#submission__answer__value', this.element).val();
var ui = this;
this.toggleActionError('response', null);
this.server.submit(submission).done(
// When we have successfully sent the submission, expand the next step
function(studentId, attemptNum) {
......@@ -224,7 +239,7 @@ OpenAssessment.BaseUI.prototype = {
ui.renderPeerAssessmentStep(true);
}
).fail(function(errCode, errMsg) {
ui.showError('response', errMsg);
ui.toggleActionError('submit', errMsg);
});
},
......@@ -244,6 +259,7 @@ OpenAssessment.BaseUI.prototype = {
// Send the assessment to the server
var ui = this;
this.toggleActionError('peer', null);
this.server.peerAssess(submissionId, optionsSelected, feedback).done(
function() {
// When we have successfully sent the assessment,
......@@ -253,7 +269,7 @@ OpenAssessment.BaseUI.prototype = {
ui.renderGradeStep(false);
}
).fail(function(errMsg) {
ui.showError('peer', errMsg);
ui.toggleActionError('peer', errMsg);
});
},
......@@ -272,6 +288,7 @@ OpenAssessment.BaseUI.prototype = {
// Send the assessment to the server
var ui = this;
this.toggleActionError('self', null);
this.server.selfAssess(submissionId, optionsSelected).done(
function() {
// When we have successfully sent the assessment,
......@@ -280,7 +297,7 @@ OpenAssessment.BaseUI.prototype = {
ui.renderGradeStep(true);
}
).fail(function(errMsg) {
ui.showError('self', errMsg);
ui.toggleActionError('self', errMsg);
});
},
......@@ -289,23 +306,43 @@ OpenAssessment.BaseUI.prototype = {
Report an error to the user.
Args:
type (str): Which type of error. Options are "load", "response", "peer", and "self".
msg (str): The error message to display.
type (str): Which type of error. Options are "save", submit", "peer", and "self".
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;
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 == 'self') { container = '.self-assessment__actions'; }
// If we don't have anywhere to put the message, just log it to the console
if (container === null) {
console.log(msg);
if (msg !== null) { console.log(msg); }
}
else {
var sel = container + " .message__content";
$(sel).text(msg);
// Insert the error message
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