Ember Quiz Stats - DIndex Help Dialog

Adds a tiny ? icon next to discrimination index charts that, when
clicked, pops up a message dialog that reads a friendly helpful message
about the chart.

Closes CNVS-13200

TEST PLAN
---- ----

  - create a quiz with MC/TF questions
  - take it by enough students to render the discrimination index chart
  - visit the ember stats page
  - verify that you see a ? icon next to the DI chart, click it:
    - you should see a dialog
    - dialog should read the message specified in the JIRA ticket
    - dialog should contain a link that takes you to the support article
    - dialog should be accessible and closable just like the others

Change-Id: I95db931e65444d90c67a2dfb5d4fe29fdb026bed
Reviewed-on: https://gerrit.instructure.com/35321
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Derek DeVries <ddevries@instructure.com>
QA-Review: Caleb Guanzon <cguanzon@instructure.com>
Product-Review: Derek DeVries <ddevries@instructure.com>

app/coffeescripts/ember/quizzes/components/message_dialog_component.coffee

@@ -0,0 +1,44 @@
+define [
+  'ember'
+  './dialog_mixin'
+  'i18n!message_dialog_component'
+], (Em, DialogMixin, I18n) ->
+
+  ###
+  # A simple component that displays a message to the user.
+  #
+  # @param {String} title
+  # A title to display as the dialog's header. Required, and must be i18n-aware.
+  #
+  # @param {String} [accept-label='Ok']
+  # Text to use as the Accept button's label.
+  #
+  # @param {String} [on-accept=undefined]
+  # The action to send to your controller when the user acknowledges/reads the
+  # message and closes the dialog.
+  #
+  # Usage example:
+  #
+  # {{#message-dialog
+  #   title=myI18ndTitleProperty
+  #   on-accept="shutdownComputer"
+  #   accept-text=somePropertyWithI18nForAcknowledgingTheMessage
+  # }}
+  #
+  #   {{#t "some_help_dialog"}}
+  #     Make sure not to open the door to strangers, son.
+  #   {{/t}}
+  #
+  # {{/message-dialog}}
+  #
+  ###
+  MessageDialogComponent = Em.Component.extend DialogMixin,
+    'accept-text': I18n.t('ok', 'Ok')
+
+    closeAndCancel: ->
+      @accept()
+
+    accept: ->
+      @_close()
+      @sendAction 'on-accept' if @get('on-accept')
+      false

app/coffeescripts/ember/quizzes/controllers/quiz/statistics_controller.coffee

@@ -27,6 +27,11 @@ define [
       @set('questionStatistics.sortProperties', properties)
       @set('questionStatistics.sortAscending', asc)
 
+    discriminationIndexHelpDialogTitle: (->
+      I18n.t('discrimination_index_help_dialog_title',
+        'The Discrimination Index Chart')
+    ).property()
+
     actions:
       showAllDetails: ->
         @set('allDetailsVisible', !@get('allDetailsVisible'))

app/coffeescripts/ember/quizzes/routes/quiz_statistics_route.coffee

@@ -12,3 +12,9 @@ define [ 'ember', '../mixins/redirect' ], (Ember, Redirect) ->
         # load the reports, we need these to be able to generate if requested
         quiz.get('quizReports').then ->
           latestStatistics
+
+    actions:
+      showDiscriminationIndexHelp: ->
+        @render 'quiz/statistics/questions/multiple_choice/discrimination_index_help',
+          into: 'application'
+          outlet: 'modal'

app/coffeescripts/ember/quizzes/templates/components/message-dialog.hbs

@@ -0,0 +1,11 @@
+<form class="form-dialog">
+  <div class="form-dialog-content">
+    {{yield}}
+  </div>
+
+  <div class="form-controls">
+    <button class="btn btn-primary confirm-dialog-cancel-btn" {{action 'accept'}}>
+      {{accept-text}}
+    </button>
+  </div>
+</form>

app/coffeescripts/ember/quizzes/templates/quiz/statistics/questions/multiple_choice/discrimination_index.hbs

@@ -2,7 +2,10 @@
   <em {{bind-attr class=":index discriminationIndexClass"}}>
     <span class="sign">{{sign}}</span>{{forcePrecision discriminationIndex}}
   </em>
+
   <strong>{{t 'discrimination_index' 'Discrimination Index'}}</strong>
+
+  <i {{action 'showDiscriminationIndexHelp'}} class="chart-help-trigger icon-question"></i>
 </p>
 
 <svg class="chart"></svg>

app/coffeescripts/ember/quizzes/templates/quiz/statistics/questions/multiple_choice/discrimination_index_help.hbs

@@ -0,0 +1,20 @@
+{{#message-dialog
+  fix-dialog-buttons=true
+  height=250
+  title=discriminationIndexHelpDialogTitle}}
+
+  {{#t 'discrimination_index_help'}}
+    <p>
+      This metric provides a measure of how well a single question can tell the
+      difference (or discriminate) between students who do well on an exam and
+      those who do not.
+
+      It divides students into three groups based on their score on the whole
+      quiz and displays those groups by who answered the question correctly.
+    </p>
+
+    <p>
+      More information is available <a target="_blank" href="http://guides.instructure.com/m/4152/l/41484-once-i-publish-my-quiz-what-kinds-of-quiz-statistics-are-available">here</a>.
+    </p>
+  {{/t}}
+{{/message-dialog}}

app/stylesheets/ember_quizzes/statistics.scss

@@ -1,5 +1,5 @@
-$highlightColor: #3cb878;
-$muteTextColor: #aaa;
+$highlightColor: #349e67;
+$muteTextColor: #949494;
 
 #quiz-statistics {
   header {
@@ -26,7 +26,7 @@ $muteTextColor: #aaa;
     button {
       display: inline-block;
       color: white;
-      background: #bfbfbf;
+      background: $muteTextColor;
       font-weight: bold;
       padding: 5px 10px;
       border: none;
@@ -162,7 +162,7 @@ $muteTextColor: #aaa;
       }
 
       .y.axis {
-        fill: #aaa;
+        fill: $muteTextColor;
 
         path {
           display: none;
@@ -173,6 +173,7 @@ $muteTextColor: #aaa;
 
   .discrimination-index-section {
     width: 270px;
+    position: relative;
 
     .index {
       font-size: 24px;
@@ -198,6 +199,13 @@ $muteTextColor: #aaa;
         fill: $highlightColor;
       }
     }
+
+    .chart-help-trigger {
+      position: absolute;
+      top: 0;
+      right: 0;
+      color: $muteTextColor;
+    }
   }
 
   .essay-score-chart-section {