feat: green buttons when correct answer

Author: 0xChin

components/mdx/Question.tsx

@@ -15,16 +15,13 @@ interface Question {
   ]
 }
 
-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 [answersSubmitted, setAnswersSubmitted] = useState(false)
   const toast = useToast()
 
   const selectAnswer = (optionIndex: number) => {

components/mdx/Quiz.tsx

@@ -42,6 +42,7 @@ const Quiz: FC<QuizProps> = (props: QuizProps) => {
   const [showQuiz, setShowQuiz] = useState(false)
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
   const [answers, setAnswers] = useState<Answers>({})
+  const [correctAnswers, setCorrectAnswers] = useState<number[] | null>(null)
   const toast = useToast()
 
   const nextQuestion = () => {
@@ -69,6 +70,15 @@ const Quiz: FC<QuizProps> = (props: QuizProps) => {
   }
 
   const getQuestionBackground = (optionIndex: number) => {
+    if (
+      correctAnswers &&
+      correctAnswers.indexOf(currentQuestionIndex) !== -1 &&
+      quiz.questions[currentQuestionIndex].options[optionIndex].correct &&
+      answers[currentQuestionIndex] === optionIndex
+    ) {
+      return 'green.500'
+    }
+
     if (answers[currentQuestionIndex] == optionIndex) {
       return 'yellow.600'
     }
@@ -113,13 +123,19 @@ const Quiz: FC<QuizProps> = (props: QuizProps) => {
     let hasWrongAnswers = false
     let wrongAnswersCounter = 0
 
+    const newCorrectAnswers: number[] = []
+
     quiz.questions.forEach((q, index) => {
       if (!q.options[answers[index]].correct) {
         hasWrongAnswers = true
         wrongAnswersCounter++
+      } else {
+        newCorrectAnswers.push(index)
       }
     })
 
+    setCorrectAnswers(newCorrectAnswers)
+
     if (hasWrongAnswers) {
       return quizFailedToast(wrongAnswersCounter)
     }

pages/lessons/projects/1.mdx

@@ -122,8 +122,6 @@ 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
@@ -299,15 +297,13 @@ 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
@@ -399,8 +395,6 @@ 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
@@ -711,14 +705,25 @@ 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! Take the quiz
-and prove your knowledge :)
+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?
+
+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?
 
-<br />
+Do state variables stay permanently on the blockchain?
 
-<Quiz quiz="lesson-1" />
+Can a view function modify the state of the blockchain?
 
-<br />
+What can we use a smart contract for?
 
 **Now, go to the community in Discord to share your new Open Sourcerer
-powers**......and find the answers too!!!
+powers**......and find the answers too!!!