Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reset 'correctness' visual indicator of a problem on new input

Browse Source 
Affects:
Choicegroups, option inputs, textline, and formula equation inputs
This commit is contained in:
Peter Baratta
2013-08-20 17:05:33 -04:00
committed by Sarina Canelake
parent d893e6d440
commit 48cb05c037
7 changed files with 88 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
common/lib/capa/capa/templates/choicegroup.html
View File

@@ -17,6 +17,7 @@
% for choice_id, choice_description in choices:
<label for="input_${id}_${choice_id}"
## If the student has selected this choice...
% if input_type == 'radio' and ( (isinstance(value, basestring) and (choice_id == value)) or (not isinstance(value, basestring) and choice_id in value) ):
<%
if status == 'correct':
@@ -32,6 +33,7 @@
% endif
>
<input type="${input_type}" name="input_${id}${name_array_suffix}" id="input_${id}_${choice_id}" aria-describedby="answer_${id}" value="${choice_id}"
## If the student selected this choice...
% if input_type == 'radio' and ( (isinstance(value, basestring) and (choice_id == value)) or (not isinstance(value, basestring) and choice_id in value) ):
checked="true"
% elif input_type != 'radio' and choice_id in value:

2
common/lib/capa/capa/templates/formulaequationinput.html
View File

@@ -1,4 +1,4 @@
<section id="formulaequationinput_${id}" class="formulaequationinput">
<section id="formulaequationinput_${id}" class="inputtype formulaequationinput">
<div class="${reported_status}" id="status_${id}">
<input type="text" name="input_${id}" id="input_${id}"
data-input-id="${id}" value="${value|h}"

2
common/lib/capa/capa/templates/optioninput.html
View File

@@ -1,4 +1,4 @@
<form class="option-input">
<form class="inputtype option-input">
<select name="input_${id}" id="input_${id}" aria-describedby="answer_${id}">
<option value="option_${id}_dummy_default"> </option>
% for option_id, option_description in options:

2
common/lib/capa/capa/templates/textline.html
View File

@@ -1,6 +1,6 @@
<% doinline = "inline" if inline else "" %>
<section id="inputtype_${id}" class="${'text-input-dynamath' if do_math else ''} capa_inputtype ${doinline}" >
<section id="inputtype_${id}" class="${'text-input-dynamath' if do_math else ''} capa_inputtype ${doinline} textline" >
% if preprocessor is not None:
<div class="text-input-dynamath_data" data-preprocessor="${preprocessor['class_name']}"/>

55
common/lib/xmodule/xmodule/js/src/capa/display.coffee
View File

@@ -25,6 +25,8 @@ class @Problem
@$('section.action button.show').click @show
@$('section.action input.save').click @save
@bindResetCorrectness()
# Collapsibles
Collapsible.setCollapsibles(@el)
@@ -370,6 +372,59 @@ class @Problem
element.CodeMirror.save() if element.CodeMirror.save
@answers = @inputs.serialize()
bindResetCorrectness: ->
# Loop through all input types
# Bind the reset functions at that scope.
$inputtypes = @el.find(".capa_inputtype").add(@el.find(".inputtype"))
$inputtypes.each (index, inputtype) =>
classes = $(inputtype).attr('class').split(' ')
for cls in classes
bindMethod = @bindResetCorrectnessByInputtype[cls]
# For debugging! Remove later
console.log $(inputtype).attr('id'), cls, typeof bindMethod
if bindMethod?
bindMethod(inputtype)
# Find all places where each input type displays its correct-ness
# Replace them with their original state--'unanswered'.
bindResetCorrectnessByInputtype:
# These are run at the scope of the capa inputtype
# They should set handlers on each <input> to reset the whole.
formulaequationinput: (element) ->
$(element).find('input').on 'input', ->
$p = $(element).find('p.status')
$p.text "unanswered"
$p.parent().removeClass().addClass "unanswered"
choicegroup: (element) ->
$element = $(element)
id = ($element.attr('id').match /^inputtype_(.*)$/)[1]
$element.find('input').on 'change', ->
$status = $("#status_#{id}")
if $status[0] # We found a status icon.
$status.removeClass().addClass "unanswered"
$status.empty().css 'display', 'inline-block'
else
# Recreate the unanswered dot on left.
$element.find('div.indicator_container').append "<span class='unanswered' style='display:inline-block;' id='status_#{id}'></span>"
$element.find("label").removeClass()
.find('span').remove()
'option-input': (element) ->
$select = $(element).find('select')
id = ($select.attr('id').match /^input_(.*)$/)[1]
$select.on 'change', ->
$status = $("#status_#{id}")
.removeClass().addClass("unanswered")
.find('span').text('Status: unsubmitted')
textline: (element) ->
$(element).find('input').on 'input', ->
$p = $(element).find('p.status')
$p.text "unanswered"
$p.parent().removeClass().addClass "unanswered"
inputtypeSetupMethods:
'text-input-dynamath': (element) =>

43
common/static/js/capa/spec/formula_equation_preview_spec.js
View File

@@ -15,11 +15,14 @@ describe("Formula Equation Preview", function () {
var $fixture = this.$fixture = $('\
<section class="problems-wrapper" data-url="THE_URL">\
<section class="formulaequationinput">\
<input type="text" id="input_THE_ID" data-input-id="THE_ID"\
value="prefilled_value"/>\
<div id="input_THE_ID_preview" class="equation">\
\[\]\
<img class="loading" style="visibility:hidden"/>\
<div class="INITIAL_STATUS" id="status_THE_ID">\
<input type="text" id="input_THE_ID" data-input-id="THE_ID"\
value="PREFILLED_VALUE"/>\
<p class="status">INITIAL_STATUS</p>\
<div id="input_THE_ID_preview" class="equation">\
\[\]\
<img class="loading" style="visibility:hidden"/>\
</div>\
</div>\
</section>\
</section>');
@@ -62,10 +65,10 @@ describe("Formula Equation Preview", function () {
MathJax.Hub.Queue = jasmine.createSpy('MathJax.Hub.Queue');
});
it('(the test) should be able to swap out the behavior of $', function () {
it('(the test) is able to swap out the behavior of $', function () {
// This was a pain to write, make sure it doesn't get screwed up.
// Find the DOM element using DOM methods.
// Find the element using DOM methods.
var legitInput = this.$fixture[0].getElementsByTagName("input")[0];
// Use the (modified) jQuery.
@@ -96,7 +99,7 @@ describe("Formula Equation Preview", function () {
"THE_URL",
"THE_ID",
"preview_formcalc",
{formula: "prefilled_value",
{formula: "PREFILLED_VALUE",
request_start: jasmine.any(Number)},
jasmine.any(Function)
]);
@@ -117,7 +120,7 @@ describe("Formula Equation Preview", function () {
});
});
it("shouldn't be requested for empty input", function () {
it("isn't requested for empty input", function () {
Problem.inputAjax.reset();
// When we make an input of '',
@@ -136,7 +139,7 @@ describe("Formula Equation Preview", function () {
});
});
it('should limit the number of requests per second', function () {
it('limits the number of requests per second', function () {
var minDelay = formulaEquationPreview.minDelay;
var end = Date.now() + minDelay * 1.1;
var step = 10; // ms
@@ -171,7 +174,7 @@ describe("Formula Equation Preview", function () {
});
describe("Visible results (icon and mathjax)", function () {
it('should display a loading icon when requests are open', function () {
it('displays a loading icon when requests are open', function () {
var $img = $("img.loading");
expect($img.css('visibility')).toEqual('hidden');
formulaEquationPreview.enable();
@@ -199,7 +202,7 @@ describe("Formula Equation Preview", function () {
});
});
it('should update MathJax and loading icon on callback', function () {
it('updates MathJax and loading icon on callback', function () {
formulaEquationPreview.enable();
waitsFor(function () {
return Problem.inputAjax.wasCalled;
@@ -217,7 +220,7 @@ describe("Formula Equation Preview", function () {
expect($("img.loading").css('visibility')).toEqual('hidden');
// We should look in the preview div for the MathJax.
var previewDiv = $("div")[0];
var previewDiv = $("#input_THE_ID_preview")[0];
expect(MathJax.Hub.getAllJax).toHaveBeenCalledWith(previewDiv);
// Refresh the MathJax.
@@ -242,7 +245,7 @@ describe("Formula Equation Preview", function () {
// Cannot find MathJax.
MathJax.Hub.getAllJax.andReturn([]);
spyOn(console, 'error');
spyOn(console, 'warn');
callback({
preview: 'THE_FORMULA',
@@ -250,10 +253,10 @@ describe("Formula Equation Preview", function () {
});
// Tests.
expect(console.error).toHaveBeenCalled();
expect(console.warn).toHaveBeenCalled();
// We should look in the preview div for the MathJax.
var previewElement = $("div")[0];
var previewElement = $("#input_THE_ID_preview")[0];
expect(previewElement.firstChild.data).toEqual("\\[THE_FORMULA\\]");
// Refresh the MathJax.
@@ -263,7 +266,7 @@ describe("Formula Equation Preview", function () {
});
});
it('should display errors from the server well', function () {
it('displays errors from the server well', function () {
var $img = $("img.loading");
formulaEquationPreview.enable();
waitsFor(function () {
@@ -329,7 +332,7 @@ describe("Formula Equation Preview", function () {
});
});
it('should update requests sequentially', function () {
it('updates requests sequentially', function () {
var $img = $("img.loading");
expect($img.css('visibility')).toEqual('visible');
@@ -349,7 +352,7 @@ describe("Formula Equation Preview", function () {
expect($img.css('visibility')).toEqual('hidden')
});
it("shouldn't display outdated information", function () {
it("doesn't display outdated information", function () {
var $img = $("img.loading");
expect($img.css('visibility')).toEqual('visible');
@@ -368,7 +371,7 @@ describe("Formula Equation Preview", function () {
expect($img.css('visibility')).toEqual('hidden')
});
it("shouldn't show an error if the responses are close together",
it("doesn't show an error if the responses are close together",
function () {
this.callbacks[0]({
error: 'OOPSIE',

8
common/static/js/capa/src/formula_equation_preview.js
View File

@@ -52,12 +52,14 @@ formulaEquationPreview.enable = function () {
// Show the loading icon.
inputData.$img.css('visibility', 'visible');
// Say we are waiting for request.
inputData.isWaitingForRequest = true;
// First thing in `sendRequest`, say we aren't anymore.
throttledRequest(inputData, this.value);
};
$this.on("input", initializeRequest);
// send an initial
// Ask for initial preview.
initializeRequest.call(this);
}
@@ -85,7 +87,7 @@ formulaEquationPreview.enable = function () {
// // This is run when ajax call fails.
// // Have an error message and other stuff here?
// inputData.$img.css('visibility', 'hidden');
// }); */
// });
}
else {
inputData.requestCallback({
@@ -140,7 +142,7 @@ formulaEquationPreview.enable = function () {
);
}
else if (latex) {
console.error("Oops no mathjax for ", latex);
console.warn("[FormulaEquationInput] Oops no mathjax for ", latex);
// Fall back to modifying the actual element.
var textNode = previewElement.childNodes[0];
textNode.data = "\\[" + latex + "\\]";