Skip to content

Commit

Permalink
Merge pull request #488 from edx/matthugs/proctoring-js-error-conditions
Browse files Browse the repository at this point in the history 
Add error modals for error states for JS desktop application
  • Loading branch information
@matthugs
matthugs committed Dec 14, 2018
2 parents 3bad208 + 8bc8165 commit c3374b6
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 54 deletions.
91 changes: 85 additions & 6 deletions edx_proctoring/static/proctoring/js/exam_action_handler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,32 @@ var edx = edx || {};
}
};

/**
* Launch modals, handling a11y focus behavior
*
* Note: don't try to leverage this for the heartbeat; the DOM
* structure this depends on doesn't live everywhere that handler
* needs to live
*/
function accessibleError(title, message) {
accessible_modal(
"#accessible-error-modal #confirm_open_button",
"#accessible-error-modal .close-modal",
"#accessible-error-modal",
".content-wrapper"
);
$("#accessible-error-modal #confirm_open_button").click();
$("#accessible-error-modal .message-title").html(message);
$('#accessible-error-modal #acessible-error-title').html(title);
$("#accessible-error-modal .ok-button")
.html(gettext("OK"))
.off('click.closeModal')
.on('click.closeModal', function(){
$("#accessible-error-modal .close-modal").click();
});
};


function workerPromiseForEventNames(eventNames) {
return function() {
var proctoringBackendWorker = new Worker(edx.courseware.proctored_exam.configuredWorkerURL);
Expand Down Expand Up @@ -66,6 +92,23 @@ var edx = edx || {};
location.reload();
}

function setActionButtonLoadingState($button) {
$button.prop('disabled', true);
$button.html($button.data('loading-text'));
}

function setActionButtonSteadyState($button) {
$button.prop('disabled', false);
$button.html($button.data('cta-text'));
}

function errorHandlerGivenMessage($button, title, message) {
setActionButtonSteadyState($button);
return function() {
accessibleError(title, message);
};
}


edx.courseware = edx.courseware || {};
edx.courseware.proctored_exam = edx.courseware.proctored_exam || {};
Expand All @@ -77,14 +120,33 @@ var edx = edx || {};
var actionUrl = $this.data('change-state-url');
var action = $this.data('action');

setActionButtonLoadingState($this);

var shouldUseWorker = window.Worker && edx.courseware.proctored_exam.configuredWorkerURL;
if(shouldUseWorker) {
workerPromiseForEventNames(actionToMessageTypesMap[action])()
.then(updateExamAttemptStatusPromise(actionUrl, action))
.then(reloadPage);
.then(reloadPage)
.catch(errorHandlerGivenMessage(
$this,
gettext('Error Starting Exam'),
gettext(
'Something has gone wrong starting your exam. ' +
'Please double-check that the application is running.'
),
));
} else {
updateExamAttemptStatusPromise(actionUrl, action)()
.then(reloadPage);
.then(reloadPage)
.catch(errorHandlerGivenMessage(
$this,
gettext('Error Starting Exam'),
gettext(
'Something has gone wrong starting your exam. ' +
'Please reload the page and start again.'
),
));

}
};
edx.courseware.proctored_exam.examEndHandler = function() {
Expand All @@ -95,17 +157,35 @@ var edx = edx || {};
var actionUrl = $this.data('change-state-url');
var action = $this.data('action');

setActionButtonLoadingState($this);

var shouldUseWorker = window.Worker &&
edx.courseware.proctored_exam.configuredWorkerURL &&
action === "submit";
if(shouldUseWorker) {

updateExamAttemptStatusPromise(actionUrl, action)()
.then(workerPromiseForEventNames(actionToMessageTypesMap[action]))
.then(reloadPage);
.then(reloadPage)
.catch(errorHandlerGivenMessage(
$this,
gettext('Error Ending Exam'),
gettext(
'Something has gone wrong ending your exam. ' +
'Please double-check that the application is running.'
)
));
} else {
updateExamAttemptStatusPromise(actionUrl, action)()
.then(reloadPage);
.then(reloadPage)
.catch(errorHandlerGivenMessage(
$this,
gettext('Error Ending Exam'),
gettext(
'Something has gone wrong ending your exam. ' +
'Please reload the page and start again.'
)
));
}
}
edx.courseware.proctored_exam.pingApplication = function() {
Expand All @@ -114,6 +194,5 @@ var edx = edx || {};
timeoutPromise(ONE_MINUTE_MS)
]);
}


edx.courseware.proctored_exam.accessibleError = accessibleError;
}).call(this, $);
26 changes: 26 additions & 0 deletions edx_proctoring/templates/proctored_exam/error_modal.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{% load i18n %}
<div id="accessible-error-modal" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="accessible-error-title">
<button class="close-modal">
<span class="icon fa fa-remove" aria-hidden="true"></span>
<span class="sr">
{% trans "Close" %}
</span>
</button>

<header>
<h2 id="acessible-error-title"></h2>
<span class="sr">,
{% trans "modal open"}
</span>
<hr aria-hidden="true" />
</header>
<div role="alertdialog" class="status message" tabindex="-1">
<p class="message-title" style="text-align: center; font-size: 16px;"></p>
</div>
<div class="actions" style="text-align: center;">
<button class="dismiss ok-button"></button>
</div>
</div>
<a href="#accessible-error-modal" rel="leanModal" id="confirm_open_button" style="display:none">{% trans "open"}</a>
</div>
45 changes: 5 additions & 40 deletions edx_proctoring/templates/proctored_exam/instructions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,31 +62,8 @@ <h3>
</div>
</div>
</div>
<div id="accessible-error-modal" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="accessible-error-title">
<button class="close-modal">
<span class="icon fa fa-remove" aria-hidden="true"></span>
<span class="sr">
{% trans "Close" %}
</span>
</button>
{% include 'proctored_exam/error_modal.html' %}

<header>
<h2 id="acessible-error-title">{% trans "Cannot Start Proctored Exam" %}</h2>
<span class="sr">,
{% trans "modal open"}
</span>
<hr aria-hidden="true" />
</header>
<div role="alertdialog" class="status message" tabindex="-1">
<p class="message-title" style="text-align: center; font-size: 16px;"></p>
</div>
<div class="actions" style="text-align: center;">
<button class="dismiss ok-button"></button>
</div>
</div>
<a href="#accessible-error-modal" rel="leanModal" id="confirm_open_button" style="display:none">{% trans "open"}</a>
</div>

<div class="footer-sequence border-b-0 padding-b-0">
{% if not is_sample_attempt and allow_proctoring_opt_out %}
Expand All @@ -101,15 +78,6 @@ <h2 id="acessible-error-title">{% trans "Cannot Start Proctored Exam" %}</h2>

<script type="text/javascript">

var accessible_error = function(message) {

accessible_modal("#accessible-error-modal #confirm_open_button",
"#accessible-error-modal .close-modal", "#accessible-error-modal", ".content-wrapper");
$("#accessible-error-modal #confirm_open_button").click();
$("#accessible-error-modal .message-title").html(message);
$("#accessible-error-modal .ok-button").html(gettext("OK"));
};

$('.proctored-decline-exam').click(
function(e) {
e.preventDefault();
Expand Down Expand Up @@ -152,7 +120,10 @@ <h2 id="acessible-error-title">{% trans "Cannot Start Proctored Exam" %}</h2>
} else {
// The proctoring setup is not yet complete.
// Show a modal indicating that the user is not done yet.
accessible_error(gettext("You must complete the proctoring setup before you can start the exam."));
edx.courseware.proctored_exam.accessibleError(
gettext("Cannot Start Proctored Exam"),
gettext("You must complete the proctoring setup before you can start the exam."),
);
}
});
}
Expand All @@ -170,12 +141,6 @@ <h2 id="acessible-error-title">{% trans "Cannot Start Proctored Exam" %}</h2>
});
}

$("#accessible-error-modal .cancel-button").click(function(){
$("#accessible-error-modal .close-modal").click();
});
$("#accessible-error-modal .ok-button").click(function(){
$("#accessible-error-modal .close-modal").click();
});
$('.start-proctored-exam').click(check_exam_started);

$("#software_download_link").click(function (e) {
Expand Down
8 changes: 4 additions & 4 deletions edx_proctoring/templates/proctored_exam/ready_to_start.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,14 @@ <h3>
</p>
{% endif %}
<div>
<button type="button" class="exam-action-button proctored-enter-exam btn btn-pl-primary btn-base" data-action="start" data-exam-id="{{exam_id}}" data-change-state-url="{{change_state_url}}">
{% blocktrans %}
Start my exam
{% endblocktrans %}
{% trans "Start my exam" as start_exam %}
<button type="button" class="exam-action-button proctored-enter-exam btn btn-pl-primary btn-base" data-action="start" data-exam-id="{{exam_id}}" data-change-state-url="{{change_state_url}}" data-loading-text="<span class='fa fa-circle-o-notch fa-spin'></span> {% trans 'Starting Exam' %}" data-cta-text="{{ start_exam }}">
{{ start_exam }}
</button>
</div>
</div>
</div>
{% include 'proctored_exam/error_modal.html' %}
{% include 'proctored_exam/footer.html' %}

<script type="text/javascript">
Expand Down
10 changes: 6 additions & 4 deletions edx_proctoring/templates/proctored_exam/ready_to_submit.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,9 @@ <h3>
After you submit your exam, your responses are graded and your proctoring session is reviewed.
{% endblocktrans %}
</p>
<button type="button" name="submit-proctored-exam" class="exam-action-button btn btn-pl-primary btn-base" data-action="submit" data-exam-id="{{exam_id}}" data-change-state-url="{{change_state_url}}">
{% blocktrans %}
Yes, end my proctored exam
{% endblocktrans %}
{% trans "Yes, end my proctored exam" as end_exam %}
<button type="button" name="submit-proctored-exam" class="exam-action-button btn btn-pl-primary btn-base" data-action="submit" data-exam-id="{{exam_id}}" data-change-state-url="{{change_state_url}}" data-loading-text="<span class='fa fa-circle-o-notch fa-spin'></span> {% trans 'Ending Exam' %}" data-cta-text="{{ end_exam }}">
{{ end_exam }}
</button>
{% if does_time_remain %}
<button type="button" name="goback-proctored-exam" class="exam-action-button btn btn-secondary btn-base" data-action="start" data-exam-id="{{exam_id}}" data-change-state-url="{{change_state_url}}" style="box-shadow: none">
Expand All @@ -28,6 +27,9 @@ <h3>
</button>
{% endif %}
</div>
{% include 'proctored_exam/error_modal.html' %}


<script type="text/javascript">
var edx = edx || {};
edx.courseware = edx.courseware || {};
Expand Down

0 comments on commit c3374b6

Please sign in to comment.