@khanacademy/perseus 14.0.0 → 15.0.0
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.
- package/CHANGELOG.md +25 -0
- package/dist/article-renderer.d.ts +1 -2
- package/dist/es/index.js +16 -468
- package/dist/es/index.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +13 -463
- package/dist/index.js.map +1 -1
- package/dist/multi-items/item-types.d.ts +1 -1
- package/dist/multi-items/multi-renderer.d.ts +2 -2
- package/dist/perseus-api.d.ts +0 -3
- package/dist/server-item-renderer.d.ts +2 -15
- package/dist/strings.js +1 -0
- package/dist/styles/shared.d.ts +1 -0
- package/dist/types.d.ts +0 -2
- package/dist/util/a11y.d.ts +1 -0
- package/dist/widgets/expression.d.ts +0 -12
- package/dist/widgets/graded-group.d.ts +1 -1
- package/dist/widgets/label-image.d.ts +1 -1
- package/dist/widgets/matcher.d.ts +0 -1
- package/dist/widgets/passage.d.ts +1 -1
- package/dist/widgets/radio/widget.d.ts +1 -1
- package/dist/widgets/simulator.d.ts +0 -1
- package/dist/widgets/sorter.d.ts +0 -1
- package/package.json +8 -8
- package/src/__stories__/server-item-renderer.stories.tsx +1 -1
- package/src/__testdata__/server-item-renderer.testdata.ts +160 -0
- package/src/__tests__/server-item-renderer.test.tsx +2 -2
- package/src/article-renderer.tsx +13 -15
- package/src/components/svg-image.tsx +1 -1
- package/src/hints-renderer.tsx +1 -0
- package/src/index.ts +0 -1
- package/src/multi-items/item-types.ts +1 -1
- package/src/multi-items/multi-renderer.tsx +4 -4
- package/src/perseus-api.tsx +0 -6
- package/src/server-item-renderer.tsx +12 -13
- package/src/types.ts +0 -5
- package/src/util.ts +1 -1
- package/src/widgets/__stories__/expression.stories.tsx +0 -1
- package/src/widgets/__tests__/expression-mobile.test.tsx +0 -1
- package/src/widgets/__tests__/expression.test.tsx +4 -15
- package/src/widgets/expression.tsx +1 -5
- package/src/widgets/graded-group.tsx +1 -1
- package/src/widgets/label-image/strings.ts +3 -1
- package/src/widgets/label-image.tsx +2 -2
- package/src/widgets/passage-ref.tsx +1 -1
- package/src/widgets/passage.tsx +1 -1
- package/src/widgets/radio/widget.tsx +1 -1
- package/src/widgets/radio.ts +1 -1
- package/tsconfig-build.tsbuildinfo +1 -1
- package/dist/item-renderer.d.ts +0 -125
- package/dist/mixins/provide-keypad.d.ts +0 -39
- package/src/__stories__/item-renderer.stories.tsx +0 -30
- package/src/__testdata__/item-renderer.testdata.ts +0 -299
- package/src/__tests__/__snapshots__/item-renderer.test.tsx.snap +0 -224
- package/src/__tests__/item-renderer.test.tsx +0 -930
- package/src/item-renderer.tsx +0 -529
- package/src/mixins/provide-keypad.tsx +0 -137
package/dist/index.d.ts
CHANGED
|
@@ -10,7 +10,6 @@ export { default as itemVersion } from "./item-version";
|
|
|
10
10
|
* Renderers
|
|
11
11
|
*/
|
|
12
12
|
export { default as ArticleRenderer } from "./article-renderer";
|
|
13
|
-
export { default as ItemRenderer } from "./item-renderer";
|
|
14
13
|
export { default as ServerItemRenderer } from "./server-item-renderer";
|
|
15
14
|
export { default as HintsRenderer } from "./hints-renderer";
|
|
16
15
|
export { default as HintRenderer } from "./hint-renderer";
|
package/dist/index.js
CHANGED
|
@@ -891,10 +891,6 @@ const ApiOptions = {
|
|
|
891
891
|
nativeKeypadProxy: PropTypes__default["default"].func,
|
|
892
892
|
// Indicates whether or not to use mobile styling.
|
|
893
893
|
isMobile: PropTypes__default["default"].bool,
|
|
894
|
-
// Whether to use v1 (Legacy) Keypad for MathInput mobile or
|
|
895
|
-
// use the new v2 Keypad
|
|
896
|
-
// TODO [LC-1088]: remove after v2 release
|
|
897
|
-
useV2Keypad: PropTypes__default["default"].bool,
|
|
898
894
|
// A function, called with a bool indicating whether use of the
|
|
899
895
|
// drawing area (scratchpad) should be allowed/disallowed.
|
|
900
896
|
// Previously handled by `Khan.scratchpad.enable/disable`
|
|
@@ -933,7 +929,6 @@ const ApiOptions = {
|
|
|
933
929
|
defaults: {
|
|
934
930
|
isArticle: false,
|
|
935
931
|
isMobile: false,
|
|
936
|
-
useV2Keypad: false,
|
|
937
932
|
onInputError: function () {},
|
|
938
933
|
onFocusChange: function () {},
|
|
939
934
|
GroupMetadataEditor: StubTagEditor,
|
|
@@ -1940,7 +1935,7 @@ const deriveKeypadVersion = apiOptions => {
|
|
|
1940
1935
|
// a bit tricky, but this code will be relatively short-lived
|
|
1941
1936
|
// as we coalesce onto the new, v2 Keypad, at which point we
|
|
1942
1937
|
// can remove this `virtualKeypadVersion` field entirely.
|
|
1943
|
-
return apiOptions.nativeKeypadProxy != null ? "REACT_NATIVE_KEYPAD" :
|
|
1938
|
+
return apiOptions.nativeKeypadProxy != null ? "REACT_NATIVE_KEYPAD" : "MATH_INPUT_KEYPAD_V2";
|
|
1944
1939
|
};
|
|
1945
1940
|
// The new, MathQuill input expression widget
|
|
1946
1941
|
class Expression extends React__namespace.Component {
|
|
@@ -10265,7 +10260,7 @@ const pluck = function (table, subKey) {
|
|
|
10265
10260
|
* });
|
|
10266
10261
|
* {a: 2, b: 3}
|
|
10267
10262
|
*/
|
|
10268
|
-
const mapObject$
|
|
10263
|
+
const mapObject$2 = function (obj, lambda) {
|
|
10269
10264
|
const result = {};
|
|
10270
10265
|
___default["default"].each(___default["default"].keys(obj), function (key) {
|
|
10271
10266
|
// @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'K'.
|
|
@@ -10291,7 +10286,7 @@ const mapObjectFromArray$1 = function (arr, lambda) {
|
|
|
10291
10286
|
};
|
|
10292
10287
|
var objective_ = {
|
|
10293
10288
|
pluck: pluck,
|
|
10294
|
-
mapObject: mapObject$
|
|
10289
|
+
mapObject: mapObject$2,
|
|
10295
10290
|
mapObjectFromArray: mapObjectFromArray$1
|
|
10296
10291
|
};
|
|
10297
10292
|
|
|
@@ -18937,7 +18932,7 @@ class WidgetContainer extends React__namespace.Component {
|
|
|
18937
18932
|
}
|
|
18938
18933
|
|
|
18939
18934
|
const {
|
|
18940
|
-
mapObject: mapObject$
|
|
18935
|
+
mapObject: mapObject$1,
|
|
18941
18936
|
mapObjectFromArray
|
|
18942
18937
|
} = objective_;
|
|
18943
18938
|
const rContainsNonWhitespace = /\S/;
|
|
@@ -19164,7 +19159,7 @@ class Renderer extends React__namespace.Component {
|
|
|
19164
19159
|
// @ts-expect-error - TS2322 - Type '(props: Props) => Partial<Record<string, CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ... 35 more ... | VideoWidget>>' is not assignable to type '(props: Props) => { [key: string]: PerseusWidget; }'.
|
|
19165
19160
|
_getAllWidgetsInfo = props => {
|
|
19166
19161
|
// @ts-expect-error - TS2345 - Argument of type '{ [key: string]: PerseusWidget; }' is not assignable to parameter of type 'Partial<Record<string, CategorizerWidget>>'.
|
|
19167
|
-
return mapObject$
|
|
19162
|
+
return mapObject$1(props.widgets, (widgetInfo, widgetId) => {
|
|
19168
19163
|
if (!widgetInfo.type || !widgetInfo.alignment) {
|
|
19169
19164
|
const newValues = {};
|
|
19170
19165
|
if (!widgetInfo.type) {
|
|
@@ -19180,7 +19175,7 @@ class Renderer extends React__namespace.Component {
|
|
|
19180
19175
|
};
|
|
19181
19176
|
_getAllWidgetsStartProps = (allWidgetInfo, props) => {
|
|
19182
19177
|
// @ts-expect-error - TS2345 - Argument of type '{ [key: string]: PerseusWidget; }' is not assignable to parameter of type 'Partial<Record<string, CategorizerWidget>>'.
|
|
19183
|
-
return mapObject$
|
|
19178
|
+
return mapObject$1(allWidgetInfo, widgetInfo => {
|
|
19184
19179
|
return getRendererPropsForWidgetInfo(widgetInfo, props.problemNum);
|
|
19185
19180
|
});
|
|
19186
19181
|
};
|
|
@@ -19300,7 +19295,7 @@ class Renderer extends React__namespace.Component {
|
|
|
19300
19295
|
* state from that instead of the current widget props.
|
|
19301
19296
|
*/
|
|
19302
19297
|
getSerializedState = widgetProps => {
|
|
19303
|
-
return mapObject$
|
|
19298
|
+
return mapObject$1(widgetProps || this.state.widgetProps, (props, widgetId) => {
|
|
19304
19299
|
const widget = this.getWidgetInstance(widgetId);
|
|
19305
19300
|
if (widget && widget.getSerializedState) {
|
|
19306
19301
|
return widget.getSerializedState();
|
|
@@ -19336,7 +19331,7 @@ class Renderer extends React__namespace.Component {
|
|
|
19336
19331
|
}
|
|
19337
19332
|
};
|
|
19338
19333
|
this.setState({
|
|
19339
|
-
widgetProps: mapObject$
|
|
19334
|
+
widgetProps: mapObject$1(serializedState, (props, widgetId) => {
|
|
19340
19335
|
const widget = this.getWidgetInstance(widgetId);
|
|
19341
19336
|
if (widget && widget.restoreSerializedState) {
|
|
19342
19337
|
// Note that we probably can't call
|
|
@@ -44221,7 +44216,7 @@ const init = function (options) {
|
|
|
44221
44216
|
|
|
44222
44217
|
// This file is processed by a Rollup plugin (replace) to inject the production
|
|
44223
44218
|
const libName = "@khanacademy/perseus";
|
|
44224
|
-
const libVersion = "
|
|
44219
|
+
const libVersion = "15.0.0";
|
|
44225
44220
|
perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
|
|
44226
44221
|
|
|
44227
44222
|
const apiVersion = {
|
|
@@ -44495,6 +44490,8 @@ class HintsRenderer extends React__namespace.Component {
|
|
|
44495
44490
|
componentDidMount() {
|
|
44496
44491
|
this._cacheHintImages();
|
|
44497
44492
|
}
|
|
44493
|
+
|
|
44494
|
+
// eslint-disable-next-line react/no-unsafe
|
|
44498
44495
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
|
44499
44496
|
// @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
|
|
44500
44497
|
if (nextProps.hintsVisible - this.props.hintsVisible > 1) {
|
|
@@ -44729,454 +44726,6 @@ const styles$4 = aphrodite.StyleSheet.create({
|
|
|
44729
44726
|
}
|
|
44730
44727
|
});
|
|
44731
44728
|
|
|
44732
|
-
/* eslint-disable @khanacademy/ts-no-error-suppressions */
|
|
44733
|
-
|
|
44734
|
-
// This represents the shape of any component that uses this ProvideKeypad
|
|
44735
|
-
// mixin.
|
|
44736
|
-
// NOTE: This is not a real component. It's a collection of methods used to
|
|
44737
|
-
// create and manage a Keypad instances.
|
|
44738
|
-
// TODO(LP-10789): replace this with a React Context object to pass information
|
|
44739
|
-
// between Perseus and the Keypad.
|
|
44740
|
-
const ProvideKeypad = {
|
|
44741
|
-
getInitialState() {
|
|
44742
|
-
const _this = this;
|
|
44743
|
-
let keypadElement = null;
|
|
44744
|
-
if (_this.props.apiOptions && _this.props.apiOptions.customKeypad && _this.props.apiOptions.nativeKeypadProxy) {
|
|
44745
|
-
keypadElement = _this.props.apiOptions.nativeKeypadProxy(
|
|
44746
|
-
// @ts-expect-error - TS2339 - Property 'blur' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'. | TS2339 - Property 'blur' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
|
|
44747
|
-
() => _this.blur && _this.blur());
|
|
44748
|
-
}
|
|
44749
|
-
return {
|
|
44750
|
-
keypadElement
|
|
44751
|
-
};
|
|
44752
|
-
},
|
|
44753
|
-
componentDidMount() {
|
|
44754
|
-
const _this = this;
|
|
44755
|
-
const apiOptions = _this.props.apiOptions;
|
|
44756
|
-
if (apiOptions && apiOptions.customKeypad && !apiOptions.nativeKeypadProxy) {
|
|
44757
|
-
// TODO(charlie): Render this and the wrapped component in the same
|
|
44758
|
-
// React tree. We may also want to add this keypad asynchronously
|
|
44759
|
-
// or on-demand in the future.
|
|
44760
|
-
_this._keypadContainer = document.createElement("div");
|
|
44761
|
-
document.body?.appendChild(_this._keypadContainer);
|
|
44762
|
-
render( /*#__PURE__*/React__namespace.createElement(mathInput.MobileKeypad, {
|
|
44763
|
-
onElementMounted: element => {
|
|
44764
|
-
// NOTE(kevinb): The reason why this setState works is
|
|
44765
|
-
// b/c we're calling it manually from item-renderer.jsx
|
|
44766
|
-
// and we're manually setting the 'this' by using 'call'
|
|
44767
|
-
// @ts-expect-error - TS2339 - Property 'setState' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
|
|
44768
|
-
_this.setState({
|
|
44769
|
-
keypadElement: element
|
|
44770
|
-
});
|
|
44771
|
-
},
|
|
44772
|
-
onDismiss: () => {
|
|
44773
|
-
// @ts-expect-error - TS2339 - Property 'blur' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'. | TS2339 - Property 'blur' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
|
|
44774
|
-
_this.blur && _this.blur();
|
|
44775
|
-
}
|
|
44776
|
-
// @ts-expect-error - TS2339 - Property 'props' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
|
|
44777
|
-
,
|
|
44778
|
-
style: _this.props.keypadStyle,
|
|
44779
|
-
onAnalyticsEvent: async () => {
|
|
44780
|
-
// Intentionally left empty. This component is
|
|
44781
|
-
// deprecated and so we don't want/need to instrument
|
|
44782
|
-
// it.
|
|
44783
|
-
}
|
|
44784
|
-
}), _this._keypadContainer);
|
|
44785
|
-
}
|
|
44786
|
-
},
|
|
44787
|
-
componentWillUnmount() {
|
|
44788
|
-
const _this = this;
|
|
44789
|
-
if (_this._keypadContainer) {
|
|
44790
|
-
ReactDOM__default["default"].unmountComponentAtNode(_this._keypadContainer);
|
|
44791
|
-
if (_this._keypadContainer.parentNode) {
|
|
44792
|
-
// Note ChildNode.remove() isn't available in older Android
|
|
44793
|
-
// webviews.
|
|
44794
|
-
_this._keypadContainer.parentNode.removeChild(_this._keypadContainer);
|
|
44795
|
-
}
|
|
44796
|
-
_this._keypadContainer = null;
|
|
44797
|
-
}
|
|
44798
|
-
},
|
|
44799
|
-
keypadElement() {
|
|
44800
|
-
const _this = this;
|
|
44801
|
-
return _this.state.keypadElement;
|
|
44802
|
-
}
|
|
44803
|
-
};
|
|
44804
|
-
|
|
44805
|
-
const {
|
|
44806
|
-
mapObject: mapObject$1
|
|
44807
|
-
} = objective_;
|
|
44808
|
-
/**
|
|
44809
|
-
* @depreciated use ServerItemRenderer
|
|
44810
|
-
*/
|
|
44811
|
-
class ItemRenderer extends React__namespace.Component {
|
|
44812
|
-
// @ts-expect-error - TS2564 - Property 'questionRenderer' has no initializer and is not definitely assigned in the constructor.
|
|
44813
|
-
|
|
44814
|
-
static defaultProps = {
|
|
44815
|
-
apiOptions: ApiOptions.defaults,
|
|
44816
|
-
// defaults are set in `this.update()`
|
|
44817
|
-
controlPeripherals: true,
|
|
44818
|
-
hintsAreaSelector: "#hintsarea",
|
|
44819
|
-
initialHintsVisible: 0,
|
|
44820
|
-
workAreaSelector: "#workarea",
|
|
44821
|
-
reviewMode: false,
|
|
44822
|
-
linterContext: PerseusLinter__namespace.linterContextDefault
|
|
44823
|
-
};
|
|
44824
|
-
constructor(props) {
|
|
44825
|
-
super(props);
|
|
44826
|
-
this.state = {
|
|
44827
|
-
// NOTE: This value is used in provide-keypad.jsx which contains a
|
|
44828
|
-
// "mixin" that this file calls methods on.
|
|
44829
|
-
...ProvideKeypad.getInitialState.call(this),
|
|
44830
|
-
hintsVisible: props.initialHintsVisible || 0,
|
|
44831
|
-
questionCompleted: false,
|
|
44832
|
-
questionHighlightedWidgets: []
|
|
44833
|
-
};
|
|
44834
|
-
}
|
|
44835
|
-
componentDidMount() {
|
|
44836
|
-
ProvideKeypad.componentDidMount.call(this);
|
|
44837
|
-
if (this.props.controlPeripherals && this.props.apiOptions.setDrawingAreaAvailable) {
|
|
44838
|
-
this.props.apiOptions.setDrawingAreaAvailable(true);
|
|
44839
|
-
}
|
|
44840
|
-
this._currentFocus = null;
|
|
44841
|
-
this.update();
|
|
44842
|
-
}
|
|
44843
|
-
UNSAFE_componentWillReceiveProps(nextProps) {
|
|
44844
|
-
this.setState({
|
|
44845
|
-
questionHighlightedWidgets: []
|
|
44846
|
-
});
|
|
44847
|
-
}
|
|
44848
|
-
componentDidUpdate() {
|
|
44849
|
-
this.update();
|
|
44850
|
-
}
|
|
44851
|
-
componentWillUnmount() {
|
|
44852
|
-
ProvideKeypad.componentWillUnmount.call(this);
|
|
44853
|
-
const workArea = document.querySelector(this.props.workAreaSelector);
|
|
44854
|
-
if (workArea != null) {
|
|
44855
|
-
ReactDOM__namespace.unmountComponentAtNode(workArea);
|
|
44856
|
-
}
|
|
44857
|
-
const hintsArea = document.querySelector(this.props.hintsAreaSelector);
|
|
44858
|
-
if (hintsArea != null) {
|
|
44859
|
-
ReactDOM__namespace.unmountComponentAtNode(hintsArea);
|
|
44860
|
-
}
|
|
44861
|
-
if (this.props.controlPeripherals) {
|
|
44862
|
-
const answerArea = this.props.item.answerArea || {};
|
|
44863
|
-
if (answerArea.calculator) {
|
|
44864
|
-
$__default["default"]("#calculator").hide();
|
|
44865
|
-
}
|
|
44866
|
-
if (answerArea.periodicTable) {
|
|
44867
|
-
$__default["default"](".periodic-table-info-box").hide();
|
|
44868
|
-
}
|
|
44869
|
-
if (answerArea.zTable) {
|
|
44870
|
-
$__default["default"](".z-table-info-box").hide();
|
|
44871
|
-
}
|
|
44872
|
-
if (answerArea.tTable) {
|
|
44873
|
-
$__default["default"](".t-table-info-box").hide();
|
|
44874
|
-
}
|
|
44875
|
-
if (answerArea.chi2Table) {
|
|
44876
|
-
$__default["default"](".chi2-table-info-box").hide();
|
|
44877
|
-
}
|
|
44878
|
-
}
|
|
44879
|
-
}
|
|
44880
|
-
keypadElement() {
|
|
44881
|
-
return ProvideKeypad.keypadElement.call(this);
|
|
44882
|
-
}
|
|
44883
|
-
update() {
|
|
44884
|
-
const apiOptions = {
|
|
44885
|
-
...ApiOptions.defaults,
|
|
44886
|
-
...this.props.apiOptions,
|
|
44887
|
-
onFocusChange: this._handleFocusChange
|
|
44888
|
-
};
|
|
44889
|
-
const workArea = document.querySelector(this.props.workAreaSelector);
|
|
44890
|
-
const hintsArea = document.querySelector(this.props.hintsAreaSelector);
|
|
44891
|
-
if (!workArea || !hintsArea) {
|
|
44892
|
-
return;
|
|
44893
|
-
}
|
|
44894
|
-
|
|
44895
|
-
// Since the item renderer works by rendering things into three divs
|
|
44896
|
-
// that have completely different places in the DOM, we have to do this
|
|
44897
|
-
// strangeness instead of relying on React's normal render() method.
|
|
44898
|
-
// TODO(alpert): Figure out how to clean this up somehow
|
|
44899
|
-
render( /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
|
|
44900
|
-
value: this.props.dependencies
|
|
44901
|
-
}, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({
|
|
44902
|
-
ref: node => {
|
|
44903
|
-
if (!node) {
|
|
44904
|
-
return;
|
|
44905
|
-
}
|
|
44906
|
-
this.questionRenderer = node;
|
|
44907
|
-
|
|
44908
|
-
// NOTE(jeremy): Why don't we just pass this into the
|
|
44909
|
-
// renderer as a prop?
|
|
44910
|
-
const {
|
|
44911
|
-
answerableCallback
|
|
44912
|
-
} = apiOptions;
|
|
44913
|
-
if (answerableCallback) {
|
|
44914
|
-
const isAnswerable = this.questionRenderer.emptyWidgets().length === 0;
|
|
44915
|
-
answerableCallback(isAnswerable);
|
|
44916
|
-
}
|
|
44917
|
-
},
|
|
44918
|
-
keypadElement: this.keypadElement(),
|
|
44919
|
-
problemNum: this.props.problemNum,
|
|
44920
|
-
onInteractWithWidget: this.handleInteractWithWidget,
|
|
44921
|
-
highlightedWidgets: this.state.questionHighlightedWidgets,
|
|
44922
|
-
apiOptions: apiOptions,
|
|
44923
|
-
questionCompleted: this.state.questionCompleted,
|
|
44924
|
-
reviewMode: this.props.reviewMode,
|
|
44925
|
-
savedState: this.props.savedState,
|
|
44926
|
-
linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "question")
|
|
44927
|
-
}, this.props.item.question, {
|
|
44928
|
-
legacyPerseusLint: this.props.legacyPerseusLint
|
|
44929
|
-
}))),
|
|
44930
|
-
// @ts-expect-error - TS2345 - Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'.
|
|
44931
|
-
workArea);
|
|
44932
|
-
render( /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
|
|
44933
|
-
value: this.props.dependencies
|
|
44934
|
-
}, /*#__PURE__*/React__namespace.createElement(HintsRenderer, {
|
|
44935
|
-
ref: node => this.hintsRenderer = node,
|
|
44936
|
-
hints: this.props.item.hints,
|
|
44937
|
-
hintsVisible: this.state.hintsVisible,
|
|
44938
|
-
apiOptions: apiOptions,
|
|
44939
|
-
linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "hints")
|
|
44940
|
-
})),
|
|
44941
|
-
// @ts-expect-error - TS2345 - Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'.
|
|
44942
|
-
hintsArea);
|
|
44943
|
-
const answerArea = this.props.item.answerArea || {};
|
|
44944
|
-
if (this.props.controlPeripherals) {
|
|
44945
|
-
$__default["default"]("#calculator").toggle(answerArea.calculator || false);
|
|
44946
|
-
$__default["default"](".periodic-table-info-box").toggle(answerArea.periodicTable || false);
|
|
44947
|
-
$__default["default"](".z-table-info-box").toggle(answerArea.zTable || false);
|
|
44948
|
-
$__default["default"](".t-table-info-box").toggle(answerArea.tTable || false);
|
|
44949
|
-
$__default["default"](".chi2-table-info-box").toggle(answerArea.chi2Table || false);
|
|
44950
|
-
} else {
|
|
44951
|
-
if (answerArea.calculator) {
|
|
44952
|
-
this.props.onShowCalculator && this.props.onShowCalculator();
|
|
44953
|
-
}
|
|
44954
|
-
if (answerArea.periodicTable) {
|
|
44955
|
-
this.props.onShowPeriodicTable && this.props.onShowPeriodicTable({
|
|
44956
|
-
showKey: answerArea.periodicTableWithKey
|
|
44957
|
-
});
|
|
44958
|
-
}
|
|
44959
|
-
if (answerArea.zTable) {
|
|
44960
|
-
this.props.onShowZTable && this.props.onShowZTable();
|
|
44961
|
-
}
|
|
44962
|
-
if (answerArea.tTable) {
|
|
44963
|
-
this.props.onShowTTable && this.props.onShowTTable();
|
|
44964
|
-
}
|
|
44965
|
-
if (answerArea.chi2Table) {
|
|
44966
|
-
this.props.onShowChi2Table && this.props.onShowChi2Table();
|
|
44967
|
-
}
|
|
44968
|
-
}
|
|
44969
|
-
}
|
|
44970
|
-
_handleFocusChange = (newFocus, oldFocus) => {
|
|
44971
|
-
if (newFocus != null) {
|
|
44972
|
-
this._setCurrentFocus(newFocus);
|
|
44973
|
-
} else {
|
|
44974
|
-
this._onRendererBlur(oldFocus);
|
|
44975
|
-
}
|
|
44976
|
-
};
|
|
44977
|
-
|
|
44978
|
-
// Sets the current focus path and element and send an onChangeFocus event
|
|
44979
|
-
// back to our parent.
|
|
44980
|
-
_setCurrentFocus(newFocus) {
|
|
44981
|
-
const keypadElement = this.keypadElement();
|
|
44982
|
-
// By the time this happens, newFocus cannot be a prefix of
|
|
44983
|
-
// prevFocused, since we must have either been called from
|
|
44984
|
-
// an onFocusChange within a renderer, which is only called when
|
|
44985
|
-
// this is not a prefix, or between the question and answer areas,
|
|
44986
|
-
// which can never prefix each other.
|
|
44987
|
-
const prevFocus = this._currentFocus;
|
|
44988
|
-
this._currentFocus = newFocus;
|
|
44989
|
-
|
|
44990
|
-
// Determine whether the newly focused path represents an input.
|
|
44991
|
-
const inputPaths = this.getInputPaths();
|
|
44992
|
-
const didFocusInput = this._currentFocus && inputPaths.some(inputPath => {
|
|
44993
|
-
return Util.inputPathsEqual(inputPath, this._currentFocus);
|
|
44994
|
-
});
|
|
44995
|
-
if (this.props.apiOptions.onFocusChange != null) {
|
|
44996
|
-
this.props.apiOptions.onFocusChange(this._currentFocus, prevFocus, didFocusInput && keypadElement && keypadElement.getDOMNode());
|
|
44997
|
-
}
|
|
44998
|
-
if (keypadElement) {
|
|
44999
|
-
if (didFocusInput) {
|
|
45000
|
-
keypadElement.activate();
|
|
45001
|
-
} else {
|
|
45002
|
-
keypadElement.dismiss();
|
|
45003
|
-
}
|
|
45004
|
-
}
|
|
45005
|
-
}
|
|
45006
|
-
_onRendererBlur(blurPath) {
|
|
45007
|
-
const blurringFocusPath = this._currentFocus;
|
|
45008
|
-
|
|
45009
|
-
// Failsafe: abort if ID is different, because focus probably happened
|
|
45010
|
-
// before blur.
|
|
45011
|
-
if (!Util.inputPathsEqual(blurPath, blurringFocusPath)) {
|
|
45012
|
-
return;
|
|
45013
|
-
}
|
|
45014
|
-
|
|
45015
|
-
// Wait until after any new focus events fire this tick before
|
|
45016
|
-
// declaring that nothing is focused, since if there were a focus change
|
|
45017
|
-
// across Renderers (e.g., from the HintsRenderer to the
|
|
45018
|
-
// QuestionRenderer), we could receive the blur before the focus.
|
|
45019
|
-
// TODO(jeff, CP-3128): Use Wonder Blocks Timing API
|
|
45020
|
-
// eslint-disable-next-line no-restricted-syntax
|
|
45021
|
-
setTimeout(() => {
|
|
45022
|
-
if (Util.inputPathsEqual(this._currentFocus, blurringFocusPath)) {
|
|
45023
|
-
this._setCurrentFocus(null);
|
|
45024
|
-
}
|
|
45025
|
-
});
|
|
45026
|
-
}
|
|
45027
|
-
|
|
45028
|
-
/**
|
|
45029
|
-
* Accepts a question area widgetId, or an answer area widgetId of
|
|
45030
|
-
* the form "answer-input-number 1", or the string "answer-area"
|
|
45031
|
-
* for the whole answer area (if the answer area is a single widget).
|
|
45032
|
-
*/
|
|
45033
|
-
_setWidgetProps(widgetId, newProps, callback) {
|
|
45034
|
-
this.questionRenderer._setWidgetProps(widgetId, newProps, callback);
|
|
45035
|
-
}
|
|
45036
|
-
|
|
45037
|
-
/**
|
|
45038
|
-
* Sets the input value into the widget found at `path`. The `focus`
|
|
45039
|
-
* function provided is called when all affected widgets have been
|
|
45040
|
-
* re-rendered with the new value.
|
|
45041
|
-
*/
|
|
45042
|
-
setInputValue(path, newValue, focus) {
|
|
45043
|
-
return this.questionRenderer.setInputValue(path, newValue, focus);
|
|
45044
|
-
}
|
|
45045
|
-
focusPath(path) {
|
|
45046
|
-
return this.questionRenderer.focusPath(path);
|
|
45047
|
-
}
|
|
45048
|
-
blurPath(path) {
|
|
45049
|
-
return this.questionRenderer.blurPath(path);
|
|
45050
|
-
}
|
|
45051
|
-
getDOMNodeForPath(path) {
|
|
45052
|
-
return this.questionRenderer.getDOMNodeForPath(path);
|
|
45053
|
-
}
|
|
45054
|
-
getGrammarTypeForPath(path) {
|
|
45055
|
-
return this.questionRenderer.getGrammarTypeForPath(path);
|
|
45056
|
-
}
|
|
45057
|
-
getInputPaths() {
|
|
45058
|
-
const questionAreaInputPaths = this.questionRenderer.getInputPaths();
|
|
45059
|
-
return questionAreaInputPaths;
|
|
45060
|
-
}
|
|
45061
|
-
|
|
45062
|
-
// NOTE: this must remain as an arrow function because we pass it Renderer
|
|
45063
|
-
handleInteractWithWidget = widgetId => {
|
|
45064
|
-
const withRemoved = ___default["default"].difference(this.state.questionHighlightedWidgets, [widgetId]);
|
|
45065
|
-
this.setState({
|
|
45066
|
-
questionCompleted: false,
|
|
45067
|
-
questionHighlightedWidgets: withRemoved
|
|
45068
|
-
});
|
|
45069
|
-
if (this.props.apiOptions.interactionCallback) {
|
|
45070
|
-
this.props.apiOptions.interactionCallback();
|
|
45071
|
-
}
|
|
45072
|
-
};
|
|
45073
|
-
focus() {
|
|
45074
|
-
return this.questionRenderer.focus();
|
|
45075
|
-
}
|
|
45076
|
-
blur() {
|
|
45077
|
-
if (this._currentFocus) {
|
|
45078
|
-
this.blurPath(this._currentFocus);
|
|
45079
|
-
}
|
|
45080
|
-
}
|
|
45081
|
-
showHint() {
|
|
45082
|
-
if (this.state.hintsVisible < this.getNumHints()) {
|
|
45083
|
-
this.setState({
|
|
45084
|
-
hintsVisible: this.state.hintsVisible + 1
|
|
45085
|
-
});
|
|
45086
|
-
}
|
|
45087
|
-
}
|
|
45088
|
-
getNumHints() {
|
|
45089
|
-
return this.props.item.hints.length;
|
|
45090
|
-
}
|
|
45091
|
-
|
|
45092
|
-
/**
|
|
45093
|
-
* Grades the item.
|
|
45094
|
-
*
|
|
45095
|
-
* Returns a KE-style score of {
|
|
45096
|
-
* empty: bool,
|
|
45097
|
-
* correct: bool,
|
|
45098
|
-
* message: string|null,
|
|
45099
|
-
* guess: Array
|
|
45100
|
-
* }
|
|
45101
|
-
*/
|
|
45102
|
-
scoreInput() {
|
|
45103
|
-
const guessAndScore = this.questionRenderer.guessAndScore();
|
|
45104
|
-
const guess = guessAndScore[0];
|
|
45105
|
-
const score = guessAndScore[1];
|
|
45106
|
-
|
|
45107
|
-
// Continue to include an empty guess for the now defunct answer area.
|
|
45108
|
-
// TODO(alex): Check whether we rely on the format here for
|
|
45109
|
-
// analyzing ProblemLogs. If not, remove this layer.
|
|
45110
|
-
const maxCompatGuess = [guess, []];
|
|
45111
|
-
const keScore = Util.keScoreFromPerseusScore(score, maxCompatGuess, this.questionRenderer.getSerializedState());
|
|
45112
|
-
const emptyQuestionAreaWidgets = this.questionRenderer.emptyWidgets();
|
|
45113
|
-
this.setState({
|
|
45114
|
-
questionCompleted: keScore.correct,
|
|
45115
|
-
questionHighlightedWidgets: emptyQuestionAreaWidgets
|
|
45116
|
-
});
|
|
45117
|
-
return keScore;
|
|
45118
|
-
}
|
|
45119
|
-
|
|
45120
|
-
/**
|
|
45121
|
-
* Returns an array of all widget IDs in the order they occur in
|
|
45122
|
-
* the question content.
|
|
45123
|
-
*/
|
|
45124
|
-
getWidgetIds() {
|
|
45125
|
-
return this.questionRenderer.getWidgetIds();
|
|
45126
|
-
}
|
|
45127
|
-
|
|
45128
|
-
/**
|
|
45129
|
-
* Returns an object mapping from widget ID to KE-style score.
|
|
45130
|
-
* The keys of this object are the values of the array returned
|
|
45131
|
-
* from `getWidgetIds`.
|
|
45132
|
-
*/
|
|
45133
|
-
scoreWidgets() {
|
|
45134
|
-
const qScore = this.questionRenderer.scoreWidgets();
|
|
45135
|
-
const qGuess = this.questionRenderer.getUserInputForWidgets();
|
|
45136
|
-
const state = this.questionRenderer.getSerializedState();
|
|
45137
|
-
// @ts-expect-error - TS2322 - Type 'Partial<Record<string, KEScore>>' is not assignable to type '{ [id: string]: KEScore; }'. | TS2345 - Argument of type '{ [widgetId: string]: PerseusScore; }' is not assignable to parameter of type 'Partial<Record<string, { type: "invalid"; message?: string | null | undefined; suppressAlmostThere?: boolean | null | undefined; }>>'.
|
|
45138
|
-
return mapObject$1(qScore, (score, id) => {
|
|
45139
|
-
return Util.keScoreFromPerseusScore(score, qGuess[id], state[id]);
|
|
45140
|
-
});
|
|
45141
|
-
}
|
|
45142
|
-
|
|
45143
|
-
/**
|
|
45144
|
-
* Get a representation of the current state of the item.
|
|
45145
|
-
*/
|
|
45146
|
-
getSerializedState() {
|
|
45147
|
-
return {
|
|
45148
|
-
question: this.questionRenderer.getSerializedState(),
|
|
45149
|
-
hints: this.hintsRenderer?.getSerializedState()
|
|
45150
|
-
};
|
|
45151
|
-
}
|
|
45152
|
-
|
|
45153
|
-
// TODO(kevinb): make the type for this state better
|
|
45154
|
-
restoreSerializedState(state, callback) {
|
|
45155
|
-
// We need to wait for both the question renderer and the hints
|
|
45156
|
-
// renderer to finish restoring their states.
|
|
45157
|
-
let numCallbacks = 2;
|
|
45158
|
-
const fireCallback = () => {
|
|
45159
|
-
--numCallbacks;
|
|
45160
|
-
if (callback && numCallbacks === 0) {
|
|
45161
|
-
callback();
|
|
45162
|
-
}
|
|
45163
|
-
};
|
|
45164
|
-
this.questionRenderer.restoreSerializedState(state.question, fireCallback);
|
|
45165
|
-
this.hintsRenderer?.restoreSerializedState(state.hints, fireCallback);
|
|
45166
|
-
}
|
|
45167
|
-
showRationalesForCurrentlySelectedChoices() {
|
|
45168
|
-
this.questionRenderer.showRationalesForCurrentlySelectedChoices();
|
|
45169
|
-
}
|
|
45170
|
-
deselectIncorrectSelectedChoices() {
|
|
45171
|
-
this.questionRenderer.deselectIncorrectSelectedChoices();
|
|
45172
|
-
}
|
|
45173
|
-
render() {
|
|
45174
|
-
return /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
|
|
45175
|
-
value: this.props.dependencies
|
|
45176
|
-
}, /*#__PURE__*/React__namespace.createElement("div", null));
|
|
45177
|
-
}
|
|
45178
|
-
}
|
|
45179
|
-
|
|
45180
44729
|
/**
|
|
45181
44730
|
* A React context for signaling when all of the components in a Perseus
|
|
45182
44731
|
* renderer is fully rendered. This means that all images and math have
|
|
@@ -45215,6 +44764,8 @@ class ServerItemRenderer extends React__namespace.Component {
|
|
|
45215
44764
|
this._currentFocus = null;
|
|
45216
44765
|
this._fullyRendered = false;
|
|
45217
44766
|
}
|
|
44767
|
+
|
|
44768
|
+
// eslint-disable-next-line react/no-unsafe
|
|
45218
44769
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
|
45219
44770
|
this.setState({
|
|
45220
44771
|
questionHighlightedWidgets: []
|
|
@@ -47458,7 +47009,6 @@ exports.HintRenderer = HintRenderer;
|
|
|
47458
47009
|
exports.HintsRenderer = HintsRenderer;
|
|
47459
47010
|
exports.InputNumber = InputNumber$1;
|
|
47460
47011
|
exports.InteractiveGraphWidget = InteractiveGraph$1;
|
|
47461
|
-
exports.ItemRenderer = ItemRenderer;
|
|
47462
47012
|
exports.JiptParagraphs = JiptParagraphs;
|
|
47463
47013
|
exports.KhanColors = KhanColors;
|
|
47464
47014
|
exports.KhanMath = KhanMath;
|