@villagewell/quiz-core

A reusable business logic package for daily quiz functionality across web and mobile applications.

Features

• Redux Integration: Complete Redux slice with actions and reducers
• TypeScript Support: Full type safety with comprehensive interfaces
• Service Layer: Platform-agnostic API service layer
• Custom Hooks: React hooks for easy integration
• Cross-Platform: Works with React and React Native

Installation

1npm install @villagewell/quiz-core

Peer Dependencies

This package requires the following peer dependencies:

1{
2  "react": ">=16.8.0",
3  "react-redux": ">=7.0.0",
4  "@reduxjs/toolkit": ">=1.0.0",
5  "redux": ">=4.0.0"
6}

Quick Start

1. Add the Reducer to Your Store

1import { configureStore } from '@reduxjs/toolkit';
2import { quizReducer } from '@villagewell/quiz-core';
3
4const store = configureStore({
5  reducer: {
6    quiz: quizReducer,
7    // ... other reducers
8  },
9});

2. Use the Hook in Your Component

1import React from 'react';
2import { useQuiz } from '@villagewell/quiz-core';
3
4const QuizComponent = () => {
5  const config = {
6    baseURL: 'https://api.villagewell.com',
7    token: 'your-auth-token'
8  };
9
10  const { 
11    fetchQuizQuestionsById, 
12    setQuestionAnswers, 
13    submitAnswers, 
14    resetQuiz 
15  } = useQuiz(config);
16
17  const handleStartQuiz = async () => {
18    await fetchQuizQuestionsById(123);
19  };
20
21  const handleAnswer = (questionId: number, answerId: number) => {
22    setQuestionAnswers({ question_id: questionId, answer_id: answerId });
23  };
24
25  const handleSubmit = async () => {
26    const result = await submitAnswers(answers);
27    if (result) {
28      console.log('Quiz completed!');
29    }
30  };
31
32  return (
33    <div>
34      {/* Your quiz UI */}
35    </div>
36  );
37};

API Reference

Types

Question

1interface Question {
2  id: number;
3  text: string;
4  question_type?: object;
5  created_at: string;
6  updated_at: string;
7  quiz_id: number;
8  questionAnswer: QuestionAnswerResponse[];
9}

RecordAnswerDto

1interface RecordAnswerDto {
2  question_id: number;
3  answer_id: number;
4}

QuizState

1interface QuizState {
2  question_details: Question[] | null;
3  answer_details: RecordAnswerDto[] | null;
4  record_answer: RecordAnswer | null;
5  loading: boolean;
6  error: boolean;
7}

Redux Actions

setQuizQuestions(questions: Question[])

Sets the quiz questions in the store.

setQuizAnswers(answers: RecordAnswerDto[])

Sets the user's answers in the store.

setRecordAnswer(record: RecordAnswer | null)

Sets the quiz submission result.

resetQuizReducer()

Resets the entire quiz state to initial values.

Selectors

getQuestionDetails(state: RootState)

Returns the current quiz questions.

getQuizAnswers(state: RootState)

Returns the user's current answers.

getRecordAnswer(state: RootState)

Returns the quiz submission result.

getQuizLoading(state: RootState)

Returns the loading state.

getQuizError(state: RootState)

Returns the error state.

Hooks

useQuiz(config: QuizServiceConfig)

Main hook for quiz functionality.

Returns:

• fetchQuizQuestionsById(id: number): Fetch questions for a quiz
• setQuestionAnswers(answerData: RecordAnswerDto): Add an answer
• submitAnswers(answerParams: RecordAnswerDto[]): Submit all answers
• resetQuiz(): Reset the quiz state

useQuizState()

Hook for accessing quiz state without actions.

Returns:

• questions: Current questions
• answers: Current answers
• recordAnswer: Submission result
• loading: Loading state
• error: Error state

Services

QuizService

Service class for API interactions.

Methods:

• fetchQuestions(quizId: number): Fetch quiz questions
• recordAnswer(answers: RecordAnswerDto[]): Submit answers
• updateToken(token: string): Update authentication token
• updateBaseURL(baseURL: string): Update API base URL

Examples

Basic Quiz Flow

1import { useQuiz, useQuizState } from '@villagewell/quiz-core';
2
3const QuizFlow = () => {
4  const config = {
5    baseURL: process.env.API_BASE_URL,
6    token: userToken
7  };
8
9  const { fetchQuizQuestionsById, setQuestionAnswers, submitAnswers } = useQuiz(config);
10  const { questions, answers, loading, error } = useQuizState();
11
12  useEffect(() => {
13    fetchQuizQuestionsById(quizId);
14  }, [quizId]);
15
16  const handleAnswerSelect = (questionId: number, answerId: number) => {
17    setQuestionAnswers({ question_id: questionId, answer_id: answerId });
18  };
19
20  const handleSubmit = async () => {
21    if (answers) {
22      const result = await submitAnswers(answers);
23      if (result) {
24        // Handle success
25      }
26    }
27  };
28
29  if (loading) return <div>Loading...</div>;
30  if (error) return <div>Error loading quiz</div>;
31
32  return (
33    <div>
34      {questions?.map(question => (
35        <div key={question.id}>
36          <h3>{question.text}</h3>
37          {question.questionAnswer.map(answer => (
38            <button
39              key={answer.id}
40              onClick={() => handleAnswerSelect(question.id, answer.id)}
41            >
42              {answer.text}
43            </button>
44          ))}
45        </div>
46      ))}
47      <button onClick={handleSubmit}>Submit Quiz</button>
48    </div>
49  );
50};

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

License

MIT