@constructor-io/constructorio-ui-quizzes 1.4.7 → 1.5.0

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

@@ -5,12 +5,14 @@ const react_1 = tslib_1.__importStar(require("react"));
 const context_1 = tslib_1.__importDefault(require("./context"));
 const QuizQuestions_1 = tslib_1.__importDefault(require("../QuizQuestions"));
 const ResultContainer_1 = tslib_1.__importDefault(require("../ResultContainer/ResultContainer"));
+const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 const constants_1 = require("../../constants");
 const Spinner_1 = tslib_1.__importDefault(require("../Spinner/Spinner"));
 const useQuiz_1 = tslib_1.__importDefault(require("../../hooks/useQuiz"));
 const SessionPromptModal_1 = tslib_1.__importDefault(require("../SessionPromptModal/SessionPromptModal"));
 const utils_1 = require("../../utils");
 function CioQuiz(props) {
+    var _a;
     const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, 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;
@@ -46,16 +48,23 @@ function CioQuiz(props) {
         primaryColorStyles,
     };
     if (state.quiz.requestState === constants_1.RequestStates.Loading) {
-        return (react_1.default.createElement("div", { className: 'cio-quiz' },
+        return (react_1.default.createElement("div", { className: 'cio-quiz cio-quiz-loading' },
             react_1.default.createElement(Spinner_1.default, null)));
     }
+    const questionData = (_a = state.quiz.currentQuestion) === null || _a === void 0 ? void 0 : _a.next_question;
+    const questionType = questionData === null || questionData === void 0 ? void 0 : questionData.type;
+    const questionImages = questionData === null || questionData === void 0 ? void 0 : questionData.images;
+    const displayBackgroundImage = (questionType === 'single' || questionType === 'multiple') && questionImages;
     if (state.quiz.requestState === constants_1.RequestStates.Success) {
         return (react_1.default.createElement("div", { className: 'cio-quiz' },
+            displayBackgroundImage && (0, utils_1.renderImages)(questionImages, 'cio-question-background-image'),
             react_1.default.createElement("style", null,
                 ".cio-quiz ",
                 (0, utils_1.convertPrimaryColorsToString)(primaryColorStyles)),
             react_1.default.createElement(SessionPromptModal_1.default, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
-            react_1.default.createElement(context_1.default.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions })) : (state.quiz.currentQuestion && react_1.default.createElement(QuizQuestions_1.default, null)))));
+            react_1.default.createElement(context_1.default.Provider, { value: contextValue }, state.quiz.results || state.quiz.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(QuizQuestions_1.default, null),
+                react_1.default.createElement(ControlBar_1.default, { ctaButtonText: (questionData === null || questionData === void 0 ? void 0 : questionData.cta_text) || undefined })))))));
     }
     return null;
 }

package/lib/cjs/components/CoverTypeQuestion/CoverTypeQuestion.js

@@ -6,7 +6,6 @@ const QuestionTitle_1 = tslib_1.__importDefault(require("../QuestionTitle/Questi
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescription/QuestionDescription"));
 const utils_1 = require("../../utils");
-const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 function CoverTypeQuestion() {
     var _a;
     const { state } = (0, react_1.useContext)(context_1.default);
@@ -23,8 +22,7 @@ function CoverTypeQuestion() {
             hasImage ? (0, utils_1.renderImages)(question.images, 'cio-question-image-container') : '',
             react_1.default.createElement("div", { className: 'cio-question-content' },
                 react_1.default.createElement(QuestionTitle_1.default, { title: question === null || question === void 0 ? void 0 : question.title }),
-                react_1.default.createElement(QuestionDescription_1.default, { description: question.description }),
-                react_1.default.createElement(ControlBar_1.default, { ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text }))));
+                react_1.default.createElement(QuestionDescription_1.default, { description: question.description }))));
     }
     return null;
 }

package/lib/cjs/components/OpenTextTypeQuestion/OpenTextTypeQuestion.js

@@ -6,7 +6,6 @@ const QuestionTitle_1 = tslib_1.__importDefault(require("../QuestionTitle/Questi
 const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescription/QuestionDescription"));
 const utils_1 = require("../../utils");
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
-const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 function OpenTextQuestion() {
     var _a;
     const { state, getOpenTextInputProps } = (0, react_1.useContext)(context_1.default);
@@ -24,8 +23,7 @@ function OpenTextQuestion() {
             react_1.default.createElement("div", { className: 'cio-question-content' },
                 react_1.default.createElement(QuestionTitle_1.default, { title: question.title }),
                 react_1.default.createElement(QuestionDescription_1.default, { description: question.description }),
-                getOpenTextInputProps && react_1.default.createElement("input", Object.assign({}, getOpenTextInputProps())),
-                react_1.default.createElement(ControlBar_1.default, { ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text }))));
+                getOpenTextInputProps && react_1.default.createElement("input", Object.assign({}, getOpenTextInputProps())))));
     }
     return null;
 }

package/lib/cjs/components/SelectTypeQuestion/SelectTypeQuestion.js

@@ -6,7 +6,6 @@ const QuestionTitle_1 = tslib_1.__importDefault(require("../QuestionTitle/Questi
 const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescription/QuestionDescription"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 const utils_1 = require("../../utils");
-const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 const actions_1 = require("../CioQuiz/actions");
 function SelectTypeQuestion() {
     var _a;
@@ -29,8 +28,7 @@ function SelectTypeQuestion() {
                     ? 'cio-question-options-container-text-only'
                     : 'cio-question-options-container'}` }, (_a = question === null || question === void 0 ? void 0 : question.options) === null || _a === void 0 ? void 0 : _a.map((option) => getSelectInputProps && (react_1.default.createElement("div", Object.assign({}, getSelectInputProps(option)),
                 option.images ? (0, utils_1.renderImages)(option.images, 'cio-question-option-image') : '',
-                react_1.default.createElement("div", { className: 'cio-question-option-value' }, option === null || option === void 0 ? void 0 : option.value))))),
-            react_1.default.createElement(ControlBar_1.default, { ctaButtonText: (question === null || question === void 0 ? void 0 : question.cta_text) || 'Continue' })));
+                react_1.default.createElement("div", { className: 'cio-question-option-value' }, option === null || option === void 0 ? void 0 : option.value)))))));
     }
     return null;
 }

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

@@ -2,11 +2,12 @@ import React, { useEffect, useState } from 'react';
 import QuizContext from './context';
 import QuizQuestions from '../QuizQuestions';
 import ResultContainer from '../ResultContainer/ResultContainer';
+import ControlBar from '../ControlBar/ControlBar';
 import { RequestStates } from '../../constants';
 import Spinner from '../Spinner/Spinner';
 import useQuiz from '../../hooks/useQuiz';
 import SessionPromptModal from '../SessionPromptModal/SessionPromptModal';
-import { convertPrimaryColorsToString } from '../../utils';
+import { convertPrimaryColorsToString, renderImages } from '../../utils';
 export default function CioQuiz(props) {
     const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(props);
     const [showSessionPrompt, setShowSessionPrompt] = useState(false);
@@ -43,16 +44,23 @@ export default function CioQuiz(props) {
         primaryColorStyles,
     };
     if (state.quiz.requestState === RequestStates.Loading) {
-        return (React.createElement("div", { className: 'cio-quiz' },
+        return (React.createElement("div", { className: 'cio-quiz cio-quiz-loading' },
             React.createElement(Spinner, null)));
     }
+    const questionData = state.quiz.currentQuestion?.next_question;
+    const questionType = questionData?.type;
+    const questionImages = questionData?.images;
+    const displayBackgroundImage = (questionType === 'single' || questionType === 'multiple') && questionImages;
     if (state.quiz.requestState === RequestStates.Success) {
         return (React.createElement("div", { className: 'cio-quiz' },
+            displayBackgroundImage && renderImages(questionImages, 'cio-question-background-image'),
             React.createElement("style", null,
                 ".cio-quiz ",
                 convertPrimaryColorsToString(primaryColorStyles)),
             React.createElement(SessionPromptModal, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
-            React.createElement(QuizContext.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (React.createElement(ResultContainer, { options: resultsPageOptions })) : (state.quiz.currentQuestion && React.createElement(QuizQuestions, null)))));
+            React.createElement(QuizContext.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (React.createElement(ResultContainer, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (React.createElement(React.Fragment, null,
+                React.createElement(QuizQuestions, null),
+                React.createElement(ControlBar, { ctaButtonText: questionData?.cta_text || undefined })))))));
     }
     return null;
 }

package/lib/mjs/components/CoverTypeQuestion/CoverTypeQuestion.js

@@ -3,7 +3,6 @@ import QuestionTitle from '../QuestionTitle/QuestionTitle';
 import QuizContext from '../CioQuiz/context';
 import QuestionDescription from '../QuestionDescription/QuestionDescription';
 import { renderImages } from '../../utils';
-import ControlBar from '../ControlBar/ControlBar';
 export default function CoverTypeQuestion() {
     const { state } = useContext(QuizContext);
     let question;
@@ -19,8 +18,7 @@ export default function CoverTypeQuestion() {
             hasImage ? renderImages(question.images, 'cio-question-image-container') : '',
             React.createElement("div", { className: 'cio-question-content' },
                 React.createElement(QuestionTitle, { title: question?.title }),
-                React.createElement(QuestionDescription, { description: question.description }),
-                React.createElement(ControlBar, { ctaButtonText: question?.cta_text }))));
+                React.createElement(QuestionDescription, { description: question.description }))));
     }
     return null;
 }

package/lib/mjs/components/OpenTextTypeQuestion/OpenTextTypeQuestion.js

@@ -3,7 +3,6 @@ import QuestionTitle from '../QuestionTitle/QuestionTitle';
 import QuestionDescription from '../QuestionDescription/QuestionDescription';
 import { renderImages } from '../../utils';
 import QuizContext from '../CioQuiz/context';
-import ControlBar from '../ControlBar/ControlBar';
 function OpenTextQuestion() {
     const { state, getOpenTextInputProps } = useContext(QuizContext);
     let question;
@@ -20,8 +19,7 @@ function OpenTextQuestion() {
             React.createElement("div", { className: 'cio-question-content' },
                 React.createElement(QuestionTitle, { title: question.title }),
                 React.createElement(QuestionDescription, { description: question.description }),
-                getOpenTextInputProps && React.createElement("input", { ...getOpenTextInputProps() }),
-                React.createElement(ControlBar, { ctaButtonText: question?.cta_text }))));
+                getOpenTextInputProps && React.createElement("input", { ...getOpenTextInputProps() }))));
     }
     return null;
 }

package/lib/mjs/components/SelectTypeQuestion/SelectTypeQuestion.js

@@ -3,7 +3,6 @@ import QuestionTitle from '../QuestionTitle/QuestionTitle';
 import QuestionDescription from '../QuestionDescription/QuestionDescription';
 import QuizContext from '../CioQuiz/context';
 import { renderImages } from '../../utils';
-import ControlBar from '../ControlBar/ControlBar';
 import { QuestionTypes } from '../CioQuiz/actions';
 function SelectTypeQuestion() {
     const { state, getSelectInputProps } = useContext(QuizContext);
@@ -25,8 +24,7 @@ function SelectTypeQuestion() {
                     ? 'cio-question-options-container-text-only'
                     : 'cio-question-options-container'}` }, question?.options?.map((option) => getSelectInputProps && (React.createElement("div", { ...getSelectInputProps(option) },
                 option.images ? renderImages(option.images, 'cio-question-option-image') : '',
-                React.createElement("div", { className: 'cio-question-option-value' }, option?.value))))),
-            React.createElement(ControlBar, { ctaButtonText: question?.cta_text || 'Continue' })));
+                React.createElement("div", { className: 'cio-question-option-value' }, option?.value)))))));
     }
     return null;
 }

package/lib/styles.css

@@ -57,13 +57,17 @@
   min-height: 100%;
   height: 100%;
   overflow: auto;
-  display: flex;
-  justify-content: center;
   background-color: #ffffff;
   color: var(--gray-dust-500);
   font-size: 16px;
 }
 
+/* Container for the loading spinner */
+.cio-quiz.cio-quiz-loading {
+  display: flex;
+  justify-content: center;
+}
+
 .cio-quiz button {
   cursor: pointer;
 }
@@ -77,7 +81,9 @@
   width: 100%;
   position: relative;
   align-self: start;
-  min-height: calc(100% - 2rem); /* Full height - margin */
+  height: calc(
+    100% - 2rem - calc(var(--bottom-bar-height))
+  ); /* Full height - margin - control bar */
 }
 .cio-container--with-image {
   display: flex;
@@ -86,7 +92,15 @@
   padding-bottom: var(--bottom-bar-height);
   position: relative;
   align-self: start;
-  min-height: 100%;
+  height: calc(100% - calc(var(--bottom-bar-height))); /* Full height - margin - control bar */
+}
+
+/* Background image */
+.cio-question-background-image {
+  height: calc(100% - 4px);
+  width: 100%;
+  position: absolute;
+  z-index: -1;
 }
 
 /* Session Prompt Modal */
@@ -163,8 +177,9 @@
   width: 100%;
   object-fit: cover;
   max-height: var(--container-image-small-height);
-  height: var(--container-image-small-height); /* Fixed height for layout shifts*/
+  height: var(--container-image-small-height); /* Fixed height for layout shifts */
   display: flex;
+  align-self: stretch;
 }
 
 /* Input */
@@ -192,7 +207,7 @@
   height: var(--bottom-bar-height);
   padding: 8px 16px;
   display: flex;
-  position: absolute;
+  position: sticky;
   bottom: 0px;
   left: 0px;
   background: white;
@@ -280,6 +295,7 @@
   display: flex;
   flex-direction: column;
   cursor: pointer;
+  background-color: white;
 }
 .cio-question-option-container.selected {
   outline: 3px solid var(--primary-color-variant-600);
@@ -302,12 +318,15 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  align-self: start;
   max-width: 1200px;
   padding: 1rem;
   margin-top: 2rem;
-  min-height: calc(100% - 3rem); /* Full height - padding - margin */
+  min-height: calc(
+    100% - 2rem - calc(var(--bottom-bar-height))
+  ); /* Full height - padding - margin */
   width: 100%;
+  margin-right: auto;
+  margin-left: auto;
 }
 .cio-question-options-container {
   display: flex;
@@ -337,6 +356,7 @@
   width: 100%;
   margin: auto;
   cursor: pointer;
+  background-color: white;
 }
 
 /* Option Image */
@@ -383,6 +403,8 @@
   padding: 2rem 1rem;
   display: flex;
   flex-direction: column;
+  margin-right: auto;
+  margin-left: auto;
 }
 .cio-results-title {
   margin-top: 0;
@@ -579,7 +601,6 @@
 
   /* Image */
   .cio-question-image-container {
-    height: 100%;
     flex-basis: 50%;
     flex-shrink: 0;
     border-radius: 4px;
@@ -628,6 +649,7 @@
   .cio-container {
     align-items: center;
     margin-top: 0;
+    height: calc(100% - calc(var(--bottom-bar-height))); /* Full height - control bar */
   }
   .cio-container--with-image {
     padding: 6% 2%;
@@ -646,10 +668,8 @@
 
   /* Image */
   .cio-question-image-container {
-    max-height: 100%;
-  }
-  .cio-cover-question-container--with-image .cio-question-image-container {
     max-height: unset;
+    height: unset;
   }
 
   /* Content */
@@ -667,14 +687,6 @@
     margin-bottom: 2rem;
   }
 
-  /* CTA Button Component */
-  .cio-question-buttons-container {
-    position: sticky;
-    padding: 0;
-    margin: 0;
-    align-items: center;
-  }
-
   /* Cover Component */
   .cio-cover-question-container--with-image {
     padding: 0;
@@ -691,9 +703,11 @@
   }
   .cio-select-question-container {
     justify-content: center;
-    margin: 0;
+    margin-bottom: 0;
+    margin-top: 0;
     padding: 2rem;
     padding-bottom: 0;
+    min-height: calc(100% - calc(var(--bottom-bar-height))); /* Full height - padding - margin */
   }
   .cio-question-option-container {
     width: calc(25% - 13px);

package/package.json

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