+
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', ->