Skip to content

LX-309 Modify CAPA choicegroup problems to make custom radio/checkboxes possible #21215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ormsbee merged 1 commit into from
Sep 11, 2019
Merged

LX-309 Modify CAPA choicegroup problems to make custom radio/checkboxes possible #21215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 20 additions & 28 deletions common/lib/capa/capa/templates/choicegroup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,47 +18,39 @@
<p class="question-description" id="${description_id}">${description_text}</p>
% endfor
% for choice_id, choice_label in choices:
<div class="field">
<%
label_class = 'response-label field-label label-inline'
%>

<label id="${id}-${choice_id}-label"
## If the student has selected this choice...
% if is_radio_input(choice_id):
<%
label_class = 'response-label field-label label-inline'
input_class = 'field-input input-' + input_type
input_checked = ''

% if status.classname and not show_correctness == 'never':
<% label_class += ' choicegroup_' + status.classname %>
% endif
% endif
class="${label_class}"
${describedby_html}
>
<input type="${input_type}" name="input_${id}${name_array_suffix}" id="input_${id}_${choice_id}" class="field-input input-${input_type}" value="${choice_id}"
if is_radio_input(choice_id) or (input_type != 'radio' and choice_id in value):
input_class += ' submitted'
if status.classname and not show_correctness == 'never':
label_class += ' choicegroup_' + status.classname
%>
<div class="field">
<input type="${input_type}" name="input_${id}${name_array_suffix}" id="input_${id}_${choice_id}"
class="${input_class}" value="${choice_id}"
## If the student selected this choice...
% if is_radio_input(choice_id):
checked="true"
% elif input_type != 'radio' and choice_id in value:
checked="true"
% endif
/> ${HTML(choice_label)}
% if is_radio_input(choice_id):
% if not show_correctness == 'never' and status.classname != 'unanswered':
<%include file="status_span.html" args="status=status, status_id=id"/>
% endif
% endif
/><label id="${id}-${choice_id}-label" for="input_${id}_${choice_id}"
class="${label_class}"
${describedby_html}
> ${HTML(choice_label)}
</label>
</div>
% endfor
<span id="answer_${id}"></span>
</fieldset>
<div class="indicator-container">
% if input_type == 'checkbox' or status.classname == 'unanswered':
% if show_correctness != 'never':
<%include file="status_span.html" args="status=status, status_id=id"/>
% else:
<%include file="status_span.html" args="status=status, status_id=id, hide_correctness=True"/>
% endif
% if show_correctness != 'never':
<%include file="status_span.html" args="status=status, status_id=id"/>
% else:
<%include file="status_span.html" args="status=status, status_id=id, hide_correctness=True"/>
% endif
</div>
% if show_correctness == "never" and (value or status not in ['unsubmitted']):
Expand Down
20 changes: 10 additions & 10 deletions common/lib/capa/capa/tests/test_input_templates.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,8 @@ def assert_has_text(self, xml_root, xpath, text, exact=True):
If no elements are found, the assertion fails.
"""
element_list = xml_root.xpath(xpath)
self.assertGreater(len(element_list), 0, "Could not find element at '%s'" % str(xpath))

self.assertGreater(len(element_list), 0, "Could not find element at '%s'\n%s" %
(str(xpath), etree.tostring(xml_root)))
if exact:
self.assertEqual(text, element_list[0].text.strip())
else:
Expand Down Expand Up @@ -345,7 +345,7 @@ def test_problem_marked_unsubmitted(self):
def test_option_marked_correct(self):
"""
Test conditions under which a particular option
(not the entire problem) is marked correct.
and the entire problem is marked correct.
"""
conditions = [
{'input_type': 'radio', 'value': '2'},
Expand All @@ -359,14 +359,14 @@ def test_option_marked_correct(self):
xpath = "//label[contains(@class, 'choicegroup_correct')]"
self.assert_has_xpath(xml, xpath, self.context)

# Should NOT mark the whole problem
xpath = "//div[@class='indicator-container']/span"
self.assert_no_xpath(xml, xpath, self.context)
# Should also mark the whole problem
xpath = "//div[@class='indicator-container']/span[@class='status correct']"
self.assert_has_xpath(xml, xpath, self.context)

def test_option_marked_incorrect(self):
"""
Test conditions under which a particular option
(not the entire problem) is marked incorrect.
and the entire problem is marked incorrect.
"""
conditions = [
{'input_type': 'radio', 'value': '2'},
Expand All @@ -380,9 +380,9 @@ def test_option_marked_incorrect(self):
xpath = "//label[contains(@class, 'choicegroup_incorrect')]"
self.assert_has_xpath(xml, xpath, self.context)

# Should NOT mark the whole problem
xpath = "//div[@class='indicator-container']/span"
self.assert_no_xpath(xml, xpath, self.context)
# Should also mark the whole problem
xpath = "//div[@class='indicator-container']/span[@class='status incorrect']"
self.assert_has_xpath(xml, xpath, self.context)

def test_never_show_correctness(self):
"""
Expand Down
108 changes: 63 additions & 45 deletions common/lib/xmodule/xmodule/css/capa/display.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,67 +222,56 @@ div.problem {
&::after {
@include margin-left($baseline*0.75);
}
}

&:hover {
border: 2px solid $blue;
}
.indicator-container {
min-height: 1px;
width: 25px;
display: inline-block;
}

&.choicegroup_correct {
@include status-icon($correct, $checkmark-icon);
fieldset {
@include box-sizing(border-box);
}

border: 2px solid $correct;
input[type="radio"],
input[type="checkbox"] {
@include margin(($baseline/4) ($baseline/2) ($baseline/4) ($baseline/4));
}

// keep green for correct answers on hover.
&:hover {
border-color: $correct;
input {
&:focus,
&:hover {
& + label {
border: 2px solid $blue;
}
}

&.choicegroup_partially-correct {
@include status-icon($partially-correct, $asterisk-icon);

border: 2px solid $partially-correct;
&,
&:focus,
&:hover {
& + label.choicegroup_correct {
@include status-icon($correct, $checkmark-icon);

// keep green for correct answers on hover.
&:hover {
border-color: $partially-correct;
border: 2px solid $correct;
}
}

&.choicegroup_incorrect {
@include status-icon($incorrect, $cross-icon);

border: 2px solid $incorrect;
& + label.choicegroup_partially-correct {
@include status-icon($partially-correct, $asterisk-icon);

// keep red for incorrect answers on hover.
&:hover {
border-color: $incorrect;
border: 2px solid $partially-correct;
}
}

&.choicegroup_submitted {
border: 2px solid $submitted;
& + label.choicegroup_incorrect {
@include status-icon($incorrect, $cross-icon);

// keep blue for submitted answers on hover.
&:hover {
border-color: $submitted;
border: 2px solid $incorrect;
}
}
}

.indicator-container {
min-height: 1px;
width: 25px;
display: inline-block;
}

fieldset {
@include box-sizing(border-box);
}

input[type="radio"],
input[type="checkbox"] {
@include margin(($baseline/4) ($baseline/2) ($baseline/4) ($baseline/4));
& + label.choicegroup_submitted {
border: 2px solid $submitted;
}
}
}
}

Expand All @@ -292,6 +281,10 @@ div.problem {
.choicegroup {
@extend %choicegroup-base;

.field {
position: relative;
}

label {
@include padding($baseline/2);
@include padding-left($baseline*1.9);
Expand All @@ -308,6 +301,9 @@ div.problem {

position: absolute;
top: em(9);
width: $baseline*1.1;
height: $baseline*1.1;
z-index: 1;
}

legend {
Expand Down Expand Up @@ -1628,6 +1624,17 @@ div.problem .imageinput.capa_inputtype {
top: 3px;
width: 25px;
height: 20px;

&.unsubmitted,
&.unanswered {
.status-icon {
content: '';
}

.status-message {
display: none;
}
}
}

.correct {
Expand Down Expand Up @@ -1658,6 +1665,17 @@ div.problem .annotation-input {
top: 3px;
width: 25px;
height: 20px;

&.unsubmitted,
&.unanswered {
.status-icon {
content: '';
}

.status-message {
display: none;
}
}
}

.correct {
Expand Down
Loading