[IMP] survey: improve multiple choice checkboxes

Purpose
=======
Make it easy for users to differenciate bewteen
simple choice and multiple choice question types.

Specification
=============
Change the multiple choice question type checkboxes
icon from a circle to a square in the survey result page
and the survey template.

In the question form view, tick 2 checkboxes instead of
one for the multiple choice question type.

Task-3252870

closes odoo/odoo#129882

Signed-off-by: Stéphane Debauche (std) <std@odoo.com>
This commit is contained in:
amdi-odoo
2023-09-15 07:05:29 +00:00
parent 26218171a8
commit fbf7df5e4b
3 changed files with 13 additions and 18 deletions
@@ -125,16 +125,13 @@ _::-webkit-full-page-media, _:future, :root .o_survey_wrap {
i {
top: 0px;
font-size: large;
&.fa-check-circle {
display: none;
}
}
&.o_survey_selected i {
&.o_survey_selected i.fa-circle-thin,
&.o_survey_selected i.fa-square-o,
&:not(.o_survey_selected) i.fa-check-circle,
&:not(.o_survey_selected) i.fa-check-square {
display: none;
&.fa-check-circle {
display: inline;
}
}
}
@@ -455,7 +452,7 @@ _::-webkit-full-page-media, _:future, :root .o_survey_wrap {
background-color: $gray-600;
opacity: 1;
}
i.fa-circle-thin {
i.fa-circle-thin, i.fa-square-o {
display: none;
}
}
@@ -50,7 +50,7 @@
<span>Which are yellow?</span><br/>
<div class="o_preview_questions_choice mb-2"><i class="fa fa-square-o fa-lg me-2"/>answer</div>
<div class="o_preview_questions_choice mb-2"><i class="fa fa-check-square-o fa-lg me-2"/>answer</div>
<div class="o_preview_questions_choice"><i class="fa fa-square-o fa-lg me-2"/>answer</div>
<div class="o_preview_questions_choice"><i class="fa fa-check-square-o fa-lg me-2"/>answer</div>
</div>
<!-- Multiple Lines Text Zone -->
<div invisible="question_type != 'text_box'">
+7 -9
View File
@@ -508,14 +508,12 @@
t-att-checked="'checked' if answer_line else None"
t-att-data-selection-key="letters[item_idx] if useKeySelection else ''"/>
<span class="ms-2 text-break" t-field='label.value'/>
<t t-if="has_correct_answer and answer_selected">
<!-- While displaying results: change icons to have a check mark for a right answer and a cross for a wrong one -->
<i t-if="is_correct" class="float-end mt-1 position-relative d-inline fa fa-check-circle"/>
<i t-else="" class="float-end mt-1 position-relative d-inline fa fa-times-circle"/>
</t>
<!-- While displaying results: change icons to have a check mark for a right answer and a cross for a wrong one -->
<i t-if="has_correct_answer and answer_selected" t-attf-class="float-end mt-1 position-relative d-inline
fa {{'fa-check-square' if is_correct else 'fa-times-square'}}"/>
<t t-else="">
<i class="fa fa-check-circle float-end mt-1 position-relative"></i>
<i class="fa fa-circle-thin float-end mt-1 position-relative"></i>
<i class="fa fa-check-square float-end mt-1 position-relative"/>
<i class="fa fa-square-o float-end mt-1 position-relative"/>
</t>
<t t-call="survey.question_suggested_value_image"/>
</label>
@@ -533,8 +531,8 @@
t-att-checked="comment_line and 'checked' or None"
t-att-data-selection-key="letters[item_idx] if useKeySelection else ''"/>
<span class="ms-2" t-out="question.comments_message or default_comments_message" />
<i class="fa fa-check-circle float-end mt-1 position-relative"></i>
<i class="fa fa-circle-thin float-end mt-1 position-relative"></i>
<i class="fa fa-check-square float-end mt-1 position-relative"/>
<i class="fa fa-square-o float-end mt-1 position-relative"/>
</label>
</div>
<div t-attf-class="o_survey_comment_container mt-3 py-0 px-1 #{'d-none' if not comment_line else ''}">