@micromag/screen-quiz 0.3.673 → 0.3.676

package/assets/css/styles.css

@@ -1,4 +1,4 @@
-.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-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}.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-resultContent{padding:20px 0}.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-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-resultHidden .micromag-screen-quiz-question-result{opacity:0;pointer-events:none;position:absolute}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-resultHidden .micromag-screen-quiz-question-result .micromag-screen-quiz-question-resultContent{padding:0}.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-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}

package/es/index.js

@@ -117,7 +117,7 @@ var Answers = function Answers(_ref) {
     return hasGood || good;
   }, false) : false;
   var finalShowUserAnswer = showUserAnswer || !hasRightAnswer;
-  var shouldCollapse = (!withoutGoodAnswer || finalShowUserAnswer && answeredIndex !== null) && !withoutCollapse;
+  var shouldCollapse = !withoutGoodAnswer || finalShowUserAnswer && answeredIndex !== null && !withoutCollapse;
   var _useState3 = useState(answeredIndex !== null),
     _useState4 = _slicedToArray(_useState3, 2),
     answersCollapsed = _useState4[0],
@@ -134,6 +134,7 @@ var Answers = function Answers(_ref) {
     var timeout = null;
     if (answeredIndex !== null && shouldCollapse) {
       timeout = setTimeout(function () {
+        // console.log('ok should collapse');
         setAnswersCollapsed(true);
         if (onCollapse !== null) {
           onCollapse();
@@ -141,6 +142,7 @@ var Answers = function Answers(_ref) {
       }, hasAnsweredRight || finalShowUserAnswer ? 500 : answersCollapseDelay);
     } else if (answeredIndex !== null && !shouldCollapse) {
       timeout = setTimeout(function () {
+        // console.log('ok no collapse');
         if (onCollapse !== null) {
           onCollapse();
         }
@@ -162,17 +164,27 @@ var Answers = function Answers(_ref) {
   }, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, onCollapsed, onTransitionEnd, answersCollapseDelay, hasAnsweredRight, finalShowUserAnswer, shouldCollapse]);
   useEffect(function () {
     var timeout = null;
+    var endTimeout = null;
     if (answersCollapsed) {
       timeout = setTimeout(function () {
         setAnswersFinalCollapse(true);
       }, 300);
+      endTimeout = setTimeout(function () {
+        // Failsafe cause collapse transition is not always active
+        if (onTransitionEnd !== null) {
+          onTransitionEnd();
+        }
+      }, 625);
     }
     return function () {
       if (timeout !== null) {
         clearTimeout(timeout);
       }
+      if (endTimeout !== null) {
+        clearTimeout(endTimeout);
+      }
     };
-  }, [answersCollapsed]);
+  }, [answersCollapsed, onTransitionEnd, setAnswersFinalCollapse]);
   var _useState9 = useState(false),
     _useState10 = _slicedToArray(_useState9, 2),
     transitioned = _useState10[0],
@@ -217,26 +229,28 @@ var Answers = function Answers(_ref) {
     if (answeredIndex !== null && showAnimation && answersCollapsed && !rightAnswer) {
       hidden = true;
     }
+    var _ref6 = answer || {},
+      _ref6$label = _ref6.label,
+      label = _ref6$label === void 0 ? null : _ref6$label;
+    var key = "key-".concat(answerI, "-").concat((label === null || label === void 0 ? void 0 : label.body) || null);
     return _objectSpread(_objectSpread({}, answer), {}, {
       hidden: hidden,
       userAnswer: userAnswer,
       index: answerI,
-      maxHeight: height
+      maxHeight: height,
+      key: key
     });
   });
   var transitions = useTransition(filteredListOfItems, {
-    key: function key(_ref6) {
-      var _ref6$index = _ref6.index,
-        index = _ref6$index === void 0 ? 0 : _ref6$index,
-        _ref6$label = _ref6.label,
-        label = _ref6$label === void 0 ? null : _ref6$label;
-      return "key-".concat(index, "-").concat((label === null || label === void 0 ? void 0 : label.body) || null);
+    key: function key(_ref7) {
+      var _key = _ref7.key;
+      return _key;
     },
-    update: function update(_ref7) {
-      var _ref7$hidden = _ref7.hidden,
-        hidden = _ref7$hidden === void 0 ? false : _ref7$hidden,
-        _ref7$maxHeight = _ref7.maxHeight,
-        maxHeight = _ref7$maxHeight === void 0 ? 0 : _ref7$maxHeight;
+    update: function update(_ref8) {
+      var _ref8$hidden = _ref8.hidden,
+        hidden = _ref8$hidden === void 0 ? false : _ref8$hidden,
+        _ref8$maxHeight = _ref8.maxHeight,
+        maxHeight = _ref8$maxHeight === void 0 ? 0 : _ref8$maxHeight;
       return {
         opacity: hidden && showAnimation && !withoutGoodAnswer ? 0 : 1,
         // Animate this, not height
@@ -258,9 +272,9 @@ var Answers = function Answers(_ref) {
     }
   }, [transitioned, onTransitionEnd]);
   var hasOpacity = useMemo(function () {
-    var _ref8 = inactiveButtonsStyle || {},
-      _ref8$backgroundColor = _ref8.backgroundColor,
-      backgroundColor = _ref8$backgroundColor === void 0 ? null : _ref8$backgroundColor;
+    var _ref9 = inactiveButtonsStyle || {},
+      _ref9$backgroundColor = _ref9.backgroundColor,
+      backgroundColor = _ref9$backgroundColor === void 0 ? null : _ref9$backgroundColor;
     return backgroundColor === null;
   }, [inactiveButtonsStyle]);
   return /*#__PURE__*/React.createElement("div", {
@@ -269,18 +283,18 @@ var Answers = function Answers(_ref) {
     className: styles$4.items
   }, transitions(function (style, answer, t, answerI) {
     var userAnswer = answerI === answeredIndex;
-    var _ref10 = answer || {},
-      _ref10$good = _ref10.good,
-      rightAnswer = _ref10$good === void 0 ? null : _ref10$good,
-      _ref10$label = _ref10.label,
-      label = _ref10$label === void 0 ? null : _ref10$label,
-      _ref10$buttonStyle = _ref10.buttonStyle,
-      answerButtonStyle = _ref10$buttonStyle === void 0 ? null : _ref10$buttonStyle,
-      _ref10$textStyle = _ref10.textStyle,
-      answerButtonTextStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
-    var _ref11 = label || {},
+    var _ref11 = answer || {},
+      _ref11$good = _ref11.good,
+      rightAnswer = _ref11$good === void 0 ? null : _ref11$good,
+      _ref11$label = _ref11.label,
+      label = _ref11$label === void 0 ? null : _ref11$label,
+      _ref11$buttonStyle = _ref11.buttonStyle,
+      answerButtonStyle = _ref11$buttonStyle === void 0 ? null : _ref11$buttonStyle,
       _ref11$textStyle = _ref11.textStyle,
-      textStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle;
+      answerButtonTextStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle;
+    var _ref12 = label || {},
+      _ref12$textStyle = _ref12.textStyle,
+      textStyle = _ref12$textStyle === void 0 ? null : _ref12$textStyle;
     var hasAnswer = isTextFilled(label);
     var isUserAnswer = withoutGoodAnswer && userAnswer;
     var isOtherAnswer = withoutGoodAnswer && !userAnswer;
@@ -316,10 +330,6 @@ var Answers = function Answers(_ref) {
       onPointerUp: function onPointerUp(e) {
         if (e.pointerType !== 'mouse' || e.button === 0) {
           onClick(answer, answerI);
-          // onTransitionEnd();
-          // setTimeout(() => {
-          //     onTransitionEnd();
-          // }, 2000);
         }
       },
       disabled: !visible || isPreview || answered,
@@ -1291,13 +1301,10 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     _ref4$resultImage = _ref4.resultImage,
     questionResultImage = _ref4$resultImage === void 0 ? null : _ref4$resultImage;
   var currentAnsweredIndex = userAnswers !== null && typeof userAnswers[questionIndex] !== 'undefined' ? userAnswers[questionIndex] : null;
-
-  // const answer =
-  //     currentAnsweredIndex !== null && typeof answers[currentAnsweredIndex] !== 'undefined'
-  //         ? answers[currentAnsweredIndex]
-  //         : null;
-  // const { result: answerResult = null } = answer || {};
-
+  var answer = currentAnsweredIndex !== null && typeof answers[currentAnsweredIndex] !== 'undefined' ? answers[currentAnsweredIndex] : null;
+  var _ref5 = answer || {},
+    _ref5$result = _ref5.result,
+    answerResult = _ref5$result === void 0 ? null : _ref5$result;
   var hasTrueFalse = answers !== null ? (answers || []).find(function (ans) {
     return (ans === null || ans === void 0 ? void 0 : ans.good) === true || (ans === null || ans === void 0 ? void 0 : ans.good) === false;
   }) !== undefined : false;
@@ -1307,9 +1314,10 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   var withoutGoodAnswer = goodAnswerIndex === null || goodAnswerIndex === -1;
   var questionResultHasText = isTextFilled(questionResult);
   var questionResultHasImage = isImageFilled(questionResultImage);
-  // const answerResultHasText = isTextFilled(answerResult);
-  var hasResult = questionResultHasText || questionResultHasImage;
+  var answerResultHasText = isTextFilled(answerResult);
+  var hasResult = questionResultHasText || questionResultHasImage || answerResultHasText;
   var onNextSlide = useCallback(function () {
+    // console.log('onNextSlide', isEdit, isPreview);
     if (isEdit || isPreview) {
       return;
     }
@@ -1323,13 +1331,13 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   }, [questions, questionIndex, setQuestionIndex, isEdit, isPreview]);
   var currentPoints = useMemo(function () {
     return userAnswers !== null ? Object.keys(userAnswers).reduce(function (totalPoints, answerQuestionIndex) {
-      var _ref5 = questions !== null ? questions[answerQuestionIndex] || {} : {},
-        _ref5$answers = _ref5.answers,
-        questionAnswers = _ref5$answers === void 0 ? [] : _ref5$answers;
+      var _ref6 = questions !== null ? questions[answerQuestionIndex] || {} : {},
+        _ref6$answers = _ref6.answers,
+        questionAnswers = _ref6$answers === void 0 ? [] : _ref6$answers;
       var answerIndex = userAnswers[answerQuestionIndex];
-      var _ref6 = questionAnswers[answerIndex] || {},
-        _ref6$points = _ref6.points,
-        points = _ref6$points === void 0 ? 0 : _ref6$points;
+      var _ref7 = questionAnswers[answerIndex] || {},
+        _ref7$points = _ref7.points,
+        points = _ref7$points === void 0 ? 0 : _ref7$points;
       return points + totalPoints;
     }, 0) : 0;
   }, [userAnswers, questions]);
@@ -1343,30 +1351,30 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     if (stateId === 'results') {
       return (results || [])[parseInt(stateIndex, 10)] || null;
     }
-    return (results || []).sort(function (_ref7, _ref8) {
-      var _ref7$points = _ref7.points,
-        pointsA = _ref7$points === void 0 ? 0 : _ref7$points;
+    return (results || []).sort(function (_ref8, _ref9) {
       var _ref8$points = _ref8.points,
-        pointsB = _ref8$points === void 0 ? 0 : _ref8$points;
+        pointsA = _ref8$points === void 0 ? 0 : _ref8$points;
+      var _ref9$points = _ref9.points,
+        pointsB = _ref9$points === void 0 ? 0 : _ref9$points;
       if (pointsA === pointsB) {
         return 0;
       }
       return pointsA > pointsB ? 1 : -1;
     }).reduce(function (lastResult, result) {
-      var _ref9 = lastResult || {},
-        _ref9$points = _ref9.points,
-        lastPoints = _ref9$points === void 0 ? 0 : _ref9$points;
-      var _ref10 = result || {},
+      var _ref10 = lastResult || {},
         _ref10$points = _ref10.points,
-        points = _ref10$points === void 0 ? 0 : _ref10$points;
+        lastPoints = _ref10$points === void 0 ? 0 : _ref10$points;
+      var _ref11 = result || {},
+        _ref11$points = _ref11.points,
+        points = _ref11$points === void 0 ? 0 : _ref11$points;
       return currentPoints >= (lastPoints || 0) && currentPoints >= points ? result : lastResult;
     }, null);
   }, [isResults, results, currentPoints, stateId, stateIndex]);
-  var _ref11 = currentResult || {},
-    _ref11$background = _ref11.background,
-    resultBackground = _ref11$background === void 0 ? null : _ref11$background,
-    _ref11$layout = _ref11.layout,
-    resultLayout = _ref11$layout === void 0 ? null : _ref11$layout;
+  var _ref12 = currentResult || {},
+    _ref12$background = _ref12.background,
+    resultBackground = _ref12$background === void 0 ? null : _ref12$background,
+    _ref12$layout = _ref12.layout,
+    resultLayout = _ref12$layout === void 0 ? null : _ref12$layout;
   var _useQuizCreate = useQuizCreate({
       screenId: screenId
     }),
@@ -1426,8 +1434,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     scrolledBottom = _useState6[0],
     setScrolledBottom = _useState6[1];
-  var onScrolledBottom = useCallback(function (_ref12) {
-    var initial = _ref12.initial;
+  var onScrolledBottom = useCallback(function (_ref13) {
+    var initial = _ref13.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -1440,9 +1448,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     hasScroll = _useState8[0],
     setHasScroll = _useState8[1];
-  var onScrollHeightChange = useCallback(function (_ref13) {
-    var _ref13$canScroll = _ref13.canScroll,
-      canScroll = _ref13$canScroll === void 0 ? false : _ref13$canScroll;
+  var onScrollHeightChange = useCallback(function (_ref14) {
+    var _ref14$canScroll = _ref14.canScroll,
+      canScroll = _ref14$canScroll === void 0 ? false : _ref14$canScroll;
     setHasScroll(canScroll);
   }, [setHasScroll]);
   var onQuizReset = useCallback(function () {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-quiz",
-    "version": "0.3.673",
+    "version": "0.3.676",
     "private": false,
     "description": "",
     "keywords": [
@@ -63,19 +63,19 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@micromag/core": "^0.3.673",
-        "@micromag/data": "^0.3.673",
-        "@micromag/element-background": "^0.3.673",
-        "@micromag/element-button": "^0.3.673",
-        "@micromag/element-container": "^0.3.673",
-        "@micromag/element-footer": "^0.3.673",
-        "@micromag/element-header": "^0.3.673",
-        "@micromag/element-heading": "^0.3.673",
-        "@micromag/element-layout": "^0.3.673",
-        "@micromag/element-scroll": "^0.3.673",
-        "@micromag/element-text": "^0.3.673",
-        "@micromag/element-visual": "^0.3.673",
-        "@micromag/transforms": "^0.3.673",
+        "@micromag/core": "^0.3.676",
+        "@micromag/data": "^0.3.676",
+        "@micromag/element-background": "^0.3.676",
+        "@micromag/element-button": "^0.3.676",
+        "@micromag/element-container": "^0.3.676",
+        "@micromag/element-footer": "^0.3.676",
+        "@micromag/element-header": "^0.3.676",
+        "@micromag/element-heading": "^0.3.676",
+        "@micromag/element-layout": "^0.3.676",
+        "@micromag/element-scroll": "^0.3.676",
+        "@micromag/element-text": "^0.3.676",
+        "@micromag/element-visual": "^0.3.676",
+        "@micromag/transforms": "^0.3.676",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "classnames": "^2.2.6",
@@ -89,5 +89,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6bcd614e97a55a542e28528433b2815be9c487fc"
+    "gitHead": "941f3a10c4de917c02ca81f39e6d15a85094e289"
 }