Updated CSS and template for choicegroup response

so that: a) checks/x marks appear after each option
for radio buttons, b) checks/x marks appear for the
entire problem (not individual options) for checkbox
buttons.

Also fixed issue with checks appearing on the next line
by changing <text> to display:inline instead of display:block
This commit is contained in:
Will Daly
2013-03-07 10:17:03 -05:00
parent 999ed17e6d
commit e841f29352
2 changed files with 43 additions and 31 deletions

View File

@@ -1,37 +1,40 @@
<form class="choicegroup capa_inputtype" id="inputtype_${id}">
<fieldset>
% for choice_id, choice_description in choices:
<label for="input_${id}_${choice_id}">
% if choice_id in value:
<span class="indicator_container">
% if status == 'unsubmitted':
<span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
% elif status == 'correct':
<span class="correct" id="status_${id}"></span>
% elif status == 'incorrect':
<span class="incorrect" id="status_${id}"></span>
% elif status == 'incomplete':
<span class="incorrect" id="status_${id}"></span>
% endif
</span>
% else:
<span class="indicator_container">&#160;</span>
<div class="indicator_container">
% if input_type == 'checkbox':
% if status == 'unsubmitted':
<span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
% elif status == 'correct':
<span class="correct" id="status_${id}"></span>
% elif status == 'incorrect':
<span class="incorrect" id="status_${id}"></span>
% elif status == 'incomplete':
<span class="incorrect" id="status_${id}"></span>
% endif
<input type="${input_type}" name="input_${id}${name_array_suffix}" id="input_${id}_${choice_id}" value="${choice_id}"
% if choice_id in value:
checked="true"
% endif
/>
${choice_description}
</div>
</label>
<fieldset>
% endfor
<span id="answer_${id}"></span>
</fieldset>
% for choice_id, choice_description in choices:
<label for="input_${id}_${choice_id}"
% if input_type == 'radio' and choice_id in value:
<%
if status == 'correct':
correctness = 'correct'
if status == 'incorrect':
correctness = 'incorrect'
%>
class="choicegroup_${correctness}"
% endif
>
<input type="${input_type}" name="input_${id}${name_array_suffix}" id="input_${id}_${choice_id}" value="${choice_id}"
% if choice_id in value:
checked="true"
% endif
/> ${choice_description} </label>
% endfor
<span id="answer_${id}"></span>
</fieldset>
</form>

View File

@@ -42,6 +42,14 @@ section.problem {
label.choicegroup_correct{
&:after{
content: url('../images/correct-icon.png');
margin-left:15px
}
}
label.choicegroup_incorrect{
&:after{
content: url('../images/incorrect-icon.png');
margin-left:15px;
}
}
@@ -52,6 +60,7 @@ section.problem {
.indicator_container {
float: left;
width: 25px;
height: 1px;
margin-right: 15px;
}
@@ -69,7 +78,7 @@ section.problem {
}
text {
display: block;
display: inline;
margin-left: 25px;
}
}