ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Ahmad Amireh 2014-05-22 14:59:45 +03:00 committed by Derek DeVries
parent 5712fbe5cb
commit 96a1b0cd2d
7 changed files with 103 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/coffeescripts/ember/quizzes/components/message_dialog_component.coffee Normal file
View File

@ -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

7
app/coffeescripts/ember/quizzes/controllers/quiz/statistics_controller.coffee
View File

@ -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'))
@ -35,4 +40,4 @@ define [
@sortQuestionsBy ['discriminationIndex', 'position'], false
sortByPosition: ->
@sortQuestionsBy ['position'], true
@sortQuestionsBy ['position'], true

8
app/coffeescripts/ember/quizzes/routes/quiz_statistics_route.coffee
View File

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

11
app/coffeescripts/ember/quizzes/templates/components/message-dialog.hbs Normal file
View File

@ -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>

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

@ -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>

20
app/coffeescripts/ember/quizzes/templates/quiz/statistics/questions/multiple_choice/discrimination_index_help.hbs Normal file
View File

@ -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}}

16
app/stylesheets/ember_quizzes/statistics.scss
View File

@ -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 {