diff --git a/src/assets/icons/ico/correctAnswer2.svg b/src/assets/icons/ico/correctAnswer2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c6573d060855a039469539a0f9ee6ed6599f780f
--- /dev/null
+++ b/src/assets/icons/ico/correctAnswer2.svg
@@ -0,0 +1,23 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.65" filter="url(#filter0_f)">
+<path d="M97.4143 48.2267L73.4319 44.4399L62.7111 20.8267C62.4183 20.1802 61.9365 19.6568 61.3415 19.3387C59.8491 18.5382 58.0355 19.2053 57.2893 20.8267L46.5685 44.4399L22.5861 48.2267C21.9249 48.3293 21.3204 48.6679 20.8575 49.181C20.298 49.8059 19.9896 50.6465 20.0003 51.5182C20.0109 52.3899 20.3396 53.2213 20.9142 53.8298L38.2658 72.2093L34.1664 98.1623C34.0703 98.766 34.1318 99.387 34.3439 99.9546C34.556 100.522 34.9104 101.014 35.3666 101.374C35.8229 101.734 36.363 101.948 36.9255 101.992C37.488 102.035 38.0505 101.907 38.5492 101.621L60.0002 89.3677L81.4512 101.621C82.0368 101.959 82.7169 102.072 83.3687 101.949C85.0122 101.641 86.1173 99.9479 85.834 98.1623L81.7346 72.2093L99.0862 53.8298C99.5585 53.327 99.8702 52.6702 99.9646 51.9518C100.22 50.1559 99.0673 48.4935 97.4143 48.2267Z" fill="#F1C017"/>
+<path d="M97.4143 48.2267L73.4319 44.4399L62.7111 20.8267C62.4183 20.1802 61.9365 19.6568 61.3415 19.3387C59.8491 18.5382 58.0355 19.2053 57.2893 20.8267L46.5685 44.4399L22.5861 48.2267C21.9249 48.3293 21.3204 48.6679 20.8575 49.181C20.298 49.8059 19.9896 50.6465 20.0003 51.5182C20.0109 52.3899 20.3396 53.2213 20.9142 53.8298L38.2658 72.2093L34.1664 98.1623C34.0703 98.766 34.1318 99.387 34.3439 99.9546C34.556 100.522 34.9104 101.014 35.3666 101.374C35.8229 101.734 36.363 101.948 36.9255 101.992C37.488 102.035 38.0505 101.907 38.5492 101.621L60.0002 89.3677L81.4512 101.621C82.0368 101.959 82.7169 102.072 83.3687 101.949C85.0122 101.641 86.1173 99.9479 85.834 98.1623L81.7346 72.2093L99.0862 53.8298C99.5585 53.327 99.8702 52.6702 99.9646 51.9518C100.22 50.1559 99.0673 48.4935 97.4143 48.2267Z" fill="url(#paint0_radial)" fill-opacity="0.5"/>
+</g>
+<path d="M97.4143 49.2712L73.4319 45.8674L62.7111 24.642C62.4183 24.0608 61.9365 23.5904 61.3415 23.3044C59.8491 22.5849 58.0355 23.1845 57.2893 24.642L46.5685 45.8674L22.5861 49.2712C21.9249 49.3634 21.3204 49.6678 20.8575 50.129C20.298 50.6907 19.9896 51.4463 20.0003 52.2298C20.0109 53.0133 20.3396 53.7607 20.9142 54.3077L38.2658 70.8286L34.1664 94.1571C34.0703 94.6998 34.1318 95.2579 34.3439 95.7682C34.556 96.2785 34.9104 96.7205 35.3666 97.0442C35.8229 97.3678 36.363 97.5601 36.9255 97.5993C37.488 97.6385 38.0505 97.5229 38.5492 97.2658L60.0002 86.2518L81.4512 97.2658C82.0368 97.5702 82.7169 97.6716 83.3687 97.561C85.0122 97.2842 86.1173 95.7622 85.834 94.1571L81.7346 70.8286L99.0862 54.3077C99.5585 53.8557 99.8702 53.2653 99.9646 52.6196C100.22 51.0053 99.0673 49.511 97.4143 49.2712Z" fill="#F1C017"/>
+<path d="M97.4143 49.2712L73.4319 45.8674L62.7111 24.642C62.4183 24.0608 61.9365 23.5904 61.3415 23.3044C59.8491 22.5849 58.0355 23.1845 57.2893 24.642L46.5685 45.8674L22.5861 49.2712C21.9249 49.3634 21.3204 49.6678 20.8575 50.129C20.298 50.6907 19.9896 51.4463 20.0003 52.2298C20.0109 53.0133 20.3396 53.7607 20.9142 54.3077L38.2658 70.8286L34.1664 94.1571C34.0703 94.6998 34.1318 95.2579 34.3439 95.7682C34.556 96.2785 34.9104 96.7205 35.3666 97.0442C35.8229 97.3678 36.363 97.5601 36.9255 97.5993C37.488 97.6385 38.0505 97.5229 38.5492 97.2658L60.0002 86.2518L81.4512 97.2658C82.0368 97.5702 82.7169 97.6716 83.3687 97.561C85.0122 97.2842 86.1173 95.7622 85.834 94.1571L81.7346 70.8286L99.0862 54.3077C99.5585 53.8557 99.8702 53.2653 99.9646 52.6196C100.22 51.0053 99.0673 49.511 97.4143 49.2712Z" fill="url(#paint1_radial)" fill-opacity="0.5"/>
+<defs>
+<filter id="filter0_f" x="8" y="7" width="104" height="107" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur"/>
+</filter>
+<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(59.7419 77.7917) rotate(-90) scale(53.6042 84.2)">
+<stop stop-color="#E28904"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(59.7419 75.8464) rotate(-90) scale(48.1835 84.2)">
+<stop stop-color="#E28904"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/src/components/Quiz/QuizExplanationModal.tsx b/src/components/Quiz/QuizExplanationModal.tsx
index 1483ebef7a66ed26eca43288235cb9293e9f28ea..057dde2411b342a9d156b951dafaea600a13fd70 100644
--- a/src/components/Quiz/QuizExplanationModal.tsx
+++ b/src/components/Quiz/QuizExplanationModal.tsx
@@ -3,7 +3,7 @@ import './quizExplanationModal.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { QuestionEntity } from 'models'
-import correctAnswer from 'assets/icons/ico/correctAnswer.svg'
+import correctAnswer2 from 'assets/icons/ico/correctAnswer2.svg'
import wrongAnswer from 'assets/icons/ico/wrongAnswer.svg'
import Modal from 'components/CommonKit/Modal/Modal'
@@ -41,7 +41,7 @@ const QuizExplanationModal: React.FC<QuizExplanationModalProps> = ({
<>
{question.answers[answerIndex].isTrue ? (
<div>
- <StyledIcon icon={correctAnswer} size={100} />
+ <StyledIcon icon={correctAnswer2} size={100} />
<p className="answer-result correct">{t('quiz.correct')}</p>
</div>
) : (
@@ -54,7 +54,7 @@ const QuizExplanationModal: React.FC<QuizExplanationModalProps> = ({
{t('quiz.rightAnswer')} <br />
<strong>{question.answers[validAnswer].answerLabel}</strong>
</div>
- <div className="text-16-normal">{question.explanation}</div>
+ <div className="text-16-normal">{t(question.explanation)}</div>
</>
)}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 5760b032d8f8774b909cbb0ef02891762b2decdf..51f9dded09cd32511a68e144226c66060842f8e0 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -395,6 +395,9 @@
"watch_consumption": "Je fonce",
"congratulation": "Bravo !",
"earn": "Vous remportez",
- "confirm": "Ok"
+ "confirm": "Ok",
+ "interval": {
+ "explanation": "Vous pouvez vérifier cette informations sur l'écran Conso."
+ }
}
}
diff --git a/src/services/quiz.service.ts b/src/services/quiz.service.ts
index 6d7d9685c9f3bc5a317a8e652ebce9663da0bd30..05dbe97c75764f1cde5f6fc2d2909c23b769c49f 100644
--- a/src/services/quiz.service.ts
+++ b/src/services/quiz.service.ts
@@ -22,7 +22,6 @@ import {
UserQuizState,
} from 'enum/userQuiz.enum'
import { shuffle } from 'lodash'
-
export default class QuizService {
private readonly _client: Client
@@ -268,6 +267,7 @@ export default class QuizService {
fluidType: FluidType[]
): Promise<QuestionEntity> {
let answers: Answer[]
+ let explanation = ''
const finalInterval: TimePeriod = this.getTimePeriodFromInterval(
customQuestionEntity.interval,
customQuestionEntity.period
@@ -281,6 +281,7 @@ export default class QuizService {
fluidType
)
answers = this.getAnswersForInterval(intervalAsnwer.date, finalInterval)
+ explanation = 'quiz.interval.explanation'
} else {
//Max data
const consumptionService = new ConsumptionDataManager(this._client)
@@ -306,7 +307,7 @@ export default class QuizService {
const finalQuestion = {
questionLabel: customQuestionEntity.questionLabel,
answers: answers,
- explanation: '',
+ explanation: explanation,
source: '',
}
return finalQuestion
@@ -436,22 +437,22 @@ export default class QuizService {
return [
{
answerLabel: rightDate.toLocaleString({
- year: 'numeric',
month: 'long',
day: 'numeric',
+ weekday: 'long',
}),
isTrue: true,
},
{
answerLabel: rightDate
.plus({ day: wrongAnswer[0] })
- .toLocaleString({ year: 'numeric', month: 'long', day: 'numeric' }),
+ .toLocaleString({ month: 'long', day: 'numeric', weekday: 'long' }),
isTrue: false,
},
{
answerLabel: rightDate
.plus({ day: wrongAnswer[1] })
- .toLocaleString({ year: 'numeric', month: 'long', day: 'numeric' }),
+ .toLocaleString({ month: 'long', day: 'numeric', weekday: 'long' }),
isTrue: false,
},
]