@khanacademy/perseus-editor 0.3.9 → 0.4.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/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Perseus editors",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "0.
|
|
6
|
+
"version": "0.4.0",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
"test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@khanacademy/kmath": "^0.0.
|
|
25
|
-
"@khanacademy/perseus": "^0.
|
|
24
|
+
"@khanacademy/kmath": "^0.0.6",
|
|
25
|
+
"@khanacademy/perseus": "^0.4.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@khanacademy/wonder-blocks-button": "^2.11.5",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"classnames": "^1.1.4",
|
|
34
34
|
"create-react-class": "^15.6.3",
|
|
35
35
|
"jquery": "^2.1.1",
|
|
36
|
-
"perseus-build-settings": "^0.0.
|
|
36
|
+
"perseus-build-settings": "^0.0.3",
|
|
37
37
|
"prop-types": "^15.6.1",
|
|
38
38
|
"react": "16.14.0",
|
|
39
39
|
"react-dom": "16.14.0",
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
// @flow
|
|
2
|
+
import {StyleSheet, css} from "aphrodite";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
|
|
5
|
+
import RadioEditor from "../radio/editor.jsx";
|
|
6
|
+
|
|
7
|
+
import type {
|
|
8
|
+
PerseusRadioWidgetOptions,
|
|
9
|
+
PerseusRenderer,
|
|
10
|
+
APIOptions,
|
|
11
|
+
} from "@khanacademy/perseus";
|
|
12
|
+
|
|
13
|
+
type StoryArgs = {||};
|
|
14
|
+
|
|
15
|
+
type Story = {|
|
|
16
|
+
title: string,
|
|
17
|
+
|};
|
|
18
|
+
|
|
19
|
+
export default ({
|
|
20
|
+
title: "Perseus/Editor/Widgets/Radio Editor",
|
|
21
|
+
}: Story);
|
|
22
|
+
|
|
23
|
+
const styles = StyleSheet.create({
|
|
24
|
+
wrapper: {
|
|
25
|
+
// The maximum width of a widget in the editor.
|
|
26
|
+
width: 338,
|
|
27
|
+
},
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
const question: PerseusRenderer = {
|
|
31
|
+
content:
|
|
32
|
+
"Which of the following values of $x$ satisfies the equation $\\sqrt{64}=x$ ?\n\n[[\u2603 radio 1]]\n\n",
|
|
33
|
+
images: {},
|
|
34
|
+
widgets: {
|
|
35
|
+
"radio 1": {
|
|
36
|
+
graded: true,
|
|
37
|
+
version: {
|
|
38
|
+
major: 1,
|
|
39
|
+
minor: 0,
|
|
40
|
+
},
|
|
41
|
+
static: false,
|
|
42
|
+
type: "radio",
|
|
43
|
+
options: {
|
|
44
|
+
displayCount: null,
|
|
45
|
+
onePerLine: false,
|
|
46
|
+
choices: [
|
|
47
|
+
{
|
|
48
|
+
content: "$-8$ and $8$",
|
|
49
|
+
correct: false,
|
|
50
|
+
clue: "The square root operation ($\\sqrt{\\phantom{x}}$) calculates *only* the positive square root when performed on a number, so $x$ is equal to *only* $8$.",
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
content: "$-8$",
|
|
54
|
+
correct: false,
|
|
55
|
+
clue: "While $(-8)^2=64$, the square root operation ($\\sqrt{\\phantom{x}}$) calculates *only* the positive square root when performed on a number.",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
content: "$8$",
|
|
59
|
+
correct: true,
|
|
60
|
+
isNoneOfTheAbove: false,
|
|
61
|
+
clue: "$8$ is the positive square root of $64$.",
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
content: "No value of $x$ satisfies the equation.",
|
|
65
|
+
correct: false,
|
|
66
|
+
isNoneOfTheAbove: false,
|
|
67
|
+
clue: "$8$ satisfies the equation.",
|
|
68
|
+
},
|
|
69
|
+
],
|
|
70
|
+
countChoices: false,
|
|
71
|
+
hasNoneOfTheAbove: false,
|
|
72
|
+
multipleSelect: false,
|
|
73
|
+
randomize: false,
|
|
74
|
+
deselectEnabled: false,
|
|
75
|
+
},
|
|
76
|
+
alignment: "default",
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
class WithState extends React.Component<Empty, PerseusRadioWidgetOptions> {
|
|
82
|
+
_widget: RadioEditor;
|
|
83
|
+
|
|
84
|
+
//$FlowIgnore
|
|
85
|
+
state = question.widgets["radio 1"];
|
|
86
|
+
|
|
87
|
+
apiOptions: APIOptions = {
|
|
88
|
+
satStyling: false,
|
|
89
|
+
styling: {
|
|
90
|
+
radioStyleVersion: "final",
|
|
91
|
+
primaryProductColor: "red",
|
|
92
|
+
},
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
render(): React.Node {
|
|
96
|
+
return (
|
|
97
|
+
<div className={css(styles.wrapper)}>
|
|
98
|
+
<RadioEditor
|
|
99
|
+
{...this.state}
|
|
100
|
+
apiOptions={this.apiOptions}
|
|
101
|
+
onChange={(props) =>
|
|
102
|
+
this.setState({
|
|
103
|
+
...this._widget.serialize(),
|
|
104
|
+
...props,
|
|
105
|
+
})
|
|
106
|
+
}
|
|
107
|
+
// $FlowFixMe[incompatible-type] - can be null
|
|
108
|
+
ref={(widget) => (this._widget = widget)}
|
|
109
|
+
/>
|
|
110
|
+
</div>
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
export const Default = (args: StoryArgs): React.Node => {
|
|
116
|
+
return <WithState />;
|
|
117
|
+
};
|
|
@@ -28,8 +28,8 @@ class ReactionDiagramWidgetEditor extends React.Component<Props> {
|
|
|
28
28
|
return Changeable.change.apply(this, args);
|
|
29
29
|
};
|
|
30
30
|
|
|
31
|
-
updateMolecule: (number) => (
|
|
32
|
-
return function (newValue) {
|
|
31
|
+
updateMolecule: (number) => (string) => void = (idx) => {
|
|
32
|
+
return function (newValue: string) {
|
|
33
33
|
const newSmiles = [...this.props.smiles];
|
|
34
34
|
newSmiles[idx] = newValue;
|
|
35
35
|
this.change({smiles: newSmiles});
|
|
@@ -44,7 +44,7 @@ class ReactionDiagramWidgetEditor extends React.Component<Props> {
|
|
|
44
44
|
}.bind(this);
|
|
45
45
|
};
|
|
46
46
|
|
|
47
|
-
updateSeparators: (number, string) => (
|
|
47
|
+
updateSeparators: (number, string) => (string) => void = (
|
|
48
48
|
idx,
|
|
49
49
|
propName,
|
|
50
50
|
) => {
|