[IMP] website_slides: allow to create and update quizzes directly in frontend

Purpose is to ease designing your courses by allowing to create and update
slide quiz directly in frontend, within the slide display.

With this commit you are able to

  * add a quiz to a slide or add a question to an existing quiz;
  * edit an existing question from a quiz:

   * change the title of the Question;
   * add, remove or update answers;
   * change the right answer;
   * delete an existing question;
   * reorder the questions from a quiz;
   * reset the quiz for the current user if he is a website designer, allowing
     to test the quiz and its answers;

New frontend widgets are introduced allowing to manipulate quiz. Slide page
now supports a readonly / taking quiz mode and an edit mode for quizzes
used notably for website designers / course maintainers.

Task ID : 1999636
PR : #35326

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

2 files changed, 86 insertions, 10 deletions

diff --git a/addons/website_slides/static/src/xml/slide_quiz.xml b/addons/website_slides/static/src/xml/slide_quiz.xml
index abf284ac61b..a57a10c5adb 100644
--- a/addons/website_slides/static/src/xml/slide_quiz.xml
+++ b/addons/website_slides/static/src/xml/slide_quiz.xml
@@ -11,7 +11,7 @@
                         <small class="text-muted"><span t-esc="question_index+1"/>. </small> <span t-esc="question.question"/>
                     </div>
                     <div class="list-group">
-                        <t t-foreach="question.answers" t-as="answer">
+                        <t t-foreach="question.answer_ids" t-as="answer">
                             <a t-att-data-answer-id="answer.id" href="#"
                                 t-att-data-text="answer.text_value"
                                 t-attf-class="o_wslides_quiz_answer list-group-item d-flex align-items-center #{widget.readonly ? 'disabled bg-transparent' : 'list-group-item-action'} #{widget.slide.completed  &amp;&amp; answer.is_correct ? 'list-group-item-success' : '' }">
@@ -30,12 +30,6 @@
                         </t>
                     </div>
                 </div>
-                <div class="alert alert-danger o_wslides_js_lesson_quiz_error mt-2 d-none" role="alert">
-                    <span></span>
-                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-                        <span>&amp;times;</span>
-                    </button>
-                </div>
                 <div t-if="!widget.slide.completed" class="o_wslides_js_lesson_quiz_validation border-top pt-3"/>
                 <div t-else="" class="row">
                     <div class="o_wslides_js_lesson_quiz_validation col py-2 bg-100 mb-2 border-bottom"/>
@@ -77,9 +71,14 @@
                         </span>
                     </span>
                 </div>
-                <button t-if="widget.slide.completed &amp;&amp; widget.slide.hasNext" class="btn btn-primary o_wslides_quiz_continue">
-                    Continue <i class="fa fa-chevron-right ml-1"/>
-                </button>
+                <div class="ml-auto">
+                    <button t-if="widget.quiz.quizAttemptsCount > 0 &amp;&amp; widget.slide.channelCanUpload" class="btn btn-light border o_wslides_js_lesson_quiz_reset">
+                        Reset
+                    </button>
+                    <button t-if="widget.slide.completed &amp;&amp; widget.slide.hasNext" class="btn btn-primary o_wslides_quiz_continue">
+                        Continue <i class="fa fa-chevron-right ml-1"/>
+                    </button>
+                </div>
             </div>
         </div>
     </t>
diff --git a/addons/website_slides/static/src/xml/slide_quiz_create.xml b/addons/website_slides/static/src/xml/slide_quiz_create.xml
new file mode 100644
index 00000000000..0d19371e0b3
--- /dev/null
+++ b/addons/website_slides/static/src/xml/slide_quiz_create.xml
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="slide.quiz.question.input">
+        <div t-attf-class="o_wsildes_quiz_question_input mt-3 #{!widget.update ? 'col' : ''}" t-att-data-id="widget.question.id || ''">
+            <form class="mb-3">
+                <div class="o_wslides_quiz_question row align-items-center mr-0 mb-2">
+                    <small class="text-muted col-1 text-center">
+                        <span class="h4 o_wslides_quiz_question_sequence"><t t-esc="widget.sequence"/></span>.
+                    </small>
+                    <input type="text" name="question-name" class="form-control col-11" placeholder="Enter your question"
+                           t-att-value="widget.question.text" />
+                </div>
+                <div class="text-muted mb-2">
+                    <span>Select the correct answer below :</span>
+                </div>
+                <div class="list-group">
+                    <t t-if="widget.question.answers" >
+                        <t t-foreach="widget.question.answers" t-as="answer" >
+                            <t t-call="slide.quiz.answer.line"/>
+                        </t>
+                    </t>
+                    <t t-else="" >
+                        <t t-foreach="[1, 2, 3]">
+                            <t t-call="slide.quiz.answer.line" />
+                        </t>
+                    </t>
+                </div>
+            </form>
+            <t t-if="widget.update" t-call="slide.quiz.update.buttons"/>
+            <t t-else="" t-call="slide.quiz.create.buttons"/>
+        </div>
+    </t>
+
+    <t t-name="slide.quiz.answer.line">
+        <div class="o_wslides_js_quiz_answer row align-items-center mb-1" t-attf-data-answer-id="#{answer ? answer.id : ''}" >
+            <a class="o_wslides_js_quiz_is_correct col-1 text-center" title="Select one good answer">
+                <label class="my-0">
+                    <input t-if="answer and answer.is_correct" class="d-none" type="radio" name="radio" checked="true" />
+                    <input t-else="" class="d-none" type="radio" name="radio" />
+                    <i class="fa fa-lg fa-check-circle-o" />
+                </label>
+            </a>
+            <input type="text" class="form-control col-9" placeholder="Enter your answer" t-attf-value="#{answer ? answer.text_value : ''}"/>
+            <i class="o_wslides_js_quiz_add_answer fa fa-lg fa-plus-circle p-2" title="Add another answer" />
+            <i class="o_wslides_js_quiz_remove_answer fa fa-lg fa-trash-o p-2" title="Remove this answer" />
+        </div>
+    </t>
+
+    <t t-name="slide.quiz.create.buttons">
+        <div class="d-flex">
+            <a class="o_wslides_js_quiz_validate_question btn btn-primary text-white border" role="button">
+                <span class="d-none d-sm-inline-block">Save &amp; Close</span>
+            </a>
+            <a class="o_wslides_js_quiz_validate_question o_wslides_js_quiz_create_next btn btn-primary text-white border ml-2" role="button">
+                <span class="d-none d-sm-inline-block">Save &amp; New</span>
+            </a>
+            <a class="o_wslides_js_quiz_cancel_question btn btn-light border ml-2" role="button">
+                <span class="d-none d-sm-inline-block">Cancel</span>
+            </a>
+        </div>
+    </t>
+
+    <t t-name="slide.quiz.update.buttons">
+        <a class="o_wslides_js_quiz_validate_question o_wslides_js_quiz_update btn btn-primary text-white border" role="button">
+            <span class="d-none d-sm-inline-block">Update</span>
+        </a>
+        <a class="o_wslides_js_quiz_cancel_question btn btn-light border ml-2" role="button">
+            <span class="d-none d-sm-inline-block">Cancel</span>
+        </a>
+    </t>
+
+    <t t-name="slide.quiz.confirm.deletion">
+        <div>Are you sure you want to delete this question : <strong t-esc="widget.questionTitle"/> ?</div>
+    </t>
+
+</templates>