react-quiz-component icon indicating copy to clipboard operation
react-quiz-component copied to clipboard

Types for Typescript users of react-quiz-component (.d.ts)

Open d3vAdv3ntur3s opened this issue 8 months ago • 2 comments

Nice job with the library, I was trialing the component, doesn't quite fit for my use case, but I thought it might be useful to have some Types to assist for Typescript users. Quickly put this together whilst I was trying out the component, hopefully helpful to you if not onlookers.

File: react-quiz-component.d.ts

    declare module 'react-quiz-component' {
      import { ReactElement } from 'react';
      
      type QuestionType = "text" | "photo"
      
      type AnswerSelectionType = "single" | "multiple"
  
      type Question = {
          question: string
          questionType: QuestionType
          answers: string[]
          correctAnswer: string
          answerSelectionType: AnswerSelectionType
          messageForCorrectAnswer?: string
          messageForIncorrectAnswer?: string
          explanation?: string
          point?: string
          segment?: string
      }
  
      type QuizStructure = {
          quizTitle: string
          questions: question[]
      }
  
      type QuizProps = {
          quiz: QuizStructure;
          disableSynopsis?: boolean;
          shuffleAnswer?: boolean;
          shuffle?: boolean;
          showDefaultResult?: boolean;
          showInstantFeedback?: boolean;
          continueTillCorrect?: boolean;
          timer?: number;
          allowPauseTimer?: boolean
      }
  
      const Quiz: (props: QuizProps) => ReactElement;
      export default Quiz;
  }
`

d3vAdv3ntur3s avatar May 30 '24 16:05 d3vAdv3ntur3s