@constructor-io/constructorio-ui-quizzes 1.8.3 → 1.9.0

package/lib/cjs/package.json

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

package/lib/cjs/src/components/CioQuiz/actions.js

@@ -9,6 +9,7 @@ var QuestionTypes;
     QuestionTypes["SingleSelect"] = "single";
     QuestionTypes["MultipleSelect"] = "multiple";
     QuestionTypes["Next"] = "next";
+    QuestionTypes["Skip"] = "skip";
     QuestionTypes["Back"] = "back";
     QuestionTypes["Reset"] = "reset";
     QuestionTypes["Hydrate"] = "hydrate";

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

@@ -14,7 +14,7 @@ const utils_1 = require("../../utils");
 const ProgressBar_1 = tslib_1.__importDefault(require("../ProgressBar/ProgressBar"));
 function CioQuiz(props) {
     var _a;
-    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = (0, useQuiz_1.default)(props);
+    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 { quizSessionStorageState: { hasSessionStorageState, skipToResults }, } = state;
@@ -36,6 +36,7 @@ function CioQuiz(props) {
         getCoverQuestionProps,
         getHydrateQuizButtonProps,
         getNextQuestionButtonProps,
+        getSkipQuestionButtonProps,
         getOpenTextInputProps,
         getPreviousQuestionButtonProps,
         getQuizImageProps,

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

@@ -51,6 +51,27 @@ function quizLocalReducer(state, action) {
                 // We now commit current answers to prevAnswerInputs
                 prevAnswerInputs: answerInputs, answers: newAnswers, isQuizCompleted: false });
         }
+        case actions_1.QuestionTypes.Skip: {
+            const { answers, answerInputs } = state;
+            const newAnswers = [...answers];
+            const lastAnswerInputIndex = answers.length;
+            const currentAnswerInput = Object.values(state.answerInputs)[lastAnswerInputIndex];
+            switch (currentAnswerInput.type) {
+                case actions_1.QuestionTypes.OpenText:
+                    newAnswers.push(['false']);
+                    break;
+                case actions_1.QuestionTypes.Cover:
+                    newAnswers.push(['seen']);
+                    break;
+                case actions_1.QuestionTypes.SingleSelect:
+                case actions_1.QuestionTypes.MultipleSelect:
+                default:
+                    newAnswers.push([]);
+            }
+            return Object.assign(Object.assign({}, state), { 
+                // We now commit current answers to prevAnswerInputs
+                prevAnswerInputs: answerInputs, answers: newAnswers, isQuizCompleted: false });
+        }
         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 });

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

@@ -4,12 +4,15 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const BackButton_1 = tslib_1.__importDefault(require("../BackButton/BackButton"));
 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 { getNextQuestionButtonProps } = (0, react_1.useContext)(context_1.default);
+    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(CTAButton_1.default, { ctaText: ctaButtonText, propsGetters: getNextQuestionButtonProps })));
+        react_1.default.createElement("div", { className: 'cio-question-buttons-group' },
+            react_1.default.createElement(SkipButton_1.default, { propsGetters: getSkipQuestionButtonProps }),
+            react_1.default.createElement(CTAButton_1.default, { ctaText: ctaButtonText, propsGetters: getNextQuestionButtonProps }))));
 }
 exports.default = ControlBar;

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

@@ -0,0 +1,13 @@
+"use strict";
+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"]);
+    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",
+        react_1.default.createElement("span", null, " question")))));
+}
+exports.default = SkipButton;

package/lib/cjs/src/constants.js

@@ -25,6 +25,7 @@ exports.componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`numResultsToDisplay\` is an optional parameter that determines how many results should be displayed on results page
 - \`callbacks\` lets you pass callback functions that will be called on certain actions
   - \`onQuizNextQuestion\` is an optional callback function that will be called when user moves to the next question
+  - \`onQuizSkipQuestion\` is an optional callback function that will be called when user skips a question
 - \`sessionStateOptions\` lets you configure the session modal behavior
   - \`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
@@ -57,6 +58,7 @@ const {
   getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,
   getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,
   getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,
+  getSkipQuestionButtonProps: () => ({...})), // prop getter for jsx skip button to traverse the quiz,
   getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, 
   getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,
   getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,

package/lib/cjs/src/hooks/usePropsGetters/index.js

@@ -8,13 +8,15 @@ const useOpenTextInputProps_1 = tslib_1.__importDefault(require("./useOpenTextIn
 const useNextQuestionButtonProps_1 = tslib_1.__importDefault(require("./useNextQuestionButtonProps"));
 const usePreviousQuestionButtonProps_1 = tslib_1.__importDefault(require("./usePreviousQuestionButtonProps"));
 const useAddToFavoritesButtonProps_1 = tslib_1.__importDefault(require("./useAddToFavoritesButtonProps"));
+const useSkipQuestionButtonProps_1 = tslib_1.__importDefault(require("./useSkipQuestionButtonProps"));
 const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
     var _a, _b, _c;
-    const { quizAnswerChanged, nextQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, } = quizEvents;
+    const { quizAnswerChanged, nextQuestion, skipQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, } = quizEvents;
     const getOpenTextInputProps = (0, useOpenTextInputProps_1.default)(quizAnswerChanged, nextQuestion, (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question, quizLocalState.answerInputs);
     const getCoverQuestionProps = (0, useCoverQuestionProps_1.default)(quizAnswerChanged, (_b = quizApiState.quizCurrentQuestion) === null || _b === void 0 ? void 0 : _b.next_question);
     const getSelectInputProps = (0, useSelectInputProps_1.default)(quizAnswerChanged, nextQuestion, (_c = quizApiState.quizCurrentQuestion) === null || _c === void 0 ? void 0 : _c.next_question, quizLocalState.answerInputs);
     const getNextQuestionButtonProps = (0, useNextQuestionButtonProps_1.default)(nextQuestion, quizApiState, quizLocalState);
+    const getSkipQuestionButtonProps = (0, useSkipQuestionButtonProps_1.default)(skipQuestion, quizApiState);
     const getPreviousQuestionButtonProps = (0, usePreviousQuestionButtonProps_1.default)(quizApiState, previousQuestion);
     const getResetQuizButtonProps = (0, react_1.useCallback)((stylesType = 'primary') => ({
         className: stylesType === 'primary' ? 'cio-question-cta-button' : 'cio-question-redo-button',
@@ -83,6 +85,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
         getAddToFavoritesButtonProps,
         getQuizResultButtonProps,
         getQuizResultLinkProps,
+        getSkipQuestionButtonProps,
     };
 };
 exports.default = usePropsGetters;

package/lib/cjs/src/hooks/usePropsGetters/useSkipQuestionButtonProps.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useSkipQuestionButtonProps(skipQuestion, quizApiState) {
+    const getSkipQuestionButtonProps = (0, react_1.useCallback)(() => {
+        var _a, _b, _c, _d;
+        const currentQuestionId = (_b = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question) === null || _b === void 0 ? void 0 : _b.id;
+        const isHidden = currentQuestionId &&
+            (((_c = quizApiState.quizCurrentQuestion) === null || _c === void 0 ? void 0 : _c.isCoverQuestion) ||
+                !((_d = quizApiState.quizCurrentQuestion) === null || _d === void 0 ? void 0 : _d.next_question.is_skippable));
+        return {
+            className: isHidden ? 'cio-question-skip-button hide' : 'cio-question-skip-button',
+            type: 'button',
+            onClick: () => {
+                skipQuestion();
+            },
+        };
+    }, [quizApiState.quizCurrentQuestion, skipQuestion]);
+    return getSkipQuestionButtonProps;
+}
+exports.default = useSkipQuestionButtonProps;

package/lib/cjs/src/hooks/useQuizEvents/index.js

@@ -11,6 +11,7 @@ const useQuizResetClick_1 = tslib_1.__importDefault(require("./useQuizResetClick
 const useHydrateQuizLocalState_1 = tslib_1.__importDefault(require("./useHydrateQuizLocalState"));
 const utils_1 = require("../../utils");
 const useQuizAddToFavorites_1 = tslib_1.__importDefault(require("./useQuizAddToFavorites"));
+const useQuizSkipClick_1 = tslib_1.__importDefault(require("./useQuizSkipClick"));
 const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const { quizApiState, dispatchLocalState, dispatchApiState, quizLocalState, quizSessionStorageState, } = quizState;
     const { resultsPageOptions, callbacks } = quizOptions;
@@ -19,6 +20,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const quizAnswerChanged = (0, useQuizAnswerChangeHandler_1.default)(quizApiState, dispatchLocalState);
     // Quiz Next button click callback
     const nextQuestion = (0, useQuizNextClick_1.default)(quizApiState, quizLocalState, dispatchLocalState, callbacks === null || callbacks === void 0 ? void 0 : callbacks.onQuizNextQuestion);
+    const skipQuestion = (0, useQuizSkipClick_1.default)(quizApiState, quizLocalState, dispatchLocalState, callbacks === null || callbacks === void 0 ? void 0 : callbacks.onQuizSkipQuestion);
     // Quiz Back button click callback
     const previousQuestion = (0, useQuizBackClick_1.default)(quizApiState, dispatchLocalState);
     // Quiz result add to cart callback
@@ -39,6 +41,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
         quizAnswerChanged,
         previousQuestion,
         nextQuestion,
+        skipQuestion,
         resetQuiz,
         hydrateQuiz: hydrateQuizLocalState,
         resetSessionStorageState: (0, utils_1.resetQuizSessionStorageState)(quizSessionStorageState.key),

package/lib/cjs/src/hooks/useQuizEvents/useQuizSkipClick.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const actions_1 = require("../../components/CioQuiz/actions");
+const utils_1 = require("../../utils");
+const useQuizSkipClick = (quizApiState, quizLocalState, dispatchLocalState, onQuizSkipQuestion) => {
+    const quizSkipClickHandler = (0, react_1.useCallback)(() => {
+        var _a;
+        const currentQuestion = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question;
+        const currentQuestionId = currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.id;
+        if (dispatchLocalState && currentQuestionId) {
+            if (!((currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.type) === 'cover')) {
+                dispatchLocalState({
+                    type: actions_1.QuestionTypes.Skip,
+                    payload: quizApiState.quizCurrentQuestion,
+                });
+            }
+            const currentAnswerInput = Object.assign(Object.assign({}, quizLocalState.answerInputs[currentQuestionId]), { value: (currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.type) === 'open' ? 'false' : null });
+            if (currentQuestion && (0, utils_1.isFunction)(onQuizSkipQuestion)) {
+                onQuizSkipQuestion(Object.assign(Object.assign({}, currentQuestion), { answer: currentAnswerInput }));
+            }
+        }
+    }, [
+        dispatchLocalState,
+        onQuizSkipQuestion,
+        quizApiState.quizCurrentQuestion,
+        quizLocalState.answerInputs,
+    ]);
+    return quizSkipClickHandler;
+};
+exports.default = useQuizSkipClick;

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

@@ -153,6 +153,7 @@ const useMockContextValue = (question) => {
         getAddToFavoritesButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-result-card-favorites-button' })),
         getHydrateQuizButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-cta-button' })),
         getNextQuestionButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-cta-button' })),
+        getSkipQuestionButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-skip-button' })),
         getPreviousQuestionButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-back-button' })),
         getQuizImageProps: () => mockElementProps,
         getQuizResultButtonProps: () => mockElementProps,

package/lib/cjs/src/utils.js

@@ -48,6 +48,7 @@ exports.functionStrings = {
     onAddToFavoritesClick: `(item) => console.dir(item)`,
     onQuizResultsLoaded: `(results) => console.dir(results)`,
     onQuizNextQuestion: `(question) => console.dir(question)`,
+    onQuizSkipQuestion: `(question) => console.dir(question)`,
     cioJsClient: `cioJsClient`,
 };
 const stringifyWithDefaults = (obj) => {

package/lib/mjs/package.json

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

package/lib/mjs/src/components/CioQuiz/actions.js

@@ -6,6 +6,7 @@ export var QuestionTypes;
     QuestionTypes["SingleSelect"] = "single";
     QuestionTypes["MultipleSelect"] = "multiple";
     QuestionTypes["Next"] = "next";
+    QuestionTypes["Skip"] = "skip";
     QuestionTypes["Back"] = "back";
     QuestionTypes["Reset"] = "reset";
     QuestionTypes["Hydrate"] = "hydrate";

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

@@ -10,7 +10,7 @@ import SessionPromptModal from '../SessionPromptModal/SessionPromptModal';
 import { convertPrimaryColorsToString, renderImages } from '../../utils';
 import ProgressBar from '../ProgressBar/ProgressBar';
 export default function CioQuiz(props) {
-    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(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 { quizSessionStorageState: { hasSessionStorageState, skipToResults }, } = state;
@@ -32,6 +32,7 @@ export default function CioQuiz(props) {
         getCoverQuestionProps,
         getHydrateQuizButtonProps,
         getNextQuestionButtonProps,
+        getSkipQuestionButtonProps,
         getOpenTextInputProps,
         getPreviousQuestionButtonProps,
         getQuizImageProps,

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

@@ -74,6 +74,31 @@ export default function quizLocalReducer(state, action) {
                 isQuizCompleted: false,
             };
         }
+        case QuestionTypes.Skip: {
+            const { answers, answerInputs } = state;
+            const newAnswers = [...answers];
+            const lastAnswerInputIndex = answers.length;
+            const currentAnswerInput = Object.values(state.answerInputs)[lastAnswerInputIndex];
+            switch (currentAnswerInput.type) {
+                case QuestionTypes.OpenText:
+                    newAnswers.push(['false']);
+                    break;
+                case QuestionTypes.Cover:
+                    newAnswers.push(['seen']);
+                    break;
+                case QuestionTypes.SingleSelect:
+                case QuestionTypes.MultipleSelect:
+                default:
+                    newAnswers.push([]);
+            }
+            return {
+                ...state,
+                // We now commit current answers to prevAnswerInputs
+                prevAnswerInputs: answerInputs,
+                answers: newAnswers,
+                isQuizCompleted: false,
+            };
+        }
         case QuestionTypes.Back: {
             const prevAnswerInputs = { ...state.prevAnswerInputs };
             return {

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

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

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

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

package/lib/mjs/src/constants.js

@@ -22,6 +22,7 @@ export const componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`numResultsToDisplay\` is an optional parameter that determines how many results should be displayed on results page
 - \`callbacks\` lets you pass callback functions that will be called on certain actions
   - \`onQuizNextQuestion\` is an optional callback function that will be called when user moves to the next question
+  - \`onQuizSkipQuestion\` is an optional callback function that will be called when user skips a question
 - \`sessionStateOptions\` lets you configure the session modal behavior
   - \`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
@@ -54,6 +55,7 @@ const {
   getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,
   getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,
   getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,
+  getSkipQuestionButtonProps: () => ({...})), // prop getter for jsx skip button to traverse the quiz,
   getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, 
   getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,
   getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,

package/lib/mjs/src/hooks/usePropsGetters/index.js

@@ -5,12 +5,14 @@ import useOpenTextInputProps from './useOpenTextInputProps';
 import useNextQuestionButtonProps from './useNextQuestionButtonProps';
 import usePreviousQuestionButtonProps from './usePreviousQuestionButtonProps';
 import useAddToFavoritesButtonProps from './useAddToFavoritesButtonProps';
+import useSkipQuestionButtonProps from './useSkipQuestionButtonProps';
 const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
-    const { quizAnswerChanged, nextQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, } = quizEvents;
+    const { quizAnswerChanged, nextQuestion, skipQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, } = quizEvents;
     const getOpenTextInputProps = useOpenTextInputProps(quizAnswerChanged, nextQuestion, quizApiState.quizCurrentQuestion?.next_question, quizLocalState.answerInputs);
     const getCoverQuestionProps = useCoverQuestionProps(quizAnswerChanged, quizApiState.quizCurrentQuestion?.next_question);
     const getSelectInputProps = useSelectInputProps(quizAnswerChanged, nextQuestion, quizApiState.quizCurrentQuestion?.next_question, quizLocalState.answerInputs);
     const getNextQuestionButtonProps = useNextQuestionButtonProps(nextQuestion, quizApiState, quizLocalState);
+    const getSkipQuestionButtonProps = useSkipQuestionButtonProps(skipQuestion, quizApiState);
     const getPreviousQuestionButtonProps = usePreviousQuestionButtonProps(quizApiState, previousQuestion);
     const getResetQuizButtonProps = useCallback((stylesType = 'primary') => ({
         className: stylesType === 'primary' ? 'cio-question-cta-button' : 'cio-question-redo-button',
@@ -70,6 +72,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
         getAddToFavoritesButtonProps,
         getQuizResultButtonProps,
         getQuizResultLinkProps,
+        getSkipQuestionButtonProps,
     };
 };
 export default usePropsGetters;

package/lib/mjs/src/hooks/usePropsGetters/useSkipQuestionButtonProps.js

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+export default function useSkipQuestionButtonProps(skipQuestion, quizApiState) {
+    const getSkipQuestionButtonProps = useCallback(() => {
+        const currentQuestionId = quizApiState.quizCurrentQuestion?.next_question?.id;
+        const isHidden = currentQuestionId &&
+            (quizApiState.quizCurrentQuestion?.isCoverQuestion ||
+                !quizApiState.quizCurrentQuestion?.next_question.is_skippable);
+        return {
+            className: isHidden ? 'cio-question-skip-button hide' : 'cio-question-skip-button',
+            type: 'button',
+            onClick: () => {
+                skipQuestion();
+            },
+        };
+    }, [quizApiState.quizCurrentQuestion, skipQuestion]);
+    return getSkipQuestionButtonProps;
+}

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

@@ -8,6 +8,7 @@ import useQuizResetClick from './useQuizResetClick';
 import useHydrateQuizLocalState from './useHydrateQuizLocalState';
 import { resetQuizSessionStorageState } from '../../utils';
 import useQuizAddToFavorites from './useQuizAddToFavorites';
+import useQuizSkipClick from './useQuizSkipClick';
 const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const { quizApiState, dispatchLocalState, dispatchApiState, quizLocalState, quizSessionStorageState, } = quizState;
     const { resultsPageOptions, callbacks } = quizOptions;
@@ -16,6 +17,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const quizAnswerChanged = useQuizAnswerChangeHandler(quizApiState, dispatchLocalState);
     // Quiz Next button click callback
     const nextQuestion = useQuizNextClick(quizApiState, quizLocalState, dispatchLocalState, callbacks?.onQuizNextQuestion);
+    const skipQuestion = useQuizSkipClick(quizApiState, quizLocalState, dispatchLocalState, callbacks?.onQuizSkipQuestion);
     // Quiz Back button click callback
     const previousQuestion = useQuizBackClick(quizApiState, dispatchLocalState);
     // Quiz result add to cart callback
@@ -36,6 +38,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
         quizAnswerChanged,
         previousQuestion,
         nextQuestion,
+        skipQuestion,
         resetQuiz,
         hydrateQuiz: hydrateQuizLocalState,
         resetSessionStorageState: resetQuizSessionStorageState(quizSessionStorageState.key),

package/lib/mjs/src/hooks/useQuizEvents/useQuizSkipClick.js

@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+import { QuestionTypes } from '../../components/CioQuiz/actions';
+import { isFunction } from '../../utils';
+const useQuizSkipClick = (quizApiState, quizLocalState, dispatchLocalState, onQuizSkipQuestion) => {
+    const quizSkipClickHandler = useCallback(() => {
+        const currentQuestion = quizApiState.quizCurrentQuestion?.next_question;
+        const currentQuestionId = currentQuestion?.id;
+        if (dispatchLocalState && currentQuestionId) {
+            if (!(currentQuestion?.type === 'cover')) {
+                dispatchLocalState({
+                    type: QuestionTypes.Skip,
+                    payload: quizApiState.quizCurrentQuestion,
+                });
+            }
+            const currentAnswerInput = {
+                ...quizLocalState.answerInputs[currentQuestionId],
+                value: currentQuestion?.type === 'open' ? 'false' : null,
+            };
+            if (currentQuestion && isFunction(onQuizSkipQuestion)) {
+                onQuizSkipQuestion({ ...currentQuestion, answer: currentAnswerInput });
+            }
+        }
+    }, [
+        dispatchLocalState,
+        onQuizSkipQuestion,
+        quizApiState.quizCurrentQuestion,
+        quizLocalState.answerInputs,
+    ]);
+    return quizSkipClickHandler;
+};
+export default useQuizSkipClick;

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

@@ -176,6 +176,10 @@ export const useMockContextValue = (question) => {
             ...mockElementProps,
             className: 'cio-question-cta-button',
         }),
+        getSkipQuestionButtonProps: () => ({
+            ...mockElementProps,
+            className: 'cio-question-skip-button',
+        }),
         getPreviousQuestionButtonProps: () => ({
             ...mockElementProps,
             className: 'cio-question-back-button',

package/lib/mjs/src/utils.js

@@ -42,6 +42,7 @@ export const functionStrings = {
     onAddToFavoritesClick: `(item) => console.dir(item)`,
     onQuizResultsLoaded: `(results) => console.dir(results)`,
     onQuizNextQuestion: `(question) => console.dir(question)`,
+    onQuizSkipQuestion: `(question) => console.dir(question)`,
     cioJsClient: `cioJsClient`,
 };
 export const stringifyWithDefaults = (obj) => {

package/lib/styles.css

@@ -215,6 +215,14 @@
   background-color: rgba(255, 255, 255, 0.87);
   align-items: center;
 }
+.cio-quiz .cio-question-buttons-group {
+  width: 20rem;
+  height: var(--bottom-bar-height);
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
 .cio-quiz .cio-question-cta-button {
   background: var(--primary-color);
   color: #ffffff;
@@ -250,7 +258,27 @@
   cursor: auto;
   outline: none;
 }
-
+.cio-quiz .cio-question-skip-button {
+  background: transparent;
+  color: var(--gray-dust-500);
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  outline: none;
+  font-size: 1rem;
+  width: 100%;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  transition: text-decoration-color 0.2s ease-in-out;
+}
+.cio-quiz .cio-question-skip-button:hover,
+.cio-quiz .cio-question-skip-button:focus {
+  text-decoration-color: var(--gray-dust-200);
+}
+.cio-quiz .cio-question-skip-button.hide {
+  visibility: hidden;
+  pointer-events: none;
+}
 /* Back Button Component */
 .cio-quiz .cio-question-back-button {
   color: var(--primary-color);
@@ -639,6 +667,12 @@
 
 /* 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/src/components/CioQuiz/actions.d.ts

@@ -6,6 +6,7 @@ export declare enum QuestionTypes {
     SingleSelect = "single",
     MultipleSelect = "multiple",
     Next = "next",
+    Skip = "skip",
     Back = "back",
     Reset = "reset",
     Hydrate = "hydrate",
@@ -24,7 +25,7 @@ interface Action<Type, Payload = {}> {
     payload?: Payload;
 }
 export type ActionAnswerInputQuestion = Action<QuestionTypes.OpenText, OpenTextQuestionPayload> | Action<QuestionTypes.SingleSelect, SelectQuestionPayload> | Action<QuestionTypes.MultipleSelect, SelectQuestionPayload> | Action<QuestionTypes.Cover, CoverQuestionPayload>;
-export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Next, CurrentQuestion> | Action<QuestionTypes.Back, CurrentQuestion> | Action<QuestionTypes.Reset> | Action<QuestionTypes.Complete> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;
+export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Next, CurrentQuestion> | Action<QuestionTypes.Skip, CurrentQuestion> | Action<QuestionTypes.Back, CurrentQuestion> | Action<QuestionTypes.Reset> | Action<QuestionTypes.Complete> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;
 export declare enum QuizAPIActionTypes {
     SET_IS_LOADING = 0,
     SET_IS_ERROR = 1,

package/lib/types/src/components/CioQuiz/context.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { GetAddToCartButtonProps, GetAddToFavoritesButtonProps, GetCoverQuestionProps, GetHydrateQuizButtonProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetResetQuizButtonProps, GetSelectInputProps, PrimaryColorStyles, QuizReturnState } from '../../types';
+import { GetAddToCartButtonProps, GetAddToFavoritesButtonProps, GetCoverQuestionProps, GetHydrateQuizButtonProps, GetNextQuestionButtonProps, GetSkipQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetResetQuizButtonProps, GetSelectInputProps, PrimaryColorStyles, QuizReturnState } from '../../types';
 export interface QuizContextValue {
     cioClient?: ConstructorIOClient;
     state?: QuizReturnState;
     getOpenTextInputProps: GetOpenTextInputProps;
     getNextQuestionButtonProps: GetNextQuestionButtonProps;
+    getSkipQuestionButtonProps: GetSkipQuestionButtonProps;
     getPreviousQuestionButtonProps: GetPreviousQuestionButtonProps;
     getQuizImageProps: GetQuizImageProps;
     getSelectInputProps: GetSelectInputProps;

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

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

package/lib/types/src/constants.d.ts

@@ -1,8 +1,8 @@
 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- `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 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  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 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 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)";
 export declare const smallContainerDescription = "If you are using the provided styles, CioQuiz component will respect the height and width of its parent container and use responsive styles based on the parent container's dimensions";