Merge pull request #10320 from ethereum/feat-learning-quizzes-hub

feat: Learning Quizzes Hub

Author: nhsz

redirects.json

@@ -251,6 +251,10 @@
     "fromPath": "/upgrades",
     "toPath": "/en/roadmap"
   },
+  {
+    "fromPath": "/quizzes",
+    "toPath": "/en/quizzes/"
+  },
   {
     "fromPath": "/*/upgrades",
     "toPath": "/:splat/roadmap"

src/@chakra-ui/gatsby-plugin/components/Progress.ts

@@ -0,0 +1,40 @@
+import { progressAnatomy as parts } from "@chakra-ui/anatomy"
+import { defineStyleConfig } from "@chakra-ui/react"
+import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system"
+
+const { definePartsStyle } = createMultiStyleConfigHelpers(parts.keys)
+
+const baseStyle = definePartsStyle(() => ({
+  track: {
+    bg: "primaryLight",
+    // `borderRadius` applies to both track and `filledTrack` (https://github.com/chakra-ui/chakra-ui/pull/2946)
+    borderRadius: "full",
+  },
+  filledTrack: {
+    bgColor: "primary",
+  },
+}))
+
+// see https://github.com/chakra-ui/chakra-ui/blob/38acfe89c5d1f1edc67bbc44e2edd38980ca3e08/packages/components/theme/src/components/progress.ts#L63
+const sizes = {
+  xs: definePartsStyle({
+    track: { h: "1" },
+  }),
+  sm: definePartsStyle({
+    track: { h: "2" },
+  }),
+  md: definePartsStyle({
+    track: { h: "2.5" },
+  }),
+  lg: definePartsStyle({
+    track: { h: "3" },
+  }),
+}
+
+export const Progress = defineStyleConfig({
+  sizes,
+  baseStyle,
+  defaultProps: {
+    size: "md",
+  },
+})

src/@chakra-ui/gatsby-plugin/components/index.ts

@@ -4,6 +4,7 @@ import { Link } from "./Link"
 import { Tag } from "./Tag"
 import { Modal } from "./Modal"
 import { Checkbox } from "./Checkbox"
+import { Progress } from "./Progress"
 import { Tabs } from "./Tabs"
 import {
   accordionDefaultTheme,
@@ -40,6 +41,7 @@ export default {
   Link,
   Menu: menuDefaultTheme,
   Modal,
+  Progress,
   Select: selectDefaultTheme,
   Spinner: spinnerDefaultTheme,
   Switch: switchDefaultTheme,

src/components/Footer.tsx

@@ -162,6 +162,10 @@ const Footer: React.FC<IProps> = () => {
           text: t("zero-knowledge-proofs"),
           to: "/zero-knowledge-proofs/",
         },
+        {
+          text: t("quizzes-title"),
+          to: "/quizzes/",
+        },
       ],
     },
     {

src/components/Nav/useNav.ts

@@ -116,6 +116,10 @@ export const useNav = ({ path }: { path: string }) => {
               text: t("smart-contracts"),
               to: "/smart-contracts/",
             },
+            {
+              text: t("quizzes-title"),
+              to: "/quizzes/",
+            },
           ],
         },
         {

src/components/Quiz/QuizItem.tsx

@@ -0,0 +1,102 @@
+import React, { useContext } from "react"
+import { Box, Flex, ListItem, Stack, Text } from "@chakra-ui/react"
+import { useTranslation } from "gatsby-plugin-react-i18next"
+
+import Button from "../Button"
+import Translation from "../Translation"
+import Tag from "../Tag"
+import { GreenTickIcon } from "../icons/quiz"
+
+import { QuizzesHubContext } from "./context"
+
+import { trackCustomEvent } from "../../utils/matomo"
+
+import { QuizzesListItem } from "../../types"
+
+import allQuizzesData from "../../data/quizzes"
+
+const QuizItem: React.FC<QuizzesListItem> = (props) => {
+  const { id, level, quizHandler, modalHandler } = props
+  const {
+    userStats: { completed },
+  } = useContext(QuizzesHubContext)
+  const numberOfQuestions = allQuizzesData[id].questions.length
+  const isCompleted = JSON.parse(completed)[id][0]
+
+  const { t } = useTranslation()
+
+  const handleStart = () => {
+    quizHandler(id)
+    modalHandler(true)
+
+    trackCustomEvent({
+      eventCategory: "quiz_hub_events",
+      eventAction: "quizzes click",
+      eventName: `${id}`,
+    })
+  }
+
+  return (
+    <ListItem
+      color={isCompleted ? "bodyMedium" : "text"}
+      fontWeight="bold"
+      px={{ base: 0, lg: 4 }}
+      py={4}
+      borderBottom="1px solid"
+      borderColor="disabled"
+      mb={0}
+      sx={{ counterIncrement: "list-counter" }}
+    >
+      <Flex
+        justifyContent="space-between"
+        alignItems={{ base: "flex-start", lg: "center" }}
+        direction={{ base: "column", lg: "row" }}
+      >
+        <Stack mb={{ base: 5, lg: 0 }}>
+          <Flex gap={2} alignItems="center">
+            <Text
+              color={isCompleted ? "bodyMedium" : "text"}
+              fontWeight="bold"
+              mb={0}
+              _before={{
+                content: 'counter(list-counter) ". "',
+              }}
+            >
+              <Translation id={allQuizzesData[id].title} />
+            </Text>
+
+            {/* Show green tick if quizz was completed only */}
+            <Box display={isCompleted ? "flex" : "none"}>
+              <GreenTickIcon />
+            </Box>
+          </Flex>
+
+          {/* Labels */}
+          <Flex gap={3}>
+            {/* number of questions - label */}
+            <Tag
+              label={t(`${numberOfQuestions} ${t("questions")}`)}
+              ml={{ lg: -2 }}
+            />
+
+            {/* difficulty - label */}
+            <Tag label={level.toUpperCase()} />
+          </Flex>
+        </Stack>
+
+        {/* Start Button */}
+        <Box w={{ base: "full", lg: "auto" }}>
+          <Button
+            variant="outline-color"
+            w={{ base: "full", lg: "auto" }}
+            onClick={handleStart}
+          >
+            <Translation id="start" />
+          </Button>
+        </Box>
+      </Flex>
+    </ListItem>
+  )
+}
+
+export default QuizItem

src/components/Quiz/QuizRadioGroup.tsx

@@ -1,4 +1,3 @@
-// Import libraries
 import React, { useMemo } from "react"
 import {
   Box,
@@ -12,28 +11,24 @@ import {
 } from "@chakra-ui/react"
 import { useTranslation } from "gatsby-plugin-react-i18next"
 
-// Components
 import Translation from "../Translation"
 
-// Import types
-import { Question } from "../../types"
-
-// Utils
 import { TranslationKey } from "../../utils/translations"
 
-// Interfaces
-export interface CustomRadioProps extends RadioProps {
+import { Question } from "../../types"
+
+interface CustomRadioProps extends RadioProps {
   index: number
   label: string
 }
-export interface IProps {
+
+interface IProps {
   questionData: Question
   showAnswer: boolean
   handleSelection: (answerId: string) => void
   selectedAnswer: string | null
 }
 
-// Component
 const QuizRadioGroup: React.FC<IProps> = ({
   questionData,
   showAnswer,
@@ -51,7 +46,6 @@ const QuizRadioGroup: React.FC<IProps> = ({
     if (!selectedAnswer) return ""
     return answers.filter(({ id }) => id === selectedAnswer)[0].explanation
   }, [selectedAnswer])
-
   const isSelectedCorrect = useMemo<boolean>(
     () => correctAnswerId === selectedAnswer,
     [selectedAnswer]
@@ -128,9 +122,15 @@ const QuizRadioGroup: React.FC<IProps> = ({
   // Render QuizRadioGroup
   return (
     <Flex {...getRootProps()} direction="column" w="100%">
-      <Text fontWeight="700" fontSize="2xl" mb={6}>
+      <Text
+        textAlign={{ base: "center", md: "left" }}
+        fontWeight="700"
+        fontSize="2xl"
+        mb={6}
+      >
         {t(prompt)}
       </Text>
+
       <Flex direction="column" gap={4}>
         {answers.map(({ id, label }, index) => {
           const display =
@@ -146,6 +146,7 @@ const QuizRadioGroup: React.FC<IProps> = ({
           )
         })}
       </Flex>
+
       {showAnswer && (
         <Box mt={5}>
           <Text fontWeight="bold" mt={0} mb={2}>

src/components/Quiz/QuizSummary.tsx

@@ -1,41 +1,63 @@
-// Import libraries
-import React from "react"
+import React, { useEffect } from "react"
 import { Box, Flex, Text, useMediaQuery } from "@chakra-ui/react"
 import { useI18next } from "gatsby-plugin-react-i18next"
 
-// Components
 import Translation from "../Translation"
 
-// Import utilities
 import { numberToPercent } from "../../utils/numberToPercent"
+import { updateUserStats } from "./utils"
+import { UserStats } from "../../types"
 
-// Interfaces
-export interface IProps {
-  correctCount: number
+interface IProps {
+  quizKey: string
+  numberOfCorrectAnswers: number
   isPassingScore: boolean
   questionCount: number
   ratioCorrect: number
+  quizScore: number
+  setUserStats: (stats: UserStats) => void
 }
 
-// Component
 const QuizSummary: React.FC<IProps> = ({
-  correctCount,
+  quizKey,
+  numberOfCorrectAnswers,
   isPassingScore,
   questionCount,
   ratioCorrect,
+  quizScore,
+  setUserStats,
 }) => {
   const { language } = useI18next()
   const [largerThanMobile] = useMediaQuery("(min-width: 30em)")
 
   const valueStyles = { fontWeight: "700", mb: 2 }
   const labelStyles = { fontSize: "sm", m: 0, color: "disabled" }
 
-  // Render QuizSummary component
+  // QuizSummary is rendered when user has finished the quiz, proper time to update the stats
+  useEffect(() => {
+    updateUserStats({
+      quizKey,
+      quizScore,
+      numberOfCorrectAnswers,
+      setUserStats,
+    })
+  }, [])
+
   return (
     <Box w="full" fontSize={["xl", "2xl"]}>
-      <Text fontWeight="700" textAlign="center">
-        {isPassingScore ? "You passed the quiz!" : "Your results"}
+      <Text
+        fontWeight="700"
+        textAlign="center"
+        color={isPassingScore ? "success" : "body"}
+        fontSize="3xl"
+      >
+        {isPassingScore ? (
+          <Translation id="passed" />
+        ) : (
+          <Translation id="your-results" />
+        )}
       </Text>
+
       <Flex
         p={4}
         justify="center"
@@ -64,17 +86,19 @@ const QuizSummary: React.FC<IProps> = ({
             <Translation id="score" />
           </Text>
         </Flex>
+
         <Flex>
-          <Text {...valueStyles}>+{correctCount}</Text>
+          <Text {...valueStyles}>+{numberOfCorrectAnswers}</Text>
           <Text {...labelStyles}>
             <Translation id="correct" />
           </Text>
         </Flex>
+
         {largerThanMobile && (
           <Flex>
             <Text {...valueStyles}>{questionCount}</Text>
             <Text {...labelStyles}>
-              <Translation id="total" />
+              <Translation id="questions" />
             </Text>
           </Flex>
         )}