Merge pull request #110 from danielemery/108-display-question-and-answer-text-when-available

Add basic view for quiz questions and answers on the quiz details page

Author: danielemery

src/QuizDetails.tsx

@@ -4,6 +4,7 @@ import { useMutation, useQuery } from '@apollo/client';
 import { Fragment } from 'preact';
 
 import QuizImageComponent from './QuizImage';
+import QuizQuestions from './QuizQuestions';
 import Button from './components/Button';
 import Loader from './components/Loader';
 import { Table } from './components/Table';
@@ -65,6 +66,7 @@ export default function Quiz() {
               <dd className='text-xs mt-2 lg:text-sm text-gray-500'>{formatDateTime(data.quiz.uploadedAt)}</dd>
             </div>
           </dl>
+          {data.quiz.questions.length > 0 ? <QuizQuestions questions={data.quiz.questions} /> : null}
           {[...data.quiz.images]
             .sort((a, b) => {
               return imageTypeSortValues[a.type] - imageTypeSortValues[b.type];

src/QuizImage.tsx

@@ -12,19 +12,22 @@ interface QuizImageProps {
 function typeToHeading(type: QuizImageType) {
   switch (type) {
     case 'ANSWER':
-      return { title: 'Answers', subtitle: "This image contains answers, it's hidden by default" };
+      return { title: 'Answers Image', subtitle: "This image contains answers, it's hidden by default." };
     case 'QUESTION':
-      return { title: 'Questions' };
+      return { title: 'Questions Image' };
     case 'QUESTION_AND_ANSWER':
-      return { title: 'Questions with Answers', subtitle: "This image contains answers, it's hidden by default" };
+      return {
+        title: 'Questions with Answers Image',
+        subtitle: "This image contains answers, it's hidden by default.",
+      };
   }
 }
 
 export default function QuizImageComponent({ image, className }: QuizImageProps) {
   const [isShown, setIsShown] = useState(image.type === 'QUESTION');
   const { title, subtitle } = typeToHeading(image.type);
   return (
-    <div className={classnames('border-solid border-y-2 py-2', className)}>
+    <div className={classnames('border-solid border-t-2 py-2', className)}>
       <div className='mb-2 lg:mb-4 lg:flex'>
         <h2 className='lg:inline lg:flex-auto font-semibold mb-2'>{title}</h2>
         <Button danger className='flex-none' onClick={() => setIsShown((prev) => !prev)}>

src/QuizQuestions.tsx

@@ -0,0 +1,31 @@
+import { ExpandCollapseSection } from './components/ExpandCollapseSection';
+import { QuizQuestion } from './types/quiz';
+
+export interface QuizQuestionsProps {
+  questions: QuizQuestion[];
+}
+
+export default function QuizQuestions({ questions }: QuizQuestionsProps) {
+  return (
+    <>
+      <ExpandCollapseSection title='Questions' initiallyShown={true}>
+        <ol>
+          {questions.map((question) => (
+            <li key={question.questionNum} className='mb-4'>
+              {question.questionNum}. {question.question}
+            </li>
+          ))}
+        </ol>
+      </ExpandCollapseSection>
+      <ExpandCollapseSection title='Answers' fallbackText='Answers are hidden by default.' initiallyShown={false}>
+        <ol>
+          {questions.map((question) => (
+            <li key={question.questionNum} className='mb-4'>
+              {question.questionNum}. {question.answer}
+            </li>
+          ))}
+        </ol>
+      </ExpandCollapseSection>
+    </>
+  );
+}

src/components/ExpandCollapseSection.tsx

@@ -0,0 +1,32 @@
+import { ComponentChildren } from 'preact';
+import { useState } from 'preact/hooks';
+
+import Button from './Button';
+
+export interface ExpandCollapseSectionProps {
+  title: string;
+  children: ComponentChildren;
+  initiallyShown?: boolean;
+  fallbackText?: string;
+}
+
+export function ExpandCollapseSection({
+  title,
+  children,
+  initiallyShown = true,
+  fallbackText,
+}: ExpandCollapseSectionProps) {
+  const [sectionShown, setSectionShown] = useState(initiallyShown);
+  return (
+    <div className='border-solid border-t-2 py-2'>
+      <div className='mb-2 lg:mb-4 lg:flex'>
+        <h2 className='lg:inline lg:flex-auto font-semibold mb-2'>{title}</h2>
+        <Button danger className='flex-none' onClick={() => setSectionShown((prev) => !prev)}>
+          {sectionShown ? 'Hide' : 'Show'}
+        </Button>
+      </div>
+      {sectionShown && children}
+      {!sectionShown && fallbackText && <p className='italic'>{fallbackText}</p>}
+    </div>
+  );
+}

src/queries/quiz.ts

@@ -52,6 +52,11 @@ export const QUIZ = gql`
         state
         type
       }
+      questions {
+        questionNum
+        question
+        answer
+      }
     }
   }
 `;

src/types/quiz.ts

@@ -14,6 +14,12 @@ export interface QuizImage {
   type: QuizImageType;
 }
 
+export interface QuizQuestion {
+  questionNum: number;
+  question: string;
+  answer: string;
+}
+
 export interface Quiz {
   id: string;
   date: string;
@@ -22,4 +28,5 @@ export interface Quiz {
   uploadedAt: string;
   completions: QuizCompletion[];
   images: QuizImage[];
+  questions: QuizQuestion[];
 }