feat: add question component

Author: 0xChin

components/mdx/Components.tsx

@@ -4,6 +4,7 @@ import dracula from 'react-syntax-highlighter/dist/cjs/styles/prism/dracula'
 import { CopyToClipboard } from '../CopyToClipboard'
 import SideDrawer from './SideDrawer'
 import Quiz from './Quiz'
+import Question from './Question'
 import Callout from './Callout'
 
 const Components = {
@@ -43,6 +44,7 @@ const Components = {
   SideDrawer,
   Callout,
   Quiz,
+  Question,
 }
 
 export default Components

components/mdx/Question.tsx

@@ -0,0 +1,123 @@
+import { Box, VStack, Text, Button, useToast } from '@chakra-ui/react'
+import React, { FC, useState } from 'react'
+
+interface QuestionProps {
+  question: string
+}
+
+interface Question {
+  question: string
+  options: [
+    {
+      answer: string
+      correct?: boolean
+    },
+  ]
+}
+
+interface Answers {
+  [index: string]: number
+}
+
+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 toast = useToast()
+
+  const selectAnswer = (optionIndex: number) => {
+    setOptionSelected(optionIndex)
+  }
+
+  const getOptionBackground = (optionIndex: number) => {
+    if (optionSelected == optionIndex) {
+      return 'yellow.600'
+    }
+    return 'gray.600'
+  }
+
+  const quizNotAnswered = () => {
+    toast({
+      title: 'No answer selected',
+      description: 'Choose an answer!',
+      status: 'warning',
+      duration: 9000,
+      isClosable: true,
+    })
+  }
+
+  const quizFailedToast = () => {
+    toast({
+      title: 'Wrong answer',
+      description: `Try again fren`,
+      status: 'error',
+      duration: 9000,
+      isClosable: true,
+    })
+  }
+
+  const quizSuccessToast = () => {
+    toast({
+      title: 'Correct answer!',
+      description: "Let's goooo",
+      status: 'success',
+      duration: 9000,
+      isClosable: true,
+    })
+  }
+
+  const submit = () => {
+    if (optionSelected === -1) {
+      return quizNotAnswered()
+    }
+
+    if (question.options[optionSelected].correct) {
+      return quizSuccessToast()
+    }
+
+    return quizFailedToast()
+  }
+
+  return (
+    <VStack
+      spacing={4}
+      background="gray.900"
+      padding="6"
+      borderRadius="md"
+      mt="7"
+    >
+      <Text fontWeight="bold" textAlign="left" w="100%">
+        {question.question}
+      </Text>
+      {question.options.map((o, index) => {
+        return (
+          <Box
+            w="100%"
+            borderRadius="md"
+            background={getOptionBackground(index)}
+            padding="3"
+            cursor="pointer"
+            onClick={() => selectAnswer(index)}
+            key={index}
+          >
+            {o.answer}
+          </Box>
+        )
+      })}
+      <Button
+        mx="1"
+        mt="7"
+        colorScheme="green"
+        backgroundColor="green.400"
+        onClick={submit}
+        alignSelf="flex-start"
+      >
+        Submit
+      </Button>
+    </VStack>
+  )
+}
+
+export default Question

pages/lessons/projects/1.mdx

@@ -122,6 +122,8 @@ benefits to this decentralised model as we’ll continue to see.
 
 </SideDrawer>
 
+<Question question="question-1" />
+
 ## Let’s get this party started!
 
 We’re going to write a smart contract, which is going to be a “Web3
@@ -297,13 +299,15 @@ contract WAGMI {
     <Callout emoji='💡' size='md' variant='info'>
     While private and internal are not readable or modifiable from other contracts, its values are set on a public blockchain, making its values visible from the outside world.
     </Callout>
- 
+
     #### Which visibility should I use ?
 
     A simple answer to this is , start with giving every variable a `private` visibility then as you move further in contract developement modify variables to `internal` visibility as a next step of modification. Try to use `public` visibility as little as possible in order to be gas efficient and making less vulnerabilities in the smart contract.
 
 </SideDrawer>
 
+<Question question="question-2" />
+
 ## Creating Functions
 
 Our contract needs a way to store new information on the blockchain! But both
@@ -395,6 +399,8 @@ some more about them in **Variables** and **Functions**.
 
 </SideDrawer>
 
+<Question question="question-3" />
+
 Ok, now we have to figure out a way to store some info on our contract!
 
 We want to _set_ a new message in our contract, so now we define a new function
@@ -705,27 +711,14 @@ you see the magical spell that is being cast here?
 ![Wizard Wooshing on Successful Lesson](/assets/lessons/1/img_10.png)
 
 Before you go ahead and tell us: **what your future in web3 is,** have a check
-on what you didn’t know a little while ago, and what you know now! *
-
-Apart from a user wallet, what else uses a blockchain (Ethereum) address?
-
-How many parameters can we have in an event?
-
-What can we use to find a past event?
+on what you didn’t know a little while ago, and what you know now! Take the quiz
+and prove your knowledge :)
 
-Ethereum uses something for transaction fees. What’s it called?
-
-Where do the values for event parameters get stored?
-
-What is the use of the **pragma solidity** statement in our smart contract?
-
-Do state variables stay permanently on the blockchain?
-
-Can a view function modify the state of the blockchain?
-
-What can we use a smart contract for?
+<br />
 
 <Quiz quiz="lesson-1" />
 
+<br />
+
 **Now, go to the community in Discord to share your new Open Sourcerer
 powers**......and find the answers too!!!

utils/questions/question-1.json

@@ -0,0 +1,15 @@
+{
+  "question": "Apart from a user wallet, what else uses a blockchain (Ethereum) address?",
+  "options": [
+    {
+      "answer": "Transactions"
+    },
+    {
+      "answer": "Smart contracts",
+      "correct": true
+    },
+    {
+      "answer": "NFTs"
+    }
+  ]
+}

utils/questions/question-2.json

@@ -0,0 +1,12 @@
+{
+  "question": "Do state variables stay permanently on the blockchain?",
+  "options": [
+    {
+      "answer": "Yes",
+      "correct": true
+    },
+    {
+      "answer": "No"
+    }
+  ]
+}

utils/questions/question-3.json

@@ -0,0 +1,12 @@
+{
+  "question": "Can a view function modify the state of the blockchain?",
+  "options": [
+    {
+      "answer": "Yes"
+    },
+    {
+      "answer": "No",
+      "correct": true
+    }
+  ]
+}

utils/quizzes/lesson-1.json

@@ -1,21 +1,6 @@
 {
   "title": "Quiz: Lesson 1",
   "questions": [
-    {
-      "question": "Apart from a user wallet, what else uses a blockchain (Ethereum) address?",
-      "options": [
-        {
-          "answer": "Transactions"
-        },
-        {
-          "answer": "Smart contracts",
-          "correct": true
-        },
-        {
-          "answer": "NFTs"
-        }
-      ]
-    },
     {
       "question": "In order to shut down a blockchain you would have to:",
       "options": [
@@ -118,30 +103,6 @@
         }
       ]
     },
-    {
-      "question": "Do state variables stay permanently on the blockchain?",
-      "options": [
-        {
-          "answer": "Yes",
-          "correct": true
-        },
-        {
-          "answer": "No"
-        }
-      ]
-    },
-    {
-      "question": "Can a view function modify the state of the blockchain?",
-      "options": [
-        {
-          "answer": "Yes"
-        },
-        {
-          "answer": "No",
-          "correct": true
-        }
-      ]
-    },
     {
       "question": "What can we use a smart contract for?",
       "options": [