Skip to content

E
edx-ora2
Commit 34acaafc by gradyward
Options

Added in Javascript to provid basic button functionality

parent f23e41e0
Showing with 315 additions and 8 deletions
openassessment/templates/openassessmentblock/edit/oa_edit_example_based_assessment_tab.html
......@@ -27,10 +27,9 @@
</div>
</div>
<ol id="openassessment_ai_example_selector">
{% for example in assessments.ai.examples %}
<li class="openassessment_ai_example_selector_item">
<h2 class="openassessment_ai_example_selector_name">{{ example.name }}</h2>
<li class="openassessment_ai_example_selector_item" data-example="{{ example.name }}">
<h2 class="openassessment_ai_example_selector_name">{{ example.label }}</h2>
<div class="openassessment_ai_example_remove_button">
<h2>Remove</h2>
</div>
......@@ -45,11 +44,11 @@
<div id="openassessment_ai_example_editor">
<ol id="openassessment_ai_examples">
{% for example in assessments.ai.examples %}
<li class="openassessment_ai_example">
<li class="openassessment_ai_example" data-example="{{ example.name }}">
<div class="openassessment_ai_example_settings">
<label class="openassessment_ai_example_label_field">
Example Name
<input type="text" value="{{ example.name }}">
<input type="text" value="{{ example.label }}">
</label>
<h2 class="openassessment_ai_example_total_score">Total Score: 26 / 30</h2>
</div>
......@@ -62,7 +61,7 @@
<label> {{ criterion.label }}
<select value="{{ criterion.option_selected }}" data-criterion="{{ criterion.name }}">
{% for option in criterion.options %}
<option data-criterion="{{ criterion.name }}" value="{{ option.name }}"
<option class="openassessment_ai_example_criterion_option" data-criterion="{{ criterion.name }}" value="{{ option.name }}"
{% if option.name == criterion.option_selected %} selected {% endif %}>
{{ option.label }} - {{ option.points }} points
</option>
......@@ -80,6 +79,50 @@
</div>
</div>
</div>
<ol id="openassessment_ai_example_selector_item_template" class="is--hidden">
<li class="openassessment_ai_example_selector_item" data-example="{{ example.name }}">
<h2 class="openassessment_ai_example_selector_name">--New Example--</h2>
<div class="openassessment_ai_example_remove_button">
<h2>Remove</h2>
</div>
</li>
</ol>
<ol id="openassessment_ai_example_template" class="is--hidden">
{% with example as assessments.ai.template %}
<li class="openassessment_ai_example" data-example="{{ example.name }}">
<div class="openassessment_ai_example_settings">
<label class="openassessment_ai_example_label_field">
Example Name
<input type="text" value="{{ example.label }}">
</label>
<h2 class="openassessment_ai_example_total_score">Total Score: 26 / 30</h2>
</div>
<div class="openassessment_ai_example_essay_wrapper">
<textarea class="openassessment_ai_example_essay">{{ example.answer }}</textarea>
</div>
<div class="openassessment_ai_example_scored_rubric">
{% for criterion in example.criteria %}
<div class="openassessment_ai_example_scored_rubric_criterion">
<label> {{ criterion.label }}
<select value="{{ criterion.option_selected }}" data-criterion="{{ criterion.name }}">
{% for option in criterion.options %}
<option class="openassessment_ai_example_criterion_option" data-criterion="{{ criterion.name }}" value="{{ option.name }}"
{% if option.name == criterion.option_selected %} selected {% endif %}>
{{ option.label }} - {{ option.points }} points
</option>
{% endfor %}
</select>
</label>
</div>
{% endfor %}
</div>
</li>
{% endwith %}
</ol>
<div id="openassessment_ai_editor_import_sub_modal" class="is--hidden">
<div id="openassessment_ai_editor_sub_modal_header">
......
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/src/studio/oa_container_item.js
......@@ -601,4 +601,134 @@ OpenAssessment.TrainingExample.prototype = {
function() { $(this).removeClass("openassessment_highlighted_field"); }
);
}
};
OpenAssessment.AIExample = function(element){
this.element = element;
this.labelSel = $('.openassessment_ai_example_label_field', this.element);
this.answer = $('.openassessment_ai_example_essay', this.element).first();
this.criteria = $(".openassessment_ai_example_criterion_option", this.element);
};
OpenAssessment.AIExample.prototype = {
/**
Returns the values currently stored in the fields associated with this training example.
**/
getFieldValues: function () {
// Iterates through all of the options selected by the training example, and adds them
// to a list.
var optionsSelected = this.criteria.map(
function () {
return {
criterion: $(this).data('criterion'),
option: $(this).prop('value')
};
}
).get();
return {
answer: this.answer.prop('value'),
options_selected: optionsSelected
};
},
addHandler: function() {
// Goes through and instantiates the option description in the training example for each option.
$(".openassessment_ai_example_criterion_option", this.element) .each( function () {
$('option', this).each(function(){
OpenAssessment.ItemUtilities.refreshOptionString($(this));
});
});
$(this.element).attr(
'data-example', OpenAssessment.ItemUtilities.createUniqueName(this.element, 'data-example')
);
},
addEventListeners: function() {},
removeHandler: function() {},
updateHandler: function() {},
validate: function() {
var isValid = true;
this.criteria.each(
function() {
var isOptionValid = ($(this).prop('value') !== "");
isValid = isOptionValid && isValid;
if (!isOptionValid) {
$(this).addClass("openassessment_highlighted_field");
}
}
);
return isValid;
},
validationErrors: function() {
var errors = [];
this.criteria.each(
function() {
var hasError = $(this).hasClass("openassessment_highlighted_field");
if (hasError) {
errors.push("An Example Based Assessment Example is invalid.");
}
}
);
return errors;
},
/**
Retrieve all elements representing items in this container.
Returns:
array of container item objects
**/
clearValidationErrors: function() {
this.criteria.each(
function() { $(this).removeClass("openassessment_highlighted_field"); }
);
}
};
OpenAssessment.AIExampleMenuItem = function(element){
this.element = element;
this.labelSel = $('.openassessment_ai_example_label_field', this.element);
};
OpenAssessment.AIExampleMenuItem.prototype = {
addEventListeners: function() {
var exampleName = $(this.element).attr('data-example');
$(this.element).click(function() {
$('.openassessment_ai_example').each(function() {
if ($(this).attr('data-example') == exampleName){
$(this).removeClass('is--hidden');
} else {
$(this).addClass('is--hidden');
}
});
});
},
removeHandler: function() {
this.partneredAIExample.remove();
$('.openassessment_ai_example["'+ $(this.element).attr('data-example') +'"]').remove();
},
getFieldValues: function () {},
addHandler: function() {
$(this.element).attr(
'data-example', OpenAssessment.ItemUtilities.createUniqueName(this.element, 'data-example')
);
this.addEventListeners();
},
updateHandler: function() {},
validate: function() { return true; },
validationErrors: function() { return []; },
clearValidationErrors: function() {}
};
\ No newline at end of file
openassessment/xblock/static/js/src/studio/oa_edit.js
......@@ -61,6 +61,10 @@ OpenAssessment.StudioView = function(runtime, element, server) {
])
);
this.aiView = new OpenAssessment.EditAIView(
$("#oa_ai_editor_wrapper", this.element).get(0)
);
// 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));
......
openassessment/xblock/static/js/src/studio/oa_edit_ai.js 0 → 100644
OpenAssessment.EditAIView = function(element) {
this.element = element;
this.exampleAddButton = $('#openassessment_ai_selector_add_example', this.element);
this.exampleContainer = new OpenAssessment.Container(
OpenAssessment.AIExample, {
containerElement: $("#openassessment_ai_examples", this.element).get(0),
templateElement: $("#openassessment_ai_example_template", this.element).get(0),
addButtonElement: $("#openassessment_ai_selector_add_example", this.element).get(0),
removeButtonClass: "openassessment_ai_example_remove_button",
containerItemClass: "openassessment_ai_example"
}
);
this.exampleContainer.addEventListeners();
this.exampleMenuContainer = new OpenAssessment.Container(
OpenAssessment.AIExampleMenuItem, {
containerElement: $("#openassessment_ai_example_selector", this.element).get(0),
templateElement: $("#openassessment_ai_example_selector_item_template", this.element).get(0),
addButtonElement: $("#openassessment_ai_selector_add_example", this.element).get(0),
removeButtonClass: "openassessment_ai_example_remove_button",
containerItemClass: "openassessment_ai_example_selector_item"
}
);
this.exampleMenuContainer.addEventListeners();
};
OpenAssessment.EditAIView.prototype = {
exampleDefinition: function() {
return this.exampleContainer.getItemValues();
},
addExample: function() {
this.exampleContainer.add();
this.exampleMenuContainer.add();
},
removeExample: function(item) {
this.exampleContainer.remove(item);
},
getExampleItem: function(index) {
return this.exampleContainer.getItem(index);
},
/**
Retrieve all examples from the AI Tab.
Returns:
Array of OpenAssessment.AIExample objects.
**/
getAllExamples: function() {
return this.exampleContainer.getAllItems();
},
/**
Mark validation errors.
Returns:
Boolean indicating whether the view is valid.
**/
validate: function() {
var examples = this.getAllExamples();
var isValid = examples.length > 0;
if (!isValid) {
this.exampleAddButton
.addClass("openassessment_highlighted_field")
.click( function() {
$(this).removeClass("openassessment_highlighted_field");
}
);
}
$.each(examples, function() {
isValid = (this.validate() && isValid);
});
},
/**
Return a list of validation errors visible in the UI.
Mainly useful for testing.
Returns:
list of string
**/
validationErrors: function() {
var errors = [];
if (this.exampleAddButton.hasClass("openassessment_highlighted_field")) {
errors.push("There must be at least one example for Example Based Assessment (AI).");
}
// Sub-validates the criteria defined by the rubric
$.each(this.getAllExamples(), function() {
errors = errors.concat(this.validationErrors());
});
return errors;
},
/**
Clear all validation errors from the UI.
**/
clearValidationErrors: function() {
this.criterionAddButton.removeClass("openassessment_highlighted_field");
$.each(this.getAllExamples(), function() {
this.clearValidationErrors();
});
}
};
openassessment/xblock/static/sass/oa/utilities/_developer.scss
......@@ -1298,7 +1298,6 @@
margin: 5px;
border-radius: 5px;
font-size: 80%;
background-color: white;
float: right;
cursor: pointer;
h2{
......@@ -1324,6 +1323,12 @@
margin: 0 0 0 5px;
}
}
.openassessment_ai_example_selector_item:hover{
background-color: $edx-gray-l5;
cursor: pointer;
}
}
#openassessment_ai_example_editor{
......@@ -1407,4 +1412,8 @@
}
}
}
}
#openassessment_ai_editor_normal_editing{
height: 100%;
}
\ No newline at end of file
openassessment/xblock/studio_mixin.py
......@@ -285,7 +285,8 @@ class StudioMixin(object):
ai_examples = copy.deepcopy(example_list)
count = 1
for example in ai_examples:
example['name'] = "AI Example " + str(count)
example['label'] = "AI Example " + str(count)
example['name'] = count
count += 1
assessments['ai'] = {'examples': ai_examples, 'template': student_training_template}
......
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