Merge pull request #14735 from edx/ri/TNL-6436-fix-show-answer-button

TNL-6436 Fix (capa) show answer disabled even after answer is no longer shown

common/lib/xmodule/xmodule/js/fixtures/checkbox_problem.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" class="choicegroup_correct"><input type="checkbox" name="input_1_1" id="input_1_1_2" value="2"> Two <span class="status correct"></span></label>
+    <label for="input_1_1_3"><input type="checkbox" name="input_1_1" id="input_1_1_3" value="3"> Three</label>
+</div>
\ No newline at end of file

common/lib/xmodule/xmodule/js/fixtures/radiobutton_problem.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" class="choicegroup_correct"><input type="radio" name="input_1_1" id="input_1_1_2" value="2"> Two <span class="status correct"></span></label>
+    <label for="input_1_1_3"><input type="radio" name="input_1_1" id="input_1_1_3" value="3"> Three</label>
+</div>
\ No newline at end of file

common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee

@@ -258,6 +258,7 @@ describe 'Problem', ->
       expect(@problem.submitButton).not.toHaveAttr('disabled')
 
   describe 'submit button on problems', ->
+
     beforeEach ->
       @problem = new Problem($('.xblock-student_view'))
       @submitDisabled = (disabled) =>
@@ -274,15 +275,11 @@ describe 'Problem', ->
         @submitDisabled true
 
     describe 'some advanced tests for submit button', ->
+      radioButtonProblemHtml = readFixtures('radiobutton_problem.html')
+      checkboxProblemHtml = readFixtures('checkbox_problem.html')
+
       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)
+        $('#input_example_1').replaceWith(checkboxProblemHtml)
         @problem.submitAnswersAndSubmitButton true
         @submitDisabled true
         $('#input_1_1_1').click()
@@ -291,14 +288,7 @@ describe 'Problem', ->
         @submitDisabled 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)
+        $('#input_example_1').replaceWith(radioButtonProblemHtml)
         @problem.submitAnswersAndSubmitButton true
         @submitDisabled true
         $('#input_1_1_1').attr('checked', true).trigger('click')
@@ -325,14 +315,7 @@ describe 'Problem', ->
         @submitDisabled 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')
+        $(radioButtonProblemHtml).insertAfter('#input_example_1')
         @problem.submitAnswersAndSubmitButton true
         @submitDisabled true
         $('#input_1_1_1').attr('checked', true).trigger('click')
@@ -802,3 +785,40 @@ describe 'Problem', ->
 
       # verify that codemirror textarea has correct `aria-describedby` attribute value
       expect($(CodeMirrorTextArea).attr('aria-describedby')).toEqual('cm-editor-exit-message-101 status_101')
+
+
+  describe 'show answer button', ->
+
+    radioButtonProblemHtml = readFixtures('radiobutton_problem.html')
+    checkboxProblemHtml = readFixtures('checkbox_problem.html')
+
+    beforeEach ->
+      @problem = new Problem($('.xblock-student_view'))
+
+      @checkAssertionsAfterClickingAnotherOption = =>
+        # verify that 'show answer button is no longer disabled'
+        expect(@problem.el.find('.show').attr('disabled')).not.toEqual('disabled')
+
+        # verify that displayed answer disappears
+        expect(@problem.el.find('div.choicegroup')).not.toHaveClass('choicegroup_correct')
+
+        # verify that radio/checkbox label has no span having class '.status.correct'
+        expect(@problem.el.find('div.choicegroup')).not.toHaveAttr('span.status.correct')
+
+    it 'should become enabled after a radiobutton is selected', ->
+      $('#input_example_1').replaceWith(radioButtonProblemHtml)
+      # assume that 'ShowAnswer' button is clicked,
+      # clicking make it disabled.
+      @problem.el.find('.show').attr('disabled', 'disabled')
+      # bind click event to input fields
+      @problem.submitAnswersAndSubmitButton true
+      # selects option 2
+      $('#input_1_1_2').attr('checked', true).trigger('click')
+      @checkAssertionsAfterClickingAnotherOption()
+
+    it 'should become enabled after a checkbox is selected', ->
+      $('#input_example_1').replaceWith(checkboxProblemHtml)
+      @problem.el.find('.show').attr('disabled', 'disabled')
+      @problem.submitAnswersAndSubmitButton true
+      $('#input_1_1_2').click()
+      @checkAssertionsAfterClickingAnotherOption()

common/lib/xmodule/xmodule/js/src/capa/display.js

@@ -872,6 +872,7 @@
                         if (bind) {
                             $(checkboxOrRadio).on('click', function() {
                                 that.saveNotification.hide();
+                                that.el.find('.show').removeAttr('disabled');
                                 that.showAnswerNotification.hide();
                                 that.submitAnswersAndSubmitButton();
                             });
@@ -953,6 +954,7 @@
                             id: 'status_' + id
                         });
                     }
+                    $element.find('label').find('span.status.correct').remove();
                     return $element.find('label').removeAttr('class');
                 });
             },