feat: add answers validation

Author: 0xChin

components/mdx/Quiz.tsx

@@ -32,30 +32,86 @@ interface Quiz {
   ]
 }
 
+interface Answers {
+  [index: string]: number
+}
+
 const Quiz: FC<QuizProps> = (props: QuizProps) => {
   const quiz: Quiz = require(`../../utils/quizzes/${props.quiz}.json`)
   const [showQuiz, setShowQuiz] = useState(false)
-  const [currenQuestionIndex, setCurrentQuestionIndex] = useState(0)
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
+  const [answers, setAnswers] = useState<Answers>({})
+
+  const nextQuestion = () => {
+    setCurrentQuestionIndex(currentQuestionIndex + 1)
+  }
+
+  const previousQuestion = () => {
+    setCurrentQuestionIndex(currentQuestionIndex - 1)
+  }
+
+  const previousButtonVisibility = () => {
+    return currentQuestionIndex == 0 ? 'hidden' : 'visible'
+  }
+
+  const nextButtonVisibility = () => {
+    return currentQuestionIndex + 1 == quiz.questions.length
+      ? 'hidden'
+      : 'visible'
+  }
+
+  const selectAnswer = (answerIndex: number) => {
+    let newAnswers: Answers = { ...answers }
+    newAnswers[currentQuestionIndex.toString()] = answerIndex
+    setAnswers(newAnswers)
+  }
+
+  const getQuestionBackground = (optionIndex: number) => {
+    if (answers[currentQuestionIndex] == optionIndex) {
+      return 'yellow.600'
+    }
+    return 'gray.600'
+  }
+
+  const submit = () => {
+    if (quiz.questions.length != Object.keys(answers).length) {
+      return alert('You must answer all the questions!')
+    }
+
+    let hasWrongAnswers = false
+
+    quiz.questions.forEach((q, index) => {
+      if (!q.options[answers[index]].correct) {
+        hasWrongAnswers = true
+      }
+    })
+
+    if (hasWrongAnswers) {
+      return alert('Test not passed :(')
+    }
+
+    return alert('Test passed :D')
+  }
+
+  const cancelQuiz = () => {
+    setAnswers({})
+    setShowQuiz(false)
+    setCurrentQuestionIndex(0)
+  }
 
   return (
     <>
-      {!showQuiz && (
-        <Button
-          colorScheme="yellow"
-          backgroundColor="yellow.600"
-          display="flex"
-          margin="auto"
-          onClick={() => setShowQuiz(true)}
-        >
-          Take quiz
-        </Button>
-      )}
-
-      <Modal
-        closeOnOverlayClick={false}
-        isOpen={showQuiz}
-        onClose={() => setShowQuiz(false)}
+      <Button
+        colorScheme="yellow"
+        backgroundColor="yellow.600"
+        display="flex"
+        margin="auto"
+        onClick={() => setShowQuiz(true)}
       >
+        Take quiz
+      </Button>
+
+      <Modal closeOnOverlayClick={false} isOpen={showQuiz} onClose={cancelQuiz}>
         <ModalOverlay />
         <ModalContent>
           <ModalHeader>{quiz.title}</ModalHeader>
@@ -68,47 +124,46 @@ const Quiz: FC<QuizProps> = (props: QuizProps) => {
               borderRadius="md"
             >
               <Text fontWeight="bold" w="100%">
-                {quiz.questions[currenQuestionIndex].question}
+                {quiz.questions[currentQuestionIndex].question}
               </Text>
-              <Box
-                w="100%"
-                borderRadius="md"
-                background="gray.600"
-                padding="3"
-                cursor="pointer"
-              >
-                Transactions
-              </Box>
-              <Box
-                w="100%"
-                borderRadius="md"
-                background="yellow.600"
-                padding="3"
-                cursor="pointer"
-              >
-                Smart Contracts
-              </Box>
-              <Box
-                w="100%"
-                borderRadius="md"
-                background="gray.600"
-                padding="3"
-                cursor="pointer"
-              >
-                Just user wallets have an address
-              </Box>
+              {quiz.questions[currentQuestionIndex].options.map((o, index) => {
+                return (
+                  <Box
+                    w="100%"
+                    borderRadius="md"
+                    background={getQuestionBackground(index)}
+                    padding="3"
+                    cursor="pointer"
+                    onClick={() => selectAnswer(index)}
+                    key={index}
+                  >
+                    {o.answer}
+                  </Box>
+                )
+              })}
               <Box
                 display="flex"
                 justifyContent="space-between"
                 w="100%"
                 alignItems="center"
               >
-                <Text w="100%">{`Question ${currenQuestionIndex + 1}/${
+                <Text w="100%">{`Question ${currentQuestionIndex + 1}/${
                   quiz.questions.length
                 }`}</Text>
                 <Box w="100%" display="flex">
-                  <Button mx="2">{'< Previous'}</Button>
-                  <Button>{'Next >'}</Button>
+                  <Button
+                    mx="2"
+                    visibility={previousButtonVisibility()}
+                    onClick={previousQuestion}
+                  >
+                    {'< Previous'}
+                  </Button>
+                  <Button
+                    visibility={nextButtonVisibility()}
+                    onClick={nextQuestion}
+                  >
+                    {'Next >'}
+                  </Button>
                 </Box>
               </Box>
             </VStack>
@@ -119,11 +174,16 @@ const Quiz: FC<QuizProps> = (props: QuizProps) => {
               mx="1"
               colorScheme="red"
               backgroundColor="red.600"
-              onClick={() => setShowQuiz(false)}
+              onClick={cancelQuiz}
             >
               Cancel
             </Button>
-            <Button mx="1" colorScheme="green" backgroundColor="green.400">
+            <Button
+              mx="1"
+              colorScheme="green"
+              backgroundColor="green.400"
+              onClick={submit}
+            >
               Submit
             </Button>
           </ModalFooter>

pages/lessons/projects/1.mdx

@@ -6,8 +6,6 @@ icons: ['solidity', 'remix']
 
 # Lesson 1: Intro to Smart Contract Development
 
-<Quiz quiz="lesson-1" />
-
 ## What are we building?
 
 ### Where are we going with it? Web what? Smart contract?
@@ -727,5 +725,7 @@ Can a view function modify the state of the blockchain?
 
 What can we use a smart contract for?
 
+<Quiz quiz="lesson-1" />
+
 **Now, go to the community in Discord to share your new Open Sourcerer
 powers**......and find the answers too!!!

utils/quizzes/lesson-1.json

@@ -2,17 +2,38 @@
   "title": "Quiz: Lesson 1",
   "questions": [
     {
-      "question": "❓ Apart from a user wallet, what else uses a blockchain (Ethereum) address?",
+      "question": "Apart from a user wallet, what else uses a blockchain (Ethereum) address?",
       "options": [
         {
           "answer": "Transactions"
         },
         {
           "answer": "Smart contracts",
           "correct": true
+        }
+      ]
+    },
+    {
+      "question": "What is the use of the pragma solidity statement in our smart contract?",
+      "options": [
+        {
+          "answer": "Defines that the file has Solidity code"
+        },
+        {
+          "answer": "Defines the Solidity version for the compiler",
+          "correct": true
+        }
+      ]
+    },
+    {
+      "question": "What can we use a smart contract for?",
+      "options": [
+        {
+          "answer": "Store or transfer value",
+          "correct": true
         },
         {
-          "answer": "Just user wallets have an address"
+          "answer": "Make a breakfast"
         }
       ]
     }