@constructor-io/constructorio-ui-quizzes 1.9.5 → 1.9.7

package/lib/cjs/components/CioQuiz/index.js

@@ -16,7 +16,7 @@ function CioQuiz(props) {
     var _a;
     const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = (0, useQuiz_1.default)(props);
     const [showSessionPrompt, setShowSessionPrompt] = (0, react_1.useState)(false);
-    const { resultsPageOptions, sessionStateOptions } = props;
+    const { resultsPageOptions, sessionStateOptions, questionsPageOptions } = props;
     const { quizSessionStorageState: { hasSessionStorageState, skipToResults }, } = state;
     (0, react_1.useEffect)(() => {
         // Respect showSessionModal if defined, else default to true.
@@ -66,7 +66,7 @@ function CioQuiz(props) {
             react_1.default.createElement(context_1.default.Provider, { value: contextValue }, state.quiz.results || skipToResults ? (react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(ProgressBar_1.default, null),
                 react_1.default.createElement(QuizQuestions_1.default, null),
-                react_1.default.createElement(ControlBar_1.default, { ctaButtonText: (questionData === null || questionData === void 0 ? void 0 : questionData.cta_text) || undefined })))))));
+                react_1.default.createElement(ControlBar_1.default, { skipQuestionButtonText: questionsPageOptions === null || questionsPageOptions === void 0 ? void 0 : questionsPageOptions.skipQuestionButtonText, ctaButtonText: (questionData === null || questionData === void 0 ? void 0 : questionData.cta_text) || undefined })))))));
     }
     return null;
 }

package/lib/cjs/components/CioQuiz/quizLocalReducer.js

@@ -6,7 +6,6 @@ exports.initialState = {
     answers: [],
     answerInputs: {},
     prevAnswerInputs: {},
-    isLastAnswer: false,
     isQuizCompleted: false,
 };
 function answerInputReducer(state, action) {
@@ -16,21 +15,21 @@ function answerInputReducer(state, action) {
         } });
 }
 function quizLocalReducer(state, action) {
-    var _a, _b, _c, _d, _e;
+    var _a;
     switch (action.type) {
         case actions_1.QuestionTypes.OpenText:
-            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_a = action.payload) === null || _a === void 0 ? void 0 : _a.isLastQuestion), isQuizCompleted: false });
+            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isQuizCompleted: false });
         case actions_1.QuestionTypes.Cover:
-            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_b = action.payload) === null || _b === void 0 ? void 0 : _b.isLastQuestion), isQuizCompleted: false });
+            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isQuizCompleted: false });
         case actions_1.QuestionTypes.SingleSelect:
-            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_c = action.payload) === null || _c === void 0 ? void 0 : _c.isLastQuestion), isQuizCompleted: false });
+            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isQuizCompleted: false });
         case actions_1.QuestionTypes.MultipleSelect:
-            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_d = action.payload) === null || _d === void 0 ? void 0 : _d.isLastQuestion), isQuizCompleted: false });
+            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isQuizCompleted: false });
         case actions_1.QuestionTypes.Next: {
             const { answers, answerInputs } = state;
             const newAnswers = [...answers];
             const lastAnswerInputIndex = answers.length;
-            const currentAnswerInput = (_e = Object.values(state.answerInputs)) === null || _e === void 0 ? void 0 : _e[lastAnswerInputIndex];
+            const currentAnswerInput = (_a = Object.values(state.answerInputs)) === null || _a === void 0 ? void 0 : _a[lastAnswerInputIndex];
             switch (currentAnswerInput.type) {
                 case actions_1.QuestionTypes.OpenText:
                     newAnswers.push(['true']);
@@ -72,7 +71,7 @@ function quizLocalReducer(state, action) {
         }
         case actions_1.QuestionTypes.Back: {
             const prevAnswerInputs = Object.assign({}, state.prevAnswerInputs);
-            return Object.assign(Object.assign({}, state), { answerInputs: prevAnswerInputs, answers: [...state.answers.slice(0, -1)], isLastAnswer: false, isQuizCompleted: false });
+            return Object.assign(Object.assign({}, state), { answerInputs: prevAnswerInputs, answers: [...state.answers.slice(0, -1)], isQuizCompleted: false });
         }
         case actions_1.QuestionTypes.Reset:
             return Object.assign({}, exports.initialState);

package/lib/cjs/components/ControlBar/ControlBar.js

@@ -7,12 +7,12 @@ const CTAButton_1 = tslib_1.__importDefault(require("../CTAButton/CTAButton"));
 const SkipButton_1 = tslib_1.__importDefault(require("../SkipButton/SkipButton"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function ControlBar(props) {
-    const { ctaButtonText } = props;
+    const { ctaButtonText, skipQuestionButtonText } = props;
     const { getNextQuestionButtonProps, getSkipQuestionButtonProps } = (0, react_1.useContext)(context_1.default);
     return (react_1.default.createElement("div", { className: 'cio-question-buttons-container' },
         react_1.default.createElement(BackButton_1.default, null),
         react_1.default.createElement("div", { className: 'cio-question-buttons-group' },
-            react_1.default.createElement(SkipButton_1.default, { propsGetters: getSkipQuestionButtonProps }),
+            react_1.default.createElement(SkipButton_1.default, { skipQuestionButtonText: skipQuestionButtonText, propsGetters: getSkipQuestionButtonProps }),
             react_1.default.createElement(CTAButton_1.default, { ctaText: ctaButtonText, propsGetters: getNextQuestionButtonProps }))));
 }
 exports.default = ControlBar;

package/lib/cjs/components/SkipButton/SkipButton.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 function SkipButton(props) {
-    const { propsGetters, className = 'cio-button-container' } = props, rest = tslib_1.__rest(props, ["propsGetters", "className"]);
+    const { propsGetters, skipQuestionButtonText, className = 'cio-button-container' } = props, rest = tslib_1.__rest(props, ["propsGetters", "skipQuestionButtonText", "className"]);
+    const buttonText = skipQuestionButtonText || 'Skip';
     return (react_1.default.createElement("div", { className: `${className || ''}` }, propsGetters && (
     // eslint-disable-next-line react/button-has-type
-    react_1.default.createElement("button", Object.assign({}, rest, propsGetters()), "Skip question"))));
+    react_1.default.createElement("button", Object.assign({}, rest, propsGetters(), { title: buttonText }), buttonText))));
 }
 exports.default = SkipButton;

package/lib/cjs/constants.js

@@ -30,6 +30,8 @@ exports.componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`showSessionModal\` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal
   - \`showSessionModalOnResults\` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal
   - \`sessionStateKey\` is a custom string that will be used as a session storage key
+- \`questionsPageOptions\` lets you configure the question page
+  - \`skipQuestionButtonText\` is an optional string that will be used as the skip button text
 - Use different props to configure the behavior of this component.
 - The following stories show how different props affect the component's behavior
 

package/lib/cjs/hooks/useQuiz.js

@@ -31,7 +31,6 @@ const useQuiz = (quizOptions) => {
     return Object.assign(Object.assign({ cioClient, state: {
             answers: {
                 inputs: quizLocalState.answerInputs,
-                isLastAnswer: quizLocalState.isLastAnswer,
             },
             quiz: {
                 requestState: quizApiState.quizRequestState,

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

@@ -15,7 +15,6 @@ const useQuizAnswerChangeHandler = (quizApiState, dispatchLocalState) => {
                         payload: {
                             questionId: currentQuestion.next_question.id,
                             input: '',
-                            isLastQuestion: currentQuestion.is_last_question,
                         },
                     });
                     break;
@@ -25,7 +24,6 @@ const useQuizAnswerChangeHandler = (quizApiState, dispatchLocalState) => {
                         payload: {
                             questionId: currentQuestion.next_question.id,
                             input: payload,
-                            isLastQuestion: currentQuestion.is_last_question,
                         },
                     });
                     break;
@@ -36,7 +34,6 @@ const useQuizAnswerChangeHandler = (quizApiState, dispatchLocalState) => {
                         payload: {
                             questionId: currentQuestion.next_question.id,
                             input: payload,
-                            isLastQuestion: currentQuestion.is_last_question,
                         },
                     });
                     break;

package/lib/cjs/hooks/useQuizState/useQuizApiState.js

@@ -41,7 +41,7 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults,
             dispatchApiState({
                 type: actions_1.QuizAPIActionTypes.SET_IS_LOADING,
             });
-            if (quizLocalState.isLastAnswer || skipToResults) {
+            if (skipToResults) {
                 yield dispatchQuizResults();
             }
             else {

package/lib/cjs/stories/Quiz/tests/mocks.js

@@ -48,8 +48,7 @@ const getMockState = (question) => ({
                 type: question === null || question === void 0 ? void 0 : question.type,
                 value: '',
             },
-        },
-        isLastAnswer: false,
+        }, // Key is the question Id and value is the answer input
     },
     quiz: {
         requestState: constants_1.RequestStates.Success,

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.9.5';
+exports.default = '1.9.7';

package/lib/mjs/components/CioQuiz/index.js

@@ -12,7 +12,7 @@ import ProgressBar from '../ProgressBar/ProgressBar';
 export default function CioQuiz(props) {
     const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(props);
     const [showSessionPrompt, setShowSessionPrompt] = useState(false);
-    const { resultsPageOptions, sessionStateOptions } = props;
+    const { resultsPageOptions, sessionStateOptions, questionsPageOptions } = props;
     const { quizSessionStorageState: { hasSessionStorageState, skipToResults }, } = state;
     useEffect(() => {
         // Respect showSessionModal if defined, else default to true.
@@ -62,7 +62,7 @@ export default function CioQuiz(props) {
             React.createElement(QuizContext.Provider, { value: contextValue }, state.quiz.results || skipToResults ? (React.createElement(ResultContainer, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (React.createElement(React.Fragment, null,
                 React.createElement(ProgressBar, null),
                 React.createElement(QuizQuestions, null),
-                React.createElement(ControlBar, { ctaButtonText: questionData?.cta_text || undefined })))))));
+                React.createElement(ControlBar, { skipQuestionButtonText: questionsPageOptions?.skipQuestionButtonText, ctaButtonText: questionData?.cta_text || undefined })))))));
     }
     return null;
 }

package/lib/mjs/components/CioQuiz/quizLocalReducer.js

@@ -3,7 +3,6 @@ export const initialState = {
     answers: [],
     answerInputs: {},
     prevAnswerInputs: {},
-    isLastAnswer: false,
     isQuizCompleted: false,
 };
 function answerInputReducer(state, action) {
@@ -21,28 +20,24 @@ export default function quizLocalReducer(state, action) {
             return {
                 ...state,
                 answerInputs: answerInputReducer(state.answerInputs, action),
-                isLastAnswer: !!action.payload?.isLastQuestion,
                 isQuizCompleted: false,
             };
         case QuestionTypes.Cover:
             return {
                 ...state,
                 answerInputs: answerInputReducer(state.answerInputs, action),
-                isLastAnswer: !!action.payload?.isLastQuestion,
                 isQuizCompleted: false,
             };
         case QuestionTypes.SingleSelect:
             return {
                 ...state,
                 answerInputs: answerInputReducer(state.answerInputs, action),
-                isLastAnswer: !!action.payload?.isLastQuestion,
                 isQuizCompleted: false,
             };
         case QuestionTypes.MultipleSelect:
             return {
                 ...state,
                 answerInputs: answerInputReducer(state.answerInputs, action),
-                isLastAnswer: !!action.payload?.isLastQuestion,
                 isQuizCompleted: false,
             };
         case QuestionTypes.Next: {
@@ -103,7 +98,6 @@ export default function quizLocalReducer(state, action) {
                 ...state,
                 answerInputs: prevAnswerInputs,
                 answers: [...state.answers.slice(0, -1)],
-                isLastAnswer: false,
                 isQuizCompleted: false,
             };
         }

package/lib/mjs/components/ControlBar/ControlBar.js

@@ -4,12 +4,12 @@ import CTAButton from '../CTAButton/CTAButton';
 import SkipButton from '../SkipButton/SkipButton';
 import QuizContext from '../CioQuiz/context';
 function ControlBar(props) {
-    const { ctaButtonText } = props;
+    const { ctaButtonText, skipQuestionButtonText } = props;
     const { getNextQuestionButtonProps, getSkipQuestionButtonProps } = useContext(QuizContext);
     return (React.createElement("div", { className: 'cio-question-buttons-container' },
         React.createElement(BackButton, null),
         React.createElement("div", { className: 'cio-question-buttons-group' },
-            React.createElement(SkipButton, { propsGetters: getSkipQuestionButtonProps }),
+            React.createElement(SkipButton, { skipQuestionButtonText: skipQuestionButtonText, propsGetters: getSkipQuestionButtonProps }),
             React.createElement(CTAButton, { ctaText: ctaButtonText, propsGetters: getNextQuestionButtonProps }))));
 }
 export default ControlBar;

package/lib/mjs/components/SkipButton/SkipButton.js

@@ -1,8 +1,9 @@
 import React from 'react';
 function SkipButton(props) {
-    const { propsGetters, className = 'cio-button-container', ...rest } = props;
+    const { propsGetters, skipQuestionButtonText, className = 'cio-button-container', ...rest } = props;
+    const buttonText = skipQuestionButtonText || 'Skip';
     return (React.createElement("div", { className: `${className || ''}` }, propsGetters && (
     // eslint-disable-next-line react/button-has-type
-    React.createElement("button", { ...rest, ...propsGetters() }, "Skip question"))));
+    React.createElement("button", { ...rest, ...propsGetters(), title: buttonText }, buttonText))));
 }
 export default SkipButton;

package/lib/mjs/constants.js

@@ -27,6 +27,8 @@ export const componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`showSessionModal\` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal
   - \`showSessionModalOnResults\` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal
   - \`sessionStateKey\` is a custom string that will be used as a session storage key
+- \`questionsPageOptions\` lets you configure the question page
+  - \`skipQuestionButtonText\` is an optional string that will be used as the skip button text
 - Use different props to configure the behavior of this component.
 - The following stories show how different props affect the component's behavior
 

package/lib/mjs/hooks/useQuiz.js

@@ -30,7 +30,6 @@ const useQuiz = (quizOptions) => {
         state: {
             answers: {
                 inputs: quizLocalState.answerInputs,
-                isLastAnswer: quizLocalState.isLastAnswer,
             },
             quiz: {
                 requestState: quizApiState.quizRequestState,

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

@@ -12,7 +12,6 @@ const useQuizAnswerChangeHandler = (quizApiState, dispatchLocalState) => {
                         payload: {
                             questionId: currentQuestion.next_question.id,
                             input: '',
-                            isLastQuestion: currentQuestion.is_last_question,
                         },
                     });
                     break;
@@ -22,7 +21,6 @@ const useQuizAnswerChangeHandler = (quizApiState, dispatchLocalState) => {
                         payload: {
                             questionId: currentQuestion.next_question.id,
                             input: payload,
-                            isLastQuestion: currentQuestion.is_last_question,
                         },
                     });
                     break;
@@ -33,7 +31,6 @@ const useQuizAnswerChangeHandler = (quizApiState, dispatchLocalState) => {
                         payload: {
                             questionId: currentQuestion.next_question.id,
                             input: payload,
-                            isLastQuestion: currentQuestion.is_last_question,
                         },
                     });
                     break;

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

@@ -38,7 +38,7 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults,
             dispatchApiState({
                 type: QuizAPIActionTypes.SET_IS_LOADING,
             });
-            if (quizLocalState.isLastAnswer || skipToResults) {
+            if (skipToResults) {
                 await dispatchQuizResults();
             }
             else {

package/lib/mjs/stories/Quiz/tests/mocks.js

@@ -60,8 +60,7 @@ export const getMockState = (question) => ({
                 type: question?.type,
                 value: '',
             },
-        },
-        isLastAnswer: false,
+        }, // Key is the question Id and value is the answer input
     },
     quiz: {
         requestState: RequestStates.Success,

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.9.5';
+export default '1.9.7';

package/lib/styles.css

@@ -267,6 +267,9 @@
   outline: none;
   font-size: 1rem;
   width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
   text-decoration: underline;
   text-decoration-color: transparent;
   transition: text-decoration-color 0.2s ease-in-out;
@@ -677,12 +680,6 @@
 
 /* Container Queries */
 
-@container quiz (max-width: 640px) {
-  .cio-quiz .cio-question-skip-button span {
-    display: none;
-  }
-}
-
 /* Small Tablet */
 @container quiz (min-width: 640px) {
   .cio-quiz .cio-container {

package/lib/types/components/CioQuiz/actions.d.ts

@@ -15,7 +15,6 @@ export declare enum QuestionTypes {
 export interface QuestionAnswer<Value> {
     questionId: number;
     input: Value;
-    isLastQuestion?: boolean;
 }
 export type SelectQuestionPayload = QuestionAnswer<Omit<QuestionOption, 'attribute' | 'images'>[]>;
 export type OpenTextQuestionPayload = QuestionAnswer<string>;

package/lib/types/components/CioQuiz/quizLocalReducer.d.ts

@@ -5,7 +5,6 @@ export type QuizLocalReducerState = {
     answers: Answers;
     answerInputs: AnswerInputState;
     prevAnswerInputs: AnswerInputState;
-    isLastAnswer: boolean;
     isQuizCompleted: boolean;
     quizVersionId?: string;
     quizSessionId?: string;

package/lib/types/components/ControlBar/ControlBar.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 interface ControlBarProps {
     ctaButtonText?: string;
+    skipQuestionButtonText?: string;
 }
 declare function ControlBar(props: ControlBarProps): JSX.Element;
 export default ControlBar;

package/lib/types/components/SkipButton/SkipButton.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface SkipButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     propsGetters?: () => React.ButtonHTMLAttributes<HTMLButtonElement>;
+    skipQuestionButtonText?: string;
 }
 declare function SkipButton(props: SkipButtonProps): JSX.Element;
 export default SkipButton;

package/lib/types/constants.d.ts

@@ -1,7 +1,7 @@
 export declare const apiKey = "key_wJSdZSiesX5hiVLt";
 export declare const quizId = "coffee-quiz";
 export declare const quizSessionStateKey = "constructorIOQuizState";
-export declare const componentDescription = "- import `CioQuiz` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, `quizId`, `resultsPageOptions`, and one of `apiKey` or `cioJsClient` are required.\n- `resultsPageOptions` lets you configure the results page\n  - `onAddToCartClick` is a callback function that will be called when the \"Add to cart\" button is clicked\n  - `onAddToFavoritesClick` is an optional callback function that will be called when the \"Add To Favorites\" heart icon is clicked\n  - `onQuizResultClick` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL\n  - `onQuizResultsLoaded` is an optional callback function that will be called when the quiz results are loaded\n  - `resultCardRegularPriceKey` is a parameter that specifies the metadata field name for the regular price\n  - `resultCardSalePriceKey` is an optional parameter that specifies the metadata field name for the sale price \n  - `resultCardRatingCountKey` is an optional parameter that specifies the metadata field name for the ratings count \n  - `resultCardRatingScoreKey` is an optional parameter that specifies the metadata field name for the ratings score \n  - `renderResultCardPriceDetails` is an optional render function to render custom prices section in result card \n  - `numResultsToDisplay` is an optional parameter that determines how many results should be displayed on results page\n- `callbacks` lets you pass callback functions that will be called on certain actions\n  - `onQuizNextQuestion` is an optional callback function that will be called when user moves to the next question\n  - `onQuizSkipQuestion` is an optional callback function that will be called when user skips a question\n- `sessionStateOptions` lets you configure the session modal behavior\n  - `showSessionModal` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal\n  - `showSessionModalOnResults` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal\n  - `sessionStateKey` is a custom string that will be used as a session storage key\n- Use different props to configure the behavior of this component.\n- The following stories show how different props affect the component's behavior\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
+export declare const componentDescription = "- import `CioQuiz` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, `quizId`, `resultsPageOptions`, and one of `apiKey` or `cioJsClient` are required.\n- `resultsPageOptions` lets you configure the results page\n  - `onAddToCartClick` is a callback function that will be called when the \"Add to cart\" button is clicked\n  - `onAddToFavoritesClick` is an optional callback function that will be called when the \"Add To Favorites\" heart icon is clicked\n  - `onQuizResultClick` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL\n  - `onQuizResultsLoaded` is an optional callback function that will be called when the quiz results are loaded\n  - `resultCardRegularPriceKey` is a parameter that specifies the metadata field name for the regular price\n  - `resultCardSalePriceKey` is an optional parameter that specifies the metadata field name for the sale price \n  - `resultCardRatingCountKey` is an optional parameter that specifies the metadata field name for the ratings count \n  - `resultCardRatingScoreKey` is an optional parameter that specifies the metadata field name for the ratings score \n  - `renderResultCardPriceDetails` is an optional render function to render custom prices section in result card \n  - `numResultsToDisplay` is an optional parameter that determines how many results should be displayed on results page\n- `callbacks` lets you pass callback functions that will be called on certain actions\n  - `onQuizNextQuestion` is an optional callback function that will be called when user moves to the next question\n  - `onQuizSkipQuestion` is an optional callback function that will be called when user skips a question\n- `sessionStateOptions` lets you configure the session modal behavior\n  - `showSessionModal` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal\n  - `showSessionModalOnResults` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal\n  - `sessionStateKey` is a custom string that will be used as a session storage key\n- `questionsPageOptions` lets you configure the question page\n  - `skipQuestionButtonText` is an optional string that will be used as the skip button text\n- Use different props to configure the behavior of this component.\n- The following stories show how different props affect the component's behavior\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
 export declare const hookDescription = "- import `useCioQuiz` and call this custom hook in a functional component.\n- This hook leaves rendering logic up to you, while handling:\n  - state management\n  - data fetching\n  - keyboard navigation\n  - mouse interactions\n  - focus and submit event handling\n- Since the markup is controlled by you, the default styles might not be applied if you have a different DOM structure\n- To use this hook, an `apiKey` and `quizId` are required, and `resultsPageOptions` must be passed to the `useCioQuiz` hook to configure behavior. All other values are optional.\n- use the <a href=\"https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters\" target=\"__blank\">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions\n\nCalling the `useCioQuiz` hook returns an object with the following keys:\n\n```jsx\nconst {\n  // must be used for a hooks integrations\n  state: QuizReturnState, // Quiz state\n  events: [{...}], // array of quiz events\n  getAddToCartButtonProps: () => ({...})), // prop getter for jsx add to cart button for quiz result,\n  getAddToFavoritesButtonProps: () => ({...})), // prop getter for jsx add to favorites button for quiz result,\n  getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,\n  getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,\n  getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,\n  getSkipQuestionButtonProps: () => ({...})), // prop getter for jsx skip button to traverse the quiz,\n  getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, \n  getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,\n  getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,\n  getQuizImageProps: () => ({...})), // prop getter for jsx quiz image,\n  getQuizResultButtonProps: () => ({...})), // prop getter for jsx result card click as a button,\n  getQuizResultLinkProps: () => ({...})), // prop getter for jsx result card click as a link. Should be spread into <a> tags,\n  getResetQuizButtonProps: () => ({...})), // prop getter for jsx reset quiz button,\n  cioClient, // instance of constructorio-client-javascript\n } = useCioQuiz(args);\n```\n\n> Note: when we say `cioClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
 export declare const basicDescription = "Pass an `apiKey` and a `quizId` to request questions and quiz results from Constructor's servers";
 export declare const cioJsClientDescription = "If you are already using an instance of the `ConstructorIOClient`, you can pass a `cioJsClient` instead of an `apiKey` to request results from Constructor's servers\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)";

package/lib/types/types.d.ts

@@ -26,6 +26,9 @@ export interface ResultsPageOptions extends ResultCardProps {
     onAddToCartClick: QuizResultsEventsProps.OnAddToCartClick;
     onAddToFavoritesClick?: QuizResultsEventsProps.OnAddToFavoritesClick;
 }
+export interface QuestionsPageOptions {
+    skipQuestionButtonText?: string;
+}
 export interface SessionStateOptions {
     showSessionModal?: boolean;
     showSessionModalOnResults?: boolean;
@@ -50,11 +53,11 @@ export interface IQuizProps {
     primaryColor?: string;
     enableHydration?: boolean;
     callbacks?: Callbacks;
+    questionsPageOptions?: QuestionsPageOptions;
 }
 export interface QuizReturnState {
     answers: {
         inputs: AnswerInputState;
-        isLastAnswer: boolean;
     };
     quiz: {
         requestState: RequestStates;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.9.5";
+declare const _default: "1.9.7";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.9.5",
+  "version": "1.9.7",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",