Added fancy sliding transitions into hint collection page.

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

@@ -7,59 +7,38 @@
   background: rgb(253, 248, 235);
 }
 
-#answer-tabs {
-  background: #FFFFFF;
-  border: none;
-  margin-bottom: 20px;
-  padding-bottom: 20px;
-}
-
-#answer-tabs .ui-widget-header {
-  border-bottom: 1px solid #DCDCDC;
-  background: #FDF8EB;
-}
-
-#answer-tabs .ui-tabs-nav .ui-state-default {
-  border: 1px solid #DCDCDC;
-  background: #E6E6E3;
-  margin-bottom: 0px;
-}
-
-#answer-tabs .ui-tabs-nav .ui-state-default:hover {
-  background: #FFFFFF;
-}
-
-#answer-tabs .ui-tabs-nav .ui-state-active:hover {
-  background: #FFFFFF;
+.hint-inner-container {
+  padding-left: 15px;
+  padding-right: 15px;
+  font-size: 16px;
 }
 
-#answer-tabs .ui-tabs-nav .ui-state-active {
-  border: 1px solid #DCDCDC;
-  background: #FFFFFF;
+.vote {
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
 }
 
-#answer-tabs .ui-tabs-nav .ui-state-active a {
-  color: #222222;
-  background: #FFFFFF;
+.wizard-view {
+  float: left;
+  width: 800px;
 }
 
-#answer-tabs .ui-tabs-nav .ui-state-default a:hover {
-  color: #222222;
-  background: #FFFFFF;
-}
+.wizard-container {
+  width: 3000px;
 
-#answer-tabs .custom-hint {
-  height: 100px;
-  width: 100%;
+  -webkit-transition:all 1.0s ease-in-out;
+  -moz-transition:all 1.0s ease-in-out;
+  -o-transition:all 1.0s ease-in-out;
+  transition:all 1.0s ease-in-out;
 }
 
-.hint-inner-container {
-  padding-left: 15px;
-  padding-right: 15px;
-  font-size: 16px;
+.wizard-viewbox {
+  width: 790px;
+  overflow: hidden;
+  position: relative;
 }
 
-.vote {
-  padding-top: 0px !important;
-  padding-bottom: 0px !important;
+.bottom {
+  position: absolute;
+  bottom: 0;
 }
\ No newline at end of file

common/lib/xmodule/xmodule/js/src/crowdsource_hinter/display.coffee

@@ -41,13 +41,17 @@ class @Hinter
     @$('.answer-choice').click @answer_choice_handle
 
   expand: (eventObj) =>
+    # Expand a hidden div.
     target = @$('#' + @$(eventObj.currentTarget).data('target'))
     if @$(target).css('display') == 'none'
       @$(target).css('display', 'block')
     else
       @$(target).css('display', 'none')
+    # Fix positioning errors with the bottom class.
+    @$('.bottom').removeClass('bottom').addClass('bottom')
 
   vote: (eventObj) =>
+    # Make an ajax request with the user's vote.
     target = @$(eventObj.currentTarget)
     all_pks = @$('#pk-list').attr('data-pk-list')
     post_json = {'answer': target.attr('data-answer'), 'hint': target.data('hintno'), 'pk_list': all_pks}
@@ -55,6 +59,7 @@ class @Hinter
       @render(response.contents)
 
   submit_hint: (eventObj) =>
+    # Make an ajax request with the user's new hint.
     textarea = $('.custom-hint')
     if @answer == ''
       # The user didn't choose an answer, somehow.  Do nothing.
@@ -64,21 +69,25 @@ class @Hinter
       @render(response.contents)
 
   clear_default_text: (eventObj) =>
+    # Remove placeholder text in the hint submission textbox.
     target = @$(eventObj.currentTarget)
     if target.data('cleared') == undefined
       target.val('')
       target.data('cleared', true)
 
   wizard_link_handle: (eventObj) =>
+    # Move to another wizard view, based on the link that the user clicked.
     target = @$(eventObj.currentTarget)
     @go_to(target.attr('dest'))
 
   answer_choice_handle: (eventObj) =>
+    # A special case of wizard_link_handle - we need to track a state variable,
+    # the answer that the user chose.
     @answer = @$(eventObj.target).attr('value')
     @$('#blank-answer').html(@answer)
     @go_to('p3')
 
-  render: (content) ->
+  render: (content) =>
     if content
       # Trim leading and trailing whitespace
       content = content.replace /^\s+|\s+$/g, ""
@@ -94,6 +103,13 @@ class @Hinter
     # Initialize the answer choice - remembers which answer the user picked on
     # p2 when he submits a hint on p3.
     @answer = ''
+    # Determine whether the browser supports CSS3 transforms.
+    styles = document.body.style
+    if styles.WebkitTransform == '' or styles.transform == ''
+      @go_to = @transform_go_to
+    else
+      @go_to = @legacy_go_to
+
     # Make the correct wizard view show up.
     hints_exist = @$('#hints-exist').html() == 'True'
     if hints_exist
@@ -101,6 +117,18 @@ class @Hinter
     else
       @go_to('p2')
 
-  go_to: (view_id) ->
-    $('.wizard-view').css('display', 'none')
-    $('#' + view_id).css('display', 'block')
+  transform_go_to: (view_id) ->
+    # Switch wizard views using sliding transitions.
+    id_to_index = {
\ No newline at end of file
+      'p1': 0,
+      'p2': 1,
+      'p3': 2,
+    }
+    translate_string = 'translateX(' +id_to_index[view_id] * -1 * parseInt($('#' + view_id).css('width'), 10) + 'px)'
+    @$('.wizard-container').css('transform', translate_string)
+    @$('.wizard-container').css('-webkit-transform', translate_string)
+
+  legacy_go_to: (view_id) ->
+    # For older browsers - switch wizard views by changing the screen.
+    @$('.wizard-view').css('display', 'none')
+    @$('#' + view_id).css('display', 'block')
\ No newline at end of file

common/templates/hinter_display.html

@@ -38,7 +38,7 @@
 
   <!-- Tells coffeescript whether there are hints to show. -->
   <span id="hints-exist" style="display:none">${hints_exist}</span>
-
+  <div class="wizard-viewbox"><div class="wizard-container">
     <div class="wizard-view" id="p1">
       <p>
       <em> Optional. </em> Help us improve our hints!  Which hint was most helpful to you?
@@ -77,8 +77,9 @@
           <a class="answer-choice" href="javascript: void(0)" value="${answer}">${answer}</a><br />
       % endfor
       % if hints_exist:
-      <br />
-      <a href="javascript: void(0);" class="wizard-link" dest="p1"> Back </a>
+        <!-- A placeholder for the Back button, which is relatively-positioned -->
+        <p> &nbsp </p>
+        <a href="javascript: void(0);" class="wizard-link bottom" dest="p1"> Back </a>
       % endif
 
     </div>
@@ -89,6 +90,12 @@
         Write a hint for other students who get the wrong answer of <span id="blank-answer"></span>.
       </p>
       <p>Read about <a class="expand" data-target="goodhint" href="javascript:void(0);">what makes a good hint</a>.</p>
+
+      <textarea cols="50" class="custom-hint" data-answer="${answer}" style="height: 200px">
+Write your hint here.  Please don't give away the correct answer.
+      </textarea>
+      <br /><br />
+      <input class="submit-hint" data-answer="${answer}" type="button" value="Submit">
       <div id="goodhint" style="display:none">
         <h4>What makes a good hint?</h4>
 
@@ -120,16 +127,11 @@
           <a href="http://www.apa.org/education/k12/misconceptions.aspx?item=2" target="_blank">Learn even more</a>
         </p>
       </div>
-
-    <textarea cols="50" class="custom-hint" data-answer="${answer}" style="height: 200px">
-Write your hint here.  Please don't give away the correct answer.
-    </textarea>
-    <br /><br />
-    <input class="submit-hint" data-answer="${answer}" type="button" value="Submit">
-    <br /><br />
+      <br />
       <a href="javascript: void(0);" class="wizard-link" dest="p2"> Back </a>
     </div>
-
+  <!-- Close wizard contaner and wizard viewbox. -->
+  </div></div>
 
 
 </%def>