@constructor-io/constructorio-ui-quizzes 1.3.11 → 1.4.0

package/lib/mjs/hooks/usePropsGetters/useSelectInputProps.js

@@ -0,0 +1,79 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { QuestionTypes } from '../../components/CioQuiz/actions';
+// eslint-disable-next-line max-params
+export default function useSelectInputProps(quizAnswerChanged, nextQuestion, currentQuestionData, answerInputs) {
+    const type = currentQuestionData?.type;
+    const hasImages = currentQuestionData?.options?.some((option) => option.images);
+    const [selected, setSelected] = useState({});
+    const singleSelectClicked = useRef({});
+    const toggleIdSelected = useCallback((id) => {
+        if (type === QuestionTypes.SingleSelect) {
+            singleSelectClicked.current = true;
+            setSelected({ [id]: true });
+        }
+        else if (type === QuestionTypes.MultipleSelect) {
+            if (selected[id]) {
+                const newState = { ...selected };
+                delete newState[id];
+                setSelected(newState);
+            }
+            else {
+                setSelected({ ...selected, [id]: true });
+            }
+        }
+    }, [selected, type]);
+    const onOptionKeyDown = (event, id) => {
+        if (event?.key === ' ' || event?.key === 'Enter') {
+            toggleIdSelected(id);
+        }
+    };
+    // Update component local state
+    useEffect(() => {
+        if (currentQuestionData?.type) {
+            const nextQuestionId = currentQuestionData.id;
+            const currentAnswer = answerInputs?.[nextQuestionId];
+            const prevSelected = {};
+            if (Array.isArray(currentAnswer?.value)) {
+                currentAnswer?.value?.forEach((answer) => {
+                    prevSelected[Number(answer)] = true;
+                    setSelected(prevSelected);
+                });
+            }
+        }
+        singleSelectClicked.current = false;
+        return function clearState() {
+            setSelected({});
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentQuestionData?.id]);
+    // Update global state
+    useEffect(() => {
+        if (currentQuestionData?.type === 'multiple' || currentQuestionData?.type === 'single') {
+            const selectedAnswers = Object.keys(selected).filter((key) => selected[Number(key)]);
+            quizAnswerChanged(selectedAnswers);
+        }
+    }, [selected, currentQuestionData?.id, currentQuestionData?.type, quizAnswerChanged]);
+    // Go to next question only every time answerInputs (answers input state) changes...
+    // and it's a singleSelectQuestion and user has just clicked on an option
+    useEffect(() => {
+        if (currentQuestionData?.type === 'single' && singleSelectClicked.current) {
+            nextQuestion();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [answerInputs]);
+    const getSelectInputProps = useCallback((option) => ({
+        className: `${!hasImages ? 'cio-question-option-container-text-only' : 'cio-question-option-container'} ${selected[option.id] ? 'selected' : ''}`,
+        onClick: () => {
+            toggleIdSelected(option.id);
+        },
+        onKeyDown: (event) => {
+            onOptionKeyDown(event, option.id);
+        },
+        role: 'button',
+        tabIndex: 0,
+        key: option.id,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentQuestionData?.id, selected]);
+    return getSelectInputProps;
+}

package/lib/mjs/hooks/useQuiz.js

@@ -1,31 +1,24 @@
 import useCioClient from './useCioClient';
 import useConsoleErrors from './useConsoleErrors';
+import usePropsGetters from './usePropsGetters';
 import usePrimaryColorStyles from './usePrimaryColorStyles';
-import useQuizApiState from './useQuizApiState';
 import useQuizEvents from './useQuizEvents';
-import useQuizLocalState from './useQuizLocalState';
-const useQuiz = ({ quizId, apiKey, cioJsClient, quizVersionId, resultsPageOptions, sessionStateOptions, primaryColor, }) => {
+import useQuizState from './useQuizState';
+const useQuiz = (quizOptions) => {
+    const { apiKey, cioJsClient, primaryColor } = quizOptions;
     // Log console errors for required parameters quizId and resultsPageOptions
-    useConsoleErrors(quizId, resultsPageOptions);
-    // Quiz Local state
-    const { quizLocalState, resetQuizLocalState, dispatchLocalState, hydrateQuizLocalState, hasQuizStoredState, resetQuizStoredState, } = useQuizLocalState(sessionStateOptions?.sessionStateKey);
+    useConsoleErrors(quizOptions);
     // Quiz Cio Client
     const cioClient = useCioClient({ apiKey, cioJsClient });
-    // Quiz API state
-    const { isFirstQuestion, quizApiState, resetQuizApiState } = useQuizApiState(quizId, quizLocalState, dispatchLocalState, resultsPageOptions, quizVersionId, cioClient);
+    // Quiz state (Local and API)
+    const quizState = useQuizState(quizOptions, cioClient);
     // Quiz callback events
-    const quizEvents = useQuizEvents({
-        cioClient,
-        quizApiState,
-        resultsPageOptions,
-        dispatchLocalState,
-        resetQuizApiState,
-        resetQuizLocalState,
-        hydrateQuizLocalState,
-        resetQuizStoredState,
-        hasQuizStoredState,
-    });
+    const quizEvents = useQuizEvents(quizOptions, cioClient, quizState);
+    // Props getters
+    const { quizApiState, quizLocalState } = quizState;
+    const propGetters = usePropsGetters(quizEvents, quizApiState, quizLocalState);
     const primaryColorStyles = usePrimaryColorStyles(primaryColor);
+    console.log('quizLocalState.answerInputs', quizLocalState.answerInputs);
     return {
         cioClient,
         state: {
@@ -37,16 +30,15 @@ const useQuiz = ({ quizId, apiKey, cioJsClient, quizVersionId, resultsPageOption
                 requestState: quizApiState.quizRequestState,
                 versionId: quizLocalState.quizVersionId,
                 sessionId: quizLocalState.quizSessionId,
-                firstQuestion: quizApiState.quizFirstQuestion,
                 currentQuestion: quizApiState.quizCurrentQuestion,
                 results: quizApiState.quizResults,
                 resultsFilters: quizApiState.quizResultsFilters,
-                isFirstQuestion,
             },
         },
         events: {
             ...quizEvents,
         },
+        ...propGetters,
         primaryColorStyles,
     };
 };

package/lib/mjs/hooks/useQuizEvents/index.js

@@ -1,37 +1,42 @@
 import useQuizResultsLoaded from './useQuizResultsLoaded';
 import useQuizResultClick from './useQuizResultClick';
 import useQuizAddToCart from './useQuizAddToCart';
-import useQuizNextClick from './useQuizNextClick';
 import useQuizBackClick from './useQuizBackClick';
-const useQuizEvents = (options) => {
-    const { cioClient, quizApiState, resultsPageOptions, dispatchLocalState, resetQuizApiState, resetQuizLocalState, hydrateQuizLocalState, resetQuizStoredState, hasQuizStoredState, } = options;
+import useQuizAnswerChangeHandler from './useQuizAnswerChangeHandler';
+import useQuizNextClick from './useQuizNextClick';
+import useQuizResetClick from './useQuizResetClick';
+import useHydrateQuizLocalState from './useHydrateQuizLocalState';
+import { resetQuizSessionStorageState } from '../../utils';
+const useQuizEvents = (quizOptions, cioClient, quizState) => {
+    const { quizApiState, dispatchLocalState, dispatchApiState, hasQuizStoredState, quizStateKey, quizLocalState, } = quizState;
+    const { resultsPageOptions } = quizOptions;
     const { onAddToCartClick, onQuizResultClick, onQuizResultsLoaded } = resultsPageOptions;
-    // Quiz Next button click
-    const nextQuestion = useQuizNextClick(quizApiState, dispatchLocalState);
+    // Quiz answer change
+    const quizAnswerChanged = useQuizAnswerChangeHandler(quizApiState, dispatchLocalState);
+    // Quiz Next button click callback
+    const nextQuestion = useQuizNextClick(quizApiState, quizLocalState, dispatchLocalState);
     // Quiz Back button click callback
-    const previousQuestion = useQuizBackClick(dispatchLocalState);
+    const previousQuestion = useQuizBackClick(quizApiState, dispatchLocalState);
     // Quiz result add to cart callback
     const addToCart = useQuizAddToCart(cioClient, quizApiState, onAddToCartClick);
     // Quiz result click callback
     const resultClick = useQuizResultClick(cioClient, quizApiState, onQuizResultClick);
     // Quiz results loaded event
     useQuizResultsLoaded(cioClient, quizApiState, onQuizResultsLoaded);
-    const resetQuiz = () => {
-        if (quizApiState.quizResults) {
-            resetQuizApiState();
-            resetQuizLocalState();
-            resetQuizStoredState();
-        }
-    };
+    // Quiz reset
+    const resetQuiz = useQuizResetClick(quizStateKey, dispatchLocalState, dispatchApiState, quizApiState.quizResults);
+    // Quiz rehydrate
+    const hydrateQuizLocalState = useHydrateQuizLocalState(quizStateKey, dispatchLocalState);
     return {
         addToCart,
         resultClick,
-        nextQuestion,
+        quizAnswerChanged,
         previousQuestion,
+        nextQuestion,
         resetQuiz,
         hydrateQuiz: hydrateQuizLocalState,
-        hasStoredState: hasQuizStoredState,
-        resetStoredState: resetQuizStoredState,
+        hasSessionStorageState: hasQuizStoredState,
+        resetSessionStorageState: resetQuizSessionStorageState(quizStateKey),
     };
 };
 export default useQuizEvents;

package/lib/mjs/hooks/useQuizEvents/useHydrateQuizLocalState.js

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import { QuestionTypes } from '../../components/CioQuiz/actions';
+import { getStateFromSessionStorage } from '../../utils';
+const useHydrateQuizLocalState = (quizStateKey, dispatchLocalState) => {
+    const quizState = getStateFromSessionStorage(quizStateKey);
+    const hydrateQuizLocalStateHandler = useCallback(() => {
+        if (quizState) {
+            dispatchLocalState({
+                type: QuestionTypes.Hydrate,
+                payload: quizState,
+            });
+        }
+    }, [dispatchLocalState, quizState]);
+    return hydrateQuizLocalStateHandler;
+};
+export default useHydrateQuizLocalState;

package/lib/mjs/hooks/useQuizEvents/useQuizAddToCart.js

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { trackQuizConversion } from '../../services';
 import { isFunction } from '../../utils';
 const useQuizAddToCart = (cioClient, quizApiState, onAddToCartClick) => {
-    const addToCartClickHandler = useCallback((e, result, price) => {
+    const quizAddToCartClickHandler = useCallback((e, result, price) => {
         e.preventDefault();
         if (quizApiState.quizResults) {
             // Tracking call
@@ -13,6 +13,6 @@ const useQuizAddToCart = (cioClient, quizApiState, onAddToCartClick) => {
             }
         }
     }, [quizApiState, cioClient, onAddToCartClick]);
-    return addToCartClickHandler;
+    return quizAddToCartClickHandler;
 };
 export default useQuizAddToCart;

package/lib/mjs/hooks/useQuizEvents/useQuizAnswerChangeHandler.js

@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+import { QuestionTypes } from '../../components/CioQuiz/actions';
+const useQuizAnswerChangeHandler = (quizApiState, dispatchLocalState) => {
+    const quizAnswerChangedHandler = useCallback((payload) => {
+        const questionType = quizApiState.quizCurrentQuestion?.next_question.type;
+        const currentQuestion = quizApiState.quizCurrentQuestion;
+        switch (questionType) {
+            case QuestionTypes.Cover:
+                dispatchLocalState({
+                    type: QuestionTypes.Cover,
+                    payload: {
+                        questionId: currentQuestion.next_question.id,
+                        input: '',
+                        isLastQuestion: currentQuestion.is_last_question,
+                    },
+                });
+                break;
+            case QuestionTypes.OpenText:
+                dispatchLocalState({
+                    type: QuestionTypes.OpenText,
+                    payload: {
+                        questionId: currentQuestion.next_question.id,
+                        input: payload,
+                        isLastQuestion: currentQuestion.is_last_question,
+                    },
+                });
+                break;
+            case QuestionTypes.SingleSelect:
+            case QuestionTypes.MultipleSelect:
+                dispatchLocalState({
+                    type: currentQuestion.next_question.type,
+                    payload: {
+                        questionId: currentQuestion.next_question.id,
+                        input: payload,
+                        isLastQuestion: currentQuestion.is_last_question,
+                    },
+                });
+                break;
+            default:
+                break;
+        }
+    }, [quizApiState, dispatchLocalState]);
+    return quizAnswerChangedHandler;
+};
+export default useQuizAnswerChangeHandler;

package/lib/mjs/hooks/useQuizEvents/useQuizBackClick.js

@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
 import { QuestionTypes } from '../../components/CioQuiz/actions';
-const useQuizBackClick = (dispatchLocalState) => {
-    const quizBackHandler = useCallback(() => {
+const useQuizBackClick = (quizApiState, dispatchLocalState) => {
+    const quizBackClickHandler = useCallback(() => {
         if (dispatchLocalState) {
-            dispatchLocalState({ type: QuestionTypes.Back });
+            dispatchLocalState({ type: QuestionTypes.Back, payload: quizApiState.quizCurrentQuestion });
         }
-    }, [dispatchLocalState]);
-    return quizBackHandler;
+    }, [dispatchLocalState, quizApiState.quizCurrentQuestion]);
+    return quizBackClickHandler;
 };
 export default useQuizBackClick;

package/lib/mjs/hooks/useQuizEvents/useQuizNextClick.js

@@ -1,45 +1,19 @@
 import { useCallback } from 'react';
 import { QuestionTypes } from '../../components/CioQuiz/actions';
-const useQuizNextClick = (quizApiState, dispatchLocalState) => {
-    const quizNextHandler = useCallback((payload) => {
-        const questionType = quizApiState.quizCurrentQuestion?.next_question.type;
-        const currentQuestion = quizApiState.quizCurrentQuestion;
-        switch (questionType) {
-            case QuestionTypes.Cover:
+const useQuizNextClick = (quizApiState, quizLocalState, dispatchLocalState) => {
+    const quizNexClickHandler = useCallback(() => {
+        const currentQuestion = quizApiState.quizCurrentQuestion?.next_question;
+        const currentQuestionId = currentQuestion?.id;
+        if (dispatchLocalState && currentQuestionId) {
+            const currentAnswerInput = quizLocalState.answerInputs[currentQuestionId];
+            if (currentAnswerInput?.value?.length || currentQuestion?.type === 'cover') {
                 dispatchLocalState({
-                    type: QuestionTypes.Cover,
-                    payload: {
-                        isLastQuestion: currentQuestion.is_last_question,
-                    },
+                    type: QuestionTypes.Next,
+                    payload: quizApiState.quizCurrentQuestion,
                 });
-                break;
-            case QuestionTypes.OpenText:
-                dispatchLocalState({
-                    type: QuestionTypes.OpenText,
-                    payload: {
-                        questionId: currentQuestion.next_question.id,
-                        input: payload,
-                        isLastQuestion: currentQuestion.is_last_question,
-                    },
-                });
-                break;
-            case QuestionTypes.SingleSelect:
-            case QuestionTypes.MultipleSelect:
-                dispatchLocalState({
-                    type: currentQuestion.next_question.type === QuestionTypes.SingleSelect
-                        ? QuestionTypes.SingleSelect
-                        : QuestionTypes.MultipleSelect,
-                    payload: {
-                        questionId: currentQuestion.next_question.id,
-                        input: payload,
-                        isLastQuestion: currentQuestion.is_last_question,
-                    },
-                });
-                break;
-            default:
-                break;
+            }
         }
-    }, [quizApiState, dispatchLocalState]);
-    return quizNextHandler;
+    }, [dispatchLocalState, quizApiState.quizCurrentQuestion, quizLocalState.answerInputs]);
+    return quizNexClickHandler;
 };
 export default useQuizNextClick;

package/lib/mjs/hooks/useQuizEvents/useQuizResetClick.js

@@ -0,0 +1,18 @@
+import { useCallback } from 'react';
+import { QuestionTypes, QuizAPIActionTypes, } from '../../components/CioQuiz/actions';
+import { resetQuizSessionStorageState } from '../../utils';
+const useQuizResetClick = (quizStateKey, dispatchLocalState, dispatchApiState, quizResults) => {
+    const quizResetClickHandler = useCallback(() => {
+        if (quizResults) {
+            dispatchLocalState({
+                type: QuestionTypes.Reset,
+            });
+            dispatchApiState({
+                type: QuizAPIActionTypes.RESET_QUIZ,
+            });
+            resetQuizSessionStorageState(quizStateKey);
+        }
+    }, [dispatchLocalState, dispatchApiState, quizStateKey, quizResults]);
+    return quizResetClickHandler;
+};
+export default useQuizResetClick;

package/lib/mjs/hooks/useQuizEvents/useQuizResultClick.js

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { trackQuizResultClick } from '../../services';
 import { isFunction } from '../../utils';
 const useQuizResultClick = (cioClient, quizApiState, onQuizResultClick) => {
-    const resultClickHandler = useCallback((result, position) => {
+    const quizResultClickHandler = useCallback((result, position) => {
         if (quizApiState.quizResults) {
             // Tracking call
             trackQuizResultClick(cioClient, quizApiState.quizResults, result, position);
@@ -12,6 +12,6 @@ const useQuizResultClick = (cioClient, quizApiState, onQuizResultClick) => {
             }
         }
     }, [quizApiState, cioClient, onQuizResultClick]);
-    return resultClickHandler;
+    return quizResultClickHandler;
 };
 export default useQuizResultClick;

package/lib/mjs/hooks/useQuizState/index.js

@@ -0,0 +1,18 @@
+import useQuizApiState from './useQuizApiState';
+import useQuizLocalState from './useQuizLocalState';
+const useQuizState = (quizOptions, cioClient) => {
+    const { sessionStateOptions } = quizOptions;
+    // Quiz Local state
+    const { quizLocalState, dispatchLocalState, hasQuizStoredState, quizStateKey } = useQuizLocalState(sessionStateOptions?.sessionStateKey);
+    // Quiz API state
+    const { quizApiState, dispatchApiState } = useQuizApiState(quizOptions, cioClient, quizLocalState, dispatchLocalState);
+    return {
+        quizApiState,
+        quizLocalState,
+        dispatchApiState,
+        dispatchLocalState,
+        hasQuizStoredState,
+        quizStateKey,
+    };
+};
+export default useQuizState;

package/lib/mjs/hooks/{useQuizApiState.js → useQuizState/useQuizApiState.js}

@@ -1,15 +1,13 @@
 import { useEffect, useReducer } from 'react';
-import { QuestionTypes, QuizAPIActionTypes, } from '../components/CioQuiz/actions';
-import apiReducer, { initialState } from '../components/CioQuiz/quizApiReducer';
-import { nextQuestion, getQuizResults } from '../services';
-const useFetchQuiz = (quizId, quizLocalState, dispatchLocalState, resultsPageOptions, quizVersionIdProp, cioClient) => {
-    const [quizApiState, dispatch] = useReducer(apiReducer, initialState);
-    const firstQuestionId = quizApiState.quizFirstQuestion?.next_question.id;
-    const currentQuestionId = quizApiState.quizCurrentQuestion?.next_question.id;
-    const isFirstQuestion = firstQuestionId === currentQuestionId;
+import { QuestionTypes, QuizAPIActionTypes, } from '../../components/CioQuiz/actions';
+import apiReducer, { initialState, } from '../../components/CioQuiz/quizApiReducer';
+import { getNextQuestion, getQuizResults } from '../../services';
+const useQuizApiState = (quizOptions, cioClient, quizLocalState, dispatchLocalState) => {
+    const [quizApiState, dispatchApiState] = useReducer(apiReducer, initialState);
+    const { quizId, quizVersionId: quizVersionIdProp, resultsPageOptions } = quizOptions;
     useEffect(() => {
         (async () => {
-            dispatch({
+            dispatchApiState({
                 type: QuizAPIActionTypes.SET_IS_LOADING,
             });
             if (quizLocalState.isLastAnswer) {
@@ -21,7 +19,7 @@ const useFetchQuiz = (quizId, quizLocalState, dispatchLocalState, resultsPageOpt
                         quizSessionId: quizLocalState.quizSessionId,
                     });
                     // Set quiz results state
-                    dispatch({
+                    dispatchApiState({
                         type: QuizAPIActionTypes.SET_QUIZ_RESULTS,
                         payload: {
                             quizResults,
@@ -29,7 +27,7 @@ const useFetchQuiz = (quizId, quizLocalState, dispatchLocalState, resultsPageOpt
                     });
                 }
                 catch (error) {
-                    dispatch({
+                    dispatchApiState({
                         type: QuizAPIActionTypes.SET_IS_ERROR,
                     });
                 }
@@ -38,7 +36,7 @@ const useFetchQuiz = (quizId, quizLocalState, dispatchLocalState, resultsPageOpt
                 try {
                     const quizVersionId = quizLocalState.quizVersionId || quizVersionIdProp;
                     const { quizSessionId } = quizLocalState;
-                    const questionResult = await nextQuestion(cioClient, quizId, {
+                    const questionResult = await getNextQuestion(cioClient, quizId, {
                         answers: quizLocalState.answers,
                         quizVersionId,
                         quizSessionId,
@@ -55,7 +53,7 @@ const useFetchQuiz = (quizId, quizLocalState, dispatchLocalState, resultsPageOpt
                         });
                     }
                     // Set current question state
-                    dispatch({
+                    dispatchApiState({
                         type: QuizAPIActionTypes.SET_CURRENT_QUESTION,
                         payload: {
                             quizCurrentQuestion: questionResult,
@@ -63,28 +61,17 @@ const useFetchQuiz = (quizId, quizLocalState, dispatchLocalState, resultsPageOpt
                     });
                 }
                 catch (error) {
-                    dispatch({
+                    dispatchApiState({
                         type: QuizAPIActionTypes.SET_IS_ERROR,
                     });
                 }
             }
         })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        cioClient,
-        quizId,
-        quizLocalState.answers,
-        quizLocalState.isLastAnswer,
-        resultsPageOptions?.numResultsToDisplay,
-    ]);
-    const resetQuizApiState = () => {
-        dispatch({ type: QuizAPIActionTypes.RESET_QUIZ });
-    };
+    }, [cioClient, quizId, quizLocalState.answers, resultsPageOptions?.numResultsToDisplay]);
     return {
-        cioClient,
         quizApiState,
-        isFirstQuestion,
-        resetQuizApiState,
+        dispatchApiState,
     };
 };
-export default useFetchQuiz;
+export default useQuizApiState;

package/lib/mjs/hooks/useQuizState/useQuizLocalState.js

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useReducer } from 'react';
+import quizLocalReducer, { initialState } from '../../components/CioQuiz/quizLocalReducer';
+import { quizSessionStateKey } from '../../constants';
+import { getStateFromSessionStorage, logger } from '../../utils';
+const useQuizLocalState = (sessionStateKey) => {
+    const [quizLocalState, dispatch] = useReducer(quizLocalReducer, initialState);
+    const quizStateKey = sessionStateKey || quizSessionStateKey;
+    useEffect(() => {
+        // don't save state if initial state
+        if (quizLocalState?.answers?.length) {
+            window?.sessionStorage?.setItem(quizStateKey, JSON.stringify(quizLocalState));
+        }
+    }, [quizLocalState, quizStateKey]);
+    const hasQuizStoredState = () => getStateFromSessionStorage(quizStateKey) !== null;
+    const dispatchLocalState = useCallback((action) => {
+        logger(action);
+        dispatch(action);
+    }, []);
+    return {
+        quizLocalState,
+        hasQuizStoredState,
+        dispatchLocalState,
+        quizStateKey,
+    };
+};
+export default useQuizLocalState;

package/lib/mjs/index.js

@@ -1,2 +1,16 @@
 import CioQuiz from './components/CioQuiz';
+// Hook
+export { default as useCioQuiz } from './hooks/useQuiz';
+// Questions Components
+export { default as QuizQuestions } from './components/QuizQuestions/index';
+export { default as OpenTextQuestion } from './components/OpenTextTypeQuestion/OpenTextTypeQuestion';
+export { default as CoverQuestion } from './components/CoverTypeQuestion/CoverTypeQuestion';
+export { default as SelectQuestion } from './components/SelectTypeQuestion/SelectTypeQuestion';
+// Results Components
+export { default as Results } from './components/Results/Results';
+export { default as ResultCard } from './components/ResultCard/ResultCard';
+export { default as ResultContainer } from './components/ResultContainer/ResultContainer';
+export { default as ResultFilters } from './components/ResultFilters/ResultFilters';
+export { default as ResultHeroCard } from './components/ResultHeroCard/ResultHeroCard';
+export * from './types';
 export default CioQuiz;

package/lib/mjs/services/index.js

@@ -9,7 +9,7 @@ export const getCioClient = (apiKey) => {
     }
     return undefined;
 };
-export const nextQuestion = (cioClient, quizId, parameters) => cioClient?.quizzes.getQuizNextQuestion(quizId, parameters);
+export const getNextQuestion = (cioClient, quizId, parameters) => cioClient?.quizzes.getQuizNextQuestion(quizId, parameters);
 export const getQuizResults = async (cioClient, quizId, parameters) => cioClient?.quizzes.getQuizResults(quizId, parameters);
 // Tracking requests
 export const trackQuizResultsLoaded = (cioClient, quizResults) => {