@micromag/screen-quiz 0.3.326 → 0.3.328

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +2 -2
  2. package/es/index.js +118 -78
  3. package/lib/index.js +116 -76
  4. package/package.json +3 -3
package/assets/css/styles.css CHANGED
@@ -1,5 +1,5 @@
1
- .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-isPlaceholder .micromag-screen-quiz-answers-item{padding:1px 0}.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{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:#ff2945;border:2px solid #1c1c1c;border-radius:50%;display:-ms-flexbox;display:flex;height:32px;justify-content:center;left:5px;margin-top:-16px;opacity:0;padding:5px;position:absolute;top:50%;-webkit-transition:opacity .15s ease;-o-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}
1
+ .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{position:relative;-webkit-transition:opacity .15s ease-out;-o-transition:opacity .15s ease-out;transition:opacity .15s 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:.7!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{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:#ff2945;border:2px solid #1c1c1c;border-radius:50%;display:-ms-flexbox;display:flex;height:32px;justify-content:center;left:5px;margin-top:-16px;opacity:0;padding:5px;position:absolute;top:50%;-webkit-transition:opacity .15s ease;-o-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}
2
2
  .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;-o-transition:opacity .5s ease;transition:opacity .5s ease;-webkit-transition-delay:.3s;-o-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}
3
- .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-layout{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-callToAction{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-callToAction a{padding:0}.micromag-screen-quiz-callToAction.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;-o-transition: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;-o-transition: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;-o-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;-o-transition:opacity 1s ease;transition:opacity 1s ease;z-index:0}
3
+ .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;-o-transition:opacity .15s ease-out,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-callToAction{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-callToAction a{padding:0}.micromag-screen-quiz-callToAction.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;-o-transition: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;-o-transition: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;-o-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;-o-transition:opacity 1s ease;transition:opacity 1s ease;z-index:0}
4
4
  .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}
5
5
  .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 CHANGED
@@ -1,10 +1,13 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
2
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
3
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
+ import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
5
+ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4
6
  import classNames from 'classnames';
5
7
  import PropTypes$1 from 'prop-types';
6
- import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
8
+ import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
7
9
  import { PropTypes } from '@micromag/core';
10
+ import { ScreenElement, Transitions, Button as Button$1 } from '@micromag/core/components';
8
11
  import { useScreenRenderContext, useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenState } from '@micromag/core/contexts';
9
12
  import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
10
13
  import { useQuizCreate } from '@micromag/data';
@@ -13,7 +16,6 @@ import CallToAction from '@micromag/element-call-to-action';
13
16
  import Container from '@micromag/element-container';
14
17
  import Scroll from '@micromag/element-scroll';
15
18
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
16
- import { ScreenElement, Transitions } from '@micromag/core/components';
17
19
  import { isTextFilled, getStyleFromColor } from '@micromag/core/utils';
18
20
  import Heading from '@micromag/element-heading';
19
21
  import Layout, { Spacer } from '@micromag/element-layout';
@@ -21,12 +23,11 @@ import Text from '@micromag/element-text';
21
23
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
22
24
  import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
23
25
  import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
24
- import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
25
- import { useTransition, animated } from '@react-spring/web';
26
+ import { useTransition, config, animated } from '@react-spring/web';
26
27
  import Button from '@micromag/element-button';
27
28
  import { TransitionGroup, CSSTransition } from 'react-transition-group';
28
29
 
29
- 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","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","item":"micromag-screen-quiz-answers-item","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"};
30
+ 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"};
30
31
 
31
32
  var propTypes$5 = {
32
33
  items: PropTypes.quizAnswers.isRequired,
@@ -66,7 +67,7 @@ var defaultProps$5 = {
66
67
  className: null
67
68
  };
68
69
  var Answers = function Answers(_ref) {
69
- var _ref9;
70
+ var _ref7;
70
71
  var items = _ref.items,
71
72
  answeredIndex = _ref.answeredIndex,
72
73
  answersCollapseDelay = _ref.answersCollapseDelay,
@@ -139,35 +140,45 @@ var Answers = function Answers(_ref) {
139
140
  }
140
141
  }
141
142
  }, [shouldCollapse, answersCollapsed, answersDidCollapse, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
143
+ var itemsRefs = useRef([]);
142
144
  var listOfItems = isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray(new Array(2)) : items;
145
+
146
+ // let total = 0;
147
+ // const heights = listOfItems.reduce((acc, it, i) => {
148
+ // acc.push(total);
149
+ // if (itemsRefs.current[i]) {
150
+ // const { height } = itemsRefs.current[i].getBoundingClientRect() || {};
151
+ // total += height;
152
+ // }
153
+ // return acc;
154
+ // }, []);
155
+
143
156
  var filteredListOfItems = listOfItems.map(function (answer, answerI) {
144
- if (!isView) {
145
- return _objectSpread(_objectSpread({}, answer), {}, {
146
- hidden: false,
147
- index: answerI
148
- });
149
- }
157
+ // const y = heights[answerI] ? heights[answerI] : 0;
150
158
  var userAnswer = answerI === answeredIndex;
151
159
  var _ref4 = answer || {},
152
160
  _ref4$good = _ref4.good,
153
161
  rightAnswer = _ref4$good === void 0 ? false : _ref4$good;
154
- if (answersDidCollapse && !rightAnswer && (hasRightAnswer || !userAnswer)) {
155
- return _objectSpread(_objectSpread({}, answer), {}, {
156
- hidden: true,
157
- index: answerI
158
- });
162
+ var hidden = false;
163
+ if (isView && answersDidCollapse && !rightAnswer && (hasRightAnswer || !userAnswer)) {
164
+ hidden = true;
159
165
  }
160
- if (answersCollapsed && !rightAnswer) {
161
- return _objectSpread(_objectSpread({}, answer), {}, {
162
- hidden: true,
163
- index: answerI
164
- });
166
+ if (isView && answersCollapsed && !rightAnswer) {
167
+ hidden = true;
165
168
  }
166
169
  return _objectSpread(_objectSpread({}, answer), {}, {
167
- hidden: false,
170
+ hidden: hidden,
171
+ userAnswer: userAnswer,
168
172
  index: answerI
169
173
  });
170
174
  });
175
+
176
+ // let finalList = filteredListOfItems;
177
+ // if (answersCollapsed) {
178
+ // finalList = [...filteredListOfItems].sort(({ hidden = false }) => (hidden ? 1 : -1));
179
+ // console.log('da fuck', finalList);
180
+ // }
181
+
171
182
  var transitions = useTransition(filteredListOfItems.map(function (data) {
172
183
  return _objectSpread(_objectSpread({}, data), {}, {
173
184
  hidden: data.hidden
@@ -175,63 +186,52 @@ var Answers = function Answers(_ref) {
175
186
  }), {
176
187
  key: function key(_ref5) {
177
188
  var _ref5$index = _ref5.index,
178
- index = _ref5$index === void 0 ? 0 : _ref5$index;
179
- return "index-".concat(index);
180
- },
181
- leave: function leave() {
182
- return {
183
- opacity: 0,
184
- height: 0
185
- };
189
+ index = _ref5$index === void 0 ? 0 : _ref5$index,
190
+ _ref5$label = _ref5.label,
191
+ label = _ref5$label === void 0 ? null : _ref5$label;
192
+ return "key-".concat(index, "-").concat((label === null || label === void 0 ? void 0 : label.body) || null);
186
193
  },
187
- from: function from(_ref6) {
194
+ update: function update(_ref6) {
188
195
  var _ref6$hidden = _ref6.hidden,
189
196
  hidden = _ref6$hidden === void 0 ? false : _ref6$hidden;
190
197
  return {
191
- opacity: hidden && isView ? 0 : 1,
192
- height: hidden && isView ? 0 : 'auto'
198
+ opacity: hidden && isView && !withoutGoodAnswer ? 0 : 1,
199
+ height: hidden && isView && !withoutGoodAnswer ? 0 : null
193
200
  };
194
201
  },
195
- enter: function enter(_ref7) {
196
- var _ref7$hidden = _ref7.hidden,
197
- hidden = _ref7$hidden === void 0 ? false : _ref7$hidden;
198
- return {
199
- opacity: hidden && isView ? 0 : 1,
200
- height: hidden && isView ? 0 : 'auto'
201
- };
202
- },
203
- update: function update(_ref8) {
204
- var _ref8$hidden = _ref8.hidden,
205
- hidden = _ref8$hidden === void 0 ? false : _ref8$hidden;
206
- return {
207
- opacity: hidden && isView ? 0 : 1,
208
- height: hidden && isView ? 0 : 'auto'
209
- };
210
- }
202
+ config: config.gentle
203
+ // onRest: () => {
204
+ // console.log('rest');
205
+ // },
211
206
  });
207
+
212
208
  return /*#__PURE__*/React.createElement("div", {
213
- className: classNames([styles$4.container, (_ref9 = {}, _defineProperty(_ref9, styles$4.answered, answered), _defineProperty(_ref9, styles$4.withoutGoodAnswer, withoutGoodAnswer || !hasRightAnswer), _defineProperty(_ref9, styles$4.withGoodAnswer, !withoutGoodAnswer && hasRightAnswer), _defineProperty(_ref9, styles$4.withIcon, !withoutGoodAnswer && hasRightAnswer && !withoutIcon), _defineProperty(_ref9, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty(_ref9, styles$4.didCollapsed, shouldCollapse && answersDidCollapse), _defineProperty(_ref9, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref9, className, className !== null), _ref9)])
209
+ className: classNames([styles$4.container, (_ref7 = {}, _defineProperty(_ref7, styles$4.answered, answered), _defineProperty(_ref7, styles$4.withoutGoodAnswer, withoutGoodAnswer || !hasRightAnswer), _defineProperty(_ref7, styles$4.withGoodAnswer, !withoutGoodAnswer && hasRightAnswer), _defineProperty(_ref7, styles$4.withIcon, !withoutGoodAnswer && hasRightAnswer && !withoutIcon), _defineProperty(_ref7, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty(_ref7, styles$4.didCollapsed, shouldCollapse && answersDidCollapse), _defineProperty(_ref7, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref7, className, className !== null), _ref7)])
214
210
  }, filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
215
211
  className: styles$4.items
216
212
  }, transitions(function (style, answer, t, answerI) {
213
+ var _ref10;
217
214
  var userAnswer = answerI === answeredIndex;
218
- var _ref10 = answer || {},
219
- _ref10$good = _ref10.good,
220
- rightAnswer = _ref10$good === void 0 ? false : _ref10$good,
221
- _ref10$label = _ref10.label,
222
- label = _ref10$label === void 0 ? null : _ref10$label,
223
- _ref10$buttonStyle = _ref10.buttonStyle,
224
- answerButtonStyle = _ref10$buttonStyle === void 0 ? null : _ref10$buttonStyle,
225
- _ref10$textStyle = _ref10.textStyle,
226
- answerButtonTextStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
227
- var _ref11 = label || {},
228
- _ref11$textStyle = _ref11.textStyle,
229
- textStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle;
215
+ var _ref8 = answer || {},
216
+ _ref8$good = _ref8.good,
217
+ rightAnswer = _ref8$good === void 0 ? false : _ref8$good,
218
+ _ref8$label = _ref8.label,
219
+ label = _ref8$label === void 0 ? null : _ref8$label,
220
+ _ref8$buttonStyle = _ref8.buttonStyle,
221
+ answerButtonStyle = _ref8$buttonStyle === void 0 ? null : _ref8$buttonStyle,
222
+ _ref8$textStyle = _ref8.textStyle,
223
+ answerButtonTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
224
+ var _ref9 = label || {},
225
+ _ref9$textStyle = _ref9.textStyle,
226
+ textStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
230
227
  var hasAnswer = isTextFilled(label);
231
228
  return /*#__PURE__*/React.createElement(animated.div, {
232
229
  key: "answer-".concat(answerI),
233
- className: classNames([styles$4.item, _defineProperty({}, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer)]),
234
- style: _objectSpread({}, style)
230
+ className: classNames([styles$4.item, (_ref10 = {}, _defineProperty(_ref10, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer), _defineProperty(_ref10, styles$4.userAnswer, withoutGoodAnswer && userAnswer), _defineProperty(_ref10, styles$4.otherAnswer, withoutGoodAnswer && !userAnswer), _ref10)]),
231
+ style: _objectSpread({}, style),
232
+ ref: function ref(el) {
233
+ itemsRefs.current[answerI] = el;
234
+ }
235
235
  }, /*#__PURE__*/React.createElement("div", {
236
236
  className: styles$4.itemContent
237
237
  }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -476,7 +476,7 @@ var Question = function Question(_ref) {
476
476
  Question.propTypes = propTypes$4;
477
477
  Question.defaultProps = defaultProps$4;
478
478
 
479
- 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","layout":"micromag-screen-quiz-layout","callToAction":"micromag-screen-quiz-callToAction","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"};
479
+ 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","callToAction":"micromag-screen-quiz-callToAction","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"};
480
480
 
481
481
  var propTypes$3 = {
482
482
  id: PropTypes$1.string,
@@ -587,7 +587,8 @@ var QuizScreen = function QuizScreen(_ref) {
587
587
  var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
588
588
  return answer !== null && answer.good;
589
589
  }) : null;
590
- var withoutGoodAnswer = goodAnswerIndex === null || goodAnswerIndex === -1;
590
+ // const withoutGoodAnswer = goodAnswerIndex === null || goodAnswerIndex === -1;
591
+
591
592
  var _useState = useState(showInstantAnswer ? goodAnswerIndex : null),
592
593
  _useState2 = _slicedToArray(_useState, 2),
593
594
  userAnswerIndex = _useState2[0],
@@ -642,8 +643,12 @@ var QuizScreen = function QuizScreen(_ref) {
642
643
  var onScrolledNotBottom = useCallback(function () {
643
644
  setScrolledBottom(false);
644
645
  }, [setScrolledBottom]);
646
+ var onQuizReset = useCallback(function () {
647
+ setUserAnswerIndex(null);
648
+ }, [setUserAnswerIndex]);
645
649
  var isSplitted = layout === 'split';
646
650
  var verticalAlign = isSplitted ? null : layout;
651
+ var showReset = isEdit;
647
652
  return /*#__PURE__*/React.createElement("div", {
648
653
  className: classNames([styles$2.container, (_ref6 = {}, _defineProperty(_ref6, styles$2.disabled, clickDisabled), _defineProperty(_ref6, className, className !== null), _ref6)]),
649
654
  "data-screen-ready": true
@@ -651,7 +656,14 @@ var QuizScreen = function QuizScreen(_ref) {
651
656
  width: width,
652
657
  height: height,
653
658
  className: styles$2.content
654
- }, /*#__PURE__*/React.createElement(Scroll, {
659
+ }, showReset ? /*#__PURE__*/React.createElement(Button$1, {
660
+ className: styles$2.reset,
661
+ icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
662
+ icon: faRedo,
663
+ size: "md"
664
+ }),
665
+ onClick: onQuizReset
666
+ }) : null, /*#__PURE__*/React.createElement(Scroll, {
655
667
  verticalAlign: verticalAlign,
656
668
  disabled: scrollingDisabled,
657
669
  onScrolledBottom: onScrolledBottom,
@@ -665,8 +677,9 @@ var QuizScreen = function QuizScreen(_ref) {
665
677
  buttonsTextStyle: buttonsTextStyle,
666
678
  goodAnswerColor: goodAnswerColor,
667
679
  badAnswerColor: badAnswerColor,
668
- withoutTrueFalse: withoutTrueFalse,
669
- withoutGoodAnswer: withoutGoodAnswer,
680
+ withoutTrueFalse: withoutTrueFalse
681
+ // withoutGoodAnswer={withoutGoodAnswer}
682
+ ,
670
683
  focusable: current && isView,
671
684
  showInstantAnswer: showInstantAnswer,
672
685
  withResult: true,
@@ -821,6 +834,7 @@ var propTypes$1 = {
821
834
  button: PropTypes.textElement,
822
835
  layout: PropTypes$1.string,
823
836
  focusable: PropTypes$1.bool,
837
+ buttonDisabled: PropTypes$1.bool,
824
838
  transitions: PropTypes.transitions,
825
839
  transitionPlaying: PropTypes$1.bool,
826
840
  transitionStagger: PropTypes$1.number,
@@ -834,6 +848,7 @@ var defaultProps$1 = {
834
848
  description: null,
835
849
  layout: null,
836
850
  button: null,
851
+ buttonDisabled: false,
837
852
  focusable: false,
838
853
  transitions: null,
839
854
  transitionPlaying: false,
@@ -848,6 +863,7 @@ var Title = function Title(_ref) {
848
863
  title = _ref.title,
849
864
  description = _ref.description,
850
865
  button = _ref.button,
866
+ buttonDisabled = _ref.buttonDisabled,
851
867
  focusable = _ref.focusable,
852
868
  transitions = _ref.transitions,
853
869
  transitionPlaying = _ref.transitionPlaying,
@@ -856,9 +872,9 @@ var Title = function Title(_ref) {
856
872
  className = _ref.className,
857
873
  style = _ref.style,
858
874
  onClickButton = _ref.onClickButton;
859
- var _useScreenRenderConte = useScreenRenderContext(),
860
- isPreview = _useScreenRenderConte.isPreview,
861
- isEdit = _useScreenRenderConte.isEdit;
875
+ var _useScreenRenderConte = useScreenRenderContext();
876
+ _useScreenRenderConte.isPreview;
877
+ _useScreenRenderConte.isEdit;
862
878
  var isSplitted = layout === 'split';
863
879
  var verticalAlign = isSplitted ? null : layout;
864
880
  var hasTitle = isTextFilled(title);
@@ -917,7 +933,7 @@ var Title = function Title(_ref) {
917
933
  disabled: transitionDisabled,
918
934
  delay: transitionStagger * 2
919
935
  }, /*#__PURE__*/React.createElement(Button, {
920
- disabled: isPreview || isEdit,
936
+ disabled: buttonDisabled,
921
937
  focusable: focusable,
922
938
  buttonStyle: button !== null ? button.buttonStyle : null,
923
939
  className: styles.button,
@@ -1094,6 +1110,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1094
1110
  });
1095
1111
  }, [userAnswers, setUserAnswers, trackScreenEvent, questions, questionIndex]);
1096
1112
  var onAnswerTransitionEnd = useCallback(function () {
1113
+ if (isEdit) {
1114
+ return;
1115
+ }
1097
1116
  var nextIndex = questionIndex + 1;
1098
1117
  var questionsCount = questions.length;
1099
1118
  if (nextIndex < questionsCount) {
@@ -1101,7 +1120,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1101
1120
  } else if (nextIndex === questionsCount) {
1102
1121
  setQuestionIndex('results');
1103
1122
  }
1104
- }, [questions, questionIndex, setQuestionIndex]);
1123
+ }, [questions, questionIndex, setQuestionIndex, isEdit]);
1105
1124
  var onClickIntroButton = useCallback(function () {
1106
1125
  setQuestionIndex(0);
1107
1126
  }, [setQuestionIndex]);
@@ -1236,6 +1255,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1236
1255
  var onScrolledNotBottom = useCallback(function () {
1237
1256
  setScrolledBottom(false);
1238
1257
  }, [setScrolledBottom]);
1258
+ var onQuizReset = useCallback(function () {
1259
+ setUserAnswers(null);
1260
+ }, [setUserAnswers]);
1239
1261
  var verticalAlign = layout;
1240
1262
  if (isIntro && introLayout !== null) {
1241
1263
  verticalAlign = introLayout;
@@ -1244,6 +1266,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1244
1266
  } else if (isResults && resultLayout !== null) {
1245
1267
  verticalAlign = questionLayout;
1246
1268
  }
1269
+ var showPoints = isEdit;
1270
+ var showReset = isEdit;
1247
1271
  return /*#__PURE__*/React.createElement("div", {
1248
1272
  className: classNames([styles$2.container, (_ref12 = {}, _defineProperty(_ref12, styles$2[direction], direction !== null), _defineProperty(_ref12, className, className !== null), _ref12)]),
1249
1273
  "data-screen-ready": true
@@ -1251,7 +1275,22 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1251
1275
  width: width,
1252
1276
  height: height,
1253
1277
  className: styles$2.content
1254
- }, /*#__PURE__*/React.createElement(Scroll, {
1278
+ }, showPoints && currentPoints !== null && currentPoints > 0 ? /*#__PURE__*/React.createElement("div", {
1279
+ className: styles$2.points
1280
+ }, "".concat(currentPoints, " "), /*#__PURE__*/React.createElement(FormattedMessage, {
1281
+ id: "Xr1v8l",
1282
+ defaultMessage: [{
1283
+ "type": 0,
1284
+ "value": "points gained"
1285
+ }]
1286
+ })) : null, showReset ? /*#__PURE__*/React.createElement(Button$1, {
1287
+ className: styles$2.reset,
1288
+ icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
1289
+ icon: faRedo,
1290
+ size: "md"
1291
+ }),
1292
+ onClick: onQuizReset
1293
+ }) : null, /*#__PURE__*/React.createElement(Scroll, {
1255
1294
  verticalAlign: verticalAlign,
1256
1295
  disabled: scrollingDisabled,
1257
1296
  onScrolledBottom: onScrolledBottom,
@@ -1265,6 +1304,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1265
1304
  description: description,
1266
1305
  layout: introLayout || layout,
1267
1306
  button: introButton,
1307
+ buttonDisabled: (questions || []).length < 1 || isEdit || isPreview,
1268
1308
  focusable: current && isView,
1269
1309
  transitions: transitions,
1270
1310
  transitionPlaying: transitionPlaying,
@@ -1721,10 +1761,10 @@ var definition = [{
1721
1761
  }]
1722
1762
  }),
1723
1763
  help: defineMessage({
1724
- id: "nuj2tw",
1764
+ id: "JoyIgA",
1725
1765
  defaultMessage: [{
1726
1766
  "type": 0,
1727
- "value": "Minimum number of points for this result"
1767
+ "value": "Minimum points for this result"
1728
1768
  }]
1729
1769
  })
1730
1770
  }, {
package/lib/index.js CHANGED
@@ -5,10 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var reactIntl = require('react-intl');
6
6
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
7
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
8
+ var faRedo = require('@fortawesome/free-solid-svg-icons/faRedo');
9
+ var reactFontawesome = require('@fortawesome/react-fontawesome');
8
10
  var classNames = require('classnames');
9
11
  var PropTypes = require('prop-types');
10
12
  var React = require('react');
11
13
  var core = require('@micromag/core');
14
+ var components = require('@micromag/core/components');
12
15
  var contexts = require('@micromag/core/contexts');
13
16
  var hooks = require('@micromag/core/hooks');
14
17
  var data = require('@micromag/data');
@@ -17,7 +20,6 @@ var CallToAction = require('@micromag/element-call-to-action');
17
20
  var Container = require('@micromag/element-container');
18
21
  var Scroll = require('@micromag/element-scroll');
19
22
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
20
- var components = require('@micromag/core/components');
21
23
  var utils = require('@micromag/core/utils');
22
24
  var Heading = require('@micromag/element-heading');
23
25
  var Layout = require('@micromag/element-layout');
@@ -25,7 +27,6 @@ var Text = require('@micromag/element-text');
25
27
  var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
26
28
  var faCheck = require('@fortawesome/free-solid-svg-icons/faCheck');
27
29
  var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
28
- var reactFontawesome = require('@fortawesome/react-fontawesome');
29
30
  var web = require('@react-spring/web');
30
31
  var Button = require('@micromag/element-button');
31
32
  var reactTransitionGroup = require('react-transition-group');
@@ -48,7 +49,7 @@ var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
48
49
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
49
50
  var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
50
51
 
51
- 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","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","item":"micromag-screen-quiz-answers-item","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"};
52
+ 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"};
52
53
 
53
54
  var propTypes$5 = {
54
55
  items: core.PropTypes.quizAnswers.isRequired,
@@ -88,7 +89,7 @@ var defaultProps$5 = {
88
89
  className: null
89
90
  };
90
91
  var Answers = function Answers(_ref) {
91
- var _ref9;
92
+ var _ref7;
92
93
  var items = _ref.items,
93
94
  answeredIndex = _ref.answeredIndex,
94
95
  answersCollapseDelay = _ref.answersCollapseDelay,
@@ -161,35 +162,45 @@ var Answers = function Answers(_ref) {
161
162
  }
162
163
  }
163
164
  }, [shouldCollapse, answersCollapsed, answersDidCollapse, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
165
+ var itemsRefs = React.useRef([]);
164
166
  var listOfItems = isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray__default["default"](new Array(2)) : items;
167
+
168
+ // let total = 0;
169
+ // const heights = listOfItems.reduce((acc, it, i) => {
170
+ // acc.push(total);
171
+ // if (itemsRefs.current[i]) {
172
+ // const { height } = itemsRefs.current[i].getBoundingClientRect() || {};
173
+ // total += height;
174
+ // }
175
+ // return acc;
176
+ // }, []);
177
+
165
178
  var filteredListOfItems = listOfItems.map(function (answer, answerI) {
166
- if (!isView) {
167
- return _objectSpread__default["default"](_objectSpread__default["default"]({}, answer), {}, {
168
- hidden: false,
169
- index: answerI
170
- });
171
- }
179
+ // const y = heights[answerI] ? heights[answerI] : 0;
172
180
  var userAnswer = answerI === answeredIndex;
173
181
  var _ref4 = answer || {},
174
182
  _ref4$good = _ref4.good,
175
183
  rightAnswer = _ref4$good === void 0 ? false : _ref4$good;
176
- if (answersDidCollapse && !rightAnswer && (hasRightAnswer || !userAnswer)) {
177
- return _objectSpread__default["default"](_objectSpread__default["default"]({}, answer), {}, {
178
- hidden: true,
179
- index: answerI
180
- });
184
+ var hidden = false;
185
+ if (isView && answersDidCollapse && !rightAnswer && (hasRightAnswer || !userAnswer)) {
186
+ hidden = true;
181
187
  }
182
- if (answersCollapsed && !rightAnswer) {
183
- return _objectSpread__default["default"](_objectSpread__default["default"]({}, answer), {}, {
184
- hidden: true,
185
- index: answerI
186
- });
188
+ if (isView && answersCollapsed && !rightAnswer) {
189
+ hidden = true;
187
190
  }
188
191
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, answer), {}, {
189
- hidden: false,
192
+ hidden: hidden,
193
+ userAnswer: userAnswer,
190
194
  index: answerI
191
195
  });
192
196
  });
197
+
198
+ // let finalList = filteredListOfItems;
199
+ // if (answersCollapsed) {
200
+ // finalList = [...filteredListOfItems].sort(({ hidden = false }) => (hidden ? 1 : -1));
201
+ // console.log('da fuck', finalList);
202
+ // }
203
+
193
204
  var transitions = web.useTransition(filteredListOfItems.map(function (data) {
194
205
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, data), {}, {
195
206
  hidden: data.hidden
@@ -197,63 +208,52 @@ var Answers = function Answers(_ref) {
197
208
  }), {
198
209
  key: function key(_ref5) {
199
210
  var _ref5$index = _ref5.index,
200
- index = _ref5$index === void 0 ? 0 : _ref5$index;
201
- return "index-".concat(index);
211
+ index = _ref5$index === void 0 ? 0 : _ref5$index,
212
+ _ref5$label = _ref5.label,
213
+ label = _ref5$label === void 0 ? null : _ref5$label;
214
+ return "key-".concat(index, "-").concat((label === null || label === void 0 ? void 0 : label.body) || null);
202
215
  },
203
- leave: function leave() {
204
- return {
205
- opacity: 0,
206
- height: 0
207
- };
208
- },
209
- from: function from(_ref6) {
216
+ update: function update(_ref6) {
210
217
  var _ref6$hidden = _ref6.hidden,
211
218
  hidden = _ref6$hidden === void 0 ? false : _ref6$hidden;
212
219
  return {
213
- opacity: hidden && isView ? 0 : 1,
214
- height: hidden && isView ? 0 : 'auto'
215
- };
216
- },
217
- enter: function enter(_ref7) {
218
- var _ref7$hidden = _ref7.hidden,
219
- hidden = _ref7$hidden === void 0 ? false : _ref7$hidden;
220
- return {
221
- opacity: hidden && isView ? 0 : 1,
222
- height: hidden && isView ? 0 : 'auto'
220
+ opacity: hidden && isView && !withoutGoodAnswer ? 0 : 1,
221
+ height: hidden && isView && !withoutGoodAnswer ? 0 : null
223
222
  };
224
223
  },
225
- update: function update(_ref8) {
226
- var _ref8$hidden = _ref8.hidden,
227
- hidden = _ref8$hidden === void 0 ? false : _ref8$hidden;
228
- return {
229
- opacity: hidden && isView ? 0 : 1,
230
- height: hidden && isView ? 0 : 'auto'
231
- };
232
- }
224
+ config: web.config.gentle
225
+ // onRest: () => {
226
+ // console.log('rest');
227
+ // },
233
228
  });
229
+
234
230
  return /*#__PURE__*/React__default["default"].createElement("div", {
235
- className: classNames__default["default"]([styles$4.container, (_ref9 = {}, _defineProperty__default["default"](_ref9, styles$4.answered, answered), _defineProperty__default["default"](_ref9, styles$4.withoutGoodAnswer, withoutGoodAnswer || !hasRightAnswer), _defineProperty__default["default"](_ref9, styles$4.withGoodAnswer, !withoutGoodAnswer && hasRightAnswer), _defineProperty__default["default"](_ref9, styles$4.withIcon, !withoutGoodAnswer && hasRightAnswer && !withoutIcon), _defineProperty__default["default"](_ref9, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty__default["default"](_ref9, styles$4.didCollapsed, shouldCollapse && answersDidCollapse), _defineProperty__default["default"](_ref9, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref9, className, className !== null), _ref9)])
231
+ className: classNames__default["default"]([styles$4.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, styles$4.answered, answered), _defineProperty__default["default"](_ref7, styles$4.withoutGoodAnswer, withoutGoodAnswer || !hasRightAnswer), _defineProperty__default["default"](_ref7, styles$4.withGoodAnswer, !withoutGoodAnswer && hasRightAnswer), _defineProperty__default["default"](_ref7, styles$4.withIcon, !withoutGoodAnswer && hasRightAnswer && !withoutIcon), _defineProperty__default["default"](_ref7, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty__default["default"](_ref7, styles$4.didCollapsed, shouldCollapse && answersDidCollapse), _defineProperty__default["default"](_ref7, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref7, className, className !== null), _ref7)])
236
232
  }, filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
237
233
  className: styles$4.items
238
234
  }, transitions(function (style, answer, t, answerI) {
235
+ var _ref10;
239
236
  var userAnswer = answerI === answeredIndex;
240
- var _ref10 = answer || {},
241
- _ref10$good = _ref10.good,
242
- rightAnswer = _ref10$good === void 0 ? false : _ref10$good,
243
- _ref10$label = _ref10.label,
244
- label = _ref10$label === void 0 ? null : _ref10$label,
245
- _ref10$buttonStyle = _ref10.buttonStyle,
246
- answerButtonStyle = _ref10$buttonStyle === void 0 ? null : _ref10$buttonStyle,
247
- _ref10$textStyle = _ref10.textStyle,
248
- answerButtonTextStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
249
- var _ref11 = label || {},
250
- _ref11$textStyle = _ref11.textStyle,
251
- textStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle;
237
+ var _ref8 = answer || {},
238
+ _ref8$good = _ref8.good,
239
+ rightAnswer = _ref8$good === void 0 ? false : _ref8$good,
240
+ _ref8$label = _ref8.label,
241
+ label = _ref8$label === void 0 ? null : _ref8$label,
242
+ _ref8$buttonStyle = _ref8.buttonStyle,
243
+ answerButtonStyle = _ref8$buttonStyle === void 0 ? null : _ref8$buttonStyle,
244
+ _ref8$textStyle = _ref8.textStyle,
245
+ answerButtonTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
246
+ var _ref9 = label || {},
247
+ _ref9$textStyle = _ref9.textStyle,
248
+ textStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
252
249
  var hasAnswer = utils.isTextFilled(label);
253
250
  return /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
254
251
  key: "answer-".concat(answerI),
255
- className: classNames__default["default"]([styles$4.item, _defineProperty__default["default"]({}, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer)]),
256
- style: _objectSpread__default["default"]({}, style)
252
+ className: classNames__default["default"]([styles$4.item, (_ref10 = {}, _defineProperty__default["default"](_ref10, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer), _defineProperty__default["default"](_ref10, styles$4.userAnswer, withoutGoodAnswer && userAnswer), _defineProperty__default["default"](_ref10, styles$4.otherAnswer, withoutGoodAnswer && !userAnswer), _ref10)]),
253
+ style: _objectSpread__default["default"]({}, style),
254
+ ref: function ref(el) {
255
+ itemsRefs.current[answerI] = el;
256
+ }
257
257
  }, /*#__PURE__*/React__default["default"].createElement("div", {
258
258
  className: styles$4.itemContent
259
259
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -498,7 +498,7 @@ var Question = function Question(_ref) {
498
498
  Question.propTypes = propTypes$4;
499
499
  Question.defaultProps = defaultProps$4;
500
500
 
501
- 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","layout":"micromag-screen-quiz-layout","callToAction":"micromag-screen-quiz-callToAction","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"};
501
+ 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","callToAction":"micromag-screen-quiz-callToAction","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"};
502
502
 
503
503
  var propTypes$3 = {
504
504
  id: PropTypes__default["default"].string,
@@ -609,7 +609,8 @@ var QuizScreen = function QuizScreen(_ref) {
609
609
  var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
610
610
  return answer !== null && answer.good;
611
611
  }) : null;
612
- var withoutGoodAnswer = goodAnswerIndex === null || goodAnswerIndex === -1;
612
+ // const withoutGoodAnswer = goodAnswerIndex === null || goodAnswerIndex === -1;
613
+
613
614
  var _useState = React.useState(showInstantAnswer ? goodAnswerIndex : null),
614
615
  _useState2 = _slicedToArray__default["default"](_useState, 2),
615
616
  userAnswerIndex = _useState2[0],
@@ -664,8 +665,12 @@ var QuizScreen = function QuizScreen(_ref) {
664
665
  var onScrolledNotBottom = React.useCallback(function () {
665
666
  setScrolledBottom(false);
666
667
  }, [setScrolledBottom]);
668
+ var onQuizReset = React.useCallback(function () {
669
+ setUserAnswerIndex(null);
670
+ }, [setUserAnswerIndex]);
667
671
  var isSplitted = layout === 'split';
668
672
  var verticalAlign = isSplitted ? null : layout;
673
+ var showReset = isEdit;
669
674
  return /*#__PURE__*/React__default["default"].createElement("div", {
670
675
  className: classNames__default["default"]([styles$2.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, styles$2.disabled, clickDisabled), _defineProperty__default["default"](_ref6, className, className !== null), _ref6)]),
671
676
  "data-screen-ready": true
@@ -673,7 +678,14 @@ var QuizScreen = function QuizScreen(_ref) {
673
678
  width: width,
674
679
  height: height,
675
680
  className: styles$2.content
676
- }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
681
+ }, showReset ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
682
+ className: styles$2.reset,
683
+ icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
684
+ icon: faRedo.faRedo,
685
+ size: "md"
686
+ }),
687
+ onClick: onQuizReset
688
+ }) : null, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
677
689
  verticalAlign: verticalAlign,
678
690
  disabled: scrollingDisabled,
679
691
  onScrolledBottom: onScrolledBottom,
@@ -687,8 +699,9 @@ var QuizScreen = function QuizScreen(_ref) {
687
699
  buttonsTextStyle: buttonsTextStyle,
688
700
  goodAnswerColor: goodAnswerColor,
689
701
  badAnswerColor: badAnswerColor,
690
- withoutTrueFalse: withoutTrueFalse,
691
- withoutGoodAnswer: withoutGoodAnswer,
702
+ withoutTrueFalse: withoutTrueFalse
703
+ // withoutGoodAnswer={withoutGoodAnswer}
704
+ ,
692
705
  focusable: current && isView,
693
706
  showInstantAnswer: showInstantAnswer,
694
707
  withResult: true,
@@ -843,6 +856,7 @@ var propTypes$1 = {
843
856
  button: core.PropTypes.textElement,
844
857
  layout: PropTypes__default["default"].string,
845
858
  focusable: PropTypes__default["default"].bool,
859
+ buttonDisabled: PropTypes__default["default"].bool,
846
860
  transitions: core.PropTypes.transitions,
847
861
  transitionPlaying: PropTypes__default["default"].bool,
848
862
  transitionStagger: PropTypes__default["default"].number,
@@ -856,6 +870,7 @@ var defaultProps$1 = {
856
870
  description: null,
857
871
  layout: null,
858
872
  button: null,
873
+ buttonDisabled: false,
859
874
  focusable: false,
860
875
  transitions: null,
861
876
  transitionPlaying: false,
@@ -870,6 +885,7 @@ var Title = function Title(_ref) {
870
885
  title = _ref.title,
871
886
  description = _ref.description,
872
887
  button = _ref.button,
888
+ buttonDisabled = _ref.buttonDisabled,
873
889
  focusable = _ref.focusable,
874
890
  transitions = _ref.transitions,
875
891
  transitionPlaying = _ref.transitionPlaying,
@@ -878,9 +894,9 @@ var Title = function Title(_ref) {
878
894
  className = _ref.className,
879
895
  style = _ref.style,
880
896
  onClickButton = _ref.onClickButton;
881
- var _useScreenRenderConte = contexts.useScreenRenderContext(),
882
- isPreview = _useScreenRenderConte.isPreview,
883
- isEdit = _useScreenRenderConte.isEdit;
897
+ var _useScreenRenderConte = contexts.useScreenRenderContext();
898
+ _useScreenRenderConte.isPreview;
899
+ _useScreenRenderConte.isEdit;
884
900
  var isSplitted = layout === 'split';
885
901
  var verticalAlign = isSplitted ? null : layout;
886
902
  var hasTitle = utils.isTextFilled(title);
@@ -939,7 +955,7 @@ var Title = function Title(_ref) {
939
955
  disabled: transitionDisabled,
940
956
  delay: transitionStagger * 2
941
957
  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
942
- disabled: isPreview || isEdit,
958
+ disabled: buttonDisabled,
943
959
  focusable: focusable,
944
960
  buttonStyle: button !== null ? button.buttonStyle : null,
945
961
  className: styles.button,
@@ -1116,6 +1132,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1116
1132
  });
1117
1133
  }, [userAnswers, setUserAnswers, trackScreenEvent, questions, questionIndex]);
1118
1134
  var onAnswerTransitionEnd = React.useCallback(function () {
1135
+ if (isEdit) {
1136
+ return;
1137
+ }
1119
1138
  var nextIndex = questionIndex + 1;
1120
1139
  var questionsCount = questions.length;
1121
1140
  if (nextIndex < questionsCount) {
@@ -1123,7 +1142,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1123
1142
  } else if (nextIndex === questionsCount) {
1124
1143
  setQuestionIndex('results');
1125
1144
  }
1126
- }, [questions, questionIndex, setQuestionIndex]);
1145
+ }, [questions, questionIndex, setQuestionIndex, isEdit]);
1127
1146
  var onClickIntroButton = React.useCallback(function () {
1128
1147
  setQuestionIndex(0);
1129
1148
  }, [setQuestionIndex]);
@@ -1258,6 +1277,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1258
1277
  var onScrolledNotBottom = React.useCallback(function () {
1259
1278
  setScrolledBottom(false);
1260
1279
  }, [setScrolledBottom]);
1280
+ var onQuizReset = React.useCallback(function () {
1281
+ setUserAnswers(null);
1282
+ }, [setUserAnswers]);
1261
1283
  var verticalAlign = layout;
1262
1284
  if (isIntro && introLayout !== null) {
1263
1285
  verticalAlign = introLayout;
@@ -1266,6 +1288,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1266
1288
  } else if (isResults && resultLayout !== null) {
1267
1289
  verticalAlign = questionLayout;
1268
1290
  }
1291
+ var showPoints = isEdit;
1292
+ var showReset = isEdit;
1269
1293
  return /*#__PURE__*/React__default["default"].createElement("div", {
1270
1294
  className: classNames__default["default"]([styles$2.container, (_ref12 = {}, _defineProperty__default["default"](_ref12, styles$2[direction], direction !== null), _defineProperty__default["default"](_ref12, className, className !== null), _ref12)]),
1271
1295
  "data-screen-ready": true
@@ -1273,7 +1297,22 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1273
1297
  width: width,
1274
1298
  height: height,
1275
1299
  className: styles$2.content
1276
- }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
1300
+ }, showPoints && currentPoints !== null && currentPoints > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
1301
+ className: styles$2.points
1302
+ }, "".concat(currentPoints, " "), /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1303
+ id: "Xr1v8l",
1304
+ defaultMessage: [{
1305
+ "type": 0,
1306
+ "value": "points gained"
1307
+ }]
1308
+ })) : null, showReset ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
1309
+ className: styles$2.reset,
1310
+ icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1311
+ icon: faRedo.faRedo,
1312
+ size: "md"
1313
+ }),
1314
+ onClick: onQuizReset
1315
+ }) : null, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
1277
1316
  verticalAlign: verticalAlign,
1278
1317
  disabled: scrollingDisabled,
1279
1318
  onScrolledBottom: onScrolledBottom,
@@ -1287,6 +1326,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1287
1326
  description: description,
1288
1327
  layout: introLayout || layout,
1289
1328
  button: introButton,
1329
+ buttonDisabled: (questions || []).length < 1 || isEdit || isPreview,
1290
1330
  focusable: current && isView,
1291
1331
  transitions: transitions,
1292
1332
  transitionPlaying: transitionPlaying,
@@ -1743,10 +1783,10 @@ var definition = [{
1743
1783
  }]
1744
1784
  }),
1745
1785
  help: reactIntl.defineMessage({
1746
- id: "nuj2tw",
1786
+ id: "JoyIgA",
1747
1787
  defaultMessage: [{
1748
1788
  "type": 0,
1749
- "value": "Minimum number of points for this result"
1789
+ "value": "Minimum points for this result"
1750
1790
  }]
1751
1791
  })
1752
1792
  }, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-quiz",
3
- "version": "0.3.326",
3
+ "version": "0.3.328",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -53,7 +53,7 @@
53
53
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
54
54
  "@fortawesome/react-fontawesome": "^0.1.13",
55
55
  "@micromag/core": "^0.3.325",
56
- "@micromag/data": "^0.3.325",
56
+ "@micromag/data": "^0.3.328",
57
57
  "@micromag/element-background": "^0.3.325",
58
58
  "@micromag/element-button": "^0.3.325",
59
59
  "@micromag/element-call-to-action": "^0.3.325",
@@ -75,5 +75,5 @@
75
75
  "publishConfig": {
76
76
  "access": "public"
77
77
  },
78
- "gitHead": "54b9410aeb770aa362e9f1c68876e5bdb67411ad"
78
+ "gitHead": "b7eb67478bab9d9f94212b13db3e2e653566fb35"
79
79
  }