pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website_slides: improve quiz and its success modal layout and design

Browse Source 
Commit linked to task ID 1941250 and PR #31977
This commit is contained in:
sri-odoo
2019-03-21 11:39:23 +00:00
committed by Thibault Delavallée
parent de139a8508
commit 7d27a6d6bf
6 changed files with 112 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_slides/static/src/img/quiz_modal_success.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

addons/website_slides/static/src/js/slides_course_quiz.js
+5 -5
View File
@@ -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));
addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
-34
View File
@@ -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;
}
}
}
}
}
}
addons/website_slides/static/src/scss/website_slides.scss
+27 -19
View File
@@ -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
// **************************************************
addons/website_slides/static/src/xml/slide_quiz.xml
+69 -46
View File
@@ -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">&amp;times;</span>
<span>&amp;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 &amp;&amp; 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 &amp;&amp; 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">&#215;</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>
addons/website_slides/views/website_slides_templates_lesson.xml
+10 -10
View File
@@ -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">&amp;times;</span>
</button>
</div>
<div class="o_wslides_js_lesson_quiz_validation"/>
<div class="o_wslides_js_lesson_quiz_validation pt-3"/>
</div>
</template>