Merge pull request #44 from Horizontal-org/development

Development

src/components/UI/Question/index.tsx

@@ -15,7 +15,8 @@ interface Props {
   questionIndex: number;
   onNext: () => void;
   goBack: () => void;
-  changeScene: (scene: string) => void
+  changeScene: (scene: string) => void;
+  setCorrectQuestions:() => void;
 }
 
 export const Question: FunctionComponent<Props> = ({
@@ -24,6 +25,7 @@ export const Question: FunctionComponent<Props> = ({
   questionIndex,
   goBack,
   onNext,
+  setCorrectQuestions
 }) => {
   const { width } = useGetWidth()
   const [answer, handleAnswer] = useState<string | null>(null)
@@ -47,6 +49,13 @@ export const Question: FunctionComponent<Props> = ({
     handleExplanationsOrder(order)
   }, [])
 
+  useEffect(() => {
+    const realAnswer = question.isPhising ? 'phishing' : 'legitimate'
+    if (answer === realAnswer) {
+      setCorrectQuestions()
+    }
+  }, [answer])
+
   const parseExplanations = (explanation: Explanation[]):Explanation[] => 
     explanation.filter( expl =>  document.querySelector(`[data-explanation="${expl.index}"]`))
 
@@ -70,7 +79,7 @@ export const Question: FunctionComponent<Props> = ({
         isExpanded={isExpanded}
         handleIsExpanded={handleIsExpanded}        
         action={answer ? (
-          <AnswerFeedback 
+          <AnswerFeedback
             showExplanations={showExplanations}
             handleShowExplanations={handleShowExplanations}
             explanationNumber={explanationNumber}

src/language/locales/en.json

@@ -84,7 +84,7 @@
     },
     "completed": {
         "title": "Quiz completed",
-        "heavy_subtitle": "You answered 7 out of 10 questions correctly.",
+        "heavy_subtitle": "You answered {{correctQuestions}} out of {{questions}} questions correctly.",
         "subtitle": "Take a new quiz or check out some recommendations below to continue strengthening your skills and become better at avoiding phishing.",
         "back_button": "Home",
         "next_button": "New quiz"

src/language/locales/es.json

@@ -84,7 +84,7 @@
     },
     "completed": {
       "title": "Cuestionario completado",
-      "heavy_subtitle": "Respondiste correctamente 7 de 10 preguntas.",
+      "heavy_subtitle": "Respondiste correctamente {{correctQuestions}} de {{questions}} preguntas.",
       "subtitle": "Realiza un nuevo cuestionario o consulta algunas recomendaciones a continuación para seguir fortaleciendo tus habilidades y ser mejor en la prevención de phishing.",
       "back_button": "Inicio",
       "next_button": "Nuevo cuestionario"

src/language/locales/fr.json

@@ -82,7 +82,7 @@
     },
     "completed": {
         "title": "Quiz terminé",
-        "heavy_subtitle": "",
+        "heavy_subtitle": "You answered {{correctQuestions}} out of {{questions}} questions correctly.",
         "subtitle": "Répondez à un nouveau quiz ou consultez quelques recommandations ci-dessous pour continuer à renforcer vos compétences et mieux éviter le phishing.",
         "back_button": "Retour a l'accueil",
         "next_button": "Nouveau quiz"

src/scenes/Completed/index.tsx

@@ -1,4 +1,5 @@
 import { FunctionComponent } from 'react'
+import shallow from 'zustand/shallow'
 import { useTranslation } from 'react-i18next'
 import { Navbar } from '../../components/UI/Navbar'
 import { FiHome } from 'react-icons/fi'
@@ -18,15 +19,28 @@ interface Props {}
 export const CompletedScene: FunctionComponent<Props> = () => {
   const { t } = useTranslation()
   const { width } = useGetWidth()
-  const changeScene = useStore((state) => state.changeScene)
+  const {
+    changeScene,
+    quiz,
+    correctQuestions
+  } = useStore((state) => ({
+    changeScene: state.changeScene,
+    quiz: state.quiz,
+    correctQuestions: state.correctedQuestions,
+  }), shallow)
 
   return (
     <Wrapper>
       <Navbar />
       <StyledSectionWrapper>
         <StyledSection>
           <Heading>{ t('completed.title') }</Heading>
-          <HeavySubtitle>{ t('completed.heavy_subtitle') }</HeavySubtitle>
+          <HeavySubtitle>
+            { 
+              t('completed.heavy_subtitle', 
+              {correctQuestions: correctQuestions.length, questions: quiz.length}) 
+            }
+          </HeavySubtitle>
           {width < 800 && (
             <MobileIconWrapper>
               <CompletedMobile />

src/scenes/Quiz/index.tsx

@@ -13,13 +13,15 @@ export const Quiz:FunctionComponent<Props> = () => {
     apps,
     fieldsOfWork,
     fetchQuiz,
-    quiz
+    quiz,
+    setCorrectQuestions
   } = useStore((state) => ({
     changeScene: state.changeScene,
     apps: state.setup.apps,
     fieldsOfWork: state.setup.fields_of_work,
     fetchQuiz: state.fetchQuiz,
-    quiz: state.quiz
+    quiz: state.quiz,
+    setCorrectQuestions: state.setCorrectQuestions
   }), shallow)
 
   const [questions, handleQuestions] = useState([])
@@ -64,6 +66,7 @@ export const Quiz:FunctionComponent<Props> = () => {
               changeScene('quiz-setup-work')
             }
           }}
+          setCorrectQuestions={() => setCorrectQuestions(questions[questionIndex])}
         />
       ) : (
         <QuizInstructions 

src/store/slices/quiz.ts

@@ -9,7 +9,9 @@ export interface QuizSlice {
     apps: string[],
     fieldsOfWork: string[]
   ) => void;
-  quiz: Question[]
+  quiz: Question[],
+  correctedQuestions: Question[],
+  setCorrectQuestions: (question: Question) => void
 }
 
 export const createQuizSlice: StateCreator<
@@ -22,5 +24,9 @@ export const createQuizSlice: StateCreator<
     const res = await getQuiz(apps, fieldsOfWork)
     set({quiz: res})
   },
-  quiz: []
+  quiz: [],
+  correctedQuestions: [],
+  setCorrectQuestions: (question) => {
+    set(state => ({correctedQuestions: [...state.correctedQuestions, question]}))
+  }
 })