[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

1 files changed, 9 insertions, 9 deletions

diff --git a/addons/test_website_slides_full/tests/tours/slides_certification_member.js b/addons/test_website_slides_full/tests/tours/slides_certification_member.js
index c10ec4ac898..eec5f0b7aaf 100644
--- a/addons/test_website_slides_full/tests/tours/slides_certification_member.js
+++ b/addons/test_website_slides_full/tests/tours/slides_certification_member.js
@@ -89,16 +89,16 @@ var failCertificationSteps = [{
     trigger: 'button:contains("Start Certification")'
 }, { // Question: What type of wood is the best for furniture?
     content: 'Survey: selecting answer "Fir"',
-    trigger: 'div.js_question-wrapper:contains("What type of wood is the best for furniture") label:contains("Fir") input',
+    trigger: 'div.js_question-wrapper:contains("What type of wood is the best for furniture") label:contains("Fir")'
 }, { // Question: Select all the furniture shown in the video
     content: 'Survey: ticking answer "Table"',
-    trigger: 'div.js_question-wrapper:contains("Select all the furniture shown in the video") label:contains("Table") input'
+    trigger: 'div.js_question-wrapper:contains("Select all the furniture shown in the video") label:contains("Table")'
 }, {
     content: 'Survey: ticking answer "Bed"',
-    trigger: 'div.js_question-wrapper:contains("Select all the furniture shown in the video") label:contains("Bed") input'
+    trigger: 'div.js_question-wrapper:contains("Select all the furniture shown in the video") label:contains("Bed")'
 }, {
     content: 'Survey: submitting the certification with wrong answers',
-    trigger: 'button:contains("Submit Survey")'
+    trigger: 'button:contains("Submit")'
 }];
 
 var retrySteps = [{
@@ -111,19 +111,19 @@ var succeedCertificationSteps = [{
     trigger: 'button:contains("Start Certification")'
 }, { // Question: What type of wood is the best for furniture?
     content: 'Survey: selecting answer "Oak"',
-    trigger: 'div.js_question-wrapper:contains("What type of wood is the best for furniture") label:contains("Oak") input',
+    trigger: 'div.js_question-wrapper:contains("What type of wood is the best for furniture") label:contains("Oak")',
 }, { // Question: Select all the furniture shown in the video
     content: 'Survey: ticking answer "Chair"',
-    trigger: 'div.js_question-wrapper:contains("Select all the furniture shown in the video") label:contains("Chair") input'
+    trigger: 'div.js_question-wrapper:contains("Select all the furniture shown in the video") label:contains("Chair")'
 }, {
     content: 'Survey: ticking answer "Shelve"',
-    trigger: 'div.js_question-wrapper:contains("Select all the furniture shown in the video") label:contains("Shelve") input'
+    trigger: 'div.js_question-wrapper:contains("Select all the furniture shown in the video") label:contains("Shelve")'
 }, {
     content: 'Survey: ticking answer "Desk"',
-    trigger: 'div.js_question-wrapper:contains("Select all the furniture shown in the video") label:contains("Desk") input'
+    trigger: 'div.js_question-wrapper:contains("Select all the furniture shown in the video") label:contains("Desk")'
 }, {
     content: 'Survey: submitting the certification with correct answers',
-    trigger: 'button:contains("Submit Survey")'
+    trigger: 'button:contains("Submit")'
 }];
 
 var certificationCompletionSteps = [{