feat: add quiz component

Author: 0xChin

components/mdx/Components.tsx

@@ -3,7 +3,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import dracula from 'react-syntax-highlighter/dist/cjs/styles/prism/dracula'
 import { CopyToClipboard } from '../CopyToClipboard'
 import SideDrawer from './SideDrawer'
-import Form from './Form'
+import Quiz from './Quiz'
 import Callout from './Callout'
 
 const Components = {
@@ -42,7 +42,7 @@ const Components = {
   ),
   SideDrawer,
   Callout,
-  Form,
+  Quiz,
 }
 
 export default Components

components/mdx/Form.tsx

@@ -0,0 +1,136 @@
+import {
+  Box,
+  VStack,
+  Text,
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+} from '@chakra-ui/react'
+import React, { FC, useState } from 'react'
+
+interface QuizProps {
+  quiz: string
+}
+
+interface Quiz {
+  title: string
+  questions: [
+    {
+      question: string
+      options: [
+        {
+          answer: string
+          correct?: boolean
+        },
+      ]
+    },
+  ]
+}
+
+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)
+
+  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)}
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>{quiz.title}</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={6}>
+            <VStack
+              spacing={4}
+              background="gray.900"
+              padding="6"
+              borderRadius="md"
+            >
+              <Text fontWeight="bold" w="100%">
+                {quiz.questions[currenQuestionIndex].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>
+              <Box
+                display="flex"
+                justifyContent="space-between"
+                w="100%"
+                alignItems="center"
+              >
+                <Text w="100%">{`Question ${currenQuestionIndex + 1}/${
+                  quiz.questions.length
+                }`}</Text>
+                <Box w="100%" display="flex">
+                  <Button mx="2">{'< Previous'}</Button>
+                  <Button>{'Next >'}</Button>
+                </Box>
+              </Box>
+            </VStack>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button
+              mx="1"
+              colorScheme="red"
+              backgroundColor="red.600"
+              onClick={() => setShowQuiz(false)}
+            >
+              Cancel
+            </Button>
+            <Button mx="1" colorScheme="green" backgroundColor="green.400">
+              Submit
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
+
+export default Quiz

components/mdx/Quiz.tsx

@@ -6,6 +6,8 @@ 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?
@@ -725,7 +727,5 @@ Can a view function modify the state of the blockchain?
 
 What can we use a smart contract for?
 
-<Form />
-
 **Now, go to the community in Discord to share your new Open Sourcerer
 powers**......and find the answers too!!!

pages/lessons/projects/1.mdx

@@ -0,0 +1,20 @@
+{
+  "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": "Just user wallets have an address"
+        }
+      ]
+    }
+  ]
+}