@micromag/screen-quiz 0.3.606 → 0.3.607

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-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;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-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

@@ -29,14 +29,16 @@ import { animated, useTransition, easings } from '@react-spring/web';
 import Button from '@micromag/element-button';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
-var styles$4 = {"emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","button":"micromag-screen-quiz-answers-button","container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","item":"micromag-screen-quiz-answers-item","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","userAnswer":"micromag-screen-quiz-answers-userAnswer","otherAnswer":"micromag-screen-quiz-answers-otherAnswer","withIcon":"micromag-screen-quiz-answers-withIcon","resultIcon":"micromag-screen-quiz-answers-resultIcon","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","faIcon":"micromag-screen-quiz-answers-faIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
+var styles$4 = {"emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","button":"micromag-screen-quiz-answers-button","container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","item":"micromag-screen-quiz-answers-item","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","userAnswer":"micromag-screen-quiz-answers-userAnswer","otherAnswer":"micromag-screen-quiz-answers-otherAnswer","withoutOpacity":"micromag-screen-quiz-answers-withoutOpacity","withIcon":"micromag-screen-quiz-answers-withIcon","resultIcon":"micromag-screen-quiz-answers-resultIcon","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","faIcon":"micromag-screen-quiz-answers-faIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
 
 var propTypes$5 = {
   items: PropTypes.quizAnswers.isRequired,
   answeredIndex: PropTypes$1.number,
   answersCollapseDelay: PropTypes$1.number,
   buttonsStyle: PropTypes.boxStyle,
+  inactiveButtonsStyle: PropTypes.boxStyle,
   buttonsTextStyle: PropTypes.textStyle,
+  inactiveButtonsTextStyle: PropTypes.textStyle,
   goodAnswerColor: PropTypes.color,
   badAnswerColor: PropTypes.color,
   showUserAnswer: PropTypes$1.bool,
@@ -55,7 +57,9 @@ var defaultProps$5 = {
   answeredIndex: null,
   answersCollapseDelay: 1000,
   buttonsStyle: null,
+  inactiveButtonsStyle: null,
   buttonsTextStyle: null,
+  inactiveButtonsTextStyle: null,
   goodAnswerColor: null,
   badAnswerColor: null,
   showUserAnswer: false,
@@ -75,7 +79,9 @@ var Answers = function Answers(_ref) {
     answeredIndex = _ref.answeredIndex,
     answersCollapseDelay = _ref.answersCollapseDelay,
     buttonsStyle = _ref.buttonsStyle,
+    inactiveButtonsStyle = _ref.inactiveButtonsStyle,
     buttonsTextStyle = _ref.buttonsTextStyle,
+    inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
     goodAnswerColor = _ref.goodAnswerColor,
     badAnswerColor = _ref.badAnswerColor,
     showUserAnswer = _ref.showUserAnswer,
@@ -236,28 +242,38 @@ var Answers = function Answers(_ref) {
       onTransitionEnd();
     }
   }, [transitioned, onTransitionEnd]);
+  var hasOpacity = useMemo(function () {
+    var _ref8 = inactiveButtonsStyle || {},
+      _ref8$backgroundColor = _ref8.backgroundColor,
+      backgroundColor = _ref8$backgroundColor === void 0 ? null : _ref8$backgroundColor;
+    return backgroundColor === null;
+  }, [inactiveButtonsStyle]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$4.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.answered, answered), styles$4.withIcon, !withoutIcon), styles$4.isPlaceholder, isPlaceholder), className, className !== null)])
   }, filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
     className: styles$4.items
   }, transitions(function (style, answer, t, answerI) {
     var userAnswer = answerI === answeredIndex;
-    var _ref9 = answer || {},
-      _ref9$good = _ref9.good,
-      rightAnswer = _ref9$good === void 0 ? null : _ref9$good,
-      _ref9$label = _ref9.label,
-      label = _ref9$label === void 0 ? null : _ref9$label,
-      _ref9$buttonStyle = _ref9.buttonStyle,
-      answerButtonStyle = _ref9$buttonStyle === void 0 ? null : _ref9$buttonStyle,
-      _ref9$textStyle = _ref9.textStyle,
-      answerButtonTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
-    var _ref10 = label || {},
+    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,
-      textStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
+      answerButtonTextStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
+    var _ref11 = label || {},
+      _ref11$textStyle = _ref11.textStyle,
+      textStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle;
     var hasAnswer = isTextFilled(label);
+    var isUserAnswer = withoutGoodAnswer && userAnswer;
+    var isOtherAnswer = withoutGoodAnswer && !userAnswer;
+    var inactiveButtonStyle = isOtherAnswer ? inactiveButtonsStyle : null;
+    var inactiveButtonTextStyle = isOtherAnswer ? inactiveButtonsTextStyle : null;
     return /*#__PURE__*/React.createElement(animated.div, {
       key: "answer-".concat(answerI),
-      className: classNames([styles$4.item, _defineProperty(_defineProperty(_defineProperty({}, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), styles$4.userAnswer, withoutGoodAnswer && userAnswer), styles$4.otherAnswer, withoutGoodAnswer && !userAnswer)]),
+      className: classNames([styles$4.item, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), styles$4.userAnswer, isUserAnswer), styles$4.otherAnswer, isOtherAnswer), styles$4.withoutOpacity, !hasOpacity)]),
       onTransitionEnd: onAnswerTransitionEnd,
       style: _objectSpread({}, style)
     }, /*#__PURE__*/React.createElement("div", {
@@ -292,8 +308,8 @@ var Answers = function Answers(_ref) {
       },
       disabled: !visible || isPreview || answered,
       focusable: focusable,
-      buttonStyle: _objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle),
-      textStyle: _objectSpread(_objectSpread({}, buttonsTextStyle), answerButtonTextStyle)
+      buttonStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsStyle), inactiveButtonStyle), answerButtonStyle),
+      textStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), inactiveButtonTextStyle), answerButtonTextStyle)
     }, answered && !withoutIcon && rightAnswer === true ? /*#__PURE__*/React.createElement("span", {
       className: styles$4.resultIcon,
       style: getStyleFromColor(goodAnswerColor, 'backgroundColor')
@@ -329,7 +345,9 @@ var propTypes$4 = {
   totalCount: PropTypes$1.number,
   answeredIndex: PropTypes$1.number,
   buttonsStyle: PropTypes.boxStyle,
+  inactiveButtonsStyle: PropTypes.boxStyle,
   buttonsTextStyle: PropTypes.textStyle,
+  inactiveButtonsTextStyle: PropTypes.textStyle,
   questionsHeadingStyle: PropTypes.textStyle,
   goodAnswerColor: PropTypes.color,
   badAnswerColor: PropTypes.color,
@@ -359,7 +377,9 @@ var defaultProps$4 = {
   totalCount: null,
   answeredIndex: null,
   buttonsStyle: null,
+  inactiveButtonsStyle: null,
   buttonsTextStyle: null,
+  inactiveButtonsTextStyle: null,
   questionsHeadingStyle: null,
   goodAnswerColor: null,
   badAnswerColor: null,
@@ -389,7 +409,9 @@ var Question = function Question(_ref) {
     totalCount = _ref.totalCount,
     answeredIndex = _ref.answeredIndex,
     buttonsStyle = _ref.buttonsStyle,
+    inactiveButtonsStyle = _ref.inactiveButtonsStyle,
     buttonsTextStyle = _ref.buttonsTextStyle,
+    inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
     questionsHeadingStyle = _ref.questionsHeadingStyle,
     goodAnswerColor = _ref.goodAnswerColor,
     badAnswerColor = _ref.badAnswerColor,
@@ -482,7 +504,9 @@ var Question = function Question(_ref) {
     withoutIcon: withoutTrueFalse,
     showUserAnswer: withoutTrueFalse,
     buttonsStyle: buttonsStyle,
+    inactiveButtonsStyle: inactiveButtonsStyle,
     buttonsTextStyle: buttonsTextStyle,
+    inactiveButtonsTextStyle: inactiveButtonsTextStyle,
     focusable: focusable,
     animated: animated,
     transitions: transitions,
@@ -536,7 +560,9 @@ var propTypes$3 = {
   }),
   resultImage: PropTypes.visualElement,
   buttonsStyle: PropTypes.boxStyle,
+  inactiveButtonsStyle: PropTypes.boxStyle,
   buttonsTextStyle: PropTypes.textStyle,
+  inactiveButtonsTextStyle: PropTypes.textStyle,
   goodAnswerColor: PropTypes.color,
   badAnswerColor: PropTypes.color,
   withoutTrueFalse: PropTypes$1.bool,
@@ -560,7 +586,9 @@ var defaultProps$3 = {
   result: null,
   resultImage: null,
   buttonsStyle: null,
+  inactiveButtonsStyle: null,
   buttonsTextStyle: null,
+  inactiveButtonsTextStyle: null,
   goodAnswerColor: null,
   badAnswerColor: null,
   withoutTrueFalse: false,
@@ -584,7 +612,9 @@ var QuizScreen = function QuizScreen(_ref) {
     result = _ref.result,
     resultImage = _ref.resultImage,
     buttonsStyle = _ref.buttonsStyle,
+    inactiveButtonsStyle = _ref.inactiveButtonsStyle,
     buttonsTextStyle = _ref.buttonsTextStyle,
+    inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
     goodAnswerColor = _ref.goodAnswerColor,
     badAnswerColor = _ref.badAnswerColor,
     withoutTrueFalse = _ref.withoutTrueFalse,
@@ -764,6 +794,8 @@ var QuizScreen = function QuizScreen(_ref) {
     answeredIndex: userAnswerIndex,
     buttonsStyle: buttonsStyle,
     buttonsTextStyle: buttonsTextStyle,
+    inactiveButtonsStyle: inactiveButtonsStyle,
+    inactiveButtonsTextStyle: inactiveButtonsTextStyle,
     goodAnswerColor: goodAnswerColor,
     badAnswerColor: badAnswerColor,
     withoutTrueFalse: withoutTrueFalse,
@@ -1023,7 +1055,9 @@ var propTypes = {
     description: PropTypes.textElement
   })),
   buttonsStyle: PropTypes.boxStyle,
+  inactiveButtonsStyle: PropTypes.boxStyle,
   buttonsTextStyle: PropTypes.textStyle,
+  inactiveButtonsTextStyle: PropTypes.textStyle,
   questionsHeadingStyle: PropTypes.textStyle,
   resultsHeadingStyle: PropTypes.textStyle,
   resultsTextStyle: PropTypes.textStyle,
@@ -1051,7 +1085,9 @@ var defaultProps = {
   questions: null,
   results: null,
   buttonsStyle: null,
+  inactiveButtonsStyle: null,
   buttonsTextStyle: null,
+  inactiveButtonsTextStyle: null,
   questionsHeadingStyle: null,
   resultsHeadingStyle: null,
   resultsTextStyle: null,
@@ -1079,7 +1115,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     questions = _ref.questions,
     results = _ref.results,
     buttonsStyle = _ref.buttonsStyle,
+    inactiveButtonsStyle = _ref.inactiveButtonsStyle,
     buttonsTextStyle = _ref.buttonsTextStyle,
+    inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
     questionsHeadingStyle = _ref.questionsHeadingStyle,
     resultsHeadingStyle = _ref.resultsHeadingStyle,
     resultsTextStyle = _ref.resultsTextStyle,
@@ -1420,7 +1458,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     answers: answers,
     answeredIndex: currentAnsweredIndex,
     buttonsStyle: buttonsStyle,
+    inactiveButtonsStyle: inactiveButtonsStyle,
     buttonsTextStyle: buttonsTextStyle,
+    inactiveButtonsTextStyle: inactiveButtonsTextStyle,
     questionsHeadingStyle: questionsHeadingStyle,
     goodAnswerColor: goodAnswerColor,
     badAnswerColor: badAnswerColor,
@@ -1613,24 +1653,44 @@ var definition = [{
           "value": "Buttons"
         }]
       })
+    }, {
+      name: 'inactiveButtonsTextStyle',
+      type: 'text-style-form',
+      label: defineMessage({
+        id: "my7Kox",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Inactive buttons text"
+        }]
+      })
+    }, {
+      name: 'inactiveButtonsStyle',
+      type: 'box-style-form',
+      label: defineMessage({
+        id: "xlFOg3",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Inactive buttons"
+        }]
+      })
     }, {
       name: 'goodAnswerColor',
       type: 'color',
       label: defineMessage({
-        id: "I2bIHm",
+        id: "hZcXoa",
         defaultMessage: [{
           "type": 0,
-          "value": "Good answer color"
+          "value": "Good answer icon color"
         }]
       })
     }, {
       name: 'badAnswerColor',
       type: 'color',
       label: defineMessage({
-        id: "ru3tjH",
+        id: "NbTtNk",
         defaultMessage: [{
           "type": 0,
-          "value": "Bad answer color"
+          "value": "Bad answer icon color"
         }]
       })
     }]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-quiz",
-    "version": "0.3.606",
+    "version": "0.3.607",
     "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.606",
-        "@micromag/data": "^0.3.606",
-        "@micromag/element-background": "^0.3.606",
-        "@micromag/element-button": "^0.3.606",
-        "@micromag/element-container": "^0.3.606",
-        "@micromag/element-footer": "^0.3.606",
-        "@micromag/element-header": "^0.3.606",
-        "@micromag/element-heading": "^0.3.606",
-        "@micromag/element-layout": "^0.3.606",
-        "@micromag/element-scroll": "^0.3.606",
-        "@micromag/element-text": "^0.3.606",
-        "@micromag/element-visual": "^0.3.606",
-        "@micromag/transforms": "^0.3.606",
+        "@micromag/core": "^0.3.607",
+        "@micromag/data": "^0.3.607",
+        "@micromag/element-background": "^0.3.607",
+        "@micromag/element-button": "^0.3.607",
+        "@micromag/element-container": "^0.3.607",
+        "@micromag/element-footer": "^0.3.607",
+        "@micromag/element-header": "^0.3.607",
+        "@micromag/element-heading": "^0.3.607",
+        "@micromag/element-layout": "^0.3.607",
+        "@micromag/element-scroll": "^0.3.607",
+        "@micromag/element-text": "^0.3.607",
+        "@micromag/element-visual": "^0.3.607",
+        "@micromag/transforms": "^0.3.607",
         "@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": "0e2ee772952cc24e6824806bd23a7c65c8858c73"
+    "gitHead": "635ee4c6bf057273a9c90bde7c80134ad92ebb9c"
 }