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

Make it impossible to click "final check" without selecting a choice

Browse Source
This commit is contained in:
Dmitry Viskov
2015-12-23 14:58:15 +03:00
committed by Dmitry Viskov
parent 47e4804b52
commit 61127b613b
5 changed files with 200 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee
View File

@@ -247,6 +247,95 @@ describe 'Problem', ->
runs ->
expect(@problem.checkButtonLabel.text).toHaveBeenCalledWith 'Check'
describe 'check button on problems', ->
beforeEach ->
@problem = new Problem($('.xblock-student_view'))
@checkDisabled = (v) -> expect(@problem.checkButton.hasClass('is-disabled')).toBe(v)
describe 'some basic tests for check button', ->
it 'should become enabled after a value is entered into the text box', ->
$('#input_example_1').val('test').trigger('input')
@checkDisabled false
$('#input_example_1').val('').trigger('input')
@checkDisabled true
describe 'some advanced tests for check button', ->
it 'should become enabled after a checkbox is checked', ->
html = '''
<div class="choicegroup">
<label for="input_1_1_1"><input type="checkbox" name="input_1_1" id="input_1_1_1" value="1"> One</label>
<label for="input_1_1_2"><input type="checkbox" name="input_1_1" id="input_1_1_2" value="2"> Two</label>
<label for="input_1_1_3"><input type="checkbox" name="input_1_1" id="input_1_1_3" value="3"> Three</label>
</div>
'''
$('#input_example_1').replaceWith(html)
@problem.checkAnswersAndCheckButton true
@checkDisabled true
$('#input_1_1_1').attr('checked', true).trigger('click')
@checkDisabled false
$('#input_1_1_1').attr('checked', false).trigger('click')
@checkDisabled true
it 'should become enabled after a radiobutton is checked', ->
html = '''
<div class="choicegroup">
<label for="input_1_1_1"><input type="radio" name="input_1_1" id="input_1_1_1" value="1"> One</label>
<label for="input_1_1_2"><input type="radio" name="input_1_1" id="input_1_1_2" value="2"> Two</label>
<label for="input_1_1_3"><input type="radio" name="input_1_1" id="input_1_1_3" value="3"> Three</label>
</div>
'''
$('#input_example_1').replaceWith(html)
@problem.checkAnswersAndCheckButton true
@checkDisabled true
$('#input_1_1_1').attr('checked', true).trigger('click')
@checkDisabled false
$('#input_1_1_1').attr('checked', false).trigger('click')
@checkDisabled true
it 'should become enabled after a value is selected in a selector', ->
html = '''
<div id="problem_sel">
<select>
<option value="val0"></option>
<option value="val1">1</option>
<option value="val2">2</option>
</select>
</div>
'''
$('#input_example_1').replaceWith(html)
@problem.checkAnswersAndCheckButton true
@checkDisabled true
$("#problem_sel select").val("val2").trigger('change')
@checkDisabled false
$("#problem_sel select").val("val0").trigger('change')
@checkDisabled true
it 'should become enabled after a radiobutton is checked and a value is entered into the text box', ->
html = '''
<div class="choicegroup">
<label for="input_1_1_1"><input type="radio" name="input_1_1" id="input_1_1_1" value="1"> One</label>
<label for="input_1_1_2"><input type="radio" name="input_1_1" id="input_1_1_2" value="2"> Two</label>
<label for="input_1_1_3"><input type="radio" name="input_1_1" id="input_1_1_3" value="3"> Three</label>
</div>
'''
$(html).insertAfter('#input_example_1')
@problem.checkAnswersAndCheckButton true
@checkDisabled true
$('#input_1_1_1').attr('checked', true).trigger('click')
@checkDisabled true
$('#input_example_1').val('111').trigger('input')
@checkDisabled false
$('#input_1_1_1').attr('checked', false).trigger('click')
@checkDisabled true
it 'should become enabled if there are only hidden input fields', ->
html = '''
<input type="text" name="test" id="test" aria-describedby="answer_test" value="" style="display:none;">
'''
$('#input_example_1').replaceWith(html)
@problem.checkAnswersAndCheckButton true
@checkDisabled false
describe 'reset', ->
beforeEach ->
@problem = new Problem($('.xblock-student_view'))

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

@@ -49,6 +49,8 @@ class @Problem
window.globalTooltipManager.hide()
@bindResetCorrectness()
if @checkButton.length
@checkAnswersAndCheckButton true
# Collapsibles
Collapsible.setCollapsibles(@el)
@@ -452,6 +454,58 @@ class @Problem
element.CodeMirror.save() if element.CodeMirror.save
@answers = @inputs.serialize()
checkAnswersAndCheckButton: (bind=false) =>
# Used to check available answers and if something is checked (or the answer is set in some textbox)
# "Check"/"Final check" button becomes enabled. Otherwise it is disabled by default.
# params:
# 'bind' used on the first check to attach event handlers to input fields
# to change "Check"/"Final check" enable status in case of some manipulations with answers
answered = true
at_least_one_text_input_found = false
one_text_input_filled = false
@el.find("input:text").each (i, text_field) =>
if $(text_field).is(':visible')
at_least_one_text_input_found = true
if $(text_field).val() isnt ''
one_text_input_filled = true
if bind
$(text_field).on 'input', (e) =>
@checkAnswersAndCheckButton()
return
return
if at_least_one_text_input_found and not one_text_input_filled
answered = false
@el.find(".choicegroup").each (i, choicegroup_block) =>
checked = false
$(choicegroup_block).find("input[type=checkbox], input[type=radio]").each (j, checkbox_or_radio) =>
if $(checkbox_or_radio).is(':checked')
checked = true
if bind
$(checkbox_or_radio).on 'click', (e) =>
@checkAnswersAndCheckButton()
return
return
if not checked
answered = false
return
@el.find("select").each (i, select_field) =>
selected_option = $(select_field).find("option:selected").text().trim()
if selected_option is ''
answered = false
if bind
$(select_field).on 'change', (e) =>
@checkAnswersAndCheckButton()
return
return
if answered
@enableCheckButton true
else
@enableCheckButton false, false
bindResetCorrectness: ->
# Loop through all input types
# Bind the reset functions at that scope.