From 96a1b0cd2da31122a1b060bc4637ea2c76f5ea81 Mon Sep 17 00:00:00 2001 From: Ahmad Amireh Date: Thu, 22 May 2014 14:59:45 +0300 Subject: [PATCH] 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 Reviewed-by: Derek DeVries QA-Review: Caleb Guanzon Product-Review: Derek DeVries --- .../message_dialog_component.coffee | 44 +++++++++++++++++++ .../quiz/statistics_controller.coffee | 7 ++- .../routes/quiz_statistics_route.coffee | 8 +++- .../templates/components/message-dialog.hbs | 11 +++++ .../multiple_choice/discrimination_index.hbs | 3 ++ .../discrimination_index_help.hbs | 20 +++++++++ app/stylesheets/ember_quizzes/statistics.scss | 16 +++++-- 7 files changed, 103 insertions(+), 6 deletions(-) create mode 100644 app/coffeescripts/ember/quizzes/components/message_dialog_component.coffee create mode 100644 app/coffeescripts/ember/quizzes/templates/components/message-dialog.hbs create mode 100644 app/coffeescripts/ember/quizzes/templates/quiz/statistics/questions/multiple_choice/discrimination_index_help.hbs diff --git a/app/coffeescripts/ember/quizzes/components/message_dialog_component.coffee b/app/coffeescripts/ember/quizzes/components/message_dialog_component.coffee new file mode 100644 index 00000000000..9b6866c54c3 --- /dev/null +++ b/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 diff --git a/app/coffeescripts/ember/quizzes/controllers/quiz/statistics_controller.coffee b/app/coffeescripts/ember/quizzes/controllers/quiz/statistics_controller.coffee index 10dd5fbb746..13eecb8221e 100644 --- a/app/coffeescripts/ember/quizzes/controllers/quiz/statistics_controller.coffee +++ b/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')) @@ -35,4 +40,4 @@ define [ @sortQuestionsBy ['discriminationIndex', 'position'], false sortByPosition: -> - @sortQuestionsBy ['position'], true \ No newline at end of file + @sortQuestionsBy ['position'], true diff --git a/app/coffeescripts/ember/quizzes/routes/quiz_statistics_route.coffee b/app/coffeescripts/ember/quizzes/routes/quiz_statistics_route.coffee index a8c2c271b74..72457279c4f 100644 --- a/app/coffeescripts/ember/quizzes/routes/quiz_statistics_route.coffee +++ b/app/coffeescripts/ember/quizzes/routes/quiz_statistics_route.coffee @@ -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 \ No newline at end of file + latestStatistics + + actions: + showDiscriminationIndexHelp: -> + @render 'quiz/statistics/questions/multiple_choice/discrimination_index_help', + into: 'application' + outlet: 'modal' \ No newline at end of file diff --git a/app/coffeescripts/ember/quizzes/templates/components/message-dialog.hbs b/app/coffeescripts/ember/quizzes/templates/components/message-dialog.hbs new file mode 100644 index 00000000000..f9be18dcba7 --- /dev/null +++ b/app/coffeescripts/ember/quizzes/templates/components/message-dialog.hbs @@ -0,0 +1,11 @@ +
+
+ {{yield}} +
+ +
+ +
+
diff --git a/app/coffeescripts/ember/quizzes/templates/quiz/statistics/questions/multiple_choice/discrimination_index.hbs b/app/coffeescripts/ember/quizzes/templates/quiz/statistics/questions/multiple_choice/discrimination_index.hbs index ebf935a69bf..a5be726c199 100644 --- a/app/coffeescripts/ember/quizzes/templates/quiz/statistics/questions/multiple_choice/discrimination_index.hbs +++ b/app/coffeescripts/ember/quizzes/templates/quiz/statistics/questions/multiple_choice/discrimination_index.hbs @@ -2,7 +2,10 @@ {{sign}}{{forcePrecision discriminationIndex}} + {{t 'discrimination_index' 'Discrimination Index'}} + +

\ No newline at end of file diff --git a/app/coffeescripts/ember/quizzes/templates/quiz/statistics/questions/multiple_choice/discrimination_index_help.hbs b/app/coffeescripts/ember/quizzes/templates/quiz/statistics/questions/multiple_choice/discrimination_index_help.hbs new file mode 100644 index 00000000000..fcdbce842b2 --- /dev/null +++ b/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'}} +

+ 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. +

+ +

+ More information is available here. +

+ {{/t}} +{{/message-dialog}} diff --git a/app/stylesheets/ember_quizzes/statistics.scss b/app/stylesheets/ember_quizzes/statistics.scss index 7d319221eac..e817de7e0c1 100644 --- a/app/stylesheets/ember_quizzes/statistics.scss +++ b/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 {