From c3a0f7bf566c9a40f45963a890ef10cd65ac978d Mon Sep 17 00:00:00 2001 From: dpalou Date: Thu, 20 Sep 2018 15:17:40 +0200 Subject: [PATCH 1/2] MOBILE-2610 lesson: Improve feedback in lesson questions --- src/addon/mod/lesson/pages/player/player.scss | 26 +++++++ src/addon/mod/lesson/providers/lesson.ts | 74 ++++++++++++++++--- 2 files changed, 90 insertions(+), 10 deletions(-) diff --git a/src/addon/mod/lesson/pages/player/player.scss b/src/addon/mod/lesson/pages/player/player.scss index 9e0535938..bb54330f9 100644 --- a/src/addon/mod/lesson/pages/player/player.scss +++ b/src/addon/mod/lesson/pages/player/player.scss @@ -20,4 +20,30 @@ ion-app.app-root page-addon-mod-lesson-player { flex-grow: 1; } } + + table { + width: 100%; + margin-top: 1.5rem; + + tr:nth-child(odd) { + background-color: $gray-lighter; + } + + tr:last-child td { + border-bottom: 0; + } + + td { + padding: 5px; + line-height: 1.5; + } + } + + .item-ios table td { + border-bottom: $hairlines-width solid $list-ios-border-color; + } + + .item-md table td { + border-bottom: 1px solid $list-md-border-color; + } } diff --git a/src/addon/mod/lesson/providers/lesson.ts b/src/addon/mod/lesson/providers/lesson.ts index c9f22c3e9..96578dad8 100644 --- a/src/addon/mod/lesson/providers/lesson.ts +++ b/src/addon/mod/lesson/providers/lesson.ts @@ -148,6 +148,11 @@ export class AddonModLessonProvider { static LESSON_PAGE_CLUSTER = 30; static LESSON_PAGE_ENDOFCLUSTER = 31; + /** + * Constant used as a delimiter when parsing multianswer questions + */ + static MULTIANSWER_DELIMITER = '@^#|'; + // Variables for database. static PASSWORD_TABLE = 'addon_mod_lesson_password'; protected tablesSchema = { @@ -180,6 +185,35 @@ export class AddonModLessonProvider { this.sitesProvider.createTableFromSchema(this.tablesSchema); } + /** + * Add an answer and its response to a feedback string (HTML). + * + * @param {string} feedback The current feedback. + * @param {string} answer Student answer. + * @param {number} answerFormat Answer format. + * @param {string} response Response. + * @param {string} className Class to add to the response. + * @return {string} New feedback. + */ + protected addAnswerAndResponseToFeedback(feedback: string, answer: string, answerFormat: number, response: string, + className: string): string { + + // Add a table row containing the answer. + feedback += '' + (answerFormat ? answer : this.textUtils.cleanTags(answer)) + + ''; + + // If the response exists, add a table row containing the response. If not, add en empty row. + if (response && response.trim()) { + feedback += '' + + this.translate.instant('addon.mod_lesson.response') + ':
' + + response + ''; + } else { + feedback += ''; + } + + return feedback; + } + /** * Add a message to a list of messages, following the format of the messages returned by WS. * @@ -601,7 +635,8 @@ export class AddonModLessonProvider { result.userresponse = studentAnswers.join(','); // Get the answers in a set order, the id order. - const responses = []; + const studentAswersArray = [], + responses = []; let nHits = 0, nCorrect = 0, correctAnswerId = 0, @@ -617,14 +652,13 @@ export class AddonModLessonProvider { const answerId = studentAnswers[i]; if (answerId == answer.id) { - result.studentanswer += '
' + answer.answer; - if (this.textUtils.cleanTags(answer.response).trim()) { - responses.push(answer.response); - } + studentAswersArray.push(answer.answer); + responses.push(answer.response); break; } } }); + result.studentanswer = studentAswersArray.join(AddonModLessonProvider.MULTIANSWER_DELIMITER); // Iterate over all the possible answers. answers.forEach((answer) => { @@ -664,12 +698,12 @@ export class AddonModLessonProvider { if (studentAnswers.length == nCorrect && nHits == nCorrect) { result.correctanswer = true; - result.response = responses.join('
'); + result.response = responses.join(AddonModLessonProvider.MULTIANSWER_DELIMITER); result.newpageid = correctPageId; result.answerid = correctAnswerId; } else { result.correctanswer = false; - result.response = responses.join('
'); + result.response = responses.join(AddonModLessonProvider.MULTIANSWER_DELIMITER); result.newpageid = wrongPageId; result.answerid = wrongAnswerId; } @@ -3143,11 +3177,31 @@ export class AddonModLessonProvider { } return subPromise.then(() => { - result.feedback += '
' + pageData.page.contents + '
'; + result.feedback += '
' + pageData.page.contents + '
'; result.feedback += '
' + this.translate.instant('addon.mod_lesson.youranswer') + ' : ' + - (result.studentanswerformat ? result.studentanswer : this.textUtils.cleanTags(result.studentanswer)) + - '
' + result.response + '
'; + '
'; + + // Create a table containing the answers and responses. + if (pageData.page.qoption) { + // Multianswer allowed. + const studentAnswerArray = result.studentanswer ? + result.studentanswer.split(AddonModLessonProvider.MULTIANSWER_DELIMITER) : [], + responseArray = result.response ? + result.response.split(AddonModLessonProvider.MULTIANSWER_DELIMITER) : []; + + // Add answers and responses to the table. + for (let i = 0; i < studentAnswerArray.length; i++) { + result.feedback = this.addAnswerAndResponseToFeedback(result.feedback, studentAnswerArray[i], + result.studentanswerformat, responseArray[i], className); + } + } else { + // Only 1 answer, add it to the table. + result.feedback = this.addAnswerAndResponseToFeedback(result.feedback, result.studentanswer, + result.studentanswerformat, result.response, className); + } + + result.feedback += '
'; }); } }); From 77cc147a808409cc03da0a9dffae2a5d72f37488 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Tue, 25 Sep 2018 09:05:28 +0200 Subject: [PATCH 2/2] MOBILE-2610 lesson: Style feedback in lesson questions --- src/addon/mod/lesson/pages/player/player.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/addon/mod/lesson/pages/player/player.scss b/src/addon/mod/lesson/pages/player/player.scss index bb54330f9..e1ac00eb4 100644 --- a/src/addon/mod/lesson/pages/player/player.scss +++ b/src/addon/mod/lesson/pages/player/player.scss @@ -46,4 +46,20 @@ ion-app.app-root page-addon-mod-lesson-player { .item-md table td { border-bottom: 1px solid $list-md-border-color; } + + .item-wp table td { + border-bottom: 1px solid $list-wp-border-color; + } + + .item-ios table { + @extend .card-ios; + } + + .item-md table { + @extend .card-md; + } + + .item-wp table { + @extend .card-wp; + } }