From b2f4dac4fa0f0dca8dfc100626c5ec1118f7078d Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Tue, 13 Oct 2020 19:48:15 +0200 Subject: [PATCH] fix #3949 @0.5 --- app/Models/Quiz.php | 8 + app/Models/QuizTranslation.php | 3 +- resources/quiz/js/main.js | 15 +- resources/quiz/style/030-quiz.less | 348 ++++++++++++++--------------- resources/quiz/style/style.css | 16 +- 5 files changed, 202 insertions(+), 188 deletions(-) diff --git a/app/Models/Quiz.php b/app/Models/Quiz.php index 571a21646..77947992e 100644 --- a/app/Models/Quiz.php +++ b/app/Models/Quiz.php @@ -146,6 +146,13 @@ class Quiz extends CubistMagicAbstractModel 'default' => true, 'tab' => 'Settings']); + $this->addField(['name' => 'restart_button', + 'label' => 'Add a restart button when quiz is failed', + 'type' => 'Checkbox', + 'default' => false, + 'tab' => 'Settings', + ]); + $this->addField(['name' => 'logattempts', 'label' => 'Enable logging of users attempts', 'hint' => 'All users attempts will be sent to the toolbox server', @@ -219,6 +226,7 @@ class Quiz extends CubistMagicAbstractModel $xml->addChild('id', $data->get('id')); $xml->addChild('title', $data->get('title')); $xml->addChild('threshold', $data->get('threshold', '0') ?: '0'); + $xml->addChild('restart_button', $data->get('restart_button', '0') ? '1' : '0'); $xml->addChild('instantReview', $data->get('instantReview', true) ? '1' : '0'); $xml->addChild('review', $data->get('review', true) ? '1' : '0'); $xml->addChild('logattempts', $data->get('logattempts', false) ? '1' : '0'); diff --git a/app/Models/QuizTranslation.php b/app/Models/QuizTranslation.php index 557812ca5..b5001a64a 100644 --- a/app/Models/QuizTranslation.php +++ b/app/Models/QuizTranslation.php @@ -17,7 +17,8 @@ class QuizTranslation extends CubistMagicAbstractModel 'reviewAnswer' => 'Review answers', 'question' => 'Question %d:', 'totalQuestions' => 'Total questions:', - 'correctAnswers' => 'Correct answers:']; + 'correctAnswers' => 'Correct answers:', + 'restartQuiz' => 'Restart the quiz']; public function setFields() { diff --git a/resources/quiz/js/main.js b/resources/quiz/js/main.js index f1960d4a2..ab3b592d9 100644 --- a/resources/quiz/js/main.js +++ b/resources/quiz/js/main.js @@ -120,9 +120,9 @@ question += '
'; question += '
'; if (multiple) { - question += '' + getTranslation('validateAnswer') + ''; + question += '' + getTranslation('validateAnswer') + ''; } else if (type !== 'multiple') { - question += '' + getTranslation('validateAnswerSingular') + ''; + question += '' + getTranslation('validateAnswerSingular') + ''; } question += ''; @@ -183,13 +183,15 @@ '

' + defaultMessage + '

' + '

' + passedMessage + '

' + '

' + failedMessage + '

' + - '
' + getTranslation('totalQuestions') + ' ' + countQuestions + '
' + getTranslation('correctAnswers') + '
'); + '
' + getTranslation('totalQuestions') + ' ' + countQuestions + '
' + getTranslation('correctAnswers') + '
' + + '' + getTranslation('restartQuiz') + '' + + ''); $(results).append(correction); $("main").append(results); $(document).on('quizinit', function (event, state) { - init(state) + init(state); }); initScormEvents(); resizeContainer(); @@ -329,6 +331,7 @@ var normalizedScore = score / countQuestions; $('#results > h2').hide(); var passed; + $('#restart').hide(); if (threshold === 0) { $('.defaultMessage').show(); passed = true; @@ -340,6 +343,9 @@ $('.failedMessage').show(); execAction(failedAction); passed = false; + if ($(data).find('restart_button').text() === "1") { + $('#restart').show(); + } } return passed; } @@ -402,7 +408,6 @@ a.push($(this).data('a')) } }); - console.log(this_score, min_score); ok = this_score >= min_score; answers.push(a); log.anwser = a; diff --git a/resources/quiz/style/030-quiz.less b/resources/quiz/style/030-quiz.less index 807199382..f433b3fd5 100644 --- a/resources/quiz/style/030-quiz.less +++ b/resources/quiz/style/030-quiz.less @@ -1,218 +1,218 @@ // main: ../style/style.less main { - width: 100%; - max-width: 800px; - margin: 0 auto -50px; - position: relative; + width: 100%; + max-width: 800px; + margin: 0 auto -50px; + position: relative; } section { - display: none; - position: absolute; - width: 100%; - top: 0; - padding: 0 40px 0 40px; - - @media @m640{ - padding: 0 30px 0 30px; - } - - @media @m480{ - padding: 0 20px 0 20px; - } -} - -.question { + display: none; + position: absolute; + width: 100%; + top: 0; + padding: 0 40px 0 40px; - .label { - font-size: 20px; @media @m640 { - font-size: 16px; - line-height: 1.4em; + padding: 0 30px 0 30px; } - h3 { - font-family: @font-condensed; - font-size: 100%; - font-weight: 700; - margin-bottom: 10px; - display: inline; - @media @m640 { - font-size: 21px; - } - - @media @m320 { - font-size: 21px; - } + @media @m480 { + padding: 0 20px 0 20px; } - } +} - .validatemulti { +.button { color: var(--main-color); text-decoration: none; font-weight: 700; font-size: 22px; float: right; margin-top: 15px; - } - - .answers { - margin-top: 30px; - - input[type="text"],input[type="email"],textarea{ - border:0px; - .border-radius(5px); - padding: 15px; - width: 100%; - height: 100%; - font-size: 16px; - line-height: 1.2em; - background-color: @color-answer-back; - color: @color-answer-text; - } - - textarea{ - height: 100px; - } - - .answer-holder { - width: 50%; - height: 91px; - display: inline-block; - vertical-align: top; - - &:nth-child(odd) { - padding: 5px 5px 5px 0; - } - - &:nth-child(even) { - padding: 5px 0 5px 5px; - } - - @media @m640 { - width: 100%; - padding: 5px 0px !important; - } +} + +.question { + + .label { + font-size: 20px; + @media @m640 { + font-size: 16px; + line-height: 1.4em; + } + + h3 { + font-family: @font-condensed; + font-size: 100%; + font-weight: 700; + margin-bottom: 10px; + display: inline; + @media @m640 { + font-size: 21px; + } + + @media @m320 { + font-size: 21px; + } + } } - .answer { - display: flex; /* contexte sur le parent */ - flex-direction: column; /* direction d'affichage verticale */ - justify-content: center; /* alignement vertical */ - padding: 15px; - cursor: pointer; - width: 100%; - height: 100%; - font-size: 16px; - line-height: 1.2em; - background-color: @color-answer-back; - color: @color-answer-text; - .border-radius(5px); - .transition(~"background-color 150ms"); - - - &:hover { - background-color: @color-answer-hover; - } - - &.active { - background-color: var(--main-color) !important; - } - - &.inactive { - background-color: @color-answer-back !important; - } + .answers { + margin-top: 30px; + + input[type="text"], input[type="email"], textarea { + border: 0px; + .border-radius(5px); + padding: 15px; + width: 100%; + height: 100%; + font-size: 16px; + line-height: 1.2em; + background-color: @color-answer-back; + color: @color-answer-text; + } + + textarea { + height: 100px; + } + + .answer-holder { + width: 50%; + height: 91px; + display: inline-block; + vertical-align: top; + + &:nth-child(odd) { + padding: 5px 5px 5px 0; + } + + &:nth-child(even) { + padding: 5px 0 5px 5px; + } + + @media @m640 { + width: 100%; + padding: 5px 0px !important; + } + } + + .answer { + display: flex; /* contexte sur le parent */ + flex-direction: column; /* direction d'affichage verticale */ + justify-content: center; /* alignement vertical */ + padding: 15px; + cursor: pointer; + width: 100%; + height: 100%; + font-size: 16px; + line-height: 1.2em; + background-color: @color-answer-back; + color: @color-answer-text; + .border-radius(5px); + .transition(~"background-color 150ms"); + + + &:hover { + background-color: @color-answer-hover; + } + + &.active { + background-color: var(--main-color) !important; + } + + &.inactive { + background-color: @color-answer-back !important; + } + } } - } } #badge { - .badge(220, 4px); - display: none; + .badge(220, 4px); + display: none; } #resultsscreen { - font-size: 20px; - line-height: 1.3em; - - > div { - padding: 60px; - background-color: var(--main-color); - color: @color-result-text; - .border-radius(5px); - margin-top: 10px; - - &#correction{ - @media @m640{ - padding: 30px 30px 30px 60px; - } - } - } - - #results { - text-align: center; - - h2 { - font-size: 26px; - font-weight: 700; - margin: 0px 0 30px; - display: none; + font-size: 20px; + line-height: 1.3em; + + > div { + padding: 60px; + background-color: var(--main-color); + color: @color-result-text; + .border-radius(5px); + margin-top: 10px; + + &#correction { + @media @m640 { + padding: 30px 30px 30px 60px; + } + } } - } + #results { + text-align: center; - #correction { - background-color: var(--review-background); - color: @color-review-text; + h2 { + font-size: 26px; + font-weight: 700; + margin: 0px 0 30px; + display: none; + } - @media @m640{ - font-size: 16px; } - .correction { - position: relative; - padding-left: 40px; - - @media @m640 { - padding-left: 20px; - } - - .badge { - position: absolute; - left: -20px; - top: 8px; - .badge(40, 0); - font-weight: 400; + #correction { + background-color: var(--review-background); + color: @color-review-text; @media @m640 { - left: -39px; + font-size: 16px; } - } - h4 { - font-weight: 600; - margin-top: 40px; - margin-bottom: 10px; - @media @m640 { - margin-top: 25px; + .correction { + position: relative; + padding-left: 40px; + + @media @m640 { + padding-left: 20px; + } + + .badge { + position: absolute; + left: -20px; + top: 8px; + .badge(40, 0); + font-weight: 400; + + @media @m640 { + left: -39px; + } + } + + h4 { + font-weight: 600; + margin-top: 40px; + margin-bottom: 10px; + @media @m640 { + margin-top: 25px; + } + } + } - } - } + h2 { + font-size: 26px; + color: @color-result-text; + text-align: center; + font-weight: 700; + margin-bottom: 40px; - h2 { - font-size: 26px; - color: @color-result-text; - text-align: center; - font-weight: 700; - margin-bottom: 40px; + @media @m640 { + font-size: 20px; + } + } - @media @m640 { - font-size: 20px; - } } - } - } diff --git a/resources/quiz/style/style.css b/resources/quiz/style/style.css index 198b3478a..c3fc74203 100644 --- a/resources/quiz/style/style.css +++ b/resources/quiz/style/style.css @@ -297,6 +297,14 @@ section { padding: 0 20px 0 20px; } } +.button { + color: var(--main-color); + text-decoration: none; + font-weight: 700; + font-size: 22px; + float: right; + margin-top: 15px; +} .question .label { font-size: 20px; } @@ -323,14 +331,6 @@ section { font-size: 21px; } } -.question .validatemulti { - color: var(--main-color); - text-decoration: none; - font-weight: 700; - font-size: 22px; - float: right; - margin-top: 15px; -} .question .answers { margin-top: 30px; } -- 2.39.5