Commit 8acc7297 by Marco Morales

Iniital refactor of capa styling for basic checkbox and multiple choice problem…

Iniital refactor of capa styling for basic checkbox and multiple choice problem types, including additional comments to sass styles
parent 61782ff9
<form class="choicegroup capa_inputtype" id="inputtype_${id}"> <form class="choicegroup capa_inputtype" id="inputtype_${id}">
<div class="indicator_container">
% if input_type == 'checkbox' or not value:
<span class="status ${status.classname if show_correctness != 'never' else 'unanswered'}"
id="status_${id}"
aria-describedby="inputtype_${id}">
<span class="sr">
%for choice_id, choice_description in choices:
% if choice_id in value:
${choice_description},
%endif
%endfor
-
${status.display_name}
</span>
</span>
% endif
</div>
<fieldset role="${input_type}group" aria-label="${label}"> <fieldset role="${input_type}group" aria-label="${label}">
% for choice_id, choice_description in choices: % for choice_id, choice_description in choices:
<label for="input_${id}_${choice_id}" <label for="input_${id}_${choice_id}"
## If the student has selected this choice... ## If the student has selected this choice...
...@@ -58,7 +39,23 @@ ...@@ -58,7 +39,23 @@
% endfor % endfor
<span id="answer_${id}"></span> <span id="answer_${id}"></span>
</fieldset> </fieldset>
<div class="indicator_container">
% if input_type == 'checkbox' or not value:
<span class="status ${status.classname if show_correctness != 'never' else 'unanswered'}"
id="status_${id}"
aria-describedby="inputtype_${id}" data-tooltip="This is ${status.display_name}.">
<span class="sr">
%for choice_id, choice_description in choices:
% if choice_id in value:
${choice_description},
%endif
%endfor
-
${status.display_name}
</span>
</span>
% endif
</div>
% if show_correctness == "never" and (value or status not in ['unsubmitted']): % if show_correctness == "never" and (value or status not in ['unsubmitted']):
<div class="capa_alert">${submitted_message}</div> <div class="capa_alert">${submitted_message}</div>
%endif %endif
......
...@@ -9,12 +9,7 @@ ...@@ -9,12 +9,7 @@
<section id="choicetextinput_${id}" class="choicetextinput"> <section id="choicetextinput_${id}" class="choicetextinput">
<form class="choicetextgroup capa_inputtype" id="inputtype_${id}"> <form class="choicetextgroup capa_inputtype" id="inputtype_${id}">
<div class="script_placeholder" data-src="${STATIC_URL}js/capa/choicetextinput.js"/> <div class="script_placeholder" data-src="${STATIC_URL}js/capa/choicetextinput.js"/>
<div class="indicator_container">
% if input_type == 'checkbox' or not element_checked:
<span class="status ${status.classname}" id="status_${id}"></span>
% endif
</div>
<fieldset aria-label="${label}"> <fieldset aria-label="${label}">
% for choice_id, choice_description in choices: % for choice_id, choice_description in choices:
<%choice_id= choice_id %> <%choice_id= choice_id %>
...@@ -62,6 +57,13 @@ ...@@ -62,6 +57,13 @@
<span id="answer_${id}"></span> <span id="answer_${id}"></span>
</fieldset> </fieldset>
<input class= "choicetextvalue" type="hidden" name="input_${id}{}" id="input_${id}" value="${value|h}" /> <input class= "choicetextvalue" type="hidden" name="input_${id}{}" id="input_${id}" value="${value|h}" />
<div class="indicator_container">
% if input_type == 'checkbox' or not element_checked:
<span class="status ${status.classname}" id="status_${id}"></span>
% endif
</div>
% if show_correctness == "never" and (value or status not in ['unsubmitted']): % if show_correctness == "never" and (value or status not in ['unsubmitted']):
<div class="capa_alert">${_(submitted_message)}</div> <div class="capa_alert">${_(submitted_message)}</div>
%endif %endif
......
...@@ -10,9 +10,11 @@ ...@@ -10,9 +10,11 @@
% endif % endif
/> />
<p class="status" id="${id}_status"> <span class="status" id="${id}_status" data-tooltip="This is ${status.display_name}.">
${status.display_name} <span class="sr">
</p> ${status.display_name}
</span>
</span>
<div id="input_${id}_preview" class="equation"> <div id="input_${id}_preview" class="equation">
\[\] \[\]
......
...@@ -13,12 +13,13 @@ ...@@ -13,12 +13,13 @@
</select> </select>
<span id="answer_${id}"></span> <span id="answer_${id}"></span>
<span class="status ${status.classname}" <div class="indicator_container">
id="status_${id}" <span class="status ${status.classname}"
aria-describedby="input_${id}"> id="status_${id}"
<span class="sr">${value|h} - ${status.display_name}</span> aria-describedby="input_${id}" data-tooltip="This is ${status.display_name}">
</span> <span class="sr">${value|h} - ${status.display_name}</span>
</span>
</div>
% if msg: % if msg:
<span class="message">${msg|n}</span> <span class="message">${msg|n}</span>
% endif % endif
......
...@@ -27,18 +27,20 @@ ...@@ -27,18 +27,20 @@
/> />
${trailing_text | h} ${trailing_text | h}
<p class="status" <span class="status"
%if status != 'unsubmitted': %if status != 'unsubmitted':
%endif %endif
aria-describedby="input_${id}"> aria-describedby="input_${id}" data-tooltip="This is ${status.display_name}.">
%if value: <span class="sr">
${value|h} %if value:
% else: ${value|h}
${label} % else:
%endif ${label}
- %endif
${status.display_name} -
</p> ${status.display_name}
</span>
</span>
<p id="answer_${id}" class="answer"></p> <p id="answer_${id}" class="answer"></p>
......
...@@ -388,9 +388,9 @@ class TextlineTemplateTest(TemplateTestCase): ...@@ -388,9 +388,9 @@ class TextlineTemplateTest(TemplateTestCase):
xpath = "//div[@class='%s ']" % div_class xpath = "//div[@class='%s ']" % div_class
self.assert_has_xpath(xml, xpath, self.context) self.assert_has_xpath(xml, xpath, self.context)
# Expect that we get a <p> with class="status" # Expect that we get a <span> with class="status"
# (used to by CSS to draw the green check / red x) # (used to by CSS to draw the green check / red x)
self.assert_has_text(xml, "//p[@class='status']", self.assert_has_text(xml, "//span[@class='status']",
status_mark, exact=False) status_mark, exact=False)
def test_label(self): def test_label(self):
......
...@@ -468,7 +468,7 @@ class @Problem ...@@ -468,7 +468,7 @@ class @Problem
# They should set handlers on each <input> to reset the whole. # They should set handlers on each <input> to reset the whole.
formulaequationinput: (element) -> formulaequationinput: (element) ->
$(element).find('input').on 'input', -> $(element).find('input').on 'input', ->
$p = $(element).find('p.status') $p = $(element).find('span.status')
`// Translators: the word unanswered here is about answering a problem the student must solve.` `// Translators: the word unanswered here is about answering a problem the student must solve.`
$p.parent().removeClass().addClass "unanswered" $p.parent().removeClass().addClass "unanswered"
...@@ -496,7 +496,7 @@ class @Problem ...@@ -496,7 +496,7 @@ class @Problem
textline: (element) -> textline: (element) ->
$(element).find('input').on 'input', -> $(element).find('input').on 'input', ->
$p = $(element).find('p.status') $p = $(element).find('span.status')
`// Translators: the word unanswered here is about answering a problem the student must solve.` `// 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 "unanswered"
......
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
// * +Content - Screenreader Text - Extend // * +Content - Screenreader Text - Extend
// * +Content - Text Wrap - Extend // * +Content - Text Wrap - Extend
// * +Content - Text Truncate - Extend // * +Content - Text Truncate - Extend
// * +Icon - Font-Awesome - Extend
// +Font Sizing - Mixin // +Font Sizing - Mixin
// ==================== // ====================
...@@ -428,3 +429,11 @@ ...@@ -428,3 +429,11 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
// * +Icon - Font-Awesome - Extend
// ====================
%use-font-awesome {
font-family: FontAwesome;
-webkit-font-smoothing: antialiased;
display: inline-block;
speak: none;
}
...@@ -176,11 +176,11 @@ Feature: LMS.Answer problems ...@@ -176,11 +176,11 @@ Feature: LMS.Answer problems
Scenario: I can view and hide the answer if the problem has it: Scenario: I can view and hide the answer if the problem has it:
Given I am viewing a "numerical" that shows the answer "always" Given I am viewing a "numerical" that shows the answer "always"
When I press the button with the label "Show Answer" When I press the button with the label "SHOW ANSWER"
Then the Show/Hide button label is "Hide Answer" Then the Show/Hide button label is "HIDE ANSWER"
And I should see "4.14159" somewhere in the page And I should see "4.14159" somewhere in the page
When I press the button with the label "Hide Answer" When I press the button with the label "HIDE ANSWER"
Then the Show/Hide button label is "Show Answer" Then the Show/Hide button label is "SHOW ANSWER"
And I should not see "4.14159" anywhere on the page And I should not see "4.14159" anywhere on the page
Scenario: I can see my score on a problem when I answer it and after I reset it Scenario: I can see my score on a problem when I answer it and after I reset it
......
...@@ -82,6 +82,28 @@ $gray-d2: shade($gray,40%); // #4c4c4c ...@@ -82,6 +82,28 @@ $gray-d2: shade($gray,40%); // #4c4c4c
$gray-d3: shade($gray,60%); // #323232 $gray-d3: shade($gray,60%); // #323232
$gray-d4: shade($gray,80%); // #191919 $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: rgb(182,37,103); // #b72567;
$pink-l1: tint($pink,20%); $pink-l1: tint($pink,20%);
$pink-l2: tint($pink,40%); $pink-l2: tint($pink,40%);
......
...@@ -28,7 +28,7 @@ h1.top-header { ...@@ -28,7 +28,7 @@ h1.top-header {
.light-button, a.light-button, // only used in askbot as classes .light-button, a.light-button, // only used in askbot as classes
.gray-button { .gray-button {
@include button(simple, #eee); @include button(simple, $gray-l5);
@extend .button-reset; @extend .button-reset;
font-size: em(13); font-size: em(13);
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment