feat: quiz question image

MarcoEscaleira · Mar 20, 2024 · 658b40f · 658b40f
1 parent e55eab2
commit 658b40f
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 4 deletions.
diff --git a/src/__generated__/gql.ts b/src/__generated__/gql.ts
diff --git a/src/__generated__/graphql.ts b/src/__generated__/graphql.ts
diff --git a/src/components/Quiz/QuestionsFields.tsx b/src/components/Quiz/QuestionsFields.tsx
@@ -56,6 +56,15 @@ export function QuestionFields() {
             />
           </div>
 
+          <div className="mb-2">
+            <FormInput
+              name={`questions.${questionIndex}.image`}
+              size="md"
+              label="Image"
+              fieldError={errors.questions?.[questionIndex]?.image}
+            />
+          </div>
+
           <Select
             label="Type"
             value={getValues(`questions.${questionIndex}.type`)}

diff --git a/src/components/Quiz/quizFormSchema.ts b/src/components/Quiz/quizFormSchema.ts
@@ -17,6 +17,7 @@ export const quizFormSchema = z
             correct: z.boolean(),
           })
         ),
+        image: z.string().optional(),
       })
     ),
     difficulty: z.nativeEnum(Difficulty),

diff --git a/src/components/QuizAttempt/QuizAttempt.tsx b/src/components/QuizAttempt/QuizAttempt.tsx
@@ -115,6 +115,12 @@ export function QuizAttempt({ quiz }: QuizAttemptProps) {
           {question.question}
         </Typography>
 
+        {question.image && (
+          <div className="mt-6 flex w-full justify-center">
+            <img src={question.image} alt="question figure" className="size-[300px]" />
+          </div>
+        )}
+
         <div className="mt-10 flex flex-wrap gap-5 sm:gap-7">
           {question.options.map(({ text, chosen }) => (
             <Button

diff --git a/src/utils/queries/QuizById.ts b/src/utils/queries/QuizById.ts
@@ -13,6 +13,7 @@ export const GET_QUIZ_BY_ID = gql(/* GraphQL */ `
       questions {
         question
         type
+        image
         options {
           correct
           text