setup learn quizzes for translation

Author: corwintines

src/components/Quiz/QuizRadioGroup.tsx

@@ -10,10 +10,17 @@ import {
   useRadio,
   useRadioGroup,
 } from "@chakra-ui/react"
+import { useIntl } from "react-intl"
+
+// Components
+import Translation from "../Translation"
 
 // Import types
 import { Question } from "../../types"
 
+// Utils
+import { translateMessageId, TranslationKey } from "../../utils/translations"
+
 // Interfaces
 export interface CustomRadioProps extends RadioProps {
   index: number
@@ -33,13 +40,14 @@ const QuizRadioGroup: React.FC<IProps> = ({
   handleSelection,
   selectedAnswer,
 }) => {
+  const intl = useIntl()
   const { getRadioProps, getRootProps } = useRadioGroup({
     onChange: handleSelection,
   })
   const { prompt, answers, correctAnswerId } = questionData
 
   // Memoized values
-  const explanation = useMemo<string>(() => {
+  const explanation = useMemo<TranslationKey>(() => {
     if (!selectedAnswer) return ""
     return answers.filter(({ id }) => id === selectedAnswer)[0].explanation
   }, [selectedAnswer])
@@ -121,7 +129,7 @@ const QuizRadioGroup: React.FC<IProps> = ({
   return (
     <Flex {...getRootProps()} direction="column" w="100%">
       <Text fontWeight="700" fontSize="2xl" mb={6}>
-        {prompt}
+        {translateMessageId(prompt, intl)}
       </Text>
       <Flex direction="column" gap={4}>
         {answers.map(({ id, label }, index) => {
@@ -132,7 +140,7 @@ const QuizRadioGroup: React.FC<IProps> = ({
               key={id}
               display={display}
               index={index}
-              label={label}
+              label={translateMessageId(label, intl)}
               {...getRadioProps({ value: id })}
             />
           )
@@ -141,9 +149,9 @@ const QuizRadioGroup: React.FC<IProps> = ({
       {showAnswer && (
         <Box mt={5}>
           <Text fontWeight="bold" mt={0} mb={2}>
-            Explanation
+            <Translation id="explanation" />
           </Text>
-          <Text m={0}>{explanation}</Text>
+          <Text m={0}>{translateMessageId(explanation, intl)}</Text>
         </Box>
       )}
     </Flex>

src/components/Quiz/QuizSummary.tsx

@@ -1,8 +1,11 @@
 // Import libraries
-import React, { useMemo } from "react"
+import React from "react"
 import { Box, Flex, Text, useMediaQuery } from "@chakra-ui/react"
 import { useIntl } from "react-intl"
 
+// Components
+import Translation from "../Translation"
+
 // Import utilities
 import { numberToPercent } from "../../utils/numberToPercent"
 
@@ -55,16 +58,22 @@ const QuizSummary: React.FC<IProps> = ({
       >
         <Flex>
           <Text {...valueStyles}>{numberToPercent(ratioCorrect, locale)}</Text>
-          <Text {...labelStyles}>Score</Text>
+          <Text {...labelStyles}>
+            <Translation id="score" />
+          </Text>
         </Flex>
         <Flex>
           <Text {...valueStyles}>+{correctCount}</Text>
-          <Text {...labelStyles}>Correct</Text>
+          <Text {...labelStyles}>
+            <Translation id="correct" />
+          </Text>
         </Flex>
         {largerThanMobile && (
           <Flex>
             <Text {...valueStyles}>{questionCount}</Text>
-            <Text {...labelStyles}>Total</Text>
+            <Text {...labelStyles}>
+              <Translation id="total" />
+            </Text>
           </Flex>
         )}
       </Flex>

src/components/Quiz/QuizWidget.tsx

@@ -13,11 +13,13 @@ import {
 } from "@chakra-ui/react"
 import { shuffle } from "lodash"
 import { FaTwitter } from "react-icons/fa"
+import { useIntl } from "react-intl"
 
 // Import components
 import Button from "../Button"
 import QuizRadioGroup from "./QuizRadioGroup"
 import QuizSummary from "./QuizSummary"
+import Translation from "../Translation"
 
 // Import SVGs
 import Trophy from "../../assets/quiz/trophy.svg"
@@ -31,6 +33,7 @@ import questionBank from "../../data/quizzes/questionBank"
 
 // Import utilities
 import { trackCustomEvent } from "../../utils/matomo"
+import { translateMessageId } from "../../utils/translations"
 
 // Import types
 import { AnswerChoice, RawQuiz, Quiz, RawQuestion, Question } from "../../types"
@@ -49,6 +52,7 @@ export interface IProps {
 
 // Component
 const QuizWidget: React.FC<IProps> = ({ quizKey, maxQuestions }) => {
+  const intl = useIntl()
   const [quizData, setQuizData] = useState<Quiz | null>(null)
   const [userQuizProgress, setUserQuizProgress] = useState<Array<AnswerChoice>>(
     []
@@ -86,7 +90,10 @@ const QuizWidget: React.FC<IProps> = ({ quizKey, maxQuestions }) => {
     const trimmedQuestions = maxQuestions
       ? shuffledQuestions.slice(0, maxQuestions)
       : shuffledQuestions
-    const quiz: Quiz = { title: rawQuiz.title, questions: trimmedQuestions }
+    const quiz: Quiz = {
+      title: translateMessageId(rawQuiz.title, intl),
+      questions: trimmedQuestions,
+    }
     setQuizData(quiz)
   }
   useEffect(initialize, [quizKey])
@@ -233,7 +240,7 @@ const QuizWidget: React.FC<IProps> = ({ quizKey, maxQuestions }) => {
         scrollMarginTop={24}
         id="quiz"
       >
-        Test your knowledge
+        <Translation id="test-your-knowledge" />
       </Heading>
       <Box
         w="full"
@@ -361,7 +368,7 @@ const QuizWidget: React.FC<IProps> = ({ quizKey, maxQuestions }) => {
                       onClick={handleRetryQuestion}
                       variant="outline-color"
                     >
-                      Try again
+                      <Translation id="try-again" />
                     </Button>
                   )}
                 {showResults ? (
@@ -370,17 +377,19 @@ const QuizWidget: React.FC<IProps> = ({ quizKey, maxQuestions }) => {
                       leftIcon={<Icon as={FaTwitter} />}
                       onClick={handleShare}
                     >
-                      Share results
+                      <Translation id="share-results" />
                     </Button>
                     {score < 100 && (
-                      <Button onClick={initialize}>Try again</Button>
+                      <Button onClick={initialize}>
+                        <Translation id="try-again" />
+                      </Button>
                     )}
                   </>
                 ) : showAnswer ? (
                   <Button onClick={handleContinue}>
                     {userQuizProgress.length === quizData.questions.length - 1
-                      ? "See results"
-                      : "Next question"}
+                      ? translateMessageId("see-results", intl)
+                      : translateMessageId("next-question", intl)}
                   </Button>
                 ) : (
                   <Button
@@ -392,7 +401,7 @@ const QuizWidget: React.FC<IProps> = ({ quizKey, maxQuestions }) => {
                     }
                     disabled={!currentQuestionAnswerChoice}
                   >
-                    Submit answer
+                    <Translation id="submit-answer" />
                   </Button>
                 )}
               </Flex>

src/data/quizzes/index.ts

@@ -4,35 +4,35 @@ import { RawQuizzes } from "../../types"
 // Declare hash-map of quizzes based on slug key
 const quizzes: RawQuizzes = {
   "what-is-ethereum": {
-    title: "What is Ethereum?",
+    title: "what-is-ethereum",
     questions: ["a001", "a002", "a003", "a004", "a005"],
   },
   "what-is-ether": {
-    title: "What is ether?",
+    title: "page-what-is-ethereum-what-is-ether",
     questions: ["b001", "b002", "b003", "b004"],
   },
   web3: {
-    title: "Web3",
+    title: "web3-title",
     questions: ["c001", "c002", "c003", "c004", "c005"],
   },
   wallets: {
-    title: "Wallets",
+    title: "wallets",
     questions: ["d001", "d002", "d003", "d004"],
   },
   security: {
-    title: "Security",
+    title: "security",
     questions: ["e001", "e002", "e003", "e004", "d003"],
   },
   nfts: {
-    title: "NFTs",
+    title: "nfts",
     questions: ["f001", "f002", "f003", "f004", "f005"],
   },
   "layer-2": {
-    title: "Layer 2s",
+    title: "layer-2",
     questions: ["g001", "g002", "g003", "g004"],
   },
   merge: {
-    title: "The Merge",
+    title: "page-assets-merge",
     questions: ["h001", "h002", "h003", "h004", "h005"],
   },
 }