@micromag/screen-quiz 0.3.637 → 0.3.643

package/assets/css/styles.css

@@ -1,5 +1,5 @@
 .micromag-screen-quiz-answers-emptyAnswer{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-answers-button:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-quiz-answers-container,.micromag-screen-quiz-answers-items{position:relative}.micromag-screen-quiz-answers-emptyAnswer{font-size:.75em;height:40px;margin:0 auto;width:100%}.micromag-screen-quiz-answers-item{margin:0;padding:0;position:relative;-webkit-transition:opacity .6s ease-out;transition:opacity .6s ease-out}.micromag-screen-quiz-answers-isPlaceholder .micromag-screen-quiz-answers-item{padding:1px 0}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{opacity:1!important}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-otherAnswer{opacity:.6!important}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-withoutOpacity{opacity:1!important}.micromag-screen-quiz-answers-button{color:#fff;padding:10px;position:relative;width:100%}.micromag-screen-quiz-answers-button:disabled{opacity:1;pointer-events:none}.micromag-screen-quiz-answers-withIcon .micromag-screen-quiz-answers-button{padding-left:42px;padding-right:42px}.micromag-screen-quiz-answers-resultIcon{display:-ms-flexbox;display:flex;left:5px;position:absolute;top:50%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;background-color:#ff2945;border:2px solid #1c1c1c;border-radius:50%;height:32px;justify-content:center;margin-top:-16px;opacity:0;padding:5px;-webkit-transition:opacity .15s ease;transition:opacity .15s ease;width:32px}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-resultIcon{opacity:1}.micromag-screen-quiz-answers-rightAnswer .micromag-screen-quiz-answers-resultIcon{background-color:#0ed88f}.micromag-screen-quiz-answers-resultIcon .micromag-screen-quiz-answers-faIcon{display:block}.micromag-screen-quiz-answers-itemContent{padding:5px 0}
 .micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-question{margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-index{display:block;margin-bottom:1em;text-align:center;width:100%}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-result{opacity:0;pointer-events:none;position:absolute;-webkit-transition:opacity .5s ease;transition:opacity .5s ease;-webkit-transition-delay:.3s;transition-delay:.3s}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-resultContent{padding:20px 0}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{margin:0 auto;width:100%}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion{height:60px;margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{height:100px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-resultVisible .micromag-screen-quiz-question-result{opacity:1;pointer-events:all;position:relative}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder{padding:10px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder .micromag-screen-quiz-question-index{color:hsla(0,0%,100%,.6);font-size:8px;mix-blend-mode:difference}
-.micromag-screen-quiz-container .micromag-screen-quiz-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-quiz-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-quiz-disabled.micromag-screen-quiz-container{overflow:hidden;pointer-events:none}.micromag-screen-quiz-hidden.micromag-screen-quiz-container{display:none;visibility:hidden}.micromag-screen-quiz-placeholder.micromag-screen-quiz-container .micromag-screen-quiz-content{padding:6px;position:relative}.micromag-screen-quiz-container .micromag-screen-quiz-background{z-index:0}.micromag-screen-quiz-container .micromag-screen-quiz-content{z-index:2}.micromag-screen-quiz-container.micromag-screen-quiz-disabled{pointer-events:none}.micromag-screen-quiz-reset{border:0;padding:10px;position:absolute;right:0;top:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out;z-index:1000}.micromag-screen-quiz-reset:hover{border:0;opacity:.8}.micromag-screen-quiz-reset:hover:active{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.micromag-screen-quiz-points{color:#fff;left:0;padding:10px;position:absolute;top:0;z-index:1000}.micromag-screen-quiz-layout{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-header.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-footer a{padding:0}.micromag-screen-quiz-footer.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-transition{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-intro,.micromag-screen-quiz-question,.micromag-screen-quiz-results{overflow:hidden}.micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enterActive,.micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-results.micromag-screen-quiz-enterActive{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width:100%}.micromag-screen-quiz-intro.micromag-screen-quiz-exit,.micromag-screen-quiz-question.micromag-screen-quiz-exit,.micromag-screen-quiz-results.micromag-screen-quiz-exit{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-results.micromag-screen-quiz-exitActive{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width:100%}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-background.micromag-screen-quiz-enter{opacity:0}.micromag-screen-quiz-background.micromag-screen-quiz-enterActive{opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease;z-index:1}.micromag-screen-quiz-background.micromag-screen-quiz-exit{opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exitActive{opacity:0;-webkit-transition:opacity 1s ease;transition:opacity 1s ease;z-index:0}
+.micromag-screen-quiz-container .micromag-screen-quiz-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-quiz-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-quiz-disabled.micromag-screen-quiz-container{overflow:hidden;pointer-events:none}.micromag-screen-quiz-hidden.micromag-screen-quiz-container{display:none;visibility:hidden}.micromag-screen-quiz-placeholder.micromag-screen-quiz-container .micromag-screen-quiz-content{padding:6px;position:relative}.micromag-screen-quiz-nextButton:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-quiz-container .micromag-screen-quiz-background{z-index:0}.micromag-screen-quiz-container .micromag-screen-quiz-content{z-index:2}.micromag-screen-quiz-container.micromag-screen-quiz-disabled{pointer-events:none}.micromag-screen-quiz-reset{background-color:transparent;border:0;padding:10px;position:absolute;right:0;top:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out;z-index:1000}.micromag-screen-quiz-reset:hover{border:0;opacity:.8}.micromag-screen-quiz-reset:hover:active{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.micromag-screen-quiz-points{color:#fff;left:0;padding:10px;position:absolute;top:0;z-index:1000}.micromag-screen-quiz-layout{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-header.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-footer a{padding:0}.micromag-screen-quiz-footer.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-transition{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-intro,.micromag-screen-quiz-nextButton,.micromag-screen-quiz-question,.micromag-screen-quiz-results{overflow:hidden}.micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-nextButton.micromag-screen-quiz-enter,.micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-nextButton.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-nextButton.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enterActive,.micromag-screen-quiz-nextButton.micromag-screen-quiz-enterActive,.micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-results.micromag-screen-quiz-enterActive{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width:100%}.micromag-screen-quiz-intro.micromag-screen-quiz-exit,.micromag-screen-quiz-nextButton.micromag-screen-quiz-exit,.micromag-screen-quiz-question.micromag-screen-quiz-exit,.micromag-screen-quiz-results.micromag-screen-quiz-exit{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-nextButton.micromag-screen-quiz-exitActive,.micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-results.micromag-screen-quiz-exitActive{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width:100%}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-nextButton.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-nextButton{color:#fff;padding:10px;position:relative;width:100%}.micromag-screen-quiz-nextButton:disabled{opacity:1;pointer-events:none}.micromag-screen-quiz-withIcon .micromag-screen-quiz-nextButton{padding-left:42px;padding-right:42px}.micromag-screen-quiz-background.micromag-screen-quiz-enter{opacity:0}.micromag-screen-quiz-background.micromag-screen-quiz-enterActive{opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease;z-index:1}.micromag-screen-quiz-background.micromag-screen-quiz-exit{opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exitActive{opacity:0;-webkit-transition:opacity 1s ease;transition:opacity 1s ease;z-index:0}
 .micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-title{margin-bottom:10px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{margin:0 auto;width:100%}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{height:60px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription{height:100px}.micromag-screen-quiz-results-container.micromag-screen-quiz-results-isPlaceholder{padding:10px}
 .micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyDescription,.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-description,.micromag-screen-quiz-title-container .micromag-screen-quiz-title-title{margin-bottom:10px}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyDescription,.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyTitle{margin:0 auto 10px;width:100%}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyTitle{height:60px}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyDescription{height:100px}.micromag-screen-quiz-title-container.micromag-screen-quiz-title-isPlaceholder{padding:10px}

package/es/index.js

@@ -556,7 +556,7 @@ var Question = function Question(_ref) {
 Question.propTypes = propTypes$4;
 Question.defaultProps = defaultProps$4;
 
-var styles$2 = {"container":"micromag-screen-quiz-container","background":"micromag-screen-quiz-background","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","reset":"micromag-screen-quiz-reset","points":"micromag-screen-quiz-points","layout":"micromag-screen-quiz-layout","header":"micromag-screen-quiz-header","footer":"micromag-screen-quiz-footer","transition":"micromag-screen-quiz-transition","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","intro":"micromag-screen-quiz-intro","enter":"micromag-screen-quiz-enter","left":"micromag-screen-quiz-left","enterActive":"micromag-screen-quiz-enterActive","exit":"micromag-screen-quiz-exit","exitActive":"micromag-screen-quiz-exitActive"};
+var styles$2 = {"container":"micromag-screen-quiz-container","background":"micromag-screen-quiz-background","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","nextButton":"micromag-screen-quiz-nextButton","reset":"micromag-screen-quiz-reset","points":"micromag-screen-quiz-points","layout":"micromag-screen-quiz-layout","header":"micromag-screen-quiz-header","footer":"micromag-screen-quiz-footer","transition":"micromag-screen-quiz-transition","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","intro":"micromag-screen-quiz-intro","enter":"micromag-screen-quiz-enter","left":"micromag-screen-quiz-left","enterActive":"micromag-screen-quiz-enterActive","exit":"micromag-screen-quiz-exit","exitActive":"micromag-screen-quiz-exitActive","withIcon":"micromag-screen-quiz-withIcon"};
 
 var propTypes$3 = {
   id: PropTypes.string,
@@ -1080,6 +1080,7 @@ var propTypes = {
   background: PropTypes$1.backgroundElement,
   introButton: PropTypes$1.textElement,
   introBackground: PropTypes$1.backgroundElement,
+  nextButton: PropTypes$1.textElement,
   header: PropTypes$1.header,
   footer: PropTypes$1.footer,
   current: PropTypes.bool,
@@ -1110,6 +1111,7 @@ var defaultProps = {
   background: null,
   introButton: null,
   introBackground: null,
+  nextButton: null,
   header: null,
   footer: null,
   current: true,
@@ -1140,6 +1142,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     background = _ref.background,
     introBackground = _ref.introBackground,
     introButton = _ref.introButton,
+    nextButton = _ref.nextButton,
     header = _ref.header,
     footer = _ref.footer,
     current = _ref.current,
@@ -1181,9 +1184,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
   var backgroundPlaying = current && (isView || isEdit);
   var backgroundShouldLoad = current || active;
+  var hasButtonText = isTextFilled(nextButton);
 
   // Call to Action
-
   var hasHeader = isHeaderFilled(header);
   var hasFooter = isFooterFilled(footer);
   var footerProps = getFooterProps(footer, {
@@ -1230,18 +1233,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
       answerIndex: answerIndex
     });
   }, [userAnswers, setUserAnswers, trackScreenEvent, questions, questionIndex]);
-  var onAnswerTransitionEnd = useCallback(function () {
-    if (isEdit) {
-      return;
-    }
-    var nextIndex = questionIndex + 1;
-    var questionsCount = questions.length;
-    if (nextIndex < questionsCount) {
-      setQuestionIndex(nextIndex);
-    } else if (nextIndex === questionsCount) {
-      setQuestionIndex('results');
-    }
-  }, [questions, questionIndex, setQuestionIndex, isEdit]);
   var onClickIntroButton = useCallback(function () {
     setQuestionIndex(0);
   }, [setQuestionIndex]);
@@ -1252,24 +1243,49 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   }, [isEdit, current, userAnswers, setUserAnswers]);
   var hasQuestions = questions !== null && questions.length > 0;
   var currentQuestion = hasQuestions ? questions[questionIndex] || {} : {};
-  var _currentQuestion$text = currentQuestion.text,
-    text = _currentQuestion$text === undefined ? null : _currentQuestion$text,
-    _currentQuestion$answ = currentQuestion.answers,
-    answers = _currentQuestion$answ === undefined ? [] : _currentQuestion$answ,
-    _currentQuestion$back = currentQuestion.background,
-    questionBackground = _currentQuestion$back === undefined ? null : _currentQuestion$back,
-    _currentQuestion$layo = currentQuestion.layout,
-    questionLayout = _currentQuestion$layo === undefined ? null : _currentQuestion$layo;
+  var _ref4 = currentQuestion || {},
+    _ref4$text = _ref4.text,
+    text = _ref4$text === undefined ? null : _ref4$text,
+    _ref4$answers = _ref4.answers,
+    answers = _ref4$answers === undefined ? [] : _ref4$answers,
+    _ref4$background = _ref4.background,
+    questionBackground = _ref4$background === undefined ? null : _ref4$background,
+    _ref4$layout = _ref4.layout,
+    questionLayout = _ref4$layout === undefined ? null : _ref4$layout,
+    _ref4$result = _ref4.result,
+    questionResult = _ref4$result === undefined ? null : _ref4$result,
+    _ref4$resultImage = _ref4.resultImage,
+    questionResultImage = _ref4$resultImage === undefined ? null : _ref4$resultImage;
   var currentAnsweredIndex = userAnswers !== null && typeof userAnswers[questionIndex] !== 'undefined' ? userAnswers[questionIndex] : null;
+  var answer = currentAnsweredIndex !== null && typeof answers[currentAnsweredIndex] !== 'undefined' ? answers[currentAnsweredIndex] : null;
+  var _ref5 = answer || {},
+    _ref5$customAnswerLab = _ref5.customAnswerLabel,
+    customAnswerLabel = _ref5$customAnswerLab === undefined ? null : _ref5$customAnswerLab;
+  var hasResult = questionResult !== null || questionResultImage !== null || customAnswerLabel !== null;
+
+  // console.log('hasResult', hasResult, questionResult, questionResultImage, customAnswerLabel);
+
+  var onNextSlide = useCallback(function () {
+    if (isEdit) {
+      return;
+    }
+    var nextIndex = questionIndex + 1;
+    var questionsCount = questions.length;
+    if (nextIndex < questionsCount) {
+      setQuestionIndex(nextIndex);
+    } else if (nextIndex === questionsCount) {
+      setQuestionIndex('results');
+    }
+  }, [questions, questionIndex, setQuestionIndex, isEdit]);
   var currentPoints = useMemo(function () {
     return userAnswers !== null ? Object.keys(userAnswers).reduce(function (totalPoints, answerQuestionIndex) {
-      var _ref4 = questions !== null ? questions[answerQuestionIndex] || {} : {},
-        _ref4$answers = _ref4.answers,
-        questionAnswers = _ref4$answers === undefined ? [] : _ref4$answers;
+      var _ref6 = questions !== null ? questions[answerQuestionIndex] || {} : {},
+        _ref6$answers = _ref6.answers,
+        questionAnswers = _ref6$answers === undefined ? [] : _ref6$answers;
       var answerIndex = userAnswers[answerQuestionIndex];
-      var _ref5 = questionAnswers[answerIndex] || {},
-        _ref5$points = _ref5.points,
-        points = _ref5$points === undefined ? 0 : _ref5$points;
+      var _ref7 = questionAnswers[answerIndex] || {},
+        _ref7$points = _ref7.points,
+        points = _ref7$points === undefined ? 0 : _ref7$points;
       return points + totalPoints;
     }, 0) : 0;
   }, [userAnswers, questions]);
@@ -1283,30 +1299,30 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     if (stateId === 'results') {
       return (results || [])[parseInt(stateIndex, 10)] || null;
     }
-    return (results || []).sort(function (_ref6, _ref7) {
-      var _ref6$points = _ref6.points,
-        pointsA = _ref6$points === undefined ? 0 : _ref6$points;
-      var _ref7$points = _ref7.points,
-        pointsB = _ref7$points === undefined ? 0 : _ref7$points;
+    return (results || []).sort(function (_ref8, _ref9) {
+      var _ref8$points = _ref8.points,
+        pointsA = _ref8$points === undefined ? 0 : _ref8$points;
+      var _ref9$points = _ref9.points,
+        pointsB = _ref9$points === undefined ? 0 : _ref9$points;
       if (pointsA === pointsB) {
         return 0;
       }
       return pointsA > pointsB ? 1 : -1;
     }).reduce(function (lastResult, result) {
-      var _ref8 = lastResult || {},
-        _ref8$points = _ref8.points,
-        lastPoints = _ref8$points === undefined ? 0 : _ref8$points;
-      var _ref9 = result || {},
-        _ref9$points = _ref9.points,
-        points = _ref9$points === undefined ? 0 : _ref9$points;
+      var _ref10 = lastResult || {},
+        _ref10$points = _ref10.points,
+        lastPoints = _ref10$points === undefined ? 0 : _ref10$points;
+      var _ref11 = result || {},
+        _ref11$points = _ref11.points,
+        points = _ref11$points === undefined ? 0 : _ref11$points;
       return currentPoints >= (lastPoints || 0) && currentPoints >= points ? result : lastResult;
     }, null);
   }, [isResults, results, currentPoints, stateId, stateIndex]);
-  var _ref10 = currentResult || {},
-    _ref10$background = _ref10.background,
-    resultBackground = _ref10$background === undefined ? null : _ref10$background,
-    _ref10$layout = _ref10.layout,
-    resultLayout = _ref10$layout === undefined ? null : _ref10$layout;
+  var _ref12 = currentResult || {},
+    _ref12$background = _ref12.background,
+    resultBackground = _ref12$background === undefined ? null : _ref12$background,
+    _ref12$layout = _ref12.layout,
+    resultLayout = _ref12$layout === undefined ? null : _ref12$layout;
   var _useQuizCreate = useQuizCreate({
       screenId: screenId
     }),
@@ -1366,8 +1382,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     scrolledBottom = _useState6[0],
     setScrolledBottom = _useState6[1];
-  var onScrolledBottom = useCallback(function (_ref11) {
-    var initial = _ref11.initial;
+  var onScrolledBottom = useCallback(function (_ref13) {
+    var initial = _ref13.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -1380,9 +1396,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     hasScroll = _useState8[0],
     setHasScroll = _useState8[1];
-  var onScrollHeightChange = useCallback(function (_ref12) {
-    var _ref12$canScroll = _ref12.canScroll,
-      canScroll = _ref12$canScroll === undefined ? false : _ref12$canScroll;
+  var onScrollHeightChange = useCallback(function (_ref14) {
+    var _ref14$canScroll = _ref14.canScroll,
+      canScroll = _ref14$canScroll === undefined ? false : _ref14$canScroll;
     setHasScroll(canScroll);
   }, [setHasScroll]);
   var onQuizReset = useCallback(function () {
@@ -1413,7 +1429,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
       "type": 0,
       "value": "points gained"
     }]
-  })) : null, showReset ? /*#__PURE__*/React.createElement(Button$1, {
+  })) : null, showReset ? /*#__PURE__*/React.createElement(Button, {
     className: styles$2.reset,
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faRedo,
@@ -1480,6 +1496,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     focusable: current && isView,
     showInstantAnswer: showInstantAnswer,
     layout: questionLayout || layout,
+    result: questionResult,
+    resultImage: questionResultImage,
+    withResult: hasResult,
     withoutGoodAnswer: true,
     withoutTrueFalse: true,
     transitions: transitions,
@@ -1487,14 +1506,41 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     transitionStagger: transitionStagger,
     transitionDisabled: transitionDisabled,
     onAnswerClick: onAnswerClick,
-    onAnswerTransitionEnd: onAnswerTransitionEnd,
+    onAnswerTransitionEnd: hasResult ? null : onNextSlide,
     className: styles$2.question,
     style: !isPlaceholder ? {
       padding: spacing,
       paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
     } : null
-  })) : null, isResults ? /*#__PURE__*/React.createElement(CSSTransition, {
+  })) : null, hasResult && currentAnsweredIndex !== null ? /*#__PURE__*/React.createElement(CSSTransition, {
+    key: "next",
+    classNames: styles$2,
+    timeout: 0
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$2.next,
+    style: !isPlaceholder ? {
+      padding: spacing,
+      paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
+      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
+    } : null
+  }, /*#__PURE__*/React.createElement(Button, {
+    disabled: currentAnsweredIndex === null,
+    focusable: true,
+    buttonStyle: nextButton !== null ? nextButton.buttonStyle : null,
+    className: styles$2.nextButton,
+    onClick: onNextSlide
+  }, hasButtonText ? /*#__PURE__*/React.createElement(Text, Object.assign({}, nextButton, {
+    className: styles$2.label
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: styles$2.label
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "SVLGTA",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Next"
+    }]
+  }))))) : null, isResults ? /*#__PURE__*/React.createElement(CSSTransition, {
     key: "results",
     classNames: styles$2,
     timeout: 2000
@@ -1896,6 +1942,29 @@ var definition = [{
           "value": "Answers"
         }]
       })
+    }, {
+      name: 'result',
+      type: 'text-element',
+      theme: {
+        textStyle: 'text'
+      },
+      label: defineMessage({
+        id: "iQ5Uf7",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Default feedback"
+        }]
+      })
+    }, {
+      name: 'resultImage',
+      type: 'visual',
+      label: defineMessage({
+        id: "yA4B6h",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Result feedback image"
+        }]
+      })
     }, {
       name: 'background',
       type: 'background',
@@ -2077,6 +2146,19 @@ var definition = [{
         }]
       })
     }]
+  }, {
+    name: 'nextButton',
+    type: 'button-element',
+    theme: {
+      textStyle: 'button'
+    },
+    label: defineMessage({
+      id: "Yu/PB5",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Next button"
+      }]
+    })
   }, {
     name: 'background',
     type: 'background',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-quiz",
-    "version": "0.3.637",
+    "version": "0.3.643",
     "private": false,
     "description": "",
     "keywords": [
@@ -89,5 +89,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "8f06c2a525d71dc47183af7786284632a04332e1"
+    "gitHead": "8370388b4087d27421b13ad0b8d2b8ad87163036"
 }