[IMP] survey : redesign frontend layout

In this commit, all the questions type have been redesigned to look more fancy.
(impacted question types : radio and checkboxes, text boxes (textarea and text
inputs, date and datetime inputs and matrix)

For radio and checkboxes, both design have been aligned to work the same way
(except checkboxes can still have more than one selected option).
Selection by key have been applied on those two question types if the number of
option is under 26 (to use all the alphabeat character for selection). This
selection by key is only available on page per question layout.

Tests have been adapted accordingly to the redesign (typically for choice and
matrix inputs)

* Progress Bar

This commit adds a progress bar to the survey to inform the user
where he is in the survey filling process.

There are two progress modes:
    - Number : will display the number of the current page on the total number
    of pages (or questions if layout mode is question_per_page)
    - Percentage : will display the percentage of page or question already done

So this leads to, on last page:
    - in Number mode :
    the progress bar div is 100% filled         3 / 3 pages   [===]
    - in percentage mode :
    the progress bar is aligned to percentage   66% completed [== ]

* Print Widget

A widget is added for survey print mode in order to resize all textarea to fit
their content, instead of showing a scroll bar. This can be usefull if user
wants to print the results. He will get the entire content of the 'textarea
answers' instead of only the two first lines.

* Misc

This commit also :
    - adds background image to survey.
    - redo quizz correction and add some data to illustrate non scored
    questions rendering in print template
    - review breadcrumb style

Note : readonly data option on survey form widget is not set anywhere yet but
the usage is done in prevention of the future work on presenter view for survey
session mode.

Task ID: '2150291'
PR #43237

11 files changed, 380 insertions, 77 deletions

diff --git a/addons/survey/static/src/img/survey_background.jpg b/addons/survey/static/src/img/survey_background.jpg
new file mode 100644
index 00000000000..ba7c4f0263a
--- /dev/null
+++ b/addons/survey/static/src/img/survey_background.jpg
diff --git a/addons/survey/static/src/img/survey_background_2.jpg b/addons/survey/static/src/img/survey_background_2.jpg
new file mode 100644
index 00000000000..b2e076ed2ba
--- /dev/null
+++ b/addons/survey/static/src/img/survey_background_2.jpg
diff --git a/addons/survey/static/src/js/survey_form.js b/addons/survey/static/src/js/survey_form.js
index 02f9e567365..eb8ac3a95be 100644
--- a/addons/survey/static/src/js/survey_form.js
+++ b/addons/survey/static/src/js/survey_form.js
@@ -6,11 +6,13 @@ var publicWidget = require('web.public.widget');
 var time = require('web.time');
 var core = require('web.core');
 var _t = core._t;
+var dom = require('web.dom');
 
 publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
     selector: '.o_survey_form',
     events: {
         'change .o_survey_form_choice_item': '_onChangeChoiceItem',
+        'click .o_survey_matrix_btn': '_onMatrixBtnClick',
         'click button[type="submit"]': '_onSubmit',
     },
     custom_events: {
@@ -29,6 +31,7 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
         this.fadeInOutDelay = 400;
         return this._super.apply(this, arguments).then(function () {
             self.options = self.$target.find('form').data();
+            // Init fields
             if (!self.options.isStartScreen) {
                 self._initTimer();
                 self._initBreadcrumb();
@@ -36,6 +39,13 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
             self.$('div.o_survey_form_date').each(function () {
                 self._initDateTimePicker($(this));
             });
+            self._initChoiceItems();
+            self._initTextArea();
+            self._focusOnFirstInput();
+            // Init event listener
+            if (!self.options.readonly) {
+                $(document).on('keypress', self._onKeyPress.bind(self));
+            }
         });
     },
 
@@ -46,6 +56,35 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
     // Handlers
     // -------------------------------------------------------------------------
 
+    _onKeyPress: function (event) {
+        // If user is answering a textarea, do not handle keyPress
+        if (this.$("textarea").is(":focus")) {
+            return;
+        }
+
+        var self = this;
+        var keyCode = event.keyCode;
+        var letter = String.fromCharCode(keyCode).toUpperCase();
+
+        // Handle Start / Next / Submit
+        if (keyCode === 13) {  // Enter : go Next
+            event.preventDefault();
+            this._submitForm({});
+        } else if (self.options.questionsLayout === 'page_per_question'
+                   && letter.match(/[a-z]/i)) {
+            var $choiceInput = this.$(`input[data-selection-key=${letter}]`);
+            if ($choiceInput.length === 1) {
+                if ($choiceInput.attr('type') === 'radio') {
+                    $choiceInput.prop("checked", true).trigger('change');
+                } else {
+                    $choiceInput.prop("checked", !$choiceInput.prop("checked")).trigger('change');
+                }
+                // Avoid selection key to be typed into the textbox if 'other' is selected by key
+                event.preventDefault();
+            }
+        }
+    },
+
     /**
     * Checks, if the 'other' choice is checked. Applies only if the comment count as answer.
     *   If not checked : Clear the comment textarea and disable it
@@ -55,7 +94,8 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
     * @param {Event} event
     */
     _onChangeChoiceItem: function (event) {
-        var $choiceItemGroup = $(event.currentTarget).parents('.o_survey_form_choice');
+        var $target = $(event.currentTarget);
+        var $choiceItemGroup = $target.closest('.o_survey_form_choice');
         var $otherItem = $choiceItemGroup.find('.o_survey_js_form_other_comment');
         var $commentInput = $choiceItemGroup.find('textarea[type="text"]');
 
@@ -68,6 +108,36 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
             $commentInput.val('');
             $commentInput.enable(false);
         }
+
+        var $matrixBtn = $target.closest('.o_survey_matrix_btn');
+        if ($target.attr('type') === 'radio') {
+            if ($matrixBtn.length > 0) {
+                $matrixBtn.closest('tr').find('td').removeClass('o_survey_selected');
+                $matrixBtn.addClass('o_survey_selected');
+            } else {
+                $choiceItemGroup.find('label').removeClass('o_survey_selected');
+                $target.closest('label').addClass('o_survey_selected');
+            }
+        } else {  // $target.attr('type') === 'checkbox'
+            if ($matrixBtn.length > 0) {
+                $matrixBtn.toggleClass('o_survey_selected', !$matrixBtn.hasClass('o_survey_selected'));
+            } else {
+                var $label = $target.closest('label');
+                $label.toggleClass('o_survey_selected', !$label.hasClass('o_survey_selected'));
+            }
+        }
+    },
+
+    _onMatrixBtnClick: function (event) {
+        if (!this.options.readonly) {
+            var $target = $(event.currentTarget);
+            var $input = $target.find('input');
+            if ($input.attr('type') === 'radio') {
+                $input.prop("checked", true).trigger('change');
+            } else {
+                $input.prop("checked", !$input.prop("checked")).trigger('change');
+            }
+        }
     },
 
     _onSubmit: function (event) {
@@ -177,8 +247,11 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
             } else {
                 this._updateBreadcrumb();
             }
+            self._initChoiceItems();
+            self._initTextArea();
             this.$('.o_survey_form_content').fadeIn(this.fadeInOutDelay);
             $("html, body").animate({ scrollTop: 0 }, this.fadeInOutDelay);
+            self._focusOnFirstInput();
         }
         else if (result && result.fields && result.error === 'validation') {
             this.$('.o_survey_form_content').fadeIn(0);
@@ -321,7 +394,7 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
     */
     _prepareSubmitValues: function (formData, params) {
         var self = this;
-        formData.forEach(function (value, key){
+        formData.forEach(function (value, key) {
             switch (key) {
                 case 'csrf_token':
                 case 'token':
@@ -463,6 +536,25 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
     // INIT FIELDS TOOLS
     // -------------------------------------------------------------------------
 
+   /**
+    * Will allow the textarea to resize on carriage return instead of showing scrollbar.
+    */
+    _initTextArea: function () {
+        this.$('textarea').each(function () {
+            dom.autoresize($(this));
+        });
+    },
+
+    _initChoiceItems: function () {
+        this.$("input[type='radio'],input[type='checkbox']").each(function () {
+            var matrixBtn = $(this).parents('.o_survey_matrix_btn');
+            if ($(this).prop("checked")) {
+                var $target = matrixBtn.length > 0 ? matrixBtn : $(this).closest('label');
+                $target.addClass('o_survey_selected');
+            }
+        });
+    },
+
     /**
      * Will initialize the breadcrumb widget that handles navigation to a previously filled in page.
      *
@@ -573,6 +665,17 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
         }
     },
 
+   /**
+    * Will automatically focus on the first input to allow the user to complete directly the survey,
+    * without having to manually get the focus (only if the input has the right type - can write something inside -)
+    */
+    _focusOnFirstInput: function () {
+        var $inputs = this.$("input[type='text'],input[type='number'],textarea").not('.o_survey_comment');
+        if ($inputs.length > 0) {
+            $inputs.first().focus();
+        }
+    },
+
     // ERRORS TOOLS
     // -------------------------------------------------------------------------
 
@@ -591,10 +694,12 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
         var scrollLocation = $target.offset().top;
         var navbarHeight = $('.o_main_navbar').height();
         if (navbarHeight) {
-            scrollLocation -= navbarHeight;
+            // In overflow auto, scrollLocation of target can be negative if target is out of screen (up side)
+            scrollLocation = scrollLocation >= 0 ? scrollLocation - navbarHeight : scrollLocation + navbarHeight;
         }
-        $('html, body').animate({
-            scrollTop: scrollLocation
+        var scrollinside = $("#wrapwrap").scrollTop();
+        $('#wrapwrap').animate({
+            scrollTop: scrollinside + scrollLocation
         }, 500);
     },
 
diff --git a/addons/survey/static/src/js/survey_print.js b/addons/survey/static/src/js/survey_print.js
new file mode 100644
index 00000000000..5e4b8118aec
--- /dev/null
+++ b/addons/survey/static/src/js/survey_print.js
@@ -0,0 +1,31 @@
+odoo.define('survey.print', function (require) {
+'use strict';
+
+var publicWidget = require('web.public.widget');
+var dom = require('web.dom');
+
+publicWidget.registry.SurveyPrintWidget = publicWidget.Widget.extend({
+    selector: '.o_survey_print',
+
+    //--------------------------------------------------------------------------
+    // Widget
+    //--------------------------------------------------------------------------
+
+    /**
+    * @override
+    */
+    start: function () {
+        var self = this;
+        return this._super.apply(this, arguments).then(function () {
+            // Will allow the textarea to resize if any carriage return instead of showing scrollbar.
+            self.$('textarea').each(function () {
+                dom.autoresize($(this));
+            });
+        });
+    },
+
+});
+
+return publicWidget.registry.SurveyPrintWidget;
+
+});
diff --git a/addons/survey/static/src/scss/survey_form.scss b/addons/survey/static/src/scss/survey_form.scss
new file mode 100644
index 00000000000..7c54bed6738
--- /dev/null
+++ b/addons/survey/static/src/scss/survey_form.scss
@@ -0,0 +1,193 @@
+.o_survey_wrap {
+    min-height: 100%;
+}
+
+/**********************************************************
+                        Common Style
+ **********************************************************/
+
+.o_survey_form, .o_survey_print {
+    .o_survey_question_error {
+        height: 0px;
+        transition: height .5s ease;
+        line-height: 4rem;
+        &.slide_in {
+            height: 4rem;
+        }
+    }
+
+    .o_survey_question_text_box,
+    .o_survey_question_date,
+    .o_survey_question_datetime,
+    .o_survey_question_numerical_box {
+        border: 0px;
+        border-bottom: 2px solid $o-brand-primary;
+        &:disabled {
+            color: black !important;
+            border-color: $gray-600;
+            border-bottom: 2px solid $gray-600;
+        }
+        &:focus {
+            border-color: $o-brand-primary;
+        }
+    }
+
+    .o_survey_form_date .input-group-append {
+        right: 0;
+        .input-group-text i {
+            font-size: large;
+        }
+    }
+
+    .o_survey_choice_btn {
+        transition: background-color 0.3s ease;
+        flex: 1 0 300px;
+
+        span {
+            line-height: 25px;
+        }
+        i {
+            top: 0px;
+            font-size: large;
+            &.fa-check-circle,&.fa-check-square {
+                display: none;
+            }
+        }
+
+        &.o_survey_selected i {
+            display: none;
+            &.fa-check-circle,&.fa-check-square {
+                display: inline;
+            }
+        }
+    }
+
+    .o_survey_question_matrix {
+        td {
+            min-width: 100px;
+            i {
+                font-size: 22px;
+                display: none;
+                &.o_survey_matrix_empty_checkbox {
+                    display: inline;
+                }
+            }
+            .o_survey_choice_key > span > span {
+                top: 0px;
+            }
+
+            &.o_survey_selected {
+                i {
+                    display: inline;
+                    &.o_survey_matrix_empty_checkbox {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+/**********************************************************
+                    Form Specific Style
+ **********************************************************/
+
+.o_survey_form {
+    min-height: 100%;
+
+    .o_survey_choice_btn {
+        background-color: rgba($o-brand-primary, 0.5);
+        border: 2px solid $o-brand-primary;
+        cursor: pointer;
+
+        &.o_survey_selected {
+            background-color: $o-brand-primary;
+        }
+
+        &:hover {
+            background-color: rgba($o-brand-primary, 0.8);
+            .o_survey_choice_key span.o_survey_key {
+                opacity: 1;
+            }
+        }
+    }
+
+    .o_survey_choice_key {
+        width: 25px;
+        height: 25px;
+        border: 2px solid $o-brand-primary;
+        span {
+            font-size: smaller;
+            top: -2px;
+            &.o_survey_key {
+                width: inherit;
+                right: 10px;
+                border: 2px solid $o-brand-primary;
+                border-right: 0px;
+                height: 25px;
+                opacity: 0;
+                transition: opacity 0.4s ease;
+                white-space: nowrap;
+            }
+        }
+    }
+
+    .o_survey_question_matrix {
+        th {
+            background-color: $o-brand-primary;
+        }
+        td {
+            background-color: rgba($o-brand-primary, 0.2);
+
+            &:hover {
+                background-color: rgba($o-brand-primary, 0.5);
+                cursor: pointer;
+                .o_survey_choice_key span.o_survey_key {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    .o_survey_progress {
+        height:0.5em;
+    }
+}
+
+/**********************************************************
+                   Print Specific Style
+ **********************************************************/
+
+.o_survey_print {
+    .o_survey_choice_btn {
+        background-color: $gray-500;
+        border-color: transparent;
+        cursor: default;
+
+        &.bg-success, &.bg-danger {
+            opacity: 0.6;
+        }
+        &.o_survey_selected {
+            background-color: $gray-600;
+            opacity: 1;
+        }
+        i.fa-square, i.fa-circle {
+            display: none;
+        }
+    }
+    .o_survey_question_matrix {
+        th {
+            /* important needed to force override bg-primary set on th in the template */
+            background-color: $gray-600 !important;
+        }
+        td {
+            background-color: $gray-200;
+            &:hover {
+                cursor: default;
+            }
+        }
+        i.fa-check-square, i.fa-check-circle, i.o_survey_matrix_empty_checkbox {
+            color: $gray-600;
+        }
+    }
+}
diff --git a/addons/survey/static/src/scss/survey_templates.scss b/addons/survey/static/src/scss/survey_templates.scss
deleted file mode 100644
index 4a53c4ac0af..00000000000
--- a/addons/survey/static/src/scss/survey_templates.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.o_survey_header {
-    padding-top: 15px;
-    padding-bottom: 25px;
-}
-
-.o_survey_title {
-    padding-bottom: 15px;
-}
-
-.js_question-wrapper {
-    padding-bottom: 25px;
-}
-
-.o_survey_breadcrumb_container {
-    min-height: 3rem;
-}
-
-.o_survey_question_error {
-    overflow: hidden;
-    height: 0px;
-    border: 0px;
-    padding: 0rem 0.75rem;
-    transition: height .5s ease;
-    line-height: 4rem;
-    &.slide_in {
-        height: 4rem;
-    }
-}
diff --git a/addons/survey/static/src/xml/survey_breadcrumb_templates.xml b/addons/survey/static/src/xml/survey_breadcrumb_templates.xml
index 8893d711815..1df7f54a88a 100644
--- a/addons/survey/static/src/xml/survey_breadcrumb_templates.xml
+++ b/addons/survey/static/src/xml/survey_breadcrumb_templates.xml
@@ -2,10 +2,11 @@
 <templates id="template" xml:space="preserve">
 
 <t t-name="survey.survey_breadcrumb_template">
-    <ol class="breadcrumb justify-content-end">
+    <ol class="breadcrumb justify-content-end bg-transparent">
         <t t-set="canGoBack" t-value="widget.canGoBack"/>
         <t t-foreach="widget.pages" t-as="page">
-            <li t-att-class="'breadcrumb-item' + (page.id === widget.currentPageId ? ' active' : '')"
+            <t t-set="isActivePage" t-value="page.id === widget.currentPageId"/>
+            <li t-att-class="'breadcrumb-item' + (isActivePage ? ' active font-weight-bold' : '')"
                 t-att-data-page-id="page.id"
                 t-att-data-page-title="page.title">
                 <t t-if="widget.currentPageId === page.id">
@@ -14,12 +15,13 @@
                     <t t-set="canGoBack" t-value="false" />
                 </t>
                 <t t-if="canGoBack">
-                    <a href="#">
+                    <a class="text-primary" href="#">
                         <span t-esc="page.title" />
                     </a>
                 </t>
                 <t t-else="">
-                    <span t-esc="page.title" />
+                    <span t-att-class="(isActivePage ? 'text-black' : 'text-muted')"
+                          t-esc="page.title" />
                 </t>
             </li>
         </t>
diff --git a/addons/survey/static/tests/tours/certification_failure.js b/addons/survey/static/tests/tours/certification_failure.js
index fa6849e63e9..2094ee1925f 100644
--- a/addons/survey/static/tests/tours/certification_failure.js
+++ b/addons/survey/static/tests/tours/certification_failure.js
@@ -24,43 +24,43 @@ var failSteps = [{ // Page-1
     trigger: 'button.btn.btn-primary.btn-lg:contains("Start Certification")',
 }, { // Question: Do we sell Acoustic Bloc Screens?
     content: "Selecting answer 'No'",
-    trigger: 'div.js_question-wrapper:contains("Do we sell Acoustic Bloc Screens") label:contains("No") input',
+    trigger: 'div.js_question-wrapper:contains("Do we sell Acoustic Bloc Screens") label:contains("No")',
 }, { // Question: Select all the existing products
     content: "Ticking answer 'Fanta'",
-    trigger: 'div.js_question-wrapper:contains("Select all the existing products") label:contains("Fanta") input'
+    trigger: 'div.js_question-wrapper:contains("Select all the existing products") label:contains("Fanta")'
 }, {
     content: "Ticking answer 'Drawer'",
-    trigger: 'div.js_question-wrapper:contains("Select all the existing products") label:contains("Drawer") input'
+    trigger: 'div.js_question-wrapper:contains("Select all the existing products") label:contains("Drawer")'
 }, {
     content: "Ticking answer 'Conference chair'",
-    trigger: 'div.js_question-wrapper:contains("Select all the existing products") label:contains("Conference chair") input'
+    trigger: 'div.js_question-wrapper:contains("Select all the existing products") label:contains("Conference chair")'
 }, { // Question: Select all the available customizations for our Customizable Desk
     content: "Ticking answer 'Color'",
-    trigger: 'div.js_question-wrapper:contains("Select all the available customizations for our Customizable Desk") label:contains("Color") input'
+    trigger: 'div.js_question-wrapper:contains("Select all the available customizations for our Customizable Desk") label:contains("Color")'
 }, {
     content: "Ticking answer 'Height'",
-    trigger: 'div.js_question-wrapper:contains("Select all the available customizations for our Customizable Desk") label:contains("Height") input'
+    trigger: 'div.js_question-wrapper:contains("Select all the available customizations for our Customizable Desk") label:contains("Height")'
 }, { // Question: How many versions of the Corner Desk do we have?
     content: "Selecting answer '2'",
-    trigger: 'div.js_question-wrapper:contains("How many versions of the Corner Desk do we have") label:contains("2") input',
+    trigger: 'div.js_question-wrapper:contains("How many versions of the Corner Desk do we have") label:contains("2")',
 }, { // Question: Do you think we have missing products in our catalog? (not rated)
     content: "Missing products",
     trigger: 'div.js_question-wrapper:contains("Do you think we have missing products in our catalog") textarea',
     run: "text I don't know products enough to be able to answer that",
 }, { // Page-2 Question: How much do we sell our Cable Management Box?
     content: "Selecting answer '80$'",
-    trigger: 'div.js_question-wrapper:contains("How much do we sell our Cable Management Box") label:contains("80$") input',
+    trigger: 'div.js_question-wrapper:contains("How much do we sell our Cable Management Box") label:contains("80$")',
 }, { // Question: Select all the the products that sell for 100$ or more
     content: "Ticking answer 'Corner Desk Right Sit'",
-    trigger: 'div.js_question-wrapper:contains("Select all the the products that sell for 100$ or more") label:contains("Corner Desk Right Sit") input'
+    trigger: 'div.js_question-wrapper:contains("Select all the the products that sell for 100$ or more") label:contains("Corner Desk Right Sit")'
 }, {
     content: "Ticking answer 'Desk Combination'",
-    trigger: 'div.js_question-wrapper:contains("Select all the the products that sell for 100$ or more") label:contains("Desk Combination") input'
+    trigger: 'div.js_question-wrapper:contains("Select all the the products that sell for 100$ or more") label:contains("Desk Combination")'
 }, {
     content: "Ticking answer 'Office Chair Black'",
-    trigger: 'div.js_question-wrapper:contains("Select all the the products that sell for 100$ or more") label:contains("Office Chair Black") input'
+    trigger: 'div.js_question-wrapper:contains("Select all the the products that sell for 100$ or more") label:contains("Office Chair Black")'
 }, { // Question: What do you think about our prices (not rated)?
-    trigger: 'div.js_question-wrapper:contains("What do you think about our prices") label:contains("Correctly priced") input',
+    trigger: 'div.js_question-wrapper:contains("What do you think about our prices") label:contains("Correctly priced")',
 }, {
     content: "Finish Survey",
     trigger: 'button[type="submit"]',
diff --git a/addons/survey/static/tests/tours/certification_success.js b/addons/survey/static/tests/tours/certification_success.js
index 584c357f7ba..360efb1c16b 100644
--- a/addons/survey/static/tests/tours/certification_success.js
+++ b/addons/survey/static/tests/tours/certification_success.js
@@ -23,44 +23,44 @@ tour.register('test_certification_success', {
         trigger: 'button.btn.btn-primary.btn-lg:contains("Start Certification")',
     }, { // Question: Do we sell Acoustic Bloc Screens?
         content: "Selecting answer 'Yes'",
-        trigger: 'div.js_question-wrapper:contains("Do we sell Acoustic Bloc Screens") label:contains("Yes") input',
+        trigger: 'div.js_question-wrapper:contains("Do we sell Acoustic Bloc Screens") label:contains("Yes")',
     }, { // Question: Select all the existing products
         content: "Ticking answer 'Chair floor protection'",
-        trigger: 'div.js_question-wrapper:contains("Select all the existing products") label:contains("Chair floor protection") input'
+        trigger: 'div.js_question-wrapper:contains("Select all the existing products") label:contains("Chair floor protection")'
     }, {
         content: "Ticking answer 'Drawer'",
-        trigger: 'div.js_question-wrapper:contains("Select all the existing products") label:contains("Drawer") input'
+        trigger: 'div.js_question-wrapper:contains("Select all the existing products") label:contains("Drawer")'
     }, {
         content: "Ticking answer 'Conference chair'",
-        trigger: 'div.js_question-wrapper:contains("Select all the existing products") label:contains("Conference chair") input'
+        trigger: 'div.js_question-wrapper:contains("Select all the existing products") label:contains("Conference chair")'
     }, { // Question: Select all the available customizations for our Customizable Desk
         content: "Ticking answer 'Color'",
-        trigger: 'div.js_question-wrapper:contains("Select all the available customizations for our Customizable Desk") label:contains("Color") input'
+        trigger: 'div.js_question-wrapper:contains("Select all the available customizations for our Customizable Desk") label:contains("Color")'
     }, {
         content: "Ticking answer 'Legs'",
-        trigger: 'div.js_question-wrapper:contains("Select all the available customizations for our Customizable Desk") label:contains("Legs") input'
+        trigger: 'div.js_question-wrapper:contains("Select all the available customizations for our Customizable Desk") label:contains("Legs")'
     }, { // Question: How many versions of the Corner Desk do we have?
         content: "Selecting answer '2'",
-        trigger: 'div.js_question-wrapper:contains("How many versions of the Corner Desk do we have") label:contains("2") input',
+        trigger: 'div.js_question-wrapper:contains("How many versions of the Corner Desk do we have") label:contains("2")',
     }, { // Question: Do you think we have missing products in our catalog? (not rated)
         content: "Missing products",
         trigger: 'div.js_question-wrapper:contains("Do you think we have missing products in our catalog") textarea',
         run: "text I think we should make more versions of the customizable desk, it's such an amazing product!",
     }, { // Page-2 Question: How much do we sell our Cable Management Box?
         content: "Selecting answer '80$' (wrong one)",
-        trigger: 'div.js_question-wrapper:contains("How much do we sell our Cable Management Box") label:contains("80$") input',
+        trigger: 'div.js_question-wrapper:contains("How much do we sell our Cable Management Box") label:contains("80$")',
     }, { // Question: Select all the the products that sell for 100$ or more
         content: "Ticking answer 'Corner Desk Right Sit'",
-        trigger: 'div.js_question-wrapper:contains("Select all the the products that sell for 100$ or more") label:contains("Corner Desk Right Sit") input'
+        trigger: 'div.js_question-wrapper:contains("Select all the the products that sell for 100$ or more") label:contains("Corner Desk Right Sit")'
     }, {
         content: "Ticking answer 'Desk Combination'",
-        trigger: 'div.js_question-wrapper:contains("Select all the the products that sell for 100$ or more") label:contains("Desk Combination") input'
+        trigger: 'div.js_question-wrapper:contains("Select all the the products that sell for 100$ or more") label:contains("Desk Combination")'
     }, {
         content: "Ticking answer 'Large Desk'",
-        trigger: 'div.js_question-wrapper:contains("Select all the the products that sell for 100$ or more") label:contains("Large Desk") input'
+        trigger: 'div.js_question-wrapper:contains("Select all the the products that sell for 100$ or more") label:contains("Large Desk")'
     }, { // Question: What do you think about our prices (not rated)?
         content: "Selecting answer 'Underpriced'",
-        trigger: 'div.js_question-wrapper:contains("What do you think about our prices") label:contains("Underpriced") input',
+        trigger: 'div.js_question-wrapper:contains("What do you think about our prices") label:contains("Underpriced")',
     }, {
         content: "Finish Survey",
         trigger: 'button[type="submit"]',
diff --git a/addons/survey/static/tests/tours/survey.js b/addons/survey/static/tests/tours/survey.js
index fce408f9cbe..22344bd2d99 100644
--- a/addons/survey/static/tests/tours/survey.js
+++ b/addons/survey/static/tests/tours/survey.js
@@ -21,7 +21,7 @@ tour.register('test_survey', {
         run: 'text 05/05/1980',
     }, {
         content: 'Answer How frequently do you buy products online',
-        trigger: 'div.js_question-wrapper:contains("How frequently do you buy products online") label:contains("Once a month") input',
+        trigger: 'div.js_question-wrapper:contains("How frequently do you buy products online") label:contains("Once a month")',
     }, {
         content: 'Answer How many times did you order products on our website',
         trigger: 'div.js_question-wrapper:contains("How many times did you order products on our website") input',
@@ -33,25 +33,25 @@ tour.register('test_survey', {
     // Page-2
     {
         content: 'Answer Which of the following words would you use to describe our products (High Quality)',
-        trigger: 'div.js_question-wrapper:contains("Which of the following words would you use to describe our products") label:contains("High quality") input',
+        trigger: 'div.js_question-wrapper:contains("Which of the following words would you use to describe our products") label:contains("High quality")',
     }, {
         content: 'Answer Which of the following words would you use to describe our products (Good value for money)',
-        trigger: 'div.js_question-wrapper:contains("Which of the following words would you use to describe our products") label:contains("Good value for money") input',
+        trigger: 'div.js_question-wrapper:contains("Which of the following words would you use to describe our products") label:contains("Good value for money")',
     }, {
         content: 'Answer What do your think about our new eCommerce (The new layout and design is fresh and up-to-date)',
-        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("The new layout and design is fresh and up-to-date") input:first',
+        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("The new layout and design is fresh and up-to-date") td:first',
     }, {
         content: 'Answer What do your think about our new eCommerce (It is easy to find the product that I want)',
-        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("It is easy to find the product that I want") input:eq(2)',
+        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("It is easy to find the product that I want") td:eq(2)',
     }, {
         content: 'Answer What do your think about our new eCommerce (The tool to compare the products is useful to make a choice)',
-        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("The tool to compare the products is useful to make a choice") input:eq(3)',
+        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("The tool to compare the products is useful to make a choice") td:eq(3)',
     }, {
         content: 'Answer What do your think about our new eCommerce (The checkout process is clear and secure)',
-        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("The checkout process is clear and secure") input:eq(2)',
+        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("The checkout process is clear and secure") td:eq(2)',
     }, {
         content: 'Answer What do your think about our new eCommerce (I have added products to my wishlist)',
-        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("I have added products to my wishlist") input:last',
+        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("I have added products to my wishlist") td:last',
     }, {
         content: 'Answer Do you have any other comments, questions, or concerns',
         trigger: 'div.js_question-wrapper:contains("Do you have any other comments, questions, or concerns") textarea',
diff --git a/addons/survey/static/tests/tours/survey_prefill.js b/addons/survey/static/tests/tours/survey_prefill.js
index 89242a0a5d0..223b824cb1b 100644
--- a/addons/survey/static/tests/tours/survey_prefill.js
+++ b/addons/survey/static/tests/tours/survey_prefill.js
@@ -16,7 +16,7 @@ tour.register('test_survey_prefill', {
         trigger: 'div.js_question-wrapper:contains("When is your date of birth ?") input',
         run: 'text 05/05/1980',
     }, { // Question: How frequently do you buy products online ?
-        trigger: 'div.js_question-wrapper:contains("How frequently do you buy products online ?") label:contains("Once a week") input',
+        trigger: 'div.js_question-wrapper:contains("How frequently do you buy products online ?") label:contains("Once a week")',
     }, { // Question: How many times did you order products on our website ?
         trigger: 'div.js_question-wrapper:contains("How many times did you order products on our website ?") input',
         run: 'text 42',
@@ -27,25 +27,25 @@ tour.register('test_survey_prefill', {
     // Page-2
     { // Question: Which of the following words would you use to describe our products ?
         content: 'Answer Which of the following words would you use to describe our products (High Quality)',
-        trigger: 'div.js_question-wrapper:contains("Which of the following words would you use to describe our products") label:contains("High quality") input',
+        trigger: 'div.js_question-wrapper:contains("Which of the following words would you use to describe our products") label:contains("High quality")',
     }, {
         content: 'Answer Which of the following words would you use to describe our products (Good value for money)',
-        trigger: 'div.js_question-wrapper:contains("Which of the following words would you use to describe our products") label:contains("Good value for money") input',
+        trigger: 'div.js_question-wrapper:contains("Which of the following words would you use to describe our products") label:contains("Good value for money")',
     }, {
         content: 'Answer What do your think about our new eCommerce (The new layout and design is fresh and up-to-date)',
-        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("The new layout and design is fresh and up-to-date") input:first',
+        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("The new layout and design is fresh and up-to-date") td:first',
     }, {
         content: 'Answer What do your think about our new eCommerce (It is easy to find the product that I want)',
-        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("It is easy to find the product that I want") input:eq(2)',
+        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("It is easy to find the product that I want") td:eq(2)',
     }, {
         content: 'Answer What do your think about our new eCommerce (The tool to compare the products is useful to make a choice)',
-        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("The tool to compare the products is useful to make a choice") input:eq(3)',
+        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("The tool to compare the products is useful to make a choice") td:eq(3)',
     }, {
         content: 'Answer What do your think about our new eCommerce (The checkout process is clear and secure)',
-        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("The checkout process is clear and secure") input:eq(2)',
+        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("The checkout process is clear and secure") td:eq(2)',
     }, {
         content: 'Answer What do your think about our new eCommerce (I have added products to my wishlist)',
-        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("I have added products to my wishlist") input:last',
+        trigger: 'div.js_question-wrapper:contains("What do your think about our new eCommerce") tr:contains("I have added products to my wishlist") td:last',
     }, {
         content: 'Answer Do you have any other comments, questions, or concerns',
         trigger: 'div.js_question-wrapper:contains("Do you have any other comments, questions, or concerns") textarea',