Merge pull request #1706 from edx/anton/code-response-improvements

Code response improvements.

CHANGELOG.rst

@@ -5,6 +5,9 @@ These are notable changes in edx-platform.  This is a rolling list of changes,
 in roughly chronological order, most recent first.  Add your entries at or near
 the top.  Include a label indicating the component affected.
 
+Blades: Put 2nd "Hide output" button at top of test box & increase text size for
+code response questions. BLD-126.
+
 Blades: Update the calculator hints tooltip with full information. BLD-400.
 
 Blades: Fix transcripts 500 error in studio (BLD-530)

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -726,21 +726,24 @@ section.problem {
       }
 
       a.full {
-        @include position(absolute, 0 0 1px 0);
+        @include position(absolute, 0 0px 1px 0px);
         @include box-sizing(border-box);
         display: block;
         padding: 4px;
-        width: 100%;
         background: #f3f3f3;
         text-align: right;
-        font-size: .8em;
+        font-size: 1em;
+
+        &.full-top{
+          @include position(absolute, 1px 0px auto 0px);
+        }
       }
     }
   }
 
   .external-grader-message {
     section {
-      padding-top: $baseline/2;
+      padding-top: ($baseline*1.5);
       padding-left: $baseline;
       background-color: #fafafa;
       color: #2c2c2c;

common/lib/xmodule/xmodule/js/spec/collapsible.coffee

@@ -0,0 +1,115 @@
+describe 'Collapsible', ->
+  html = custom_labels = html_custom = el = undefined
+
+  initialize = (template) =>
+    setFixtures(template)
+    el = $('.collapsible')
+    Collapsible.setCollapsibles(el)
+
+  disableFx = () =>
+    $.fx.off = true
+
+  enableFx = () =>
+    $.fx.off = false
+
+  beforeEach ->
+    html = '''
+    <section class="collapsible">
+      <div class="shortform">
+          shortform message
+      </div>
+      <div class="longform">
+        <p>longform is visible</p>
+      </div>
+    </section>
+    '''
+    html_custom =  '''
+    <section class="collapsible">
+      <div class="shortform-custom" data-open-text="Show shortform-custom" data-close-text="Hide shortform-custom">
+          shortform message
+      </div>
+      <div class="longform">
+        <p>longform is visible</p>
+      </div>
+    </section>
+    '''
+
+  describe 'setCollapsibles', ->
+
+    it 'Default container initialized correctly', ->
+      initialize(html)
+
+      expect(el.find('.shortform')).toContain '.full-top'
+      expect(el.find('.shortform')).toContain '.full-bottom'
+      expect(el.find('.longform')).toBeHidden()
+      expect(el.find('.full')).toHandle('click')
+
+    it 'Custom container initialized correctly', ->
+      initialize(html_custom)
+
+      expect(el.find('.shortform-custom')).toContain '.full-custom'
+      expect(el.find('.full-custom')).toHaveText "Show shortform-custom"
+      expect(el.find('.longform')).toBeHidden()
+      expect(el.find('.full-custom')).toHandle('click')
+
+  describe 'toggleFull', ->
+
+    beforeEach ->
+      disableFx()
+
+    afterEach ->
+      enableFx()
+
+    it 'Default container', ->
+      initialize(html)
+
+      event = jQuery.Event('click', {
+        target: el.find('.full').get(0)
+      })
+
+      assertChanges = (state='closed') =>
+        anchors = el.find('.full')
+
+        if state is 'closed'
+          expect(el.find('.longform')).toBeHidden()
+          expect(el).not.toHaveClass('open')
+          text = "See full output"
+        else
+          expect(el.find('.longform')).toBeVisible()
+          expect(el).toHaveClass('open')
+          text = "Hide output"
+
+        $.each anchors, (index, el) =>
+          expect(el).toHaveText text
+
+      Collapsible.toggleFull(event, "See full output", "Hide output")
+      assertChanges('opened')
+      Collapsible.toggleFull(event, "See full output", "Hide output")
+      assertChanges('closed')
+
+    it 'Custom container', ->
+      initialize(html_custom)
+
+      event = jQuery.Event('click', {
+        target: el.find('.full-custom').get(0)
+      })
+
+      assertChanges = (state='closed') =>
+        anchors = el.find('.full-custom')
+
+        if state is 'closed'
+          expect(el.find('.longform')).toBeHidden()
+          expect(el).not.toHaveClass('open')
+          text = "Show shortform-custom"
+        else
+          expect(el.find('.longform')).toBeVisible()
+          expect(el).toHaveClass('open')
+          text = "Hide shortform-custom"
+
+        $.each anchors, (index, el) =>
+          expect(el).toHaveText text
+
+      Collapsible.toggleFull(event, "Show shortform-custom", "Hide shortform-custom")
+      assertChanges('opened')
+      Collapsible.toggleFull(event, "Show shortform-custom", "Hide shortform-custom")
+      assertChanges('closed')

common/lib/xmodule/xmodule/js/src/collapsible.coffee

@@ -1,7 +1,7 @@
 class @Collapsible
 
   # Set of library functions that provide a simple way to add collapsible
-  # functionality to elements. 
+  # functionality to elements.
 
   # setCollapsibles:
   #   Scan element's content for generic collapsible containers
@@ -9,12 +9,15 @@ class @Collapsible
     ###
     el: container
     ###
+    linkTop = '<a href="#" class="full full-top">See full output</a>'
+    linkBottom = '<a href="#" class="full full-bottom">See full output</a>'
+
     # standard longform + shortfom pattern
     el.find('.longform').hide()
-    el.find('.shortform').append('<a href="#" class="full">See full output</a>')
+    el.find('.shortform').append(linkTop, linkBottom)
 
     # custom longform + shortform text pattern
-    short_custom = el.find('.shortform-custom') 
+    short_custom = el.find('.shortform-custom')
     # set up each one individually
     short_custom.each (index, elt) =>
       open_text = $(elt).data('open-text')
@@ -31,13 +34,18 @@ class @Collapsible
 
   @toggleFull: (event, open_text, close_text) =>
     event.preventDefault()
-    $(event.target).parent().siblings().slideToggle()
-    $(event.target).parent().parent().toggleClass('open')
+    parent =  $(event.target).parent()
+    parent.siblings().slideToggle()
+    parent.parent().toggleClass('open')
     if $(event.target).text() == open_text
       new_text = close_text
     else
       new_text = open_text
-    $(event.target).text(new_text)
+    if $(event.target).hasClass('full')
+      el = parent.find('.full')
+    else
+      el = $(event.target)
+    el.text(new_text)
 
   @toggleHint: (event) =>
     event.preventDefault()