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

[IMP] website_slides: improve quiz ux/ui

Browse Source 
This commit improves ux/ui by adding the slide
description on top of a quiz and offering links to additional
resources if the user gets questions wrong.

task-3246366

closes odoo/odoo#117530

X-original-commit: a551f956f05bf7b6782e04a95351bf2d0a0a6610
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
This commit is contained in:
Andro Gvivradze
2023-04-04 13:35:32 +02:00
committed by Thibault Delavallée
parent 0420239770
commit 46be6f583b
4 changed files with 49 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_slides/controllers/main.py
+16 -7
View File
@@ -137,17 +137,26 @@ class WebsiteSlides(WebsiteProfile):
def _get_slide_quiz_data(self, slide):
is_designer = request.env.user.has_group('website.group_website_designer')
slides_resources = slide.slide_resource_ids if slide.channel_id.is_member else []
values = {
'slide_description': slide.description,
'slide_questions': [{
'answer_ids': [{
'comment': answer.comment if is_designer else None,
'id': answer.id,
'is_correct': answer.is_correct if slide.user_has_completed or is_designer else None,
'text_value': answer.text_value,
} for answer in question.sudo().answer_ids],
'id': question.id,
'question': question.question,
'answer_ids': [{
'id': answer.id,
'text_value': answer.text_value,
'is_correct': answer.is_correct if slide.user_has_completed or is_designer else None,
'comment': answer.comment if is_designer else None
} for answer in question.sudo().answer_ids],
} for question in slide.question_ids]
} for question in slide.question_ids],
'slide_resource_ids': [{
'display_name' : resource.display_name,
'download_url': resource.download_url,
'id': resource.id,
'link': resource.link,
'resource_type': resource.resource_type,
} for resource in slides_resources]
}
if 'slide_answer_quiz' in request.session:
slide_answer_quiz = json.loads(request.session['slide_answer_quiz'])
addons/website_slides/static/src/js/slides_course_quiz.js
+13 -1
View File
@@ -196,11 +196,13 @@
}).then(function (quiz_data) {
self.slide.sessionAnswers = quiz_data.session_answers;
self.quiz = {
description_safe: Markup(quiz_data.slide_description),
questions: quiz_data.slide_questions || [],
questionsCount: quiz_data.slide_questions.length,
quizAttemptsCount: quiz_data.quiz_attempts_count || 0,
quizKarmaGain: quiz_data.quiz_karma_gain || 0,
quizKarmaWon: quiz_data.quiz_karma_won || 0,
slideResources: quiz_data.slide_resource_ids || [],
};
});
},
@@ -298,7 +300,16 @@
QWeb.render('slide.slide.quiz.validation', {'widget': this})
);
},
/*
* Toggle additional resource info box
*
* @private
* @param {Boolean} show - Whether show or hide the information
*/
_toggleAdditionalResourceInfo: function(show) {
const resourceInfo = document.getElementsByClassName('o_wslides_js_lesson_quiz_resource_info')[0];
resourceInfo && (show ? resourceInfo.classList.remove('d-none') : resourceInfo.classList.add('d-none'));
},
/**
* Renders the button to join a course.
* If the user is logged in, the course is public, and the user has previously tried to
@@ -382,6 +393,7 @@
this._hideEditOptions();
this._renderAnswersHighlightingAndComments();
this._renderValidationInfo();
this._toggleAdditionalResourceInfo(!completed);
},
/**
addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
+7
View File
@@ -108,6 +108,13 @@
}
}
.o_wslides_js_lesson_quiz_resource_info{
ul {
margin-bottom: 0;
padding-left: 20px;
}
}
.o_wslides_js_lesson_quiz_question {
.list-group-item {
font-size: 1rem;
addons/website_slides/static/src/xml/slide_quiz.xml
+13 -3
View File
@@ -3,9 +3,9 @@
<t t-name="slide.slide.quiz">
<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.quiz.description_safe" t-esc="widget.quiz.description_safe" class="mt-3" />
<div t-foreach="widget.quiz.questions" t-as="question"
t-attf-class="o_wslides_js_lesson_quiz_question mt-3 mb-4 #{widget.slide.completed ? 'completed-disabled' : ''}"
t-attf-class="o_wslides_js_lesson_quiz_question mt-5 mb-4 #{widget.slide.completed ? '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"/>
@@ -34,7 +34,7 @@
</div>
</div>
</div>
<div t-if="!widget.slide.completed" class="o_wslides_js_lesson_quiz_validation border-top pt-3"/>
<div t-if="!widget.slide.completed" class="o_wslides_js_lesson_quiz_validation pt-3"/>
<div t-else="" class="row">
<div class="o_wslides_js_lesson_quiz_validation col py-2 bg-100 mb-2 border-bottom"/>
</div>
@@ -119,6 +119,16 @@
</button>
</div>
</div>
<div class="mt-4 o_wslides_js_lesson_quiz_resource_info d-none">
<div t-if="widget.quiz.slideResources?.length > 0">
<span>Need help? Review related content:</span>
<ul>
<li t-foreach="widget.quiz.slideResources" t-as="resource">
<a t-att-href="resource.link or resource.download_url" t-esc="resource.display_name"/>
</li>
</ul>
</div>
</div>
</div>
</t>