From aa5e2f49bd58ba5d5e066f0db2a47bf6ebc5e912 Mon Sep 17 00:00:00 2001 From: Kyle McCormick Date: Thu, 4 Jun 2015 16:44:08 -0400 Subject: [PATCH] Fixes tests, adds internationalized strings for new state tooltips, corrected tooltip javascript, etc. --- cms/templates/ux/reference/container.html | 2 +- common/lib/capa/capa/inputtypes.py | 13 +++- .../lib/capa/capa/templates/choicegroup.html | 6 +- .../lib/capa/capa/templates/choicetext.html | 2 +- .../capa/templates/formulaequationinput.html | 2 +- .../lib/capa/capa/templates/optioninput.html | 4 +- common/lib/capa/capa/templates/textline.html | 2 +- .../capa/capa/tests/test_input_templates.py | 26 ++++---- .../lib/xmodule/xmodule/css/capa/display.scss | 64 +++++++++---------- .../xmodule/js/spec/capa/display_spec.coffee | 2 +- .../xmodule/js/src/capa/display.coffee | 4 +- common/static/sass/_mixins.scss | 2 +- common/test/acceptance/pages/lms/problem.py | 2 +- .../courseware/features/problems_setup.py | 8 +-- lms/static/sass/base/_variables.scss | 22 ------- test_root/db/test_edx.db-journal | 0 16 files changed, 73 insertions(+), 88 deletions(-) create mode 100644 test_root/db/test_edx.db-journal diff --git a/cms/templates/ux/reference/container.html b/cms/templates/ux/reference/container.html index 81821b503a..19ab1db780 100644 --- a/cms/templates/ux/reference/container.html +++ b/cms/templates/ux/reference/container.html @@ -351,7 +351,7 @@

What Apple device competed with the portable CD player?

-
+
diff --git a/common/lib/capa/capa/inputtypes.py b/common/lib/capa/capa/inputtypes.py index f4ea46932d..c487efed69 100644 --- a/common/lib/capa/capa/inputtypes.py +++ b/common/lib/capa/capa/inputtypes.py @@ -69,7 +69,7 @@ registry = TagRegistry() # pylint: disable=invalid-name class Status(object): """ Problem status - attributes: classname, display_name + attributes: classname, display_name, display_tooltip """ css_classes = { # status: css class @@ -77,7 +77,7 @@ class Status(object): 'incomplete': 'incorrect', 'queued': 'processing', } - __slots__ = ('classname', '_status', 'display_name') + __slots__ = ('classname', '_status', 'display_name', 'display_tooltip') def __init__(self, status, gettext_func=unicode): self.classname = self.css_classes.get(status, status) @@ -90,7 +90,16 @@ class Status(object): 'unsubmitted': _('unanswered'), 'queued': _('processing'), } + tooltips = { + # Translators: these are tooltips that indicate the state of an assessment question + 'correct': _('This is correct.'), + 'incorrect': _('This is incorrect.'), + 'unanswered': _('This is unanswered.'), + 'unsubmitted': _('This is unanswered.'), + 'queued': _('This is being processed.'), + } self.display_name = names.get(status, unicode(status)) + self.display_tooltip = tooltips.get(status, u'') self._status = status or '' def __str__(self): diff --git a/common/lib/capa/capa/templates/choicegroup.html b/common/lib/capa/capa/templates/choicegroup.html index 6a27a3df4f..da5d372401 100644 --- a/common/lib/capa/capa/templates/choicegroup.html +++ b/common/lib/capa/capa/templates/choicegroup.html @@ -39,11 +39,9 @@ % endfor -
+
% if input_type == 'checkbox' or not value: - + %for choice_id, choice_description in choices: % if choice_id in value: diff --git a/common/lib/capa/capa/templates/choicetext.html b/common/lib/capa/capa/templates/choicetext.html index e370f10594..448205c2aa 100644 --- a/common/lib/capa/capa/templates/choicetext.html +++ b/common/lib/capa/capa/templates/choicetext.html @@ -58,7 +58,7 @@ -
+
% if input_type == 'checkbox' or not element_checked: % endif diff --git a/common/lib/capa/capa/templates/formulaequationinput.html b/common/lib/capa/capa/templates/formulaequationinput.html index 04b4f8e965..206a8bc21c 100644 --- a/common/lib/capa/capa/templates/formulaequationinput.html +++ b/common/lib/capa/capa/templates/formulaequationinput.html @@ -10,7 +10,7 @@ % endif /> - + ${status.display_name} diff --git a/common/lib/capa/capa/templates/optioninput.html b/common/lib/capa/capa/templates/optioninput.html index 65965597b7..a4f25d801b 100644 --- a/common/lib/capa/capa/templates/optioninput.html +++ b/common/lib/capa/capa/templates/optioninput.html @@ -13,10 +13,10 @@ -
+
+ aria-describedby="input_${id}" data-tooltip="${status.display_tooltip}"> ${value|h} - ${status.display_name}
diff --git a/common/lib/capa/capa/templates/textline.html b/common/lib/capa/capa/templates/textline.html index ed006240ca..b37fb0d67e 100644 --- a/common/lib/capa/capa/templates/textline.html +++ b/common/lib/capa/capa/templates/textline.html @@ -30,7 +30,7 @@ + aria-describedby="input_${id}" data-tooltip="${status.display_tooltip}"> %if value: ${value|h} diff --git a/common/lib/capa/capa/tests/test_input_templates.py b/common/lib/capa/capa/tests/test_input_templates.py index 4bed5e88c7..5af21fd5e2 100644 --- a/common/lib/capa/capa/tests/test_input_templates.py +++ b/common/lib/capa/capa/tests/test_input_templates.py @@ -144,7 +144,7 @@ class ChoiceGroupTemplateTest(TemplateTestCase): # Should mark the entire problem correct xml = self.render_to_xml(self.context) - xpath = "//div[@class='indicator_container']/span[@class='status correct']" + xpath = "//div[@class='indicator-container']/span[@class='status correct']" self.assert_has_xpath(xml, xpath, self.context) # Should NOT mark individual options @@ -172,7 +172,7 @@ class ChoiceGroupTemplateTest(TemplateTestCase): for test_conditions in conditions: self.context.update(test_conditions) xml = self.render_to_xml(self.context) - xpath = "//div[@class='indicator_container']/span[@class='status incorrect']" + xpath = "//div[@class='indicator-container']/span[@class='status incorrect']" self.assert_has_xpath(xml, xpath, self.context) # Should NOT mark individual options @@ -204,7 +204,7 @@ class ChoiceGroupTemplateTest(TemplateTestCase): for test_conditions in conditions: self.context.update(test_conditions) xml = self.render_to_xml(self.context) - xpath = "//div[@class='indicator_container']/span[@class='status unanswered']" + xpath = "//div[@class='indicator-container']/span[@class='status unanswered']" self.assert_has_xpath(xml, xpath, self.context) # Should NOT mark individual options @@ -234,7 +234,7 @@ class ChoiceGroupTemplateTest(TemplateTestCase): self.assert_has_xpath(xml, xpath, self.context) # Should NOT mark the whole problem - xpath = "//div[@class='indicator_container']/span" + xpath = "//div[@class='indicator-container']/span" self.assert_no_xpath(xml, xpath, self.context) def test_option_marked_incorrect(self): @@ -255,7 +255,7 @@ class ChoiceGroupTemplateTest(TemplateTestCase): self.assert_has_xpath(xml, xpath, self.context) # Should NOT mark the whole problem - xpath = "//div[@class='indicator_container']/span" + xpath = "//div[@class='indicator-container']/span" self.assert_no_xpath(xml, xpath, self.context) def test_never_show_correctness(self): @@ -289,10 +289,10 @@ class ChoiceGroupTemplateTest(TemplateTestCase): xml = self.render_to_xml(self.context) # Should NOT mark the entire problem correct/incorrect - xpath = "//div[@class='indicator_container']/span[@class='status correct']" + xpath = "//div[@class='indicator-container']/span[@class='status correct']" self.assert_no_xpath(xml, xpath, self.context) - xpath = "//div[@class='indicator_container']/span[@class='status incorrect']" + xpath = "//div[@class='indicator-container']/span[@class='status incorrect']" self.assert_no_xpath(xml, xpath, self.context) # Should NOT mark individual options @@ -390,7 +390,7 @@ class TextlineTemplateTest(TemplateTestCase): # Expect that we get a with class="status" # (used to by CSS to draw the green check / red x) - self.assert_has_text(xml, "//span[@class='status']", + self.assert_has_text(xml, "//span[@class='status']/span[@class='sr']", status_mark, exact=False) def test_label(self): @@ -848,7 +848,7 @@ class ChoiceTextGroupTemplateTest(TemplateTestCase): # Should mark the entire problem correct xml = self.render_to_xml(self.context) - xpath = "//div[@class='indicator_container']/span[@class='status correct']" + xpath = "//div[@class='indicator-container']/span[@class='status correct']" self.assert_has_xpath(xml, xpath, self.context) # Should NOT mark individual options @@ -875,7 +875,7 @@ class ChoiceTextGroupTemplateTest(TemplateTestCase): for test_conditions in conditions: self.context.update(test_conditions) xml = self.render_to_xml(self.context) - xpath = "//div[@class='indicator_container']/span[@class='status incorrect']" + xpath = "//div[@class='indicator-container']/span[@class='status incorrect']" self.assert_has_xpath(xml, xpath, self.context) # Should NOT mark individual options @@ -907,7 +907,7 @@ class ChoiceTextGroupTemplateTest(TemplateTestCase): for test_conditions in conditions: self.context.update(test_conditions) xml = self.render_to_xml(self.context) - xpath = "//div[@class='indicator_container']/span[@class='status unanswered']" + xpath = "//div[@class='indicator-container']/span[@class='status unanswered']" self.assert_has_xpath(xml, xpath, self.context) # Should NOT mark individual options @@ -937,7 +937,7 @@ class ChoiceTextGroupTemplateTest(TemplateTestCase): self.assert_has_xpath(xml, xpath, self.context) # Should NOT mark the whole problem - xpath = "//div[@class='indicator_container']/span" + xpath = "//div[@class='indicator-container']/span" self.assert_no_xpath(xml, xpath, self.context) def test_option_marked_incorrect(self): @@ -957,7 +957,7 @@ class ChoiceTextGroupTemplateTest(TemplateTestCase): self.assert_has_xpath(xml, xpath, self.context) # Should NOT mark the whole problem - xpath = "//div[@class='indicator_container']/span" + xpath = "//div[@class='indicator-container']/span" self.assert_no_xpath(xml, xpath, self.context) def test_label(self): diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss index c8d5f7787f..02e4b45ebf 100644 --- a/common/lib/xmodule/xmodule/css/capa/display.scss +++ b/common/lib/xmodule/xmodule/css/capa/display.scss @@ -114,6 +114,7 @@ iframe[seamless]{ div.problem-progress { @include padding-left($baseline/4); + @extend %t-ultralight; display: inline-block; color: $gray-d1; font-weight: 100; @@ -151,11 +152,11 @@ div.problem { @include box-sizing(border-box); display: inline-block; clear: both; - width: 100%; + margin-bottom: ($baseline/2); border: 2px solid $gray-l4; border-radius: 3px; - margin-bottom: ($baseline/2); padding: ($baseline/2); + width: 100%; &.choicegroup_correct { @include status-icon($correct, "\f00c"); @@ -182,7 +183,7 @@ div.problem { } } - .indicator_container { + .indicator-container { display: inline-block; min-height: 1px; width: 25px; @@ -209,11 +210,11 @@ div.problem { // Summary status indicators shown after the input area div.problem { - .indicator_container { + .indicator-container { .status { - width: 20px; - height: 20px; + width: $baseline; + height: $baseline; // CASE: correct answer &.correct { @@ -232,8 +233,6 @@ div.problem { // CASE: processing &.processing { - // add once spinner is rotated through animations - //@include status-icon($gray-d1, "\f110", 0); } } } @@ -287,7 +286,7 @@ div.problem { } } - // known classes using this div: .indicator_container, moved to section above + // known classes using this div: .indicator-container, moved to section above div { // TO-DO: Styling used by advanced capa problem types. Should be synced up to use .status class @@ -297,7 +296,7 @@ div.problem { } &.status { - @include margin(8px, 0, 0, $baseline/2); + @include margin(8px, 0, 0, ($baseline/2)); text-indent: 100%; white-space: nowrap; overflow: hidden; @@ -329,7 +328,7 @@ div.problem { } input { - border-color: green; + border-color: $correct; } } @@ -355,7 +354,7 @@ div.problem { } input { - border-color: red; + border-color: $incorrect; } } @@ -369,7 +368,7 @@ div.problem { } input { - border-color: red; + border-color: $incorrect; } } @@ -384,9 +383,9 @@ div.problem { margin-bottom: 0; &:before { + @extend %t-strong; display: inline; content: "Answer: "; - font-weight: bold; } &:empty { @@ -596,7 +595,8 @@ div.problem { } dl dt { - font-weight: bold; + @extend %t-strong; + } dl dd { @@ -642,8 +642,8 @@ div.problem { } th { + @extend %t-strong; text-align: left; - font-weight: bold; } td { @@ -706,16 +706,16 @@ div.problem { @include box-sizing(border-box); border: 2px solid $gray-l4; border-radius: 3px; - height: 46px; min-width: 160px; + height: 46px; } > .incorrect, .correct, .unanswered { .status { display: inline-block; - background: none; margin-top: ($baseline/2); + background: none; } } @@ -769,7 +769,7 @@ div.problem { @include margin-right($baseline/2); } - .indicator_container { + .indicator-container { display: inline-block; .status.correct:after, .status.incorrect:after { @@ -844,8 +844,8 @@ div.problem .action { margin-bottom: ($baseline/2); height: ($baseline*2); vertical-align: middle; - font-weight: 600; text-transform: uppercase; + font-weight: 600; } .save { @@ -866,9 +866,9 @@ div.problem .action { // border-radius: 3px; // padding: 8px 12px; // margin-top: ($baseline/2); + @include margin-left($baseline/2); display: inline-block; margin-top: 8px; - @include margin-left($baseline/2); color: $gray-d1; font-style: italic; -webkit-font-smoothing: antialiased; @@ -909,9 +909,9 @@ div.problem { .detailed-solution { > p:first-child { + @extend %t-strong; color: #aaa; text-transform: uppercase; - font-weight: bold; font-style: normal; font-size: 0.9em; } @@ -923,9 +923,9 @@ div.problem { .detailed-targeted-feedback { > p:first-child { - color: red; + @extend %t-strong; + color: $incorrect; text-transform: uppercase; - font-weight: bold; font-style: normal; font-size: 0.9em; } @@ -937,9 +937,9 @@ div.problem { .detailed-targeted-feedback-correct { > p:first-child { - color: green; + @extend %t-strong; + color: $correct; text-transform: uppercase; - font-weight: bold; font-style: normal; font-size: 0.9em; } @@ -980,11 +980,11 @@ div.problem { border: 1px solid $gray-l3; h3 { + @extend %t-strong; padding: 9px; border-bottom: 1px solid #e3e3e3; background: #eee; text-shadow: 0 1px 0 $white; - font-weight: bold; font-size: em(16); } @@ -1021,9 +1021,9 @@ div.problem { margin-bottom: 12px; h3 { + @extend %t-strong; color: #aaa; text-transform: uppercase; - font-weight: bold; font-style: normal; font-size: 0.9em; } @@ -1080,7 +1080,7 @@ div.problem { } .shortform { - font-weight: bold; + @extend %t-strong; } .longform { @@ -1223,9 +1223,9 @@ div.problem { border-radius: 1em; .annotation-header { + @extend %t-strong; padding: .5em 1em; border-bottom: 1px solid $gray-l3; - font-weight: bold; } .annotation-body { padding: .5em 1em; } @@ -1306,10 +1306,10 @@ div.problem { pre { background-color: $gray-l3; color: $black; } &:before { + @extend %t-strong; display: block; content: "debug input value"; text-transform: uppercase; - font-weight: bold; font-size: 1.5em; } } @@ -1330,7 +1330,7 @@ div.problem { @extend label.choicegroup_correct; input[type="text"] { - border-color: green; + border-color: $correct; } } diff --git a/common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee b/common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee index 892864f631..a8d881c6e6 100644 --- a/common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee +++ b/common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee @@ -323,7 +323,7 @@ describe 'Problem', ->

-
+
diff --git a/common/lib/xmodule/xmodule/js/src/capa/display.coffee b/common/lib/xmodule/xmodule/js/src/capa/display.coffee index f5e6c1baa0..da817c1254 100644 --- a/common/lib/xmodule/xmodule/js/src/capa/display.coffee +++ b/common/lib/xmodule/xmodule/js/src/capa/display.coffee @@ -470,7 +470,7 @@ class @Problem $(element).find('input').on 'input', -> $p = $(element).find('span.status') `// Translators: the word unanswered here is about answering a problem the student must solve.` - $p.parent().removeClass().addClass "unanswered" + $p.parent().removeClass().addClass "unsubmitted" choicegroup: (element) -> $element = $(element) @@ -498,7 +498,7 @@ class @Problem $(element).find('input').on 'input', -> $p = $(element).find('span.status') `// Translators: the word unanswered here is about answering a problem the student must solve.` - $p.parent().removeClass("correct incorrect").addClass "unanswered" + $p.parent().removeClass("correct incorrect").addClass "unsubmitted" inputtypeSetupMethods: diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index 6e702fdff6..9b78525951 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -432,8 +432,8 @@ // * +Icon - Font-Awesome - Extend // ==================== %use-font-awesome { + display: inline-block; font-family: FontAwesome; -webkit-font-smoothing: antialiased; - display: inline-block; speak: none; } diff --git a/common/test/acceptance/pages/lms/problem.py b/common/test/acceptance/pages/lms/problem.py index fa49ea824e..0183d5c3cd 100644 --- a/common/test/acceptance/pages/lms/problem.py +++ b/common/test/acceptance/pages/lms/problem.py @@ -66,7 +66,7 @@ class ProblemPage(PageObject): """ Is there a "correct" status showing? """ - return self.q(css="div.problem div.capa_inputtype.textline div.correct p.status").is_present() + return self.q(css="div.problem div.capa_inputtype.textline div.correct span.status").is_present() def click_clarification(self, index=0): """ diff --git a/lms/djangoapps/courseware/features/problems_setup.py b/lms/djangoapps/courseware/features/problems_setup.py index e7ac96a535..b4a0aa135d 100644 --- a/lms/djangoapps/courseware/features/problems_setup.py +++ b/lms/djangoapps/courseware/features/problems_setup.py @@ -84,7 +84,7 @@ PROBLEM_DICT = { 'answer': 'correct string'}, 'correct': ['div.correct'], 'incorrect': ['div.incorrect'], - 'unanswered': ['div.unanswered']}, + 'unanswered': ['div.unanswered', 'div.unsubmitted']}, 'numerical': { 'factory': NumericalResponseXMLFactory(), @@ -95,7 +95,7 @@ PROBLEM_DICT = { 'math_display': True}, 'correct': ['div.correct'], 'incorrect': ['div.incorrect'], - 'unanswered': ['div.unanswered']}, + 'unanswered': ['div.unanswered', 'div.unsubmitted']}, 'formula': { 'factory': FormulaResponseXMLFactory(), @@ -108,7 +108,7 @@ PROBLEM_DICT = { 'answer': 'x^2+2*x+y'}, 'correct': ['div.correct'], 'incorrect': ['div.incorrect'], - 'unanswered': ['div.unanswered']}, + 'unanswered': ['div.unanswered', 'div.unsubmitted']}, 'script': { 'factory': CustomResponseXMLFactory(), @@ -129,7 +129,7 @@ PROBLEM_DICT = { """)}, 'correct': ['div.correct'], 'incorrect': ['div.incorrect'], - 'unanswered': ['div.unanswered']}, + 'unanswered': ['div.unanswered', 'div.unsubmitted']}, 'code': { 'factory': CodeResponseXMLFactory(), diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 5b1197c3ef..a057789f27 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -82,28 +82,6 @@ $gray-d2: shade($gray,40%); // #4c4c4c $gray-d3: shade($gray,60%); // #323232 $gray-d4: shade($gray,80%); // #191919 -// TO-DO: once existing lms $blue is removed, change $cms-blue to $blue. -$cms-blue: rgb(0, 159, 230); -$blue-l1: tint($cms-blue,20%); -$blue-l2: tint($cms-blue,40%); -$blue-l3: tint($cms-blue,60%); -$blue-l4: tint($cms-blue,80%); -$blue-l5: tint($cms-blue,90%); -$blue-d1: shade($cms-blue,20%); -$blue-d2: shade($cms-blue,40%); -$blue-d3: shade($cms-blue,60%); -$blue-d4: shade($cms-blue,80%); -$blue-s1: saturate($cms-blue,15%); -$blue-s2: saturate($cms-blue,30%); -$blue-s3: saturate($cms-blue,45%); -$blue-u1: desaturate($cms-blue,15%); -$blue-u2: desaturate($cms-blue,30%); -$blue-u3: desaturate($cms-blue,45%); -$blue-t0: rgba($cms-blue, 0.125); -$blue-t1: rgba($cms-blue, 0.25); -$blue-t2: rgba($cms-blue, 0.50); -$blue-t3: rgba($cms-blue, 0.75); - $pink: rgb(182,37,103); // #b72567; $pink-l1: tint($pink,20%); $pink-l2: tint($pink,40%); diff --git a/test_root/db/test_edx.db-journal b/test_root/db/test_edx.db-journal new file mode 100644 index 0000000000..e69de29bb2