Skip to content

P
problem-builder
Commit 34732646 by Matjaz Gregoric
Options

Clear results when answer is changed. 

When user submits the answers, the results (checkmarks/popups/tips/messages)
are displayed, and the submit button is disabled.
If user then changes any of the answers, the results are cleared and the
submit button re-enabled (but only if the answers pass validation).
parent 0a64b71f
Showing with 45 additions and 31 deletions
mentoring/public/js/answer.js
......@@ -3,7 +3,7 @@ function AnswerBlock(runtime, element) {
init: function(options) {
// register the child validator
$(':input', element).on('keyup', _.debounce(options.onChange, 1000));
$(':input', element).on('keyup', options.onChange);
var checkmark = $('.answer-checkmark', element);
var completed = $('.xblock-answer', element).data('completed');
......@@ -20,9 +20,8 @@ function AnswerBlock(runtime, element) {
var checkmark = $('.answer-checkmark', element);
$(element).find('.message').text((result || {}).error || '');
checkmark.removeClass(
'checkmark-incorrect icon-exclamation fa-exclamation checkmark-correct icon-ok fa-check'
);
this.clearResult();
if (result.completed) {
checkmark.addClass('checkmark-correct icon-ok fa-check');
}
......@@ -31,6 +30,13 @@ function AnswerBlock(runtime, element) {
}
},
clearResult: function() {
var checkmark = $('.answer-checkmark', element);
checkmark.removeClass(
'checkmark-incorrect icon-exclamation fa-exclamation checkmark-correct icon-ok fa-check'
);
},
// Returns `true` if the child is valid, else `false`
validate: function() {
......
mentoring/public/js/mentoring.js
......@@ -26,8 +26,7 @@ function MentoringBlock(runtime, element) {
}
function handleSubmitResults(results) {
var messages_dom = $('.messages', element);
messages_dom.empty().hide();
messagesDOM.empty().hide();
$.each(results.submitResults || [], function(index, submitResult) {
var input = submitResult[0],
......@@ -45,13 +44,13 @@ function MentoringBlock(runtime, element) {
renderAttempts();
// Messages should only be displayed upon hitting 'submit', not on page reload
messages_dom.append(results.message);
if (messages_dom.html().trim()) {
messages_dom.prepend('<div class="title1">Feedback</div>');
messages_dom.show();
messagesDOM.append(results.message);
if (messagesDOM.html().trim()) {
messagesDOM.prepend('<div class="title1">Feedback</div>');
messagesDOM.show();
}
validateXBlock();
submitDOM.attr('disabled', 'disabled');
}
function getChildren(element) {
......@@ -101,24 +100,24 @@ function MentoringBlock(runtime, element) {
submitXHR = $.post(handlerUrl, JSON.stringify(data)).success(handleSubmitResults);
}
function resubmit() {
// Don't autosubmit if number of attempts is limited.
var max_attempts = $('.attempts', element).data('max_attempts');
// Only autosubmit if messages are already shown.
var messages_dom = $('.messages', element);
if (messages_dom.html().trim() && !max_attempts) {
submit();
function clearResults() {
messagesDOM.empty().hide();
var children = getChildren(element);
for (var i = 0; i < children.length; i++) {
callIfExists(children[i], 'clearResult');
}
}
function onChange() {
clearResults();
validateXBlock();
resubmit();
}
function initXBlock() {
$(element).find('.submit .input-main').bind('click', submit);
messagesDOM = $(element).find('.messages');
submitDOM = $(element).find('.submit .input-main');
submitDOM.bind('click', submit);
// init children (especially mrq blocks)
var children = getChildren(element);
......@@ -148,7 +147,6 @@ function MentoringBlock(runtime, element) {
// validate all children
function validateXBlock() {
var submit_dom = $(element).find('.submit .input-main');
var is_valid = true;
var data = $('.attempts', element).data();
var children = getChildren(element);
......@@ -169,10 +167,10 @@ function MentoringBlock(runtime, element) {
}
if (!is_valid) {
submit_dom.attr('disabled','disabled');
submitDOM.attr('disabled','disabled');
}
else {
submit_dom.removeAttr("disabled");
submitDOM.removeAttr("disabled");
}
}
......
mentoring/public/js/questionnaire.js
......@@ -3,6 +3,7 @@ function MessageView(element) {
return {
messageDOM: $('.feedback', element),
allPopupsDOM: $('.choice-tips, .feedback', element),
allResultsDOM: $('.choice-result', element),
clearPopupEvents: function() {
this.allPopupsDOM.hide();
$('.close', this.allPopupsDOM).off('click');
......@@ -39,6 +40,12 @@ function MessageView(element) {
else {
this.showPopup(message); // already a DOM
}
},
clearResult: function() {
this.allPopupsDOM.hide();
this.allResultsDOM.removeClass(
'checkmark-incorrect icon-exclamation fa-exclamation checkmark-correct icon-ok fa-check'
);
}
}
}
......@@ -61,6 +68,8 @@ function MCQBlock(runtime, element) {
handleSubmit: function(result) {
var messageView = MessageView(element);
messageView.clearResult();
var choiceInputs = $('.choice input', element);
$.each(choiceInputs, function(index, choiceInput) {
var choiceInputDOM = $(choiceInput),
......@@ -69,9 +78,6 @@ function MCQBlock(runtime, element) {
choiceTipsDOM = $('.choice-tips', choiceDOM),
choiceTipsCloseDOM;
choiceResultDOM.removeClass(
'checkmark-incorrect icon-exclamation fa-exclamation checkmark-correct icon-ok fa-check'
);
if (result.completed && choiceInputDOM.val() === result.submission) {
choiceResultDOM.addClass('checkmark-correct icon-ok fa-check');
}
......@@ -110,6 +116,10 @@ function MCQBlock(runtime, element) {
}
},
clearResult: function() {
MessageView(element).clearResult();
},
validate: function(){
var checked = $('input[type=radio]:checked', element);
if (checked.length) {
......@@ -155,10 +165,6 @@ function MRQBlock(runtime, element) {
choiceTipsDOM = $('.choice-tips', choiceDOM),
choiceTipsCloseDOM;
choiceResultDOM.removeClass(
'checkmark-incorrect icon-exclamation fa-exclamation checkmark-correct icon-ok fa-check'
);
/* show hint if checked or max_attempts is disabled */
if (!hide_results &&
(result.completed || choiceInputDOM.prop('checked') || options.max_attempts <= 0)) {
......@@ -179,6 +185,10 @@ function MRQBlock(runtime, element) {
});
},
clearResult: function() {
MessageView(element).clearResult();
},
validate: function(){
var checked = $('input[type=checkbox]:checked', element);
if (checked.length) {
......
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