Merge pull request #180 from AlanRacciatti/feature_quizzes

feature: multiple choice in quizzes

Author: 7i7o

components/mdx/Question.tsx

@@ -1,5 +1,5 @@
 import { Box, VStack, Text, Button, useToast } from '@chakra-ui/react'
-import React, { FC, useState } from 'react'
+import React, { FC, useState, Dispatch, SetStateAction } from 'react'
 
 interface QuestionProps {
   question: string
@@ -17,19 +17,26 @@ interface Question {
 
 const Question: FC<QuestionProps> = (props: QuestionProps) => {
   const question: Question = require(`../../utils/questions/${props.question}.json`)
-  const [optionSelected, setOptionSelected]: [
-    number,
-    React.Dispatch<React.SetStateAction<number>>,
-  ] = useState(-1)
-  const [answersSubmitted, setAnswersSubmitted] = useState(false)
+  const [optionsSelected, setOptionsSelected]: [
+    number[],
+    Dispatch<SetStateAction<number[]>>,
+  ] = useState([-1])
   const toast = useToast()
 
   const selectAnswer = (optionIndex: number) => {
-    setOptionSelected(optionIndex)
+    if (optionsSelected.includes(optionIndex)) {
+      return setOptionsSelected(
+        optionsSelected.filter((o) => o !== optionIndex),
+      )
+    }
+
+    setOptionsSelected(
+      [...optionsSelected, optionIndex].filter((o) => o !== -1), // Remove the -1 of the state initialization
+    )
   }
 
   const getOptionBackground = (optionIndex: number) => {
-    if (optionSelected == optionIndex) {
+    if (optionsSelected.includes(optionIndex)) {
       return 'yellow.600'
     }
     return 'gray.600'
@@ -66,13 +73,23 @@ const Question: FC<QuestionProps> = (props: QuestionProps) => {
   }
 
   const submit = () => {
-    if (optionSelected === -1) {
+    if (optionsSelected.includes(-1)) {
       return quizNotAnswered()
     }
 
-    if (question.options[optionSelected].correct) {
-      return quizSuccessToast()
-    }
+    const correctAnswers = question.options.filter((o) => o.correct).length
+
+    let success = true
+    let correctAnswersCount = 0
+
+    optionsSelected.forEach((o) => {
+      if (!question.options[o].correct) success = false
+      correctAnswersCount++
+    })
+
+    if (correctAnswers !== correctAnswersCount) success = false
+
+    if (success) return quizSuccessToast()
 
     return quizFailedToast()
   }

components/mdx/Quiz.tsx

@@ -13,6 +13,10 @@ import {
   useToast,
 } from '@chakra-ui/react'
 import React, { FC, useState } from 'react'
+import {
+  getCorrectAnswersIndexes,
+  haveSameElements,
+} from '../../utils/QuizHelpers'
 
 interface QuizProps {
   quiz: string
@@ -34,7 +38,7 @@ interface Quiz {
 }
 
 interface Answers {
-  [index: string]: number
+  [index: string]: number[]
 }
 
 const Quiz: FC<QuizProps> = (props: QuizProps) => {
@@ -65,7 +69,18 @@ const Quiz: FC<QuizProps> = (props: QuizProps) => {
 
   const selectAnswer = (answerIndex: number) => {
     let newAnswers: Answers = { ...answers }
-    newAnswers[currentQuestionIndex.toString()] = answerIndex
+
+    if (newAnswers[currentQuestionIndex]?.includes(answerIndex)) {
+      newAnswers[currentQuestionIndex.toString()] = newAnswers[
+        currentQuestionIndex
+      ]?.filter((a) => a !== answerIndex)
+    } else {
+      newAnswers[currentQuestionIndex.toString()] = [
+        ...(answers[currentQuestionIndex] || []),
+        answerIndex,
+      ]
+    }
+
     setAnswers(newAnswers)
   }
 
@@ -74,12 +89,12 @@ const Quiz: FC<QuizProps> = (props: QuizProps) => {
       correctAnswers &&
       correctAnswers.indexOf(currentQuestionIndex) !== -1 &&
       quiz.questions[currentQuestionIndex].options[optionIndex].correct &&
-      answers[currentQuestionIndex] === optionIndex
+      answers[currentQuestionIndex]?.includes(optionIndex)
     ) {
       return 'green.500'
     }
 
-    if (answers[currentQuestionIndex] == optionIndex) {
+    if (answers[currentQuestionIndex]?.includes(optionIndex)) {
       return 'yellow.600'
     }
     return 'gray.600'
@@ -120,23 +135,24 @@ const Quiz: FC<QuizProps> = (props: QuizProps) => {
       return quizNotAnswered()
     }
 
-    let hasWrongAnswers = false
     let wrongAnswersCounter = 0
 
     const newCorrectAnswers: number[] = []
 
-    quiz.questions.forEach((q, index) => {
-      if (!q.options[answers[index]].correct) {
-        hasWrongAnswers = true
+    quiz.questions.forEach((question, index) => {
+      let correctAnswersIndexes = getCorrectAnswersIndexes(question)
+
+      if (!haveSameElements(answers[index], correctAnswersIndexes)) {
         wrongAnswersCounter++
-      } else {
-        newCorrectAnswers.push(index)
+        return
       }
+
+      newCorrectAnswers.push(index)
     })
 
     setCorrectAnswers(newCorrectAnswers)
 
-    if (hasWrongAnswers) {
+    if (wrongAnswersCounter >= 1) {
       return quizFailedToast(wrongAnswersCounter)
     }
 
@@ -146,6 +162,7 @@ const Quiz: FC<QuizProps> = (props: QuizProps) => {
   const cancelQuiz = () => {
     setAnswers({})
     setShowQuiz(false)
+    setCorrectAnswers(null)
     setCurrentQuestionIndex(0)
   }
 

utils/QuizHelpers.ts

@@ -0,0 +1,29 @@
+interface Question {
+  question: string
+  options: [
+    {
+      answer: string
+      correct?: boolean
+    },
+  ]
+}
+
+export function getCorrectAnswersIndexes(question: Question): number[] {
+  return question.options
+    .filter((option) => option.correct)
+    .map((correctOption) => question.options.indexOf(correctOption))
+}
+
+export function haveSameElements(arr1: number[], arr2: number[]): boolean {
+  if (arr1.length !== arr2.length) {
+    return false
+  }
+  let arr1Sorted = arr1.sort()
+  let arr2Sorted = arr2.sort()
+  for (let i = 0; i < arr1Sorted.length; i++) {
+    if (arr1Sorted[i] !== arr2Sorted[i]) {
+      return false
+    }
+  }
+  return true
+}

utils/questions/question-1.json

@@ -1,15 +1,16 @@
 {
-  "question": "Apart from a user wallet, what else uses a blockchain (Ethereum) address?",
+  "question": "Which of these properties does Ethereum have?",
   "options": [
     {
-      "answer": "Transactions"
+      "answer": "Permissioned"
     },
     {
-      "answer": "Smart contracts",
+      "answer": "Trustless",
       "correct": true
     },
     {
-      "answer": "NFTs"
+      "answer": "Decentralized",
+      "correct": true
     }
   ]
 }

utils/quizzes/lesson-1.json

@@ -0,0 +1,51 @@
+{
+  "title": "Quiz: Lesson 1",
+  "questions": [
+    {
+      "question": "Where do the values for event parameters get stored?",
+      "options": [
+        {
+          "answer": "In the transaction data"
+        },
+        {
+          "answer": "In transaction logs",
+          "correct": true
+        },
+        {
+          "answer": "They are not stored"
+        }
+      ]
+    },
+    {
+      "question": "Which of these properties does Ethereum have?",
+      "options": [
+        {
+          "answer": "Permissioned"
+        },
+        {
+          "answer": "Trustless",
+          "correct": true
+        },
+        {
+          "answer": "Decentralized",
+          "correct": true
+        }
+      ]
+    },
+    {
+      "question": "What can we use a smart contract for?",
+      "options": [
+        {
+          "answer": "Store or transfer value or services without the need of a central authority",
+          "correct": true
+        },
+        {
+          "answer": "Make a breakfast"
+        },
+        {
+          "answer": "Verifying the authenticity of documents and information."
+        }
+      ]
+    }
+  ]
+}