Skip to content

E
edx-proctoring
Commit 578563c5 by Afzal Wali
Options

Changes to the Add Allowance UI on the Instructor Dashboard. 

additional_time_granted value used as string.

Refactoring for PR comments.

Refactoring for PR comments.
parent bd13e2f8
Showing with 152 additions and 28 deletions
edx_proctoring/static/proctoring/js/views/proctored_exam_add_allowance_view.js
...@@ -21,7 +21,9 @@ var edx = edx || {}; ...@@ -21,7 +21,9 @@ var edx = edx || {};
//Backbone.Validation.bind( this, {valid:this.hideError, invalid:this.showError}); //Backbone.Validation.bind( this, {valid:this.hideError, invalid:this.showError});
}, },
events: { events: {
"submit form": "addAllowance" "submit form": "addAllowance",
"change #proctored_exam": 'selectExam',
"change #allowance_type": 'selectAllowance'
}, },
loadTemplateData: function () { loadTemplateData: function () {
var self = this; var self = this;
...@@ -34,6 +36,7 @@ var edx = edx || {}; ...@@ -34,6 +36,7 @@ var edx = edx || {};
self.render(); self.render();
self.showModal(); self.showModal();
self.updateCss(); self.updateCss();
self.selectExamAtIndex(0);
}); });
}, },
updateCss: function() { updateCss: function() {
...@@ -56,7 +59,11 @@ var edx = edx || {}; ...@@ -56,7 +59,11 @@ var edx = edx || {};
$el.find('form label').css({ $el.find('form label').css({
"display": "block", "display": "block",
"font-size": "14px", "font-size": "14px",
"margin": 0 "margin": 0,
"cursor": "default"
});
$el.find('form #minutes_label').css({
"display": "inline-block"
}); });
$el.find('form input[type="text"]').css({ $el.find('form input[type="text"]').css({
"height": "26px", "height": "26px",
...@@ -155,6 +162,48 @@ var edx = edx || {}; ...@@ -155,6 +162,48 @@ var edx = edx || {};
}); });
} }
}, },
selectExamAtIndex: function (index) {
var selectedExam = this.proctored_exams[index];
if (selectedExam.is_proctored) {
// Selected Exam is a Proctored or Practice-Proctored exam.
if (selectedExam.is_practice_exam)
$('#exam_type_label').text(gettext('Practice Exam'));
else
$('#exam_type_label').text(gettext('Proctored Exam'));
// In case of Proctored Exams, we hide the Additional Time label and show the Allowance Types Select
$('#additional_time_label').hide();
$('select#allowance_type').val('additional_time_granted').show();
}
else {
// Selected Exam is a Timed Exam.
$('#exam_type_label').text(gettext('Timed Exam'));
// In case of Timed Exams, we show the "Additional Time" label and hide the Allowance Types Select
$('#additional_time_label').show();
// Even though we have the Select element hidden, the backend will still be using
// the Select's value for the allowance type (key).
$('select#allowance_type').val('additional_time_granted').hide();
}
this.updateAllowanceLabels('additional_time_granted');
},
selectExam: function (event) {
this.selectExamAtIndex($('#proctored_exam')[0].selectedIndex);
},
selectAllowance: function (event) {
this.updateAllowanceLabels($('#allowance_type').val());
},
updateAllowanceLabels: function (selectedAllowanceType) {
if (selectedAllowanceType == 'additional_time_granted') {
$('#minutes_label').show();
$('#allowance_value_label').text(gettext('Additional Time'));
}
else {
$('#minutes_label').hide();
$('#allowance_value_label').text(gettext('Value'));
}
},
render: function () { render: function () {
$(this.el).html(this.template({ $(this.el).html(this.template({
......
edx_proctoring/static/proctoring/spec/proctored_exam_add_allowance_spec.js
...@@ -29,44 +29,63 @@ describe('ProctoredExamAddAllowanceView', function () { ...@@ -29,44 +29,63 @@ describe('ProctoredExamAddAllowanceView', function () {
} }
]; ];
var expectedTimedAllowanceJson = [
{
created: "2015-08-10T09:15:45Z",
id: 1,
modified: "2015-08-10T09:15:45Z",
key: "additional_time_granted",
value: "1",
proctored_exam: {
content_id: "i4x://edX/DemoX/sequential/9f5e9b018a244ea38e5d157e0019e60c",
course_id: "edX/DemoX/Demo_Course",
exam_name: "Test Exam",
external_id: null,
id: 6,
is_active: true,
is_practice_exam: false,
is_proctored: false,
time_limit_mins: 1
},
user: {
username: 'testuser1',
email: 'testuser1@test.com'
}
}
];
var proctoredExamJson = [ var proctoredExamJson = [
{ {
exam_name: "Midterm Exam", exam_name: "Midterm Exam",
is_proctored: true,
is_practice: false,
id: 5 id: 5
}, },
{ {
exam_name: "Final Exam", exam_name: "Final Exam",
is_proctored: false,
is_practice: false,
id: 6 id: 6
}, },
{ {
exam_name: "Test Exam", exam_name: "Test Exam",
is_proctored: true,
is_practice: true,
id: 7 id: 7
} }
]; ];
var allowanceTypes = [
['additional_time_granted', gettext('Additional Time (minutes)')],
['review_policy_exception', gettext('Review Policy Exception')]
];
beforeEach(function () { beforeEach(function () {
html =
'<div class="modal-header">Add a New Allowance</div>' + // We have converted the edx_proctoring/static/proctoring/templates/add-new-allowance.underscore template
'<form><h3 class="error-response"><h3><table class="compact"><tr>' + // from http://www.howtocreate.co.uk/tutorials/jsexamples/syntax/prepareInline.html
'<td><label>Proctored Exam</label></td><td>' +
'<select id="proctored_exam">' + html = '<div class=\'modal-header\'><%- gettext(\"Add a New Allowance\") %><\/div>\n<form>\n <h3 class=\'error-response\'><h3>\n <table class=\'compact\'>\n <tr>\n <td>\n <label><%- gettext(\"Special Exam\") %><\/label>\n <\/td>\n <td>\n <select id=\'proctored_exam\'>\n <% _.each(proctored_exams, function(proctored_exam){ %>\n <option value=\"<%= proctored_exam.id %>\">\n <%- interpolate(gettext(\' %(exam_display_name)s \'), { exam_display_name: proctored_exam.exam_name }, true) %>\n <\/option>\n <% }); %>\n <\/select>\n <\/td>\n <\/tr>\n <tr>\n <td>\n <label><%- gettext(\"Exam Type\") %><\/label>\n <\/td>\n <td>\n <label id=\'exam_type_label\'>\n <%- gettext(\"Timed Exam\") %>\n <\/label>\n <\/td>\n <\/tr>\n <tr>\n <td>\n <label><%- gettext(\"Allowance Type\") %><\/label>\n <\/td>\n <td>\n <select id=\"allowance_type\">\n <% _.each(allowance_types, function(allowance_type){ %>\n <option value=\"<%= allowance_type[0] %>\">\n <%= allowance_type[1] %>\n <\/option>\n <% }); %>\n <\/select>\n\n <label id=\'timed_exam_allowance_type\'>\n <%- gettext(\"Additional Time (minutes)\") %>\n <\/label>\n <\/td>\n <\/tr>\n <tr>\n <td>\n <label id=\'allowance_value_label\'><%- gettext(\"Value\") %><\/label>\n <\/td>\n <td>\n <input type=\"text\" id=\"allowance_value\" \/>\n <label id=\'timed_exam_mins_label\'><%- gettext(\"minutes\") %><\/label>\n <\/td>\n <\/tr>\n <tr>\n <td>\n <label><%- gettext(\"Username or Email\") %><\/label>\n <\/td>\n <td>\n <input type=\"text\" id=\"user_info\" \/>\n <\/td>\n <\/tr>\n <tr>\n <td><\/td>\n <td>\n <input id=\'addNewAllowance\' type=\'submit\' value=\'Save\' \/>\n <\/td>\n <\/tr>\n <\/table>\n<\/form>\n';
'<% _.each(proctored_exams, function(proctored_exam){ %>' +
'<option value="<%= proctored_exam.id %>">' +
'<%- interpolate(gettext(" %(exam_display_name)s "), { exam_display_name: proctored_exam.exam_name }, true) %>' +
'</option>' +
'<% }); %>' +
'</select></td></tr><tr><td>' +
'<label>Allowance Type</label>' +
'</td><td><select id="allowance_type">' +
'<% _.each(allowance_types, function(allowance_type){ %>' +
'<option value="<%= allowance_type[0] %>">' +
'<%= allowance_type[1] %>' +
'</option>' +
'<% }); %>' +
'</select></td></tr><tr><td>' +
'<label>Value</label></td><td><input type="text" id="allowance_value" /></td></tr><tr>' +
'<td> <label>Username or Email</label> </td> <td> <input type="text" id="user_info" /> </td> </tr> ' +
'<tr><td></td> <td> <input id="addNewAllowance" type="submit" value="Save" /> </td> </tr> </table> </form>';
allowancesHtml = '<span class="tip">' + allowancesHtml = '<span class="tip">' +
'<%- gettext("Allowances") %>' + '<%- gettext("Allowances") %>' +
...@@ -151,7 +170,8 @@ describe('ProctoredExamAddAllowanceView', function () { ...@@ -151,7 +170,8 @@ describe('ProctoredExamAddAllowanceView', function () {
var add_allowance_view = new edx.instructor_dashboard.proctoring.AddAllowanceView({ var add_allowance_view = new edx.instructor_dashboard.proctoring.AddAllowanceView({
course_id: 'test_course_id', course_id: 'test_course_id',
proctored_exams: proctoredExamJson, proctored_exams: proctoredExamJson,
proctored_exam_allowance_view: this.proctored_exam_allowance proctored_exam_allowance_view: this.proctored_exam_allowance,
allowance_types: allowanceTypes
}); });
this.server.respond(); this.server.respond();
this.server.respond(); this.server.respond();
...@@ -160,7 +180,45 @@ describe('ProctoredExamAddAllowanceView', function () { ...@@ -160,7 +180,45 @@ describe('ProctoredExamAddAllowanceView', function () {
expect(add_allowance_view.$el.find('#proctored_exam').html()).toContain('Midterm Exam'); expect(add_allowance_view.$el.find('#proctored_exam').html()).toContain('Midterm Exam');
expect(add_allowance_view.$el.find('#proctored_exam').html()).toContain('Final Exam'); expect(add_allowance_view.$el.find('#proctored_exam').html()).toContain('Final Exam');
expect(add_allowance_view.$el.find('#proctored_exam').html()).toContain('Test Exam'); expect(add_allowance_view.$el.find('#proctored_exam').html()).toContain('Test Exam');
expect(add_allowance_view.$el.find('#exam_type_label')).toExist();
$('#proctored_exam').val('5');
$('#proctored_exam').trigger( "change" );
expect(add_allowance_view.$el.find('#exam_type_label').html()).toContain('Proctored Exam');
}); });
it("should render the timed exam add allowance view properly", function () {
this.server.respondWith('GET', '/api/edx_proctoring/v1/proctored_exam/test_course_id/allowance',
[
200,
{
"Content-Type": "application/json"
},
JSON.stringify(expectedTimedAllowanceJson)
]
);
this.proctored_exam_allowance = new edx.instructor_dashboard.proctoring.ProctoredExamAllowanceView();
var add_allowance_view = new edx.instructor_dashboard.proctoring.AddAllowanceView({
course_id: 'test_course_id',
proctored_exams: proctoredExamJson,
proctored_exam_allowance_view: this.proctored_exam_allowance,
allowance_types: allowanceTypes
});
this.server.respond();
this.server.respond();
this.server.respond();
expect(add_allowance_view.$el.find('#proctored_exam').html()).toContain('Midterm Exam');
expect(add_allowance_view.$el.find('#proctored_exam').html()).toContain('Final Exam');
expect(add_allowance_view.$el.find('#proctored_exam').html()).toContain('Test Exam');
expect(add_allowance_view.$el.find('#exam_type_label')).toExist();
$('#proctored_exam').val('6');
$('#proctored_exam').trigger( "change" );
expect(add_allowance_view.$el.find('#exam_type_label').html()).toContain('Timed Exam');
});
it("should add the proctored exam allowance", function () { it("should add the proctored exam allowance", function () {
this.server.respondWith('GET', '/api/edx_proctoring/v1/proctored_exam/test_course_id/allowance', this.server.respondWith('GET', '/api/edx_proctoring/v1/proctored_exam/test_course_id/allowance',
[ [
...@@ -176,7 +234,8 @@ describe('ProctoredExamAddAllowanceView', function () { ...@@ -176,7 +234,8 @@ describe('ProctoredExamAddAllowanceView', function () {
var add_allowance_view = new edx.instructor_dashboard.proctoring.AddAllowanceView({ var add_allowance_view = new edx.instructor_dashboard.proctoring.AddAllowanceView({
course_id: 'test_course_id', course_id: 'test_course_id',
proctored_exams: proctoredExamJson, proctored_exams: proctoredExamJson,
proctored_exam_allowance_view: this.proctored_exam_allowance proctored_exam_allowance_view: this.proctored_exam_allowance,
allowance_types: allowanceTypes
}); });
this.server.respond(); this.server.respond();
...@@ -245,7 +304,8 @@ describe('ProctoredExamAddAllowanceView', function () { ...@@ -245,7 +304,8 @@ describe('ProctoredExamAddAllowanceView', function () {
var add_allowance_view = new edx.instructor_dashboard.proctoring.AddAllowanceView({ var add_allowance_view = new edx.instructor_dashboard.proctoring.AddAllowanceView({
course_id: 'test_course_id', course_id: 'test_course_id',
proctored_exams: proctoredExamJson, proctored_exams: proctoredExamJson,
proctored_exam_allowance_view: this.proctored_exam_allowance proctored_exam_allowance_view: this.proctored_exam_allowance,
allowance_types: allowanceTypes
}); });
this.server.respond(); this.server.respond();
......
edx_proctoring/static/proctoring/templates/add-new-allowance.underscore
...@@ -18,6 +18,16 @@ ...@@ -18,6 +18,16 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<label><%- gettext("Exam Type") %></label>
</td>
<td>
<label id='exam_type_label'>
<%- gettext("Timed Exam") %>
</label>
</td>
</tr>
<tr>
<td>
<label><%- gettext("Allowance Type") %></label> <label><%- gettext("Allowance Type") %></label>
</td> </td>
<td> <td>
...@@ -28,14 +38,19 @@ ...@@ -28,14 +38,19 @@
</option> </option>
<% }); %> <% }); %>
</select> </select>
<label id='additional_time_label'>
<%- gettext("Additional Time (minutes)") %>
</label>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<label><%- gettext("Value") %></label> <label id='allowance_value_label'><%- gettext("Value") %></label>
</td> </td>
<td> <td>
<input type="text" id="allowance_value" /> <input type="text" id="allowance_value" />
<label id='minutes_label'><%- gettext("minutes") %></label>
</td> </td>
</tr> </tr>
<tr> <tr>
......
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