oca-ocb-core/odoo-bringout-oca-ocb-survey/survey/views/survey_templates.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
<data>
    <!-- Main survey layout -->
    <template id="survey.layout" name="Survey Layout" inherit_id="web.frontend_layout" primary="True">
        <xpath expr="//div[@id='wrapwrap']" position="before">
            <!--TODO DBE Fix me : If one day, there is a survey_livechat bridge module, put this in that module-->
            <t t-set="no_livechat" t-value="True"/>
        </xpath>
        <xpath expr="//div[@id='wrapwrap']" position="attributes">
            <attribute name="t-att-style"
                       add="(('background-image: url(' + question.background_image_url + ');')
                             if question and question.background_image_url
                             else ('background-image: url(' + page.background_image_url + ');')
                             if page and page.background_image_url
                             else ('background-image: url(' + survey.background_image_url + ');')
                             if survey and survey.background_image_url
                             else '')"/>
            <attribute name="t-att-class"
                       add="(('o_survey_background o_survey_background_shadow')
                             if (question and question.background_image_url)
                             or (page and page.background_image_url)
                             or (survey and survey.background_image_url)
                             else 'o_survey_background')"
                       separator=" "/>
        </xpath>
        <xpath expr="//head/t[@t-call-assets][last()]" position="after">
            <t t-call-assets="survey.survey_assets" lazy_load="True"/>
        </xpath>
        <xpath expr="//header" position="before">
            <t t-set="no_header" t-value="True"/>
            <t t-set="no_footer" t-value="True"/>
        </xpath>
        <xpath expr="//header" position="after">
            <div id="wrap" class="oe_structure oe_empty"/>
        </xpath>
        <xpath expr="//footer" position="after">
            <div class="py-3 m-0 p-0 text-end">
                <div class="o_survey_progress_wrapper d-inline-block pe-1 text-start">
                    <t t-call="survey.survey_progression"
                        t-if="survey and survey.questions_layout != 'one_page' and answer and answer.state == 'in_progress' and (not question or not question.is_page) and not survey_form_readonly">
                        <t t-if="survey.questions_layout == 'page_per_section'">
                            <t t-set="page_ids" t-value="survey.page_ids.ids"/>
                            <t t-set="page_number" t-value="page_ids.index(page.id) + (1 if survey.progression_mode == 'number' else 0)"/>
                        </t>
                        <t t-else="">
                            <t t-if="not answer.is_session_answer and survey.questions_selection == 'random'">
                                <t t-set="page_ids" t-value="answer.predefined_question_ids.ids"/>
                            </t>
                            <t t-else="">
                                <t t-set="page_ids" t-value="survey.question_ids.ids"/>
                            </t>
                            <t t-set="page_number" t-value="page_ids.index(question.id)"/>
                        </t>
                    </t>
                </div>
                <div class="o_survey_brand_message float-end rounded me-3 border">
                    <div class="px-2 py-2 d-inline-block" t-call="web.brand_promotion_message">
                        <t t-set="_message"></t>
                        <t t-set="_utm_medium" t-valuef="survey"/>
                    </div>
                    <div class="o_survey_navigation_wrapper d-inline-block" t-call="survey.survey_navigation">
                    </div>
                </div>
            </div>
        </xpath>
    </template>

    <!-- Main survey template -->
    <template id="survey_page_fill" name="Survey: main page (take survey)">
        <t t-call="survey.layout">
            <t t-if="answer.test_entry" t-call="survey.survey_button_form_view" />
            <div class="wrap o_survey_wrap d-flex">
                <div class="container o_survey_form d-flex flex-column mb-5">
                    <t t-call="survey.survey_fill_header" />
                    <t t-call="survey.survey_fill_form" />
                </div>
            </div>
        </t>
    </template>

    <template id="survey_fill_header" name="Survey: main page header">
        <div class="o_survey_nav pt16 mb-2">
            <div class="container m-0 p-0">
                <div class="row">
                    <div  class="col-lg-10">
                        <h1 t-if="answer.state == 'new' or survey.questions_layout != 'page_per_question'"
                            t-esc="survey.title" class="o_survey_main_title pt-4"></h1>
                    </div>
                    <div class="o_survey_timer col-lg-2 pt-4">
                        <h1 class="o_survey_timer_container timer text-end">
                        </h1>
                    </div>
                </div>
            </div>
            <div t-att-class="'o_survey_breadcrumb_container mt8' + (' d-none ' if answer.state != 'in_progress' else '')"
                 t-if="not survey.has_conditional_questions and survey.questions_layout == 'page_per_section' and answer.state != 'done'"
                t-att-data-can-go-back="survey.users_can_go_back"
                t-att-data-pages="json.dumps(breadcrumb_pages)" />
        </div>
    </template>

    <template id="survey_fill_form" name="Survey: main page content">
        <t t-set="survey_form_readonly" t-value="answer.state == 'done'"/>
        <t t-set="background_image_url"
           t-value="question.background_image_url
                    if question else page.background_image_url
                    if page else survey.background_image_url
                    if survey.background_image_url else False"/>
        <form role="form" method="post" t-att-name="survey.id"
                class="d-flex flex-grow-1 align-items-center"
                t-att-data-answer-token="answer.access_token"
                t-att-data-survey-token="survey.access_token"
                t-att-data-users-can-go-back="survey.users_can_go_back and not answer.is_session_answer"
                t-att-data-session-in-progress="answer.is_session_answer"
                t-att-data-is-start-screen="answer.state == 'new'"
                t-att-data-readonly="survey_form_readonly"
                t-att-data-has-answered="bool(has_answered)"
                t-att-data-is-page-description="bool(question and question.is_page and not is_html_empty(question.description))"
                t-att-data-questions-layout="survey.questions_layout"
                t-att-data-triggered-questions-by-answer="json.dumps(triggered_questions_by_answer)"
                t-att-data-selected-answers="json.dumps(selected_answers)"
                t-att-data-refresh-background="any(page.background_image for page in survey.page_ids)">
            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
            <input type="hidden" name="token" t-att-value="answer.access_token" />
            <div class="o_survey_error alert alert-danger d-none" role="alert">
                <p>There was an error during the validation of the survey.</p>
            </div>

            <div class="o_survey_form_content w-100">
                <t t-if="answer.state == 'new'" t-call="survey.survey_fill_form_start"/>
                <t t-elif="answer.state == 'in_progress'" t-call="survey.survey_fill_form_in_progress" />
                <t t-else="" t-call="survey.survey_fill_form_done"/>
            </div>
        </form>

        <!-- Modal used to display error message, i.c.o. ajax error -->
        <div role="dialog" class="modal fade" id="MasterTabErrorModal" >
            <div class="modal-dialog">
                <div class="modal-content">
                    <header class="modal-header">
                        <h4 class="modal-title">A problem has occurred</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </header>
                    <main class="modal-body"><p>To take this survey, please close all other tabs on <strong class="text-danger"></strong>.</p></main>
                    <footer class="modal-footer"><button type="button" class="btn btn-primary" data-bs-dismiss="modal">Continue here</button></footer>
                </div>
            </div>
        </div>
    </template>

    <template id="survey_fill_form_start" name="Survey: start form content">
        <div class="wrap o_survey_start">
            <div class='mb32'>
                <div t-field='survey.description' class="oe_no_empty pb-5 text-break"/>
                <t t-if="answer.is_session_answer">
                    <div class="fw-bold">
                        The session will begin automatically when the host starts.
                    </div>
                </t>
                <t t-else="">
                    <div t-if="survey.is_time_limited">
                        <p>
                            <span t-if="not survey.certification">Time limit for this survey: </span>
                            <span t-else="">Time limit for this certification: </span>
                            <span class="fw-bold text-danger" t-field="survey.time_limit" t-options="{'widget': 'duration', 'unit': 'minute'}"></span>
                        </p>
                    </div>
                    <button type="submit" value="start" class="btn btn-primary btn-lg disabled">
                        <t t-if="survey.certification">
                            Start Certification
                        </t>
                        <t t-else="">
                            Start Survey
                        </t>
                    </button>
                    <span class="o_survey_enter fw-bold text-muted ms-2 d-none d-md-inline">or press Enter</span>
                </t>
            </div>
        </div>
    </template>

    <template id="survey_fill_form_in_progress" name="Survey: form with questions">
        <div class="o_survey_form_content_data d-none"
            t-att-data-question-time-limit-reached="answer.question_time_limit_reached"
            t-att-data-has-answered="bool(has_answered)"
            t-att-data-is-page-description="bool(question and question.is_page and not is_html_empty(question.description))"
            t-att-data-server-time="server_time"
            t-att-data-timer="timer_start"
            t-att-data-time-limit-minutes="time_limit_minutes"/>
        <t t-if="survey.questions_layout == 'one_page'">
            <t t-foreach='survey.question_and_page_ids' t-as='question'>
                <h2 t-if="question.is_page" t-field='question.title' class="o_survey_title pb16 text-break" />
                <div t-if="question.is_page" t-field='question.description' class="text-break"/>
                <t t-if="not question.is_page and question in answer.predefined_question_ids" t-call="survey.question_container"/>
            </t>

            <div class="text-center mt16 mb256">
                <button type="submit" value="finish" class="btn btn-primary disabled">Submit</button>
                    <span class="fw-bold text-muted ms-2 d-none d-md-inline">
                        <span id="enter-tooltip">or press Enter</span>
                    </span>
            </div>
        </t>

        <t t-if="survey.questions_layout == 'page_per_section'">
            <h2 t-field='page.title' class="o_survey_title pb16 text-break" />
            <div t-field='page.description' class="oe_no_empty text-break"/>

            <input type="hidden" name="page_id" t-att-value="page.id" />
            <t t-foreach='page.question_ids' t-as='question'>
                <t t-if="question in answer.predefined_question_ids" t-call="survey.question_container"/>
            </t>

            <div class="row">
                <div class="col-12 text-center mt16">
                    <button type="submit" t-att-value="'next' if not survey_last else 'finish'" class="btn btn-primary disabled">
                        <t t-if="not survey_last">Continue</t>
                        <t t-else="">Submit</t>
                    </button>
                    <span class="fw-bold text-muted ms-2 d-none d-md-inline" id="enter-tooltip"> or press Enter</span>
                </div>
            </div>
        </t>

        <!-- If we have a choice question and less than 6 options, we want minimized display.
        Minimized display means we display the choices vertically (instead of optimized based on screen space).
        An exception is made for options with images, where we always want to optimize screen space.
        Numeric, date and datetime questions are also displayed "minimized", with a smaller screen width.-->
        <t t-set="minimized_display" t-value="survey.questions_layout == 'page_per_question' and len(question.suggested_answer_ids) &lt;= 5 and not any(suggestion.value_image for suggestion in question.suggested_answer_ids)" />
        <div t-if="survey.questions_layout == 'page_per_question'"
            t-attf-class="o_survey_page_per_question o_survey_#{question.question_type} #{'o_survey_minimized_display' if minimized_display else ''}">
            <input type="hidden" name="question_id" t-att-value="question.id" />
            <!-- User has already answered for this session -->
            <t t-if="answer.is_session_answer and (has_answered or answer.question_time_limit_reached)">
                <fieldset disabled="disabled">
                    <t t-set="survey_form_readonly" t-value="True" />
                    <div class="mt-5">
                        <t t-call="survey.question_container" />
                    </div>
                </fieldset>
                <div t-if="answer.question_time_limit_reached and not has_answered" class="fw-bold">Sorry, you have not been fast enough.</div>
                <div t-else="" class="fw-bold">We have registered your answer! Please wait for the host to go to the next question.</div>
            </t>
            <t t-elif="answer.is_session_answer and question.is_page and not is_html_empty(question.description)">
                <div class="fw-bold mt-5">Pay attention to the host screen until the next question.</div>
            </t>
            <t t-else="">
                <div class="mt-5">
                    <t t-call="survey.question_container"/>
                </div>

                <div class="row">
                    <div class="col-12 text-center mt16">
                        <button type="submit" t-att-value="'next' if not survey_last else 'finish'" class="btn btn-primary disabled">
                            <t t-if="answer.is_session_answer or survey_last">Submit</t>
                            <t t-else="">Continue</t>
                        </button>
                        <span class="fw-bold text-muted ms-2 d-none d-md-inline">
                            <span id="enter-tooltip">or press Enter</span>
                        </span>
                    </div>
                </div>
            </t>
        </div>
    </template>

    <!-- Finished (taken and finished) survey page -->
    <template id="survey_fill_form_done" name="Survey: finished">
        <div class="wrap">
            <div class="o_survey_finished mt32 mb32">
                <h1>Thank you!</h1>
                <div t-field="survey.description_done" class="oe_no_empty" />
                <div class="row">
                    <div class="col">
                        <t t-if="survey.scoring_type != 'no_scoring' and survey.scoring_success_min">
                            <div>You scored <t t-esc="answer.scoring_percentage" />%</div>
                            <t t-if="answer.scoring_success">
                                <div>Congratulations, you have passed the test!</div>

                                <div t-if="survey.certification" class="mt16 mb16">
                                    <a role="button"
                                        class="btn btn-primary btn-lg"
                                        t-att-href="'/survey/%s/get_certification' % survey.id">
                                        <i class="fa fa-fw fa-trophy" role="img" aria-label="Download certification" title="Download certification"/>
                                        Download certification
                                    </a>
                                </div>
                            </t>
                            <t t-else="">
                                <div>Unfortunately, you have failed the test.</div>
                            </t>
                        </t>
                        <t t-call="survey.survey_button_retake"/>
                        <div t-if="survey.scoring_type != 'scoring_without_answers'" class="o_survey_review">
                            If you wish, you can <a t-att-href="'/survey/print/%s?answer_token=%s&amp;review=True' % (survey.access_token, answer.access_token)">review your answers</a>
                        </div>
                    </div>
                    <div class="col-6 text-center" t-if="survey.certification_give_badge and answer.scoring_success">
                        <img t-att-src="'/web/image/gamification.badge/%s/image_128' % survey.certification_badge_id.id"/>
                        <div>You received the badge <span class="fw-bold" t-esc="survey.certification_badge_id.name"/>!</div>
                    </div>
                </div>
            </div>
            <div class="o_survey_result p-4 col-12 row" t-if="graph_data">
                <div t-if="survey.page_ids" class="survey_graph col-lg-6 d-none d-md-block"
                        data-graph-type="by_section"
                        t-att-data-graph-data="graph_data">
                    <canvas id="by_section_chart"></canvas>
                </div>
                <div t-attf-class="survey_graph col-lg-6 #{'offset-lg-3' if not survey.page_ids else ''}"
                        data-graph-type="doughnut"
                        t-att-data-graph-data="graph_data">
                    <canvas id="doughnut_chart"></canvas>
                </div>
            </div>
        </div>
    </template>

    <!-- Question widgets -->
    <template id="question_container" name="Survey: question container">
        <t t-set="display_question"
           t-value="survey.questions_layout == 'page_per_question'
                    or survey.questions_selection == 'random'
                    or (survey.questions_layout == 'one_page' and not question.is_conditional)
                    or (survey.questions_layout == 'page_per_section' and (not question.is_conditional or triggering_answer_by_question[question.id] in selected_answers))"/>

        <t t-set="answer_lines" t-value="answer.user_input_line_ids.filtered(lambda line: line.question_id == question)"/>
        <!--Use Key selection if number of choices is < 26 to keep Z for other choice if any-->
        <t t-set="letters" t-value="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'"/>
        <t t-set="useKeySelection" t-value="len(question.suggested_answer_ids) &lt; len(letters) and survey.questions_layout == 'page_per_question'"/>
        <!-- Extra 'right' margin is added on layouts that are not "page_per_question" to align with choices questions, since all choices have a me-2 class (pixel perfect yay...) -->
        <t t-set="extra_right_margin" t-value="survey.questions_layout != 'page_per_question' and question.question_type not in ['simple_choice', 'multiple_choice']"/>
        <t t-set="default_constr_error_msg">This question requires an answer.</t>
        <t t-set="default_validation_error_msg">The answer you entered is not valid.</t>
        <t t-set="default_comments_message">If other, please specify:</t>
        <div t-att-class="'js_question-wrapper pb-4 %s %s' % ('d-none' if not display_question else '', 'me-2' if extra_right_margin else '')"
             t-att-id="question.id" t-att-data-required="question.constr_mandatory"
             t-att-data-constr-error-msg="question.constr_error_msg or default_constr_error_msg"
             t-att-data-validation-error-msg="question.validation_error_msg or default_validation_error_msg">
            <div class="mb-4">
                <h3 t-if="not hide_question_title">
                    <span t-field='question.title' class="text-break" />
                    <span t-if="question.constr_mandatory" class="text-danger">*</span>
                </h3>
                <div t-if="not is_html_empty(question.description)" t-field='question.description' class="text-muted oe_no_empty mt-1 text-break"/>
            </div>
            <t t-if="question.question_type == 'text_box'"><t t-call="survey.question_text_box"/></t>
            <t t-if="question.question_type == 'char_box'"><t t-call="survey.question_char_box"/></t>
            <t t-if="question.question_type == 'numerical_box'"><t t-call="survey.question_numerical_box"/></t>
            <t t-if="question.question_type == 'date'"><t t-call="survey.question_date"/></t>
            <t t-if="question.question_type == 'datetime'"><t t-call="survey.question_datetime"/></t>
            <t t-if="question.question_type == 'simple_choice'"><t t-call="survey.question_simple_choice"/></t>
            <t t-if="question.question_type == 'multiple_choice'"><t t-call="survey.question_multiple_choice"/></t>
            <t t-if="question.question_type == 'matrix'"><t t-call="survey.question_matrix"/></t>
            <div class="o_survey_question_error overflow-hidden border-0 py-0 px-3 alert alert-danger" role="alert"></div>
        </div>
    </template>

    <template id="question_text_box" name="Question: free text box">
        <div class="o_survey_comment_container p-0">
            <textarea class="form-control o_survey_question_text_box bg-transparent rounded-0 p-0" rows="3"
                      t-att-name="question.id" t-att-placeholder="question.question_placeholder"
                      t-att-data-question-type="question.question_type"><t t-if="answer_lines" t-esc="answer_lines[0].value_text_box or None"/></textarea>
        </div>
    </template>

    <template id="question_char_box" name="Question: text box">
        <div class="o_survey_comment_container p-0">
            <input t-att-type="'email' if question.validation_email else 'text'"
               class="form-control o_survey_question_text_box bg-transparent rounded-0 p-0"
               t-att-name="question.id" t-att-placeholder="question.question_placeholder"
               t-att-value="answer_lines[0].value_char_box if answer_lines else None"
               t-att-data-question-type="question.question_type"
               t-att-data-validation-length-min="question.validation_length_min if question.validation_required else False"
               t-att-data-validation-length-max="question.validation_length_max if question.validation_required else False"/>
        </div>
    </template>

    <template id="question_numerical_box" name="Question: numerical box">
        <input type="number" step="any" class="form-control o_survey_question_numerical_box bg-transparent rounded-0 p-0"
               t-att-name="question.id" t-att-placeholder="question.question_placeholder"
               t-att-value="answer_lines[0].value_numerical_box if answer_lines else None"
               t-att-data-question-type="question.question_type"
               t-att-data-validation-float-min="question.validation_min_float_value if question.validation_required else False"
               t-att-data-validation-float-max="question.validation_max_float_value if question.validation_required else False"/>
    </template>

    <template id="question_date" name="Question: date box">
        <div class="input-group o_survey_form_date" t-attf-id="datetimepicker_#{question.id}" data-target-input="nearest"
                t-att-data-mindate="question.validation_min_date"
                t-att-data-maxdate="question.validation_max_date">
            <input type="text" class="form-control datetimepicker-input o_survey_question_date bg-transparent rounded-0 p-0"
                   t-attf-data-target="#datetimepicker_#{question.id}"
                   t-att-name="question.id" t-att-placeholder="question.question_placeholder"
                   t-att-value="format_date(answer_lines[0].value_date) if answer_lines else None"
                   t-att-data-question-type="question.question_type"/>
            <div t-if="not survey_form_readonly" class="position-absolute input-group-text text-primary border-0 bg-transparent p-0" t-attf-data-target="#datetimepicker_#{question.id}" data-toggle="datetimepicker"><i class="fa fa-calendar"></i></div>
        </div>
    </template>

    <template id="question_datetime" name="Question: datetime box">
        <div class="input-group o_survey_form_date" t-attf-id="datetimepicker_#{question.id}" data-target-input="nearest"
                t-att-data-mindate="question.validation_min_datetime"
                t-att-data-maxdate="question.validation_max_datetime">
            <input type="text" class="form-control datetimepicker-input o_survey_question_datetime bg-transparent rounded-0 p-0"
                   t-attf-data-target="#datetimepicker_#{question.id}"
                   t-att-name="question.id" t-att-placeholder="question.question_placeholder"
                   t-att-value="format_datetime(answer_lines[0].value_datetime) if answer_lines else None"
                   t-att-data-question-type="question.question_type"/>
            <div t-if="not survey_form_readonly" class="position-absolute input-group-text text-primary border-0 bg-transparent p-0" t-attf-data-target="#datetimepicker_#{question.id}" data-toggle="datetimepicker"><i class="fa fa-calendar"></i></div>
        </div>
    </template>

    <template id="question_suggested_value_image" name="Image from the question suggested answer">
        <t t-if="label.value_image">
            <!-- Directly use field or route if the user doesn't have access rights -->
            <div t-if="not env.user.has_group('survey.group_survey_user')"
                class="o_survey_choice_img d-flex my-3 justify-content-center">
                <img t-att-src="'/survey/get_question_image/%s/%s/%s/%s' % (survey.access_token, answer.access_token, question.id, label.id)"/>
            </div>
            <div t-else=""  t-field="label.value_image"
                class="o_survey_choice_img d-flex my-3 justify-content-center"
                t-options="{'widget': 'image', 'alt-field': 'name', 'itemprop': 'image'}"/>
        </t>
    </template>

    <template id="question_simple_choice" name="Question: simple choice">
        <t t-set="answer_line" t-value="answer_lines.filtered(lambda line: line.suggested_answer_id)"/>
        <t t-set="comment_line" t-value="answer_lines.filtered(lambda line: line.value_char_box)"/>
        <div class="row o_survey_form_choice"
             t-att-data-name="question.id"
             data-question-type="simple_choice_radio">
            <t t-set="item_idx" t-value="0"/>
            <div t-attf-class="col-lg-12 d-flex flex-wrap">
                <t t-set="has_correct_answer" t-value="scoring_display_correction and any(label.is_correct for label in question.suggested_answer_ids)"/>
                <t t-foreach='question.suggested_answer_ids' t-as='label'>
                    <t t-set="item_idx" t-value="label_index"/>
                    <t t-set="answer_selected" t-value="answer_line and answer_line.suggested_answer_id.id == label.id"/>
                    <t t-set="is_correct" t-value="label.is_correct"/>

                    <!--Used for print mode with corrections -->
                    <t t-set="answer_class" t-if="not has_correct_answer" t-value="''" />
                    <t t-set="answer_class" t-elif="is_correct" t-value="'bg-success'" />
                    <t t-set="answer_class" t-elif="not is_correct" t-value="'bg-danger'" />

                    <label t-att-for="str(question.id) + '_' + str(label.id)"
                           t-att-class="'o_survey_choice_btn me-2 mb-2 py-1 px-3 rounded %s %s' % (answer_class, 'o_survey_selected' if answer_selected else '')">
                        <t t-call="survey.survey_selection_key">
                            <t t-set="selection_key_class" t-value="'position-relative o_survey_radio_btn float-start d-flex'"/>
                        </t>
                        <span class="ms-2 text-break" t-field='label.value'/>
                        <input t-att-id="str(question.id) + '_' + str(label.id)" type="radio" t-att-value='label.id'
                               t-attf-class="o_survey_form_choice_item invisible position-absolute #{'o_survey_form_choice_item_selected' if answer_selected else ''}"
                               t-att-name='question.id'
                               t-att-checked="'checked' if answer_selected else None"
                               t-att-data-selection-key="letters[item_idx] if useKeySelection else ''"/>
                        <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>
                        <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>
                        </t>
                        <t t-call="survey.question_suggested_value_image"/>
                    </label>
                </t>
            </div>
            <div t-if='question.comments_allowed and question.comment_count_as_answer' class="js_comments col-lg-12" >
                <div class="d-flex flex-wrap">
                    <label t-att-class="'o_survey_choice_btn form-label me-2 py-1 px-3 rounded %s' % ('o_survey_selected' if comment_line else '')">
                        <t t-set="item_idx" t-value="item_idx + 1"/>
                        <t t-call="survey.survey_selection_key">
                            <t t-set="selection_key_class" t-value="'position-relative o_survey_radio_btn float-start d-flex'"/>
                        </t>
                        <input type="radio" class="o_survey_form_choice_item o_survey_js_form_other_comment invisible position-absolute" value="-1"
                               t-att-name='question.id'
                               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>
                    </label>
                </div>
                <div t-attf-class="o_survey_comment_container mt-3 py-0 px-1  #{'d-none' if not comment_line else ''}">
                    <textarea type="text" class="form-control o_survey_question_text_box bg-transparent rounded-0 p-0"
                              t-att-disabled="None if comment_line else 'disabled'"><t t-esc="comment_line.value_char_box if comment_line else ''"/></textarea>
                </div>
            </div>
            <div t-if='question.comments_allowed and not question.comment_count_as_answer' class="col-lg-12 o_survey_comment_container mx-1 mt-3 ps-3 pe-4">
                <textarea type="text" class="form-control o_survey_comment o_survey_question_text_box bg-transparent rounded-0 p-0"
                          t-att-placeholder="question.comments_message or default_comments_message if not survey_form_readonly else ''"><t t-esc="comment_line.value_char_box if comment_line else ''"/></textarea>
            </div>
        </div>
    </template>

    <template id="question_multiple_choice" name="Question: multiple choice">
        <t t-set="comment_line" t-value="answer_lines.filtered(lambda line: line.value_char_box)"/>
        <div class="row o_survey_form_choice o_survey_question_multiple_choice"
             t-att-data-name="question.id"
             t-att-data-question-type="question.question_type">
            <t t-set="item_idx" t-value="0"/>
            <div class="d-flex flex-wrap col-lg-12">
                <t t-set="has_correct_answer" t-value="scoring_display_correction and any(label.is_correct for label in question.suggested_answer_ids)"/>
                <t t-foreach='question.suggested_answer_ids' t-as='label'>
                    <t t-set="item_idx" t-value="label_index"/>
                    <t t-set="answer_line" t-value="answer_lines.filtered(lambda line: line.suggested_answer_id == label)"/>
                    <t t-set="answer_selected" t-value="answer_line and answer_line.suggested_answer_id.id == label.id"/>
                    <t t-set="is_correct" t-value="label.is_correct"/>

                    <!--Used for print mode with corrections -->
                    <t t-set="answer_class" t-if="not has_correct_answer" t-value="''" />
                    <t t-set="answer_class" t-elif="is_correct" t-value="'bg-success'" />
                    <t t-set="answer_class" t-elif="not is_correct" t-value="'bg-danger'" />

                    <label t-att-class="'o_survey_choice_btn form-label me-2 py-1 px-3 rounded %s %s' % (answer_class, 'o_survey_selected' if answer_line else '')">
                        <t t-call="survey.survey_selection_key">
                            <t t-set="selection_key_class" t-value="'position-relative float-start d-flex'"/>
                        </t>
                        <input type="checkbox" t-att-value='label.id' class="o_survey_form_choice_item invisible position-absolute"
                               t-att-name="question.id"
                               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>
                        <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>
                        </t>
                        <t t-call="survey.question_suggested_value_image"/>
                    </label>
                </t>
            </div>
            <div t-if='question.comments_allowed and question.comment_count_as_answer' class="js_ck_comments col-lg-12" >
                <div class="d-flex flex-wrap">
                    <label t-att-class="'o_survey_choice_btn form-label me-2 py-1 px-3 rounded %s' % ('o_survey_selected' if comment_line else '')">
                        <t t-set="item_idx" t-value="item_idx + 1"/>
                        <t t-call="survey.survey_selection_key">
                            <t t-set="selection_key_class" t-value="'position-relative float-start d-flex'"/>
                        </t>
                        <input type="checkbox" class="o_survey_form_choice_item o_survey_js_form_other_comment invisible position-absolute" value="-1"
                               t-att-name="question.id"
                               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>
                    </label>
                </div>
                <div t-attf-class="o_survey_comment_container mt-3 py-0 px-1 #{'d-none' if not comment_line else ''}">
                    <textarea type="text" class="form-control o_survey_question_text_box bg-transparent rounded-0 p-0"
                              t-att-disabled="None if comment_line else 'disabled'"><t t-esc="comment_line.value_char_box if comment_line else ''"/></textarea>
                </div>
            </div>
            <div t-if='question.comments_allowed and not question.comment_count_as_answer' class="col-lg-12 o_survey_comment_container mx-1 mt-3 py-0 ps-3 pe-4">
                <textarea type="text" class="form-control o_survey_comment o_survey_question_text_box bg-transparent rounded-0 p-0"
                          t-att-placeholder="question.comments_message or default_comments_message if not survey_form_readonly else ''"><t t-esc="comment_line.value_char_box if comment_line else ''"/></textarea>
            </div>
        </div>
    </template>

    <template id="question_matrix" name="Question: matrix">
        <t t-set="comment_line" t-value="answer_lines.filtered(lambda line: line.value_char_box)"/>
        <table class="table table-borderless o_survey_question_matrix text-white text-center mb-0"
               t-att-data-name="question.id"
               t-att-data-question-type="question.question_type"
               t-att-data-sub-questions="question.matrix_row_ids.ids">
            <thead>
                <tr>
                    <th> </th>
                    <th class="fw-normal" t-foreach="question.suggested_answer_ids" t-as="col_label"><span t-field="col_label.value" /></th>
                </tr>
            </thead>
            <tbody>
                <t t-set="item_idx" t-value="0"/>
                <!-- For matrix, we have an extra check because we have rows * columns total options -->
                <t t-set="useKeySelection" t-value="useKeySelection and (len(question.suggested_answer_ids) * len(question.matrix_row_ids)) &lt; len(letters)" />
                <tr class="bg-white text-white" t-foreach="question.matrix_row_ids" t-as="row_label" t-att-id="row_label.id">
                    <th class="fw-normal text-start"><span t-field="row_label.value" /></th>
                    <t t-foreach="question.suggested_answer_ids" t-as="col_label">
                        <t t-set="answer" t-value="answer_lines.filtered(lambda line: line.suggested_answer_id == col_label and line.matrix_row_id == row_label)"/>
                        <td t-att-class="'o_survey_matrix_btn text-primary position-relative %s'
                        % ('o_survey_selected' if answer else '')">
                            <input t-att-type="'checkbox' if question.matrix_subtype == 'multiple' else 'radio'"
                                   t-att-name="'%s_%s' % (question.id, row_label.id)" t-att-value='col_label.id'
                                   t-att-checked="'checked' if answer else None"
                                   t-att-data-row-id="row_label.id"
                                   t-att-data-selection-key="letters[item_idx] if useKeySelection else ''"
                                   class="o_survey_form_choice_item d-none"/>
                            <i t-att-class="'o_survey_matrix_empty_checkbox fa fa-%s position-relative'
                            % ('square-o' if question.matrix_subtype == 'multiple' else 'circle-thin')"></i>
                            <i t-att-class="'fa fa-%s position-relative'
                            % ('check-square' if question.matrix_subtype == 'multiple' else 'check-circle')"></i>
                            <t t-call="survey.survey_selection_key">
                                <t t-set="selection_key_class"
                                   t-value="'position-absolute float-end fw-bold %s' % ('o_survey_radio_btn' if question.matrix_subtype != 'multiple' else '')"/>
                            </t>
                            <t t-set="item_idx" t-value="item_idx + 1"/>
                        </td>
                    </t>
                </tr>
            </tbody>
        </table>
        <div t-if='question.comments_allowed'>
            <textarea type="text" class="form-control o_survey_question_text_box o_survey_comment bg-transparent rounded-0 p-0 mt-3"
                      t-att-placeholder="question.comments_message or default_comments_message if not survey_form_readonly else ''"
                      t-att-name="'%s_%s' % (question.id, 'comment')"><t t-esc="comment_line.value_char_box if comment_line else ''"/></textarea>
        </div>
    </template>

    <template id="survey_selection_key">
        <div t-if="useKeySelection" t-att-class="'o_survey_choice_key bg-white rounded %s' % selection_key_class">
             <span class="o_survey_key text-center position-absolute bg-white rounded-start py-0 ps-2"><span class="text-primary text-center text-center w-100 position-relative">Key</span></span>
             <span class="text-primary text-center w-100 position-relative" t-esc="letters[item_idx]"/>
        </div>
    </template>

    <template id="survey_progression" name="Survey: Progression">
        <t t-if="len(page_ids) > 1 and not survey.has_conditional_questions">
            <t t-set="percentage" t-value="round(100*(page_number/len(page_ids)))"/>
            <t t-if="survey.progression_mode == 'percent'">
                <span class="o_survey_progress_percent" t-esc="percentage"/> % completed
            </t>
            <t t-else="">
                <span class="o_survey_progress_number" t-esc="page_number"/> of <span t-esc="len(page_ids)"/>
                <span t-if="survey.questions_layout == 'page_per_question'">answered</span>
                <span t-else="">pages</span>
            </t>
            <div class="o_survey_progress progress flex-grow-1">
                <div class="progress-bar bg-primary" t-att-style="'width: ' + str(percentage) + '%'"/>
            </div>
        </t>
    </template>
</data>
</odoo>