[MERGE][REF] survey : refactor survey page transition in ajax #41453

dbeguin · 2019-12-06T09:27:32Z

Purpose

To have a better UX, the transition between questions in a survey should not be done by loading another page, but by loading next questions in AJAX.

Specifications

Do the transition in ajax, no more page loading:

During submit, load and display next questions in a smooth transition (fade in / fade out).
Include start and end screen of the survey inside the survey form (same process, load next screen in smooth transition)
Integrate timer and start only after start survey.
Integrate breadcrumb and handle manually (at frontend) transition about clickable / active / inactive breadcrumb item. Make the survey breadcrumb a widget to ease the navigation transitions and updates.
Validate questions at frontend before sending data for submit. (to avoid fading out then fading in the same questions with error messages)

Also include some improvements and fixes :

Save questions on time limit reached, to take into account unsubmitted answer (if user does not have time to click on submit)
Block submit if survey has been already completed by the user.
Do not use previous id on one page mode (fix)
Remove display mode for simple choice question : that will prepare the next redesign of survey and allow to handle simple choice in a more standard way for all kind of question types.

See sub commit for more detail.

Task ID : 2152223

Purpose ======= If the timer goes to 00:00, the form is automatically submitted but the answers are not saved. The form should be submitted, validation should filter out invalid answers to avoid showing validation errors on the form, and save answers. If the answer is not in the correct format : skip the question If the answer is required but there is no answer : skip the question This way, we can still compute score. Specifications ============== This commit removes the invalid answers from the question to save, only if the timer is not over, to be able to compute score on not finished survey. In order to avoid being able to submit answers when the survey is marked as done, a check was added to return an error for that use case. Also, to avoid frontend timer hacking, an extra buffer of 10 seconds has been added. If the time limit is reached and the submit occurs 10 seconds after the maximum stop time (start time + time limit), no answer can be submitted. Task ID: 2152223 PR odoo#41453

This commit prepares the complete redesign of survey. Simple choice question type will only use the radio button display mode. So the dropdown display mode is deleted. Task ID: 2152223 PR odoo#41453

This commit renames state 'skip' into 'in_progress' as 'skip' does not really mean anything. Task ID: 2152223 PR odoo#41453

PURPOSE To have a better UX, the transition between questions in a survey should not be done by loading another page, but by loading next questions in AJAX. This will allow to fade out / fade in the next question and improve the user experience, as well as prepare the work for the complete survey redesign. SPECIFICATIONS General ======= This commit refactors the way the questions are loaded. To go to next question(s), instead of redirecting to a new page containing the next question(s), the submit process is loading the next question(s) using ajax. The template of the question is prepared at server side and is given in html string to the client that display the next question in a smooth transition (fade in / fade out). This commit includes also the start and the end screen of the survey inside the survey form in order to perform smooth transition between start screen and first question(s) and between last question(s) and end screen. Only one master template (survey form) is now used to display every part of the survey : start + questions + end screens. The answer_done error is now handled by the _prepare_survey_data itself. If the user wants to display an already_done survey, the returned template is the end screen. This commit handles page transition for the survey results. When submitting survey, the survey result widget is initialized and attached to the survey result section. A new route has been added : /survey/begin/. If the user arrives on start screen, the state is 'New'. Once the user clicks on Start button, an rpc call is made to survey/begin that will call the survey_prepare_data to render the first question page and set the state to in_progress and the start_datetime of the answer. Validation ========== Add the validation of all types of questions directly in the frontend. This allows to reduce the latency before the survey is validated and was necessary to go along with our new fade out / fade in mechanism. The client does not need to wait the validation answer from the server to display validation error messages. The current questions are only faded out if the frontend validation has passed. The server still makes this validation before submitting answers and loading next question(s) to avoid direct rpc calls that would mess up the answers. Error messages are now displayed with a slide down transition, for a wonderful wow effect ! Timer ===== As the survey form works with ajax to display start screen, question(s) and end page, the timer has to be started only after the start screen. This commit display and start the timer only after start survey button is clicked. Breadcrumb ========== As the survey form now works in ajax to display in same page start screen, question(s) and end page screen, the breadcrumb has to be controlled not only on page loading but also manually between transition from a screen to another. To ease the breadcrumb management, breadcrumb is now a widget that will reload a js template, mainly depending of the current page id. The js form initialize or update this widget giving this new page id. On breadcrumb item click, the widget triggers a onclick caught by the form that calls the submit with the given target. This commit handles page transition for the breadcrumb. When going forward or backward (next or previous page), the breadcrumb activates, deactivates and links elements are reinitialized depending of the target page. LINKS Task ID: 2152223 PR odoo#41453 Co-authored-by: Aurélien Warnon <awa@odoo.com>

Purpose ======= If the timer goes to 00:00, the form is automatically submitted but the answers are not saved. The form should be submitted, validation should filter out invalid answers to avoid showing validation errors on the form, and save answers. If the answer is not in the correct format : skip the question If the answer is required but there is no answer : skip the question This way, we can still compute score. Specifications ============== This commit removes the invalid answers from the question to save, only if the timer is not over, to be able to compute score on not finished survey. In order to avoid being able to submit answers when the survey is marked as done, a check was added to return an error for that use case. Also, to avoid frontend timer hacking, an extra buffer of 10 seconds has been added. If the time limit is reached and the submit occurs 10 seconds after the maximum stop time (start time + time limit), no answer can be submitted. Task ID: 2152223 PR #41453

This commit prepares the complete redesign of survey. Simple choice question type will only use the radio button display mode. So the dropdown display mode is deleted. Task ID: 2152223 PR #41453

This commit renames state 'skip' into 'in_progress' as 'skip' does not really mean anything. Task ID: 2152223 PR #41453

PURPOSE To have a better UX, the transition between questions in a survey should not be done by loading another page, but by loading next questions in AJAX. This will allow to fade out / fade in the next question and improve the user experience, as well as prepare the work for the complete survey redesign. SPECIFICATIONS General ======= This commit refactors the way the questions are loaded. To go to next question(s), instead of redirecting to a new page containing the next question(s), the submit process is loading the next question(s) using ajax. The template of the question is prepared at server side and is given in html string to the client that display the next question in a smooth transition (fade in / fade out). This commit includes also the start and the end screen of the survey inside the survey form in order to perform smooth transition between start screen and first question(s) and between last question(s) and end screen. Only one master template (survey form) is now used to display every part of the survey : start + questions + end screens. The answer_done error is now handled by the _prepare_survey_data itself. If the user wants to display an already_done survey, the returned template is the end screen. This commit handles page transition for the survey results. When submitting survey, the survey result widget is initialized and attached to the survey result section. A new route has been added : /survey/begin/. If the user arrives on start screen, the state is 'New'. Once the user clicks on Start button, an rpc call is made to survey/begin that will call the survey_prepare_data to render the first question page and set the state to in_progress and the start_datetime of the answer. Validation ========== Add the validation of all types of questions directly in the frontend. This allows to reduce the latency before the survey is validated and was necessary to go along with our new fade out / fade in mechanism. The client does not need to wait the validation answer from the server to display validation error messages. The current questions are only faded out if the frontend validation has passed. The server still makes this validation before submitting answers and loading next question(s) to avoid direct rpc calls that would mess up the answers. Error messages are now displayed with a slide down transition, for a wonderful wow effect ! Timer ===== As the survey form works with ajax to display start screen, question(s) and end page, the timer has to be started only after the start screen. This commit display and start the timer only after start survey button is clicked. Breadcrumb ========== As the survey form now works in ajax to display in same page start screen, question(s) and end page screen, the breadcrumb has to be controlled not only on page loading but also manually between transition from a screen to another. To ease the breadcrumb management, breadcrumb is now a widget that will reload a js template, mainly depending of the current page id. The js form initialize or update this widget giving this new page id. On breadcrumb item click, the widget triggers a onclick caught by the form that calls the submit with the given target. This commit handles page transition for the breadcrumb. When going forward or backward (next or previous page), the breadcrumb activates, deactivates and links elements are reinitialized depending of the target page. LINKS Task ID: 2152223 PR #41453 Co-authored-by: Aurélien Warnon <awa@odoo.com>

robodoo added the seen 🙂 label Dec 6, 2019

C3POdoo added the RD research & development, internal work label Dec 6, 2019

dbeguin force-pushed the master-survey-ajax-dbe branch from 3047e2b to 762d82a Compare December 6, 2019 12:20

dbeguin force-pushed the master-survey-ajax-dbe branch from 762d82a to 6f65170 Compare December 9, 2019 09:12

dbeguin force-pushed the master-survey-ajax-dbe branch from 6f65170 to 2bd2ba7 Compare December 9, 2019 10:09

dbeguin force-pushed the master-survey-ajax-dbe branch from 2bd2ba7 to bf24627 Compare December 9, 2019 11:13

dbeguin force-pushed the master-survey-ajax-dbe branch from bf24627 to 3678b7e Compare December 9, 2019 11:33

dbeguin force-pushed the master-survey-ajax-dbe branch from 3678b7e to e38bb71 Compare December 9, 2019 14:34

robodoo added the CI 🤖 Robodoo has seen passing statuses label Dec 9, 2019

awa-odoo pushed a commit to odoo-dev/odoo that referenced this pull request Jan 10, 2020

[REF] survey: rename skip state in in_progress

8bd9922

This commit renames state 'skip' into 'in_progress' as 'skip' does not really mean anything. Task ID: 2152223 PR odoo#41453

robodoo pushed a commit that referenced this pull request Jan 13, 2020

[REF] survey: rename skip state in in_progress

f325813

This commit renames state 'skip' into 'in_progress' as 'skip' does not really mean anything. Task ID: 2152223 PR #41453

xmo-odoo removed the seen 🙂 label Mar 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MERGE][REF] survey : refactor survey page transition in ajax #41453

[MERGE][REF] survey : refactor survey page transition in ajax #41453

dbeguin commented Dec 6, 2019 •

edited

[MERGE][REF] survey : refactor survey page transition in ajax #41453

Are you sure you want to change the base?

[MERGE][REF] survey : refactor survey page transition in ajax #41453

Conversation

dbeguin commented Dec 6, 2019 • edited

Purpose

Specifications

dbeguin commented Dec 6, 2019 •

edited