Skip to content

E
edx-ora2
Commit e26f6eff by gradyward
Options

A refactoring of the Drag and Drop changes which now encorporates the OAEdit refactor.

parent 3e3cef09
Showing with 227 additions and 62 deletions
openassessment/templates/openassessmentblock/edit/oa_edit.html
......@@ -55,19 +55,18 @@
</ul>
<p class="openassessment_description" id="openassessment_step_select_description">
{% trans "Select the steps that students must complete. All steps are optional, but every assignment must include at least one step." %}
{% trans "Select the steps that students must complete. All steps are optional, but every assignment must include at least one step. To change the order in which students will complete the steps, drag them into the desired order." %}
</p>
<ol id="openassessment_assessment_module_settings_editors">
{% include "openassessmentblock/edit/oa_edit_training.html" %}
{% include "openassessmentblock/edit/oa_edit_training.html" %}
{% include "openassessmentblock/edit/oa_edit_peer.html" %}
{% include "openassessmentblock/edit/oa_edit_peer.html" %}
{% include "openassessmentblock/edit/oa_edit_self.html" %}
{% include "openassessmentblock/edit/oa_edit_ai.html" %}
{% include "openassessmentblock/edit/oa_edit_self.html" %}
{% include "openassessmentblock/edit/oa_edit_ai.html" %}
</ol>
</div>
</div>
<div class="openassessment_editor_buttons xblock-actions">
......
openassessment/templates/openassessmentblock/edit/oa_edit_ai.html
{% load i18n %}
{% spaceless %}
<div class="openassessment_assessment_module_settings_editor" id="oa_ai_assessment_editor">
<li class="openassessment_assessment_module_settings_editor" id="oa_ai_assessment_editor">
<div class = "drag-handle action"></div>
<div class = "openassessment_inclusion_wrapper">
<input id="include_ai_assessment" type="checkbox"
{% if assessments.example_based_assessment %} checked="true" {% endif %}>
......@@ -19,5 +20,5 @@
<textarea id="ai_training_examples">{{ assessments.example_based_assessment.examples }}</textarea>
</div>
</div>
</div>
</li>
{% endspaceless %}
\ No newline at end of file
openassessment/templates/openassessmentblock/edit/oa_edit_peer.html
{% load i18n %}
{% spaceless %}
<div class="openassessment_assessment_module_settings_editor" id="oa_peer_assessment_editor">
<li class="openassessment_assessment_module_settings_editor" id="oa_peer_assessment_editor">
<div class = "drag-handle action"></div>
<div class="openassessment_inclusion_wrapper">
<input type="checkbox" id="include_peer_assessment"
{% if assessments.peer_assessment %} checked="true" {% endif %}>
......@@ -48,5 +49,5 @@
</ul>
</div>
</div>
</div>
</li>
{% endspaceless %}
\ No newline at end of file
openassessment/templates/openassessmentblock/edit/oa_edit_self.html
{% load i18n %}
{% spaceless %}
<div class="openassessment_assessment_module_settings_editor" id="oa_self_assessment_editor">
<li class="openassessment_assessment_module_settings_editor" id="oa_self_assessment_editor">
<div class = "drag-handle action"></div>
<div class = "openassessment_inclusion_wrapper">
<input id="include_self_assessment" type="checkbox"
{% if assessments.self_assessment %} checked="true" {% endif %}>
......@@ -34,5 +35,5 @@
</ul>
</div>
</div>
</div>
</li>
{% endspaceless %}
\ No newline at end of file
openassessment/templates/openassessmentblock/edit/oa_edit_training.html
{% load i18n %}
{% spaceless %}
<div class="openassessment_assessment_module_settings_editor" id="oa_student_training_editor">
<li class="openassessment_assessment_module_settings_editor" id="oa_student_training_editor">
<div class = "drag-handle action"></div>
<div class = "openassessment_inclusion_wrapper">
<input type="checkbox" id="include_student_training"
{% if assessments.student_training %} checked="true" {% endif %}>
......@@ -19,5 +20,5 @@
<textarea id="student_training_examples">{{ assessments.student_training.examples }}</textarea>
</div>
</div>
</div>
</li>
{% endspaceless %}
\ No newline at end of file
openassessment/xblock/static/css/openassessment.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/js/spec/studio/oa_edit_settings.js
......@@ -26,10 +26,12 @@ describe("OpenAssessment.EditSettingsView", function() {
loadFixtures('oa_edit.html');
// Create the stub assessment views
assessmentViews = [
new StubView("self-assessment", "Self assessment description"),
new StubView("peer-assessment", "Peer assessment description")
];
assessmentViews = {
"oa_self_assessment_editor": new StubView("self-assessment", "Self assessment description"),
"oa_peer_assessment_editor": new StubView("peer-assessment", "Peer assessment description"),
"oa_ai_assessment_editor": new StubView("ai-assessment", "Example Based assessment description"),
"oa_student_training_editor": new StubView("student-training", "Student Training description")
};
// Create the view
var element = $("#oa_basic_settings_editor").get(0);
......@@ -66,14 +68,24 @@ describe("OpenAssessment.EditSettingsView", function() {
});
it("builds a description of enabled assessments", function() {
// The Peer and Self Editor ID's
var peerID = "oa_peer_assessment_editor";
var selfID = "oa_self_assessment_editor";
var aiID = "oa_ai_assessment_editor";
var studentID = "oa_student_training_editor";
// Disable all assessments, and expect an empty description
assessmentViews[0].isEnabled(false);
assessmentViews[1].isEnabled(false);
assessmentViews[peerID].isEnabled(false);
assessmentViews[selfID].isEnabled(false);
assessmentViews[aiID].isEnabled(false);
assessmentViews[studentID].isEnabled(false);
expect(view.assessmentsDescription()).toEqual([]);
// Enable the first assessment only
assessmentViews[0].isEnabled(true);
assessmentViews[1].isEnabled(false);
assessmentViews[peerID].isEnabled(false);
assessmentViews[selfID].isEnabled(true);
assessmentViews[aiID].isEnabled(false);
assessmentViews[studentID].isEnabled(false);
expect(view.assessmentsDescription()).toEqual([
{
name: "self-assessment",
......@@ -82,8 +94,10 @@ describe("OpenAssessment.EditSettingsView", function() {
]);
// Enable the second assessment only
assessmentViews[0].isEnabled(false);
assessmentViews[1].isEnabled(true);
assessmentViews[peerID].isEnabled(true);
assessmentViews[selfID].isEnabled(false);
assessmentViews[aiID].isEnabled(false);
assessmentViews[studentID].isEnabled(false);
expect(view.assessmentsDescription()).toEqual([
{
name: "peer-assessment",
......@@ -92,12 +106,30 @@ describe("OpenAssessment.EditSettingsView", function() {
]);
// Enable both assessments
assessmentViews[0].isEnabled(true);
assessmentViews[1].isEnabled(true);
assessmentViews[peerID].isEnabled(true);
assessmentViews[selfID].isEnabled(true);
assessmentViews[aiID].isEnabled(false);
assessmentViews[studentID].isEnabled(false);
expect(view.assessmentsDescription()).toEqual([
{
name: "peer-assessment",
dummy: "Peer assessment description"
},
{
name: "self-assessment",
dummy: "Self assessment description"
}
]);
// Enable Training and Peer assessments
assessmentViews[peerID].isEnabled(true);
assessmentViews[selfID].isEnabled(false);
assessmentViews[aiID].isEnabled(false);
assessmentViews[studentID].isEnabled(true);
expect(view.assessmentsDescription()).toEqual([
{
name: "student-training",
dummy: "Student Training description"
},
{
name: "peer-assessment",
......
openassessment/xblock/static/js/src/studio/oa_edit.js
......@@ -28,21 +28,26 @@ OpenAssessment.StudioView = function(runtime, element, server) {
);
// Initialize the settings tab view
var studentTrainingView = new OpenAssessment.EditStudentTrainingView(
$("#oa_student_training_editor", this.element).get(0)
);
var peerAssessmentView = new OpenAssessment.EditPeerAssessmentView(
$("#oa_peer_assessment_editor", this.element).get(0)
);
var selfAssessmentView = new OpenAssessment.EditSelfAssessmentView(
$("#oa_self_assessment_editor", this.element).get(0)
);
var exampleBasedAssessmentView = new OpenAssessment.EditExampleBasedAssessmentView(
$("#oa_ai_assessment_editor", this.element).get(0)
);
var assessmentLookupDictionary = {};
assessmentLookupDictionary[studentTrainingView.getID()] = studentTrainingView;
assessmentLookupDictionary[peerAssessmentView.getID()] = peerAssessmentView;
assessmentLookupDictionary[selfAssessmentView.getID()] = selfAssessmentView;
assessmentLookupDictionary[exampleBasedAssessmentView.getID()] = exampleBasedAssessmentView;
this.settingsView = new OpenAssessment.EditSettingsView(
$("#oa_basic_settings_editor", this.element).get(0), [
new OpenAssessment.EditPeerAssessmentView(
$("#oa_peer_assessment_editor", this.element).get(0)
),
new OpenAssessment.EditSelfAssessmentView(
$("#oa_self_assessment_editor", this.element).get(0)
),
new OpenAssessment.EditStudentTrainingView(
$("#oa_student_training_editor", this.element).get(0)
),
new OpenAssessment.EditExampleBasedAssessmentView(
$("#oa_ai_assessment_editor", this.element).get(0)
)
]
$("#oa_basic_settings_editor", this.element).get(0), assessmentLookupDictionary
);
// Initialize the rubric tab view
......@@ -53,6 +58,8 @@ OpenAssessment.StudioView = function(runtime, element, server) {
// Install the save and cancel buttons
$(".openassessment_save_button", this.element).click($.proxy(this.save, this));
$(".openassessment_cancel_button", this.element).click($.proxy(this.cancel, this));
this.initializeSortableAssessments()
};
OpenAssessment.StudioView.prototype = {
......@@ -64,14 +71,47 @@ OpenAssessment.StudioView.prototype = {
// Add the full height class to every element from the XBlock
// to the modal window in Studio.
$(this.element)
.toggleClass('openassessment_full_height', true)
.addClass('openassessment_full_height')
.parentsUntil('.modal-window')
.toggleClass('openassessment_full_height', true);
.addClass('openassessment_full_height');
// Add the modal window class to the modal window
$(this.element)
.closest('.modal-window')
.toggleClass('openassessment_modal_window', true);
.addClass('openassessment_modal_window');
},
/**
Installs click listeners which initialize drag and drop functionality for assessment modules.
**/
initializeSortableAssessments: function () {
var liveElement = this.liveElement;
// Initialize Drag and Drop of Assessment Modules
$('#openassessment_assessment_module_settings_editors', liveElement).sortable({
// On Start, we want to collapse all draggable items so that dragging is visually simple (no scrolling)
start: function(event, ui) {
// Hide all of the contents (not the headers) of the divs, to collapse during dragging.
$('.openassessment_assessment_module_editor', liveElement).hide();
var targetHeight = 'auto';
// Shrink the blank area behind the dragged item.
ui.placeholder.height(targetHeight);
// Shrink the dragged item itself.
ui.helper.height(targetHeight);
// Update the sortable
$('#openassessment_assessment_module_settings_editors', liveElement)
.sortable('refresh').sortable('refreshPositions');
},
// On stop, we redisplay the divs to their original state
stop: function(event, ui){
$('.openassessment_assessment_module_editor', liveElement).show();
},
snap: true,
axis: "y",
handle: ".drag-handle",
cursorAt: {top: 20}
});
$('#openassessment_assessment_module_settings_editors', liveElement).disableSelection();
},
/**
......
openassessment/xblock/static/js/src/studio/oa_edit_assessment.js
......@@ -121,7 +121,7 @@ OpenAssessment.EditPeerAssessmentView.prototype = {
mustGradeNum: function(num) {
var sel = $("#peer_assessment_must_grade", this.element);
return OpenAssessment.Fields.intField(sel, num);
},
},
/**
Get or set the required number of peer-assessments a student must receive.
......@@ -149,7 +149,7 @@ OpenAssessment.EditPeerAssessmentView.prototype = {
startDatetime: function(datetime) {
var sel = $("#peer_assessment_start_date", this.element);
return OpenAssessment.Fields.datetimeField(sel, datetime);
},
},
/**
Get or set the due date and time of the assessment.
......@@ -164,6 +164,16 @@ OpenAssessment.EditPeerAssessmentView.prototype = {
var sel = $("#peer_assessment_due_date", this.element);
return OpenAssessment.Fields.datetimeField(sel, datetime);
},
/**
Gets the ID of the assessment
Returns:
string (CSS ID of the Element object)
**/
getID: function() {
return $(this.element).attr('id');
}
};
......@@ -237,7 +247,7 @@ OpenAssessment.EditSelfAssessmentView.prototype = {
startDatetime: function(datetime) {
var sel = $("#self_assessment_start_date", this.element);
return OpenAssessment.Fields.datetimeField(sel, datetime);
},
},
/**
Get or set the due date and time of the assessment.
......@@ -251,7 +261,17 @@ OpenAssessment.EditSelfAssessmentView.prototype = {
dueDatetime: function(datetime) {
var sel = $("#self_assessment_due_date", this.element);
return OpenAssessment.Fields.datetimeField(sel, datetime);
},
},
/**
Gets the ID of the assessment
Returns:
string (CSS ID of the Element object)
**/
getID: function() {
return $(this.element).attr('id');
}
};
/**
......@@ -308,7 +328,7 @@ OpenAssessment.EditStudentTrainingView.prototype = {
isEnabled: function(isEnabled) {
var sel = $("#include_student_training", this.element);
return OpenAssessment.Fields.booleanField(sel, isEnabled);
},
},
/**
Get or set the XML defining the training examples.
......@@ -324,6 +344,16 @@ OpenAssessment.EditStudentTrainingView.prototype = {
var sel = $("#student_training_examples", this.element);
return OpenAssessment.Fields.stringField(sel, xml);
},
/**
Gets the ID of the assessment
Returns:
string (CSS ID of the Element object)
**/
getID: function() {
return $(this.element).attr('id');
}
};
/**
......@@ -396,4 +426,14 @@ OpenAssessment.EditExampleBasedAssessmentView.prototype = {
var sel = $("#ai_training_examples", this.element);
return OpenAssessment.Fields.stringField(sel, xml);
},
/**
Gets the ID of the assessment
Returns:
string (CSS ID of the Element object)
**/
getID: function() {
return $(this.element).attr('id');
}
};
\ No newline at end of file
openassessment/xblock/static/js/src/studio/oa_edit_settings.js
......@@ -10,7 +10,9 @@ Returns:
**/
OpenAssessment.EditSettingsView = function(element, assessmentViews) {
this.element = element;
this.settingsElement = element;
this.assessmentsElement = $('#openassessment_assessment_module_settings_editors',
$(element).closest('#oa_settings_editor_wrapper'));
this.assessmentViews = assessmentViews;
};
......@@ -28,7 +30,7 @@ OpenAssessment.EditSettingsView.prototype = {
**/
displayName: function(name) {
var sel = $("#openassessment_title_editor", this.element);
var sel = $("#openassessment_title_editor", this.settingsElement);
return OpenAssessment.Fields.stringField(sel, name);
},
......@@ -43,7 +45,7 @@ OpenAssessment.EditSettingsView.prototype = {
**/
submissionStart: function(datetime) {
var sel = $("#openassessment_submission_start_editor", this.element);
var sel = $("#openassessment_submission_start_editor", this.settingsElement);
return OpenAssessment.Fields.datetimeField(sel, datetime);
},
......@@ -58,7 +60,7 @@ OpenAssessment.EditSettingsView.prototype = {
**/
submissionDue: function(datetime) {
var sel = $("#openassessment_submission_start_editor", this.element);
var sel = $("#openassessment_submission_start_editor", this.settingsElement);
return OpenAssessment.Fields.datetimeField(sel, datetime);
},
......@@ -73,7 +75,7 @@ OpenAssessment.EditSettingsView.prototype = {
**/
imageSubmissionEnabled: function(isEnabled) {
var sel = $("#openassessment_submission_image_editor", this.element);
var sel = $("#openassessment_submission_image_editor", this.settingsElement);
if (typeof(isEnabled) !== "undefined") {
if (isEnabled) { sel.val(1); }
else { sel.val(0); }
......@@ -105,15 +107,17 @@ OpenAssessment.EditSettingsView.prototype = {
]
**/
assessmentsDescription: function() {
assessmentDescList = [];
for (var idx in this.assessmentViews) {
var asmntView = this.assessmentViews[idx];
var assessmentDescList = [];
var view = this;
// Finds all assessment modules within our element in the DOM, and appends their definitions to the DescList
$('.openassessment_assessment_module_settings_editor', this.assessmentsElement).each( function () {
var asmntView = view.assessmentViews[$(this).attr('id')];
if (asmntView.isEnabled()) {
var description = asmntView.description();
description["name"] = asmntView.name;
assessmentDescList.push(description);
}
}
});
return assessmentDescList;
},
}
};
\ No newline at end of file
openassessment/xblock/static/sass/oa/utilities/_developer.scss
......@@ -259,12 +259,45 @@
font-size: 80%;
}
.openassessment_assessment_module_settings_editor.openassessment_shrink_for_drag{
height: 40px;
}
.openassessment_assessment_module_settings_editor{
overflow-y: scroll;
padding: 5px;
margin: 10px;
border: 1px solid lightgray;
border: 1px solid $edx-gray-l3;
border-radius: 3px;
position: relative;
.drag-handle{
position: absolute;
background-color: $edx-gray-l4;
background-position: center;
display: block;
top: 0px;
right: 0px;
z-index: 10;
width: 15px;
height: 100%;
border-left: 1px solid $edx-gray-l3;
cursor: move;
@include transition(none);
}
.openassessment_description{
padding: 0 20px 0 10px;
}
}
.openassessment_assessment_module_settings_editor:hover {
border-color: $blue;
.drag-handle {
background-color: #009fe6;
border-color: #009fe6;
@include transition(none);
}
}
.openassessment_description{
......@@ -335,6 +368,12 @@
}
}
.ui-widget-header .ui-state-active:hover,
.ui-widget-header .ui-state-default:hover{
background: $edx-gray-l2;
}
#oa_rubric_editor_wrapper{
.wrapper-comp-settings{
......@@ -646,3 +685,4 @@
{
height: 100%;
}
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