feat: add multiple choice quizzes

Author: 0xChin

components/mdx/Quiz.tsx

@@ -12,7 +12,7 @@ import {
   ModalCloseButton,
   useToast,
 } from '@chakra-ui/react'
-import React, { FC, useState } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 
 interface QuizProps {
   quiz: string
@@ -34,7 +34,7 @@ interface Quiz {
 }
 
 interface Answers {
-  [index: string]: number
+  [index: string]: number[]
 }
 
 const Quiz: FC<QuizProps> = (props: QuizProps) => {
@@ -65,7 +65,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 +85,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'
@@ -126,12 +137,21 @@ const Quiz: FC<QuizProps> = (props: QuizProps) => {
     const newCorrectAnswers: number[] = []
 
     quiz.questions.forEach((q, index) => {
-      if (!q.options[answers[index]].correct) {
-        hasWrongAnswers = true
-        wrongAnswersCounter++
-      } else {
-        newCorrectAnswers.push(index)
+      let correctAnswersIndexes = q.options
+        .filter((option) => option.correct)
+        .map((correctOption) => q.options.indexOf(correctOption))
+
+      for (let i = 0; i < answers[index].length; i++) {
+        if (answers[index].length >= 2)
+          answers[index] = answers[index].sort((a, b) => a - b)
+        if (correctAnswersIndexes[i] !== answers[index][i]) {
+          hasWrongAnswers = true
+          wrongAnswersCounter++
+          return
+        }
       }
+
+      newCorrectAnswers.push(index)
     })
 
     setCorrectAnswers(newCorrectAnswers)

utils/quizzes/lesson-1.json renamed to utils/quizzes/quiz-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."
+        }
+      ]
+    }
+  ]
+}