diff --git a/addons/website_slides/static/src/img/quiz_modal_success.svg b/addons/website_slides/static/src/img/quiz_modal_success.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7bb62ea18a9ff4d02024a34f4cf960cde9d96c24
--- /dev/null
+++ b/addons/website_slides/static/src/img/quiz_modal_success.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="377" height="503"><defs><filter id="a" width="218.6%" height="210.3%" x="-59.3%" y="-55.1%" filterUnits="objectBoundingBox"><feOffset in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="110"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.126174607 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g fill="none" fill-rule="evenodd" filter="url(#a)" transform="scale(-1 1) rotate(10 -170.596 -2124.816)"><path fill="#DD9E63" d="M200.228 136.773l-.97 5.966 3.6 8.464-13.154-2.359c-2.309 4.07 1.061 8.372 10.107 12.904 3.324 1.295 5.078 1.156 5.262-.416l2.078 4.44.415.415 18.523 10.223 9.554 2.914 30.74 8.88-5.507-18.27c-3.046.832-8.4 1.063-16.062.693l14.124-7.353-.696.752.835-.613 1.246-.833 4.016-2.914-23.955-42.317-9.14-9.296-4.292-3.053-30.602 24.42 3.878 7.353z"/><path fill="#17252E" d="M342.943 366.508l-.139-.14c0 .092-.046.186-.14.279l-.976-.14h-.976l.28-.278L333 364c7.53 15.138 12.41 28.836 14.641 41.096 3.08 16.986 4.64 32.406 4.683 46.262l12.708-2.261-6.75-38.29-15.339-43.882v-.417zM108 100.758c-.647-.648-1.551-1.84-2.105-2.394-15.432-15.187-39.272-33.43-71.52-54.727V31.969l-3.189-15.278L16.494.022C9.287-.533 3.788 9.374 0 29.746c8.87 9.816 16.217 17.317 22.038 22.502 11.459 25.743 25.202 49.275 41.004 69.368 17.28 9.26 32.644 3.938 44.01-16.803"/><path fill="#321714" d="M116 148l14-1.82-5.142-12.18c.094 5.133-2.857 9.8-8.858 14"/><path fill="#5E2A1C" d="M344 289L363 301 357.396 289.061z"/><path fill="#17252E" d="M322.087 175.43a298.543 298.543 0 0 0-9.12-14.039 5.557 5.557 0 0 0-.828-1.391c.184 1.112.46 2.179.829 3.198a223.398 223.398 0 0 1 1.935 10.842c1.013 7.875 1.243 15.567.69 23.073-.276 3.15-.69 6.301-1.244 9.452a2.631 2.631 0 0 0-.138.834V208.094c9.12 40.495 8.382 70.982-2.211 91.462 4.422-2.688 8.291-5.607 11.606-8.757 9.95-8.897 16.489 15.66 19.62 73.67 1.197-3.8 2.212-7.553 3.04-11.26.46.092.967.231 1.52.417 23.303 7.91 44.755 13.517 64.357 16.82l-8.682-49.268c-12.076-6.763-24.923-13.368-38.542-19.815l-19.481-12.093 12.02.416 38.134-2.78 19.758 5.56c6.448-6.486 9.533-12.973 9.257-19.459l-13.954-12.232-11.883 8.201c-14.554-8.248-26.943-14.734-37.167-19.46-5.16-2.317-9.764-4.216-13.817-5.699a46.205 46.205 0 0 0-5.25-1.529c1.105-13.437-1.98-28.494-9.258-45.175-3.04-6.95-6.77-14.177-11.191-21.684z"/><path fill="#8C633C" d="M244.453 170.75c7.31.398 13.64.315 16.547-.578l-1.538-7.023-.793.595.661-.744-14.877 7.75z"/><path fill="#A92121" d="M264.154 160.259l-5.154 3.75c10.533-.759 21.498-.795 29.741.725l2.748.57c7.42 1.615 14.42 4.35 19.825 7.864.915-3.23 1.726-7.252 2.275-10.862-.51-.818-1.121-1.772-1.49-2.846l-3.573-.854c-4.763-1.236-10.442-1.758-17.037-1.568h-2.748c-7.053.474-15.52 1.321-24.587 3.22zm-60.15 11.836l7.495 9.23 1.103.28c5.707 1.302 11.713 3.23 17.788 5.277 2.669.836 5.337 1.768 8.007 2.791 1.749.745 3.506 1.512 5.347 2.257 6.074 2.605 12.212 5.3 18.563 8.558L267 203l-31.093-24.578-9.525-2.931-18.086-9.073-.414-.418-7.606.512-.276-.14v.698l4.004 4.746v.279zM156.477 221c-14.296 20.087-29.667 62.398-46.114 126.935-.934 5.486-1.854 10.52-3.162 15.077 4.111-12.926 13.295-30.181 27.404-51.756 14.577-23.62 22.526-52.454 24.395-86.49L156.477 221z"/><path fill="#6E1414" d="M360.542 411.783c11.138-9.89 24.829-10.215 41.072-.978 6.243 3.059 12.472 4.846 18.745 6.193l-7.12-40.378c-15.604-2.143-39.017-5.35-70.239-9.62l15.315 44.084 2.227.7zm-101.268-247.55l1.587 6.787 5.177 16.603-30.038-8.49 30.464 23.778c5.042 2.546 10.172 5.998 15.4 9.089 2.428-1.727 5.329-4.394 7.57-6.304a63.564 63.564 0 0 1 2.801-2.319c2.522-2.362 4.762-4.727 6.723-7.091 6.07-7.182 10.52-15.695 13.042-24.15-5.51-3.365-12.046-5.82-19.61-7.365-.933-.182-1.867-.363-2.8-.546-8.404-1.454-17.991-1.486-28.729-.76l-1.587.767zm-100.6 61.223c-1.857 33.97-10.02 62.742-24.495 86.317-14.01 21.533-23.056 38.75-27.138 51.65v.278c-.093.093-.186.28-.28.558a2.65 2.65 0 0 0-.138.834c-.185.28-.279.604-.279.975v.14c-3.99 13.922-9.834 22.832-17.535 26.73L87 395.863c6.587-.28 13.035-.743 19.344-1.394 17.722-1.855 34.7-5.475 50.938-10.859 2.876-.741 5.66-1.392 8.35-1.948 2.876-.465 5.614-.928 8.21-1.393 11.32-1.763 20.831-1.95 28.532-.557v.975l.278-.975c1.114.28 2.273.557 3.479.836 8.072 2.134 13.731 6.31 16.98 12.53 1.669 3.248 4.174 5.801 7.515 7.657 2.319 1.299 5.01 2.367 8.072 3.202 1.113.186 2.273.418 3.478.696.558 0 1.207.046 1.95.139.649.093 1.391.232 2.225.417 4.547.28 9.79.14 15.727-.417h.836c11.226-1.206 20.226-.65 27 1.672.741.185 1.437.37 2.086.556l-13.639-25.617c-29.844-51.171-45.756-78.088-47.735-80.748-12.805-16.985-31.732-38.054-56.783-63.207-2.69-2.598-5.428-5.243-8.211-7.935a249.14 249.14 0 0 0-8.628-8.493l1.67 4.456z"/><path fill="#1A1B19" d="M201.018 137.549L197.107 130.186 227.973 105.73 232.302 108.787 233 107.537 221.827 96.838 207.861 86 183 120.597 188.168 127.962 183.42 136.437 190.403 149.638 203.671 152 200.04 143.523 201.018 137.549"/><path fill="#BE242B" d="M88.809 392.938c-1.866 1.273-4.675 2.335-6.809 3.062 1.422-.091 3.578-.137 5-.137"/><path fill="#2A4454" d="M291.425 408.806c6.33 16.017 16.288 32.033 29.255 48.05l32.599-5.735c-.067-13.728-1.613-28.99-4.637-45.788-2.208-12.226-7.042-25.886-14.5-40.983-43.822-26.488-63.385-20.792-56.941 17.088L290.734 407c.277.648.506 1.25.691 1.806zm-125.91-267.711c-12.163-6.753-25.257-11.886-39.278-15.4-2.508-6.937-8.59-15.168-18.247-24.695a64.781 64.781 0 0 0-1.81 3.607c-11.422 20.717-25.897 26.102-43.262 16.852 7.428 9.342 15.45 18.48 23.9 26.71a179.683 179.683 0 0 0 8.775 8.186 377.875 377.875 0 0 0 9.333 7.908l1.253 1.387c18.387 15.17 37.37 29.475 58.543 39.279a218.728 218.728 0 0 0 8.218 3.469c18.015 7.492 37.752 11.267 57.624 14.967l8.079 1.388c1.764.368 3.575.647 5.432.831 1.021.185 1.997.324 2.925.416l-34.266-44.534-1.113-.277-7.522-8.88v-.277l-4.04-4.717v-.693c-8.263-7.954-17.039-14.845-26.325-20.671a105.437 105.437 0 0 0-8.218-4.856z"/><path fill="#192A35" d="M130 146.18L116 148c6-4.2 8.952-8.867 8.858-14L130 146.18"/><path fill="#36576B" d="M156.23 221.4c2.962 2.785 6.15 5.811 8.926 8.689 2.778 2.691 5.509 5.337 8.193 7.935 24.997 25.157 43.882 46.229 56.658 63.217a270.764 270.764 0 0 1 8.054 11.417c.864 1.361 14.056 24.475 39.576 69.342-6.48-37.966 12.313-43.675 56.38-17.127l7.083 2.228.693.279.973.139c.093-.093.138-.187.138-.278l.14.139v.417l70.341 9.637-1.334-7.557c-19.514-3.647-40.868-9.586-64.172-17.47a12.468 12.468 0 0 0-1.527-.417 136.644 136.644 0 0 1-3.055 11.278c-3.148-58.11-9.002-82.357-19-73.446-3.333 3.157-7.221 6.08-11.666 8.773 10.647-20.515 11.388-51.055 2.223-91.621v-.14-.556c0-.278.045-.557.138-.835.557-3.157.973-6.313 1.25-9.469.556-7.52.325-15.224-.693-23.113-.557-3.621-1.219-6.936-1.96-10.555-.555 3.527-1.281 6.563-2.206 9.719-2.5 8.633-6.759 16.616-12.776 23.95-1.945 2.413-4.166 4.827-6.666 7.24a63.466 63.466 0 0 0-2.777 2.367 101.299 101.299 0 0 1-6.943 5.57 260.687 260.687 0 0 0-15.276-8.633c-1.573-.836-3.148-1.67-4.721-2.507-6.388-3.249-12.637-6.173-18.747-8.771a323.35 323.35 0 0 1-5.416-2.229 137.827 137.827 0 0 0-8.054-2.784c-6.11-2.042-12.035-3.714-17.775-5.013l34.161 44.696a36.576 36.576 0 0 1-2.916-.418 50.824 50.824 0 0 1-5.416-.834c-2.685-.465-5.37-.93-8.054-1.393-19.812-3.714-38.697-9.329-56.658-16.848a217.273 217.273 0 0 1-8.193-3.482c-21.107-9.84-40.825-22.37-59.156-37.595l50.23 56.06z"/></g></svg>
\ No newline at end of file
diff --git a/addons/website_slides/static/src/js/slides_course_quiz.js b/addons/website_slides/static/src/js/slides_course_quiz.js
index 9e2b9b7ece50081cf4ea767fc9b9236abc96add2..25166db9fc7c94b0020a9d23b27fd4444452e6c2 100644
--- a/addons/website_slides/static/src/js/slides_course_quiz.js
+++ b/addons/website_slides/static/src/js/slides_course_quiz.js
@@ -127,22 +127,22 @@ odoo.define('website_slides.quiz', function (require) {
*/
_renderAnswersHighlighting: function () {
var self = this;
- this.$('li.o_wslides_quiz_answer').each(function () {
+ this.$('a.o_wslides_quiz_answer').each(function () {
var $answer = $(this);
var answerId = $answer.data('answerId');
if (_.contains(self.quiz.goodAnswers, answerId)) {
- $answer.removeClass('border-danger').addClass('border border-success');
+ $answer.removeClass('list-group-item-danger').addClass('list-group-item-success');
$answer.find('i.fa').addClass('d-none');
$answer.find('i.fa-check-circle').removeClass('d-none');
}
else if (_.contains(self.quiz.badAnswers, answerId)) {
- $answer.removeClass('border-success').addClass('border border-danger');
+ $answer.removeClass('list-group-item-success').addClass('list-group-item-danger');
$answer.find('i.fa').addClass('d-none');
$answer.find('i.fa-times-circle').removeClass('d-none');
$answer.find('label input').prop('checked', false);
}
else {
- $answer.removeClass('border border-danger border-success');
+ $answer.removeClass('list-group-item-danger list-group-item-success');
$answer.find('i.fa').addClass('d-none');
$answer.find('i.fa-circle').removeClass('d-none');
}
@@ -295,7 +295,7 @@ odoo.define('website_slides.quiz', function (require) {
var self = this;
var slide = ev.data.slide;
var completion = ev.data.completion;
- this.$('#o_wslides_lesson_aside_slide_check_' + slide.id).addClass('text-success fa-check-circle').removeClass('text-600 fa-circle-o');
+ this.$('#o_wslides_lesson_aside_slide_check_' + slide.id).addClass('text-success fa-check').removeClass('text-600 fa-circle-o');
// need to use global selector as progress bar is ouside this animation widget scope
$('.o_wslides_lesson_header .progress-bar').css('width', completion + "%");
$('.o_wslides_lesson_header .progress span').text(_.str.sprintf("%s %%", completion));
diff --git a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
index a4ce29f60d3e7f97ad97ae8c760453215512009e..301887e87be3131ea5c7b2c829221009f67e18ca 100644
--- a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
+++ b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
@@ -97,38 +97,4 @@ $o-wslides-tabs-height: 36px;
}
}
}
-
- // quizz
- .o_wslides_fs_quiz_container {
- background-color: $gray-200;
- height: 100%;
- overflow: scroll;
- overflow-x: hidden;
- width: 100%;
-
- .o_wslides_js_lesson_quiz_question {
- li {
- font-size: 1.2rem;
- }
-
- .o_wslides_quiz_answer {
-
- &:hover {
- cursor: pointer;
- }
-
- label {
- font-size: 1.4rem;
-
- i.fa-circle {
- }
-
- input:checked + i.fa-circle {
- color: $primary !important;
- overflow: hidden;
- }
- }
- }
- }
- }
}
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 00296d9dea52cb670fab1cecebe8ae7b09b7072a..d5cd04a9b4722b620127f05da4b314e818c8ea01 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -57,27 +57,17 @@ $o-wslides-fs-side-width: 300px;
}
.o_wslides_js_lesson_quiz_question {
- li {
- font-size: 1.2rem;
- }
-
- .o_wslides_quiz_answer {
+ .list-group-item {
+ font-size: 1rem;
- &:hover {
- cursor: pointer;
+ input:checked + i.fa-circle {
+ color: $primary !important;
}
+ }
- label {
- font-size: 1.4rem;
-
- i.fa-circle {
- }
-
- input:checked + i.fa-circle {
- color: $primary !important;
- overflow: hidden;
- }
- }
+ &.disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
}
}
@@ -312,6 +302,24 @@ $o-wslides-fs-side-width: 300px;
cursor: pointer;
}
+.o_wslides_quiz_modal {
+ @include media-breakpoint-up (sm) {
+ .modal-body {
+ overflow: visible!important;
+ }
+
+ .modal-content {
+ height: 461px;
+
+ .o_wslides_quiz_modal_hero {
+ margin-left: -30px;
+ position: absolute;
+ margin-top: -45px;
+ }
+ }
+ }
+}
+
// Embed PDFViewer
// **************************************************
diff --git a/addons/website_slides/static/src/xml/slide_quiz.xml b/addons/website_slides/static/src/xml/slide_quiz.xml
index c8b4bc661863bf0726d658e9a10d1823d620e266..bb4316c3975ec960a63ce03c6cf7246ad253e404 100644
--- a/addons/website_slides/static/src/xml/slide_quiz.xml
+++ b/addons/website_slides/static/src/xml/slide_quiz.xml
@@ -1,83 +1,106 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="slide.slide.quiz">
- <div class="o_wslides_fs_quiz_container h-100 w-100">
- <div class="mx-5">
+ <div class="o_wslides_fs_quiz_container o_wslides_wrap h-100 w-100 overflow-auto pb-5">
+ <div class="container">
+ <div t-if="widget.slide.completed" class="row">
+ <div class="o_wslides_js_lesson_quiz_validation col py-2 bg-100 mb-2 border-bottom"/>
+ </div>
+
<div t-foreach="widget.quiz.questions" t-as="question"
- class="o_wslides_js_lesson_quiz_question mt-3" t-att-data-question-id="question.id" t-att-data-title="question.question">
- <div class="h3">
+ t-attf-class="o_wslides_js_lesson_quiz_question my-3 #{widget.slide.completed ? 'disabled' : ''}"
+ t-att-data-question-id="question.id" t-att-data-title="question.question">
+ <div class="h4">
<small class="text-muted"><span t-esc="question_index+1"/>. </small> <span t-esc="question.question"/>
</div>
- <ul class="bg-white list-unstyled">
+ <div class="list-group">
<t t-foreach="question.answers" t-as="answer">
- <li t-att-data-answer-id="answer.id"
+ <a t-att-data-answer-id="answer.id" href="#"
t-att-data-text="answer.text_value"
- class="o_wslides_quiz_answer pt-2 pb-2 border-bottom rounded d-flex align-items-center">
+ t-attf-class="o_wslides_quiz_answer list-group-item d-flex align-items-center #{widget.slide.completed ? 'disabled bg-transparent' : 'list-group-item-action' }">
- <label class="mb-0 d-flex align-items-center justify-content-center mr-3 ml-3">
+ <label class="my-0 d-flex align-items-center justify-content-center mr-2">
<input type="radio"
t-att-name="question.id"
t-att-value="answer.id"
class="d-none"/>
- <i class="fa fa-circle text-muted"></i>
+ <i class="fa fa-circle text-400"></i>
<i class="fa fa-times-circle text-danger d-none"></i>
<i class="fa fa-check-circle text-success d-none"></i>
</label>
<span t-esc="answer.text_value"/>
- </li>
+ </a>
</t>
- </ul>
+ </div>
</div>
- <div class="alert alert-danger o_wslides_js_lesson_quiz_error d-none" role="alert">
+ <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 aria-hidden="true">&times;</span>
+ <span>&times;</span>
</button>
</div>
- <div class="o_wslides_js_lesson_quiz_validation"/>
+ <div t-if="!widget.slide.completed" class="o_wslides_js_lesson_quiz_validation border-top pt-3"/>
</div>
</div>
</t>
<t t-name="slide.slide.quiz.validation">
- <t t-if="widget.readonly">
- <button class="btn btn-primary" role="button" title="Join" aria-label="Join" disabled="disabled">Join course to take quiz</button>
- <span role="button" title="Succeed and gain karma" aria-label="Succeed and gain karma"
- class="badge badge-pill badge-warning text-white font-weight-bold ml-3 px-2 py-1">+ <t t-esc="widget.quiz.quizKarmaGain"/> XP</span>
- </t>
- <t t-else="">
- <button t-if="! widget.slide.completed" role="button" title="Check answers" aria-label="Check answers"
- class="btn btn-primary text-uppercase font-weight-bold o_wslides_js_lesson_quiz_submit">Check your answers</button>
- <button t-if="widget.slide.completed" role="button" title="Quiz done" aria-label="Quiz done" disabled="disabled"
- class="btn btn-primary text-uppercase font-weight-bold">Done !</button>
- <span t-if="! widget.slide.completed" role="button" title="Succeed and gain karma" aria-label="Succeed and gain karma"
- class="badge badge-pill badge-warning text-white font-weight-bold ml-3 px-2 py-1">+ <t t-esc="widget.quiz.quizKarmaGain"/> XP</span>
- <span t-if="widget.slide.completed" role="button" title="Gained karma" aria-label="Gained karma"
- class="badge badge-pill badge-success text-white font-weight-bold ml-3 px-2 py-1">+ <t t-esc="widget.quiz.quizKarmaWon"/> XP</span>
- <button t-if="widget.slide.completed && widget.slide.hasNext"
- class="btn btn-primary ml-3 o_wslides_quiz_continue">Continue</button>
- </t>
+ <div t-if="widget.readonly" class="alert alert-info">
+ <b>Join course to take quiz</b>
+ <span class="my-0 h4" style="line-height: 1">
+ <span title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge badge-pill badge-warning text-white font-weight-bold ml-3 px-2 py-1">
+ + <t t-esc="widget.quiz.quizKarmaGain"/> XP
+ </span>
+ </span>
+ </div>
+ <div t-else="" class="d-flex align-items-center justify-content-between">
+ <div t-att-class="'d-flex align-items-center' + (widget.slide.completed ? ' alert alert-success my-0 py-1 px-3' : '')">
+ <button t-if="! widget.slide.completed" role="button" title="Check answers" aria-label="Check answers"
+ class="btn btn-primary text-uppercase font-weight-bold o_wslides_js_lesson_quiz_submit">Check your answers</button>
+ <b t-else="" class="my-0 h5">Done !</b>
+ <span class="my-0 h5" style="line-height: 1">
+ <span role="button" title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge badge-pill badge-warning text-white font-weight-bold ml-3 px-2">
+ + <t t-esc="widget.quiz.quizKarmaGain"/> XP
+ </span>
+ </span>
+ </div>
+ <button t-if="widget.slide.completed && widget.slide.hasNext" class="btn btn-primary o_wslides_quiz_continue">
+ Continue <i class="fa fa-chevron-right ml-1"/>
+ </button>
+ </div>
</t>
<t t-name="slide.slide.quiz.finish">
- <div class="modal o_wslides_quiz_modal" tabindex="-1" role="dialog" id="slides_quiz_modal">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
+ <div class="modal o_wslides_quiz_modal pt-5" tabindex="-1" role="dialog" id="slides_quiz_modal">
+ <div class="modal-backdrop show bg-white" style="z-index:0"/>
+ <div class="modal-dialog mt-5" role="document">
+ <div class="modal-content shadow-lg">
<div class="modal-body d-flex p-0">
- <div class="w-50 o_wslides_gradient"/>
- <div class="w-50 d-flex flex-column p-3">
- <h1>Amazing!</h1>
- <div class="pb-3">
- <span class="pb-2">You gained <span class="badge badge-pill badge-success text-white font-weight-bold"><t t-esc="widget.quiz.quizKarmaWon"/> XP !</span> !</span>
- <div class="progress">
- <div class="progress-bar" role="progressbar" t-att-aria-valuenow="widget.quiz.rankProgress.progress" aria-valuemin="0" aria-valuemax="100"
- t-attf-style="heigth: 8px; width: #{widget.quiz.rankProgress.progress}%"/>
+ <button type="button" class="close position-absolute" data-dismiss="modal" aria-label="Close" style="right: 5px">×</button>
+ <div class="o_wslides_gradient rounded-left d-none d-md-flex flex-shrink-0" style="width: 42%">
+ <img class="o_wslides_quiz_modal_hero" src="/website_slides/static/src/img/quiz_modal_success.svg" alt=""/>
+ </div>
+ <div class="d-flex flex-column flex-grow-1 justify-content-between pl-md-5 p-3 overflow-auto">
+ <div>
+ <h1 class="mt-3 display-4 font-weight-bold">Amazing!</h1>
+ <div class="pb-3">
+ <h4 class="pb-2 d-flex">You gained <span class="badge badge-pill badge-success text-white font-weight-bold ml-2 mr-1"><t t-esc="widget.quiz.quizKarmaWon"/> XP</span> !</h4>
+ <div class="progress" style="height: 8px">
+ <div class="progress-bar" role="progressbar" t-att-aria-valuenow="widget.quiz.rankProgress.progress" aria-valuemin="0" aria-valuemax="100"
+ t-attf-style="width: #{widget.quiz.rankProgress.progress}%"/>
+ </div>
+ <small t-if="widget.quiz.rankProgress.lowerBound" class="float-left text-primary font-weight-bold"><t t-esc="widget.quiz.rankProgress.lowerBound"/></small>
+ <small t-if="widget.quiz.rankProgress.upperBound" class="float-right font-weight-bold"><t t-esc="widget.quiz.rankProgress.upperBound"/></small>
</div>
- <small t-if="widget.quiz.rankProgress.lowerBound" class="float-left"><t t-esc="widget.quiz.rankProgress.lowerBound"/></small>
- <small t-if="widget.quiz.rankProgress.upperBound" class="float-right"><t t-esc="widget.quiz.rankProgress.upperBound"/></small>
+ <div class="pb-3" t-raw="widget.quiz.rankProgress.motivational"/>
</div>
- <div class="pb-3" t-raw="widget.quiz.rankProgress.motivational"/>
- <button t-if="widget.slide.hasNext" type="button" class="btn btn-light o_wslides_quiz_btn align-self-end">Next <i class="fa fa-chevron-right"/></button>
+ <t t-if="widget.slide.hasNext">
+ <button type="button" class="btn btn-light border o_wslides_quiz_btn align-self-end">Next <i class="fa fa-chevron-right"/></button>
+ </t>
+ <t t-else="">
+ <!-- TODO: end course if no slide left -->
+ <a type="button" class="btn btn-light border align-self-end">End course</a>
+ </t>
</div>
</div>
</div>
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index 5db8513d4eb615461f72cd7a1439387a552cd35b..88e32fb27ae09dba188710b0ddded2696b847374 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson.xml
@@ -388,35 +388,35 @@
t-att-data-next-slide-url="'/slides/slide/%s' % (slug(next_slide)) if next_slide else None">
<div t-foreach="slide.question_ids" t-as="question"
class="o_wslides_js_lesson_quiz_question mt-3" t-att-data-question-id="question.id" t-att-data-title="question.question">
- <div class="h3">
+ <div class="h4">
<small class="text-muted"><span t-esc="question_index+1"/>. </small> <span t-esc="question.question"/>
</div>
- <ul class="bg-white list-unstyled">
+ <div class="list-group">
<t t-foreach="question.answer_ids" t-as="answer">
- <li t-att-data-answer-id="answer.id"
+ <a t-att-data-answer-id="answer.id" href="#"
t-att-data-text="answer.text_value"
- class="o_wslides_quiz_answer pt-2 pb-2 border-bottom rounded d-flex align-items-center">
- <label class="mb-0 d-flex align-items-center justify-content-center mr-3 ml-3">
+ class="o_wslides_quiz_answer list-group-item list-group-item-action d-flex align-items-center">
+ <label class="my-0 d-flex align-items-center justify-content-center mr-2">
<input type="radio"
t-att-name="question.id"
t-att-value="answer.id"
class="d-none"/>
- <i class="fa fa-circle text-muted"></i>
+ <i class="fa fa-circle text-400"/>
<i class="fa fa-times-circle text-danger d-none"></i>
<i class="fa fa-check-circle text-success d-none"></i>
</label>
<span t-esc="answer.text_value"/>
- </li>
+ </a>
</t>
- </ul>
+ </div>
</div>
- <div class="alert alert-danger o_wslides_js_lesson_quiz_error d-none" role="alert">
+ <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 aria-hidden="true">&times;</span>
</button>
</div>
- <div class="o_wslides_js_lesson_quiz_validation"/>
+ <div class="o_wslides_js_lesson_quiz_validation pt-3"/>
</div>
</template>