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 00000000000..7bb62ea18a9 --- /dev/null +++ b/addons/website_slides/static/src/img/quiz_modal_success.svg @@ -0,0 +1 @@ + \ 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 9e2b9b7ece5..25166db9fc7 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 a4ce29f60d3..301887e87be 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 00296d9dea5..d5cd04a9b47 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; + .list-group-item { + font-size: 1rem; + + input:checked + i.fa-circle { + color: $primary !important; + } } - .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; - } - } + &.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 c8b4bc66186..bb4316c3975 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 @@ -
-
+
+
+
+
+
+
-
+ 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"> +
.
-
    +
    -
  • + 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' }"> -
    • +     -
+
-