npm - @khanacademy/perseus - Versions diffs - 19.1.5 → 19.1.7 - Mend

@khanacademy/perseus 19.1.5 → 19.1.7

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 (489) hide show

package/dist/components/graph.d.ts +0 -1
package/dist/components/graphie.d.ts +0 -1
package/dist/es/index.js +319 -212
package/dist/es/index.js.map +1 -1
package/dist/index.js +338 -222
package/dist/index.js.map +1 -1
package/dist/interactive2/movable-point.d.ts +195 -1
package/dist/interactive2/movable.d.ts +1 -1
package/dist/interactive2/types.d.ts +4 -2
package/dist/interactive2.d.ts +2 -1
package/dist/server-item-renderer.d.ts +2 -2
package/dist/util/graphie.d.ts +12 -2
package/dist/widgets/expression.d.ts +6 -6
package/package.json +11 -8
package/.babelrc.js +0 -8
package/.eslintrc.js +0 -12
package/CHANGELOG.md +0 -1432
package/src/__stories__/article-renderer.stories.tsx +0 -100
package/src/__stories__/hints-renderer.stories.tsx +0 -55
package/src/__stories__/server-item-renderer.stories.tsx +0 -44
package/src/__testdata__/article-renderer.testdata.ts +0 -212
package/src/__testdata__/graphie.testdata.ts +0 -51
package/src/__testdata__/renderer.testdata.ts +0 -274
package/src/__testdata__/server-item-renderer.testdata.ts +0 -171
package/src/__tests__/__snapshots__/perseus-markdown.test.ts.snap +0 -507
package/src/__tests__/__snapshots__/renderer.test.tsx.snap +0 -525
package/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap +0 -285
package/src/__tests__/a11y.test.ts +0 -303
package/src/__tests__/article-renderer.test.tsx +0 -130
package/src/__tests__/error-boundary.test.tsx +0 -76
package/src/__tests__/extract-perseus-data.test.ts +0 -1027
package/src/__tests__/init.test.ts +0 -10
package/src/__tests__/jipt-paragraphs.test.ts +0 -32
package/src/__tests__/mock-asset-loading-widget.tsx +0 -53
package/src/__tests__/mock-widget.tsx +0 -33
package/src/__tests__/perseus-markdown.test.ts +0 -764
package/src/__tests__/renderability.test.ts +0 -480
package/src/__tests__/renderer-api.test.tsx +0 -302
package/src/__tests__/renderer.test.tsx +0 -1816
package/src/__tests__/server-item-renderer.test.tsx +0 -582
package/src/__tests__/test-items/image-item.ts +0 -24
package/src/__tests__/test-items/input-number-1-item.ts +0 -26
package/src/__tests__/test-items/input-number-2-item.ts +0 -38
package/src/__tests__/test-items/table-item.ts +0 -29
package/src/__tests__/tex-wrangler.test.ts +0 -82
package/src/__tests__/util.test.ts +0 -40
package/src/__tests__/widget-container.test.tsx +0 -126
package/src/__tests__/widgets.test.ts +0 -91
package/src/a11y.ts +0 -45
package/src/all-widgets.ts +0 -9
package/src/article-renderer.tsx +0 -237
package/src/asset-context.ts +0 -30
package/src/basic-widgets.ts +0 -16
package/src/components/__stories__/button-group.stories.tsx +0 -55
package/src/components/__stories__/fixed-to-responsive.stories.tsx +0 -141
package/src/components/__stories__/graph.stories.tsx +0 -28
package/src/components/__stories__/graphie.stories.tsx +0 -33
package/src/components/__stories__/hud.stories.tsx +0 -35
package/src/components/__stories__/icon.stories.tsx +0 -63
package/src/components/__stories__/image-loader.stories.tsx +0 -63
package/src/components/__stories__/info-tip.stories.tsx +0 -31
package/src/components/__stories__/inline-icon.stories.tsx +0 -40
package/src/components/__stories__/input-with-examples.stories.tsx +0 -53
package/src/components/__stories__/lint.stories.tsx +0 -86
package/src/components/__stories__/math-input.stories.tsx +0 -43
package/src/components/__stories__/math-output.stories.tsx +0 -23
package/src/components/__stories__/multi-button-group.stories.tsx +0 -66
package/src/components/__stories__/number-input.stories.tsx +0 -41
package/src/components/__stories__/prop-check-box.stories.tsx +0 -65
package/src/components/__stories__/range-input.stories.tsx +0 -29
package/src/components/__stories__/simple-keypad-input.stories.tsx +0 -27
package/src/components/__stories__/sortable.stories.tsx +0 -77
package/src/components/__stories__/stub-tag-editor.stories.tsx +0 -45
package/src/components/__stories__/svg-image.stories.tsx +0 -74
package/src/components/__stories__/tex.stories.tsx +0 -23
package/src/components/__stories__/text-input.stories.tsx +0 -33
package/src/components/__stories__/text-list-editor.stories.tsx +0 -32
package/src/components/__stories__/tooltip.stories.tsx +0 -52
package/src/components/__stories__/zoomable-tex.stories.tsx +0 -41
package/src/components/__stories__/zoomable.stories.tsx +0 -49
package/src/components/__testdata__/sorter.testdata.ts +0 -19
package/src/components/__tests__/__snapshots__/sortable.test.tsx.snap +0 -163
package/src/components/__tests__/__snapshots__/sorter.test.tsx.snap +0 -265
package/src/components/__tests__/math-input.test.tsx +0 -147
package/src/components/__tests__/number-input.test.tsx +0 -128
package/src/components/__tests__/sortable.test.tsx +0 -269
package/src/components/__tests__/sorter.test.tsx +0 -114
package/src/components/__tests__/zoomable.test.tsx +0 -399
package/src/components/button-group.tsx +0 -130
package/src/components/constants.ts +0 -14
package/src/components/fixed-to-responsive.tsx +0 -169
package/src/components/graph.tsx +0 -444
package/src/components/graphie-classes.ts +0 -153
package/src/components/graphie-movables.ts +0 -338
package/src/components/graphie.tsx +0 -400
package/src/components/highlighting/highlightable-content.tsx +0 -240
package/src/components/highlighting/highlights.ts +0 -207
package/src/components/highlighting/ranges.ts +0 -304
package/src/components/highlighting/types.ts +0 -73
package/src/components/highlighting/ui/highlight-renderer.tsx +0 -172
package/src/components/highlighting/ui/highlight-set-renderer.tsx +0 -185
package/src/components/highlighting/ui/highlight-tooltip.tsx +0 -141
package/src/components/highlighting/ui/highlighting-ui.tsx +0 -143
package/src/components/highlighting/ui/selection-tracker.tsx +0 -186
package/src/components/highlighting/ui/types.ts +0 -21
package/src/components/highlighting/ui/util.ts +0 -165
package/src/components/highlighting/word-indexer.tsx +0 -152
package/src/components/hud.tsx +0 -167
package/src/components/icon.tsx +0 -141
package/src/components/image-loader.tsx +0 -177
package/src/components/info-tip/info-tip.tsx +0 -144
package/src/components/info-tip.tsx +0 -39
package/src/components/inline-icon.tsx +0 -60
package/src/components/input-with-examples.tsx +0 -249
package/src/components/lint.tsx +0 -459
package/src/components/math-input.tsx +0 -474
package/src/components/math-output.tsx +0 -134
package/src/components/multi-button-group.tsx +0 -135
package/src/components/number-input.tsx +0 -249
package/src/components/prop-check-box.tsx +0 -79
package/src/components/range-input.tsx +0 -60
package/src/components/simple-keypad-input.tsx +0 -88
package/src/components/sortable.tsx +0 -958
package/src/components/stub-tag-editor.tsx +0 -53
package/src/components/svg-image.tsx +0 -779
package/src/components/tex.tsx +0 -67
package/src/components/text-input.tsx +0 -129
package/src/components/text-list-editor.tsx +0 -166
package/src/components/tooltip.tsx +0 -410
package/src/components/visibility-observer/__stories__/visibility-observer.stories.tsx +0 -141
package/src/components/visibility-observer/create-visibility-observer.ts +0 -108
package/src/components/visibility-observer/get-scroll-parent.ts +0 -46
package/src/components/visibility-observer/visibility-observer.tsx +0 -124
package/src/components/zoomable-tex.tsx +0 -78
package/src/components/zoomable.tsx +0 -304
package/src/components.ts +0 -15
package/src/definition-context.tsx +0 -59
package/src/dependencies.ts +0 -40
package/src/error-boundary.tsx +0 -70
package/src/extra-widgets.ts +0 -75
package/src/hint-renderer.tsx +0 -151
package/src/hints-renderer.tsx +0 -372
package/src/icon-paths.ts +0 -119
package/src/index.ts +0 -171
package/src/init.ts +0 -56
package/src/interaction-tracker.ts +0 -62
package/src/interactive2/__tests__/movable-mock.ts +0 -55
package/src/interactive2/__tests__/movable-point.test.ts +0 -144
package/src/interactive2/interactive-util.test.ts +0 -93
package/src/interactive2/interactive-util.ts +0 -159
package/src/interactive2/movable-helper-methods.ts +0 -166
package/src/interactive2/movable-line-options.ts +0 -419
package/src/interactive2/movable-line.ts +0 -307
package/src/interactive2/movable-point-options.ts +0 -224
package/src/interactive2/movable-point.tsx +0 -585
package/src/interactive2/movable-polygon-options.ts +0 -389
package/src/interactive2/movable-polygon.ts +0 -360
package/src/interactive2/movable.test.ts +0 -249
package/src/interactive2/movable.ts +0 -437
package/src/interactive2/objective_.ts +0 -79
package/src/interactive2/types.ts +0 -17
package/src/interactive2/wrapped-defaults.ts +0 -87
package/src/interactive2/wrapped-ellipse.ts +0 -94
package/src/interactive2/wrapped-line.ts +0 -116
package/src/interactive2/wrapped-path.ts +0 -51
package/src/interactive2.ts +0 -70
package/src/item-version.ts +0 -10
package/src/jipt-paragraphs.ts +0 -49
package/src/jquery.mobile.vmouse.js +0 -545
package/src/loading-context.ts +0 -21
package/src/logging/log.test.ts +0 -39
package/src/logging/log.ts +0 -97
package/src/mixins/__tests__/widget-prop-denylist.test.ts +0 -21
package/src/mixins/changeable.ts +0 -133
package/src/mixins/editor-jsonify.ts +0 -13
package/src/mixins/widget-jsonify-deprecated.ts +0 -23
package/src/mixins/widget-prop-denylist.ts +0 -48
package/src/multi-items/__stories__/multi-renderer.stories.tsx +0 -83
package/src/multi-items/__testdata__/multi-renderer.testdata.ts +0 -172
package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap +0 -1164
package/src/multi-items/__tests__/items.test.ts +0 -240
package/src/multi-items/__tests__/multi-renderer.test.tsx +0 -914
package/src/multi-items/__tests__/prop-type-builders.test.ts +0 -133
package/src/multi-items/__tests__/shapes.test.ts +0 -43
package/src/multi-items/__tests__/trees.test.ts +0 -317
package/src/multi-items/item-types.ts +0 -56
package/src/multi-items/items.ts +0 -176
package/src/multi-items/multi-renderer.tsx +0 -569
package/src/multi-items/prop-type-builders.ts +0 -106
package/src/multi-items/shape-types.ts +0 -52
package/src/multi-items/shapes.ts +0 -52
package/src/multi-items/tree-types.ts +0 -47
package/src/multi-items/trees.ts +0 -360
package/src/multi-items.ts +0 -75
package/src/perseus-api.tsx +0 -188
package/src/perseus-env.ts +0 -27
package/src/perseus-error.ts +0 -17
package/src/perseus-markdown.tsx +0 -405
package/src/perseus-types.ts +0 -1366
package/src/perseus-version.ts +0 -9
package/src/question-paragraph.tsx +0 -34
package/src/renderability.ts +0 -109
package/src/renderer.tsx +0 -2000
package/src/server-item-renderer.tsx +0 -495
package/src/sigfigs.ts +0 -490
package/src/styles/articles.less +0 -749
package/src/styles/constants.ts +0 -94
package/src/styles/global-constants.ts +0 -343
package/src/styles/global-styles.ts +0 -306
package/src/styles/khan-exercise.css +0 -1468
package/src/styles/media-queries.ts +0 -47
package/src/styles/perseus-renderer.less +0 -732
package/src/styles/shared.ts +0 -130
package/src/styles/util.less +0 -47
package/src/styles/variables.boostrap.less +0 -277
package/src/styles/variables.less +0 -56
package/src/styles/variables.shared.less +0 -340
package/src/styles/widgets/categorizer.less +0 -38
package/src/styles/widgets/dropdown.less +0 -3
package/src/styles/widgets/expression.less +0 -65
package/src/styles/widgets/graded-group.less +0 -36
package/src/styles/widgets/grapher.less +0 -12
package/src/styles/widgets/group.less +0 -19
package/src/styles/widgets/image.less +0 -54
package/src/styles/widgets/interactive-graph.less +0 -64
package/src/styles/widgets/label-image.less +0 -57
package/src/styles/widgets/matcher.less +0 -8
package/src/styles/widgets/matrix.less +0 -126
package/src/styles/widgets/measurer.less +0 -20
package/src/styles/widgets/orderer.less +0 -98
package/src/styles/widgets/passage.less +0 -154
package/src/styles/widgets/plotter.less +0 -31
package/src/styles/widgets/radio.less +0 -58
package/src/styles/widgets/reaction-diagram.less +0 -35
package/src/styles/widgets/sequence.less +0 -5
package/src/styles/widgets/sortable.less +0 -113
package/src/styles/widgets/table.less +0 -57
package/src/styles/widgets/unit.less +0 -15
package/src/tex-wrangler.ts +0 -182
package/src/translation-linter.ts +0 -126
package/src/traversal.ts +0 -138
package/src/types.ts +0 -513
package/src/util/a11y.ts +0 -23
package/src/util/answer-types.test.ts +0 -114
package/src/util/answer-types.ts +0 -876
package/src/util/colors.ts +0 -93
package/src/util/drawing-transform.test.ts +0 -67
package/src/util/drawing-transform.ts +0 -102
package/src/util/extract-perseus-data.ts +0 -539
package/src/util/fix-passage-refs.ts +0 -121
package/src/util/geometry.test.ts +0 -75
package/src/util/geometry.ts +0 -312
package/src/util/graph-bounds.ts +0 -23
package/src/util/graph-utils.ts +0 -15
package/src/util/graphie.test.ts +0 -1277
package/src/util/graphie.ts +0 -1576
package/src/util/interactive.ts +0 -4174
package/src/util/interval.ts +0 -4
package/src/util/katex-preprocess.ts +0 -14
package/src/util/math.test.ts +0 -11
package/src/util/math.ts +0 -294
package/src/util/mobile-native-utils.test.ts +0 -22
package/src/util/mobile-native-utils.ts +0 -12
package/src/util/parse-perseus-json.test.ts +0 -10
package/src/util/parse-perseus-json.ts +0 -13
package/src/util/react-render.tsx +0 -27
package/src/util/register-all-widgets-for-testing.ts +0 -13
package/src/util/scroll-utils.ts +0 -155
package/src/util/sizing-utils.ts +0 -46
package/src/util/tex.ts +0 -73
package/src/util/url-utils.ts +0 -34
package/src/util.graphie.test.ts +0 -45
package/src/util.graphie.ts +0 -59
package/src/util.ts +0 -966
package/src/version.ts +0 -10
package/src/widget-container.tsx +0 -199
package/src/widgets/__stories__/categorizer.stories.tsx +0 -14
package/src/widgets/__stories__/cs-program.stories.tsx +0 -14
package/src/widgets/__stories__/definition.stories.tsx +0 -114
package/src/widgets/__stories__/dropdown.stories.tsx +0 -14
package/src/widgets/__stories__/explanation.stories.tsx +0 -18
package/src/widgets/__stories__/expression.stories.tsx +0 -145
package/src/widgets/__stories__/graded-group-set.stories.tsx +0 -31
package/src/widgets/__stories__/graded-group.stories.tsx +0 -31
package/src/widgets/__stories__/grapher.stories.tsx +0 -46
package/src/widgets/__stories__/group.stories.tsx +0 -14
package/src/widgets/__stories__/iframe.stories.tsx +0 -14
package/src/widgets/__stories__/image.stories.tsx +0 -85
package/src/widgets/__stories__/input-number.stories.tsx +0 -101
package/src/widgets/__stories__/interaction.stories.tsx +0 -14
package/src/widgets/__stories__/interactive-graph.stories.tsx +0 -60
package/src/widgets/__stories__/label-image.stories.tsx +0 -130
package/src/widgets/__stories__/matcher.stories.tsx +0 -14
package/src/widgets/__stories__/matrix.stories.tsx +0 -14
package/src/widgets/__stories__/number-line.stories.tsx +0 -14
package/src/widgets/__stories__/numeric-input.stories.tsx +0 -105
package/src/widgets/__stories__/orderer.stories.tsx +0 -18
package/src/widgets/__stories__/passage-ref.stories.tsx +0 -33
package/src/widgets/__stories__/passage.stories.tsx +0 -39
package/src/widgets/__stories__/plotter.stories.tsx +0 -27
package/src/widgets/__stories__/radio.stories.tsx +0 -86
package/src/widgets/__stories__/random-widgets.stories.tsx +0 -59
package/src/widgets/__stories__/sorter.stories.tsx +0 -14
package/src/widgets/__stories__/test-keypad-context-wrapper.tsx +0 -66
package/src/widgets/__stories__/unit.stories.tsx +0 -28
package/src/widgets/__stories__/video-transcript-link.stories.tsx +0 -23
package/src/widgets/__stories__/video.stories.tsx +0 -22
package/src/widgets/__testdata__/base-radio.testdata.ts +0 -21
package/src/widgets/__testdata__/categorizer.testdata.ts +0 -89
package/src/widgets/__testdata__/cs-program.testdata.ts +0 -27
package/src/widgets/__testdata__/dropdown.testdata.ts +0 -71
package/src/widgets/__testdata__/explanation.testdata.ts +0 -85
package/src/widgets/__testdata__/expression.testdata.ts +0 -198
package/src/widgets/__testdata__/graded-group-set.testdata.ts +0 -356
package/src/widgets/__testdata__/graded-group.testdata.ts +0 -77
package/src/widgets/__testdata__/grapher.testdata.ts +0 -374
package/src/widgets/__testdata__/group.testdata.ts +0 -153
package/src/widgets/__testdata__/iframe.testdata.ts +0 -35
package/src/widgets/__testdata__/image.testdata.ts +0 -36
package/src/widgets/__testdata__/input-number.testdata.ts +0 -72
package/src/widgets/__testdata__/interaction.testdata.ts +0 -262
package/src/widgets/__testdata__/interactive-graph-random.testdata.ts +0 -269
package/src/widgets/__testdata__/interactive-graph.testdata.ts +0 -644
package/src/widgets/__testdata__/label-image.testdata.ts +0 -308
package/src/widgets/__testdata__/matcher.testdata.ts +0 -33
package/src/widgets/__testdata__/matrix.testdata.ts +0 -28
package/src/widgets/__testdata__/number-line.testdata.ts +0 -30
package/src/widgets/__testdata__/numeric-input.testdata.ts +0 -265
package/src/widgets/__testdata__/orderer.testdata.ts +0 -123
package/src/widgets/__testdata__/passage-ref.testdata.ts +0 -101
package/src/widgets/__testdata__/passage.testdata.ts +0 -95
package/src/widgets/__testdata__/plotter.testdata.ts +0 -36
package/src/widgets/__testdata__/radio.testdata.ts +0 -324
package/src/widgets/__testdata__/randomizers.ts +0 -51
package/src/widgets/__testdata__/sorter.testdata.ts +0 -19
package/src/widgets/__testdata__/video.testdata.ts +0 -61
package/src/widgets/__tests__/__snapshots__/categorizer.test.ts.snap +0 -940
package/src/widgets/__tests__/__snapshots__/cs-program.test.ts.snap +0 -67
package/src/widgets/__tests__/__snapshots__/definition.test.ts.snap +0 -97
package/src/widgets/__tests__/__snapshots__/dropdown.test.ts.snap +0 -133
package/src/widgets/__tests__/__snapshots__/explanation.test.ts.snap +0 -425
package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt.test.ts.snap +0 -729
package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap +0 -339
package/src/widgets/__tests__/__snapshots__/graded-group.test.ts.snap +0 -801
package/src/widgets/__tests__/__snapshots__/grapher.test.ts.snap +0 -2673
package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap +0 -1211
package/src/widgets/__tests__/__snapshots__/iframe.test.ts.snap +0 -61
package/src/widgets/__tests__/__snapshots__/image.test.ts.snap +0 -378
package/src/widgets/__tests__/__snapshots__/input-number.test.ts.snap +0 -495
package/src/widgets/__tests__/__snapshots__/interaction.test.ts.snap +0 -292
package/src/widgets/__tests__/__snapshots__/interactive-graph.test.ts.snap +0 -2889
package/src/widgets/__tests__/__snapshots__/matcher.test.tsx.snap +0 -883
package/src/widgets/__tests__/__snapshots__/matrix.test.ts.snap +0 -514
package/src/widgets/__tests__/__snapshots__/number-line.test.ts.snap +0 -814
package/src/widgets/__tests__/__snapshots__/numeric-input.test.ts.snap +0 -470
package/src/widgets/__tests__/__snapshots__/orderer.test.ts.snap +0 -243
package/src/widgets/__tests__/__snapshots__/passage-ref.test.ts.snap +0 -434
package/src/widgets/__tests__/__snapshots__/passage.test.tsx.snap +0 -1956
package/src/widgets/__tests__/__snapshots__/plotter.test.tsx.snap +0 -827
package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap +0 -4237
package/src/widgets/__tests__/__snapshots__/unit.test.tsx.snap +0 -20
package/src/widgets/__tests__/__snapshots__/video.test.ts.snap +0 -153
package/src/widgets/__tests__/categorizer.test.ts +0 -203
package/src/widgets/__tests__/cs-program.test.ts +0 -43
package/src/widgets/__tests__/definition.test.ts +0 -136
package/src/widgets/__tests__/dropdown.test.ts +0 -105
package/src/widgets/__tests__/explanation.test.ts +0 -198
package/src/widgets/__tests__/expression-mobile.test.tsx +0 -363
package/src/widgets/__tests__/expression.test.tsx +0 -484
package/src/widgets/__tests__/graded-group-set-jipt.test.ts +0 -30
package/src/widgets/__tests__/graded-group-set.test.ts +0 -288
package/src/widgets/__tests__/graded-group.test.ts +0 -232
package/src/widgets/__tests__/grapher.cypress.ts +0 -576
package/src/widgets/__tests__/grapher.test.ts +0 -33
package/src/widgets/__tests__/group.test.tsx +0 -510
package/src/widgets/__tests__/iframe.test.ts +0 -45
package/src/widgets/__tests__/image.test.ts +0 -62
package/src/widgets/__tests__/input-number.test.ts +0 -354
package/src/widgets/__tests__/interaction.test.ts +0 -31
package/src/widgets/__tests__/interactive-graph.cypress.ts +0 -815
package/src/widgets/__tests__/interactive-graph.test.ts +0 -106
package/src/widgets/__tests__/matcher.test.tsx +0 -176
package/src/widgets/__tests__/matrix.test.ts +0 -82
package/src/widgets/__tests__/number-line.test.ts +0 -79
package/src/widgets/__tests__/numeric-input.test.ts +0 -575
package/src/widgets/__tests__/orderer.test.ts +0 -73
package/src/widgets/__tests__/passage-ref.test.ts +0 -168
package/src/widgets/__tests__/passage.test.tsx +0 -224
package/src/widgets/__tests__/plotter.test.tsx +0 -69
package/src/widgets/__tests__/radio/base-radio.test.tsx +0 -470
package/src/widgets/__tests__/radio/choice-icon.test.tsx +0 -90
package/src/widgets/__tests__/radio/choice.test.tsx +0 -310
package/src/widgets/__tests__/radio/focus-ring.test.tsx +0 -22
package/src/widgets/__tests__/radio/option-status.test.tsx +0 -77
package/src/widgets/__tests__/radio.test.ts +0 -807
package/src/widgets/__tests__/randomizers.test.ts +0 -53
package/src/widgets/__tests__/renderQuestion.tsx +0 -101
package/src/widgets/__tests__/unit.test.tsx +0 -168
package/src/widgets/__tests__/video.test.ts +0 -69
package/src/widgets/categorizer.tsx +0 -344
package/src/widgets/cs-program.tsx +0 -227
package/src/widgets/definition.tsx +0 -121
package/src/widgets/deprecated-standin/__stories__/deprecated-standin.stories.tsx +0 -30
package/src/widgets/deprecated-standin/__tests__/__snapshots__/deprecated-standin.test.ts.snap +0 -70
package/src/widgets/deprecated-standin/__tests__/deprecated-standin.test.ts +0 -93
package/src/widgets/deprecated-standin/index.tsx +0 -58
package/src/widgets/dropdown.tsx +0 -142
package/src/widgets/explanation.tsx +0 -317
package/src/widgets/expression.tsx +0 -707
package/src/widgets/graded-group-answer-bar.tsx +0 -142
package/src/widgets/graded-group-set.tsx +0 -338
package/src/widgets/graded-group.tsx +0 -471
package/src/widgets/grapher/util.tsx +0 -799
package/src/widgets/grapher.tsx +0 -660
package/src/widgets/group.tsx +0 -195
package/src/widgets/iframe.tsx +0 -195
package/src/widgets/image.tsx +0 -312
package/src/widgets/input-number.tsx +0 -412
package/src/widgets/interaction/arrow-picker.tsx +0 -38
package/src/widgets/interaction/color-picker.tsx +0 -69
package/src/widgets/interaction/dash-picker.tsx +0 -45
package/src/widgets/interaction/element-container.tsx +0 -100
package/src/widgets/interaction.tsx +0 -826
package/src/widgets/interactive-graph.tsx +0 -2597
package/src/widgets/label-image/__stories__/answer-choices.stories.tsx +0 -91
package/src/widgets/label-image/__stories__/answer-pill.stories.tsx +0 -62
package/src/widgets/label-image/__stories__/marker.stories.tsx +0 -171
package/src/widgets/label-image/__tests__/answer-pill.test.tsx +0 -75
package/src/widgets/label-image/__tests__/hide-answers-toggle.test.tsx +0 -39
package/src/widgets/label-image/answer-choices.tsx +0 -88
package/src/widgets/label-image/answer-pill.tsx +0 -103
package/src/widgets/label-image/hide-answers-toggle.tsx +0 -40
package/src/widgets/label-image/marker.tsx +0 -268
package/src/widgets/label-image/strings.ts +0 -5
package/src/widgets/label-image/types.ts +0 -27
package/src/widgets/label-image.test.ts +0 -928
package/src/widgets/label-image.tsx +0 -819
package/src/widgets/lights-puzzle.tsx +0 -359
package/src/widgets/matcher.tsx +0 -298
package/src/widgets/matrix.tsx +0 -634
package/src/widgets/measurer.tsx +0 -222
package/src/widgets/molecule/__tests__/layout.test.ts +0 -162
package/src/widgets/molecule/__tests__/parser.test.ts +0 -155
package/src/widgets/molecule/molecule-drawing.ts +0 -173
package/src/widgets/molecule/molecule-layout.ts +0 -362
package/src/widgets/molecule/smiles-parser.ts +0 -296
package/src/widgets/molecule.tsx +0 -172
package/src/widgets/number-line.tsx +0 -862
package/src/widgets/numeric-input.tsx +0 -576
package/src/widgets/orderer.tsx +0 -786
package/src/widgets/passage/__tests__/passage-markdown.test.ts +0 -376
package/src/widgets/passage/passage-markdown.tsx +0 -475
package/src/widgets/passage-ref-target.tsx +0 -76
package/src/widgets/passage-ref.tsx +0 -213
package/src/widgets/passage.tsx +0 -582
package/src/widgets/plotter.tsx +0 -1194
package/src/widgets/radio/__stories__/base-radio.stories.tsx +0 -196
package/src/widgets/radio/__stories__/choice-icon.stories.tsx +0 -166
package/src/widgets/radio/__stories__/choice-none-above.stories.tsx +0 -40
package/src/widgets/radio/__stories__/choice.stories.tsx +0 -137
package/src/widgets/radio/__stories__/focus-ring.stories.tsx +0 -43
package/src/widgets/radio/__stories__/option-status.stories.tsx +0 -103
package/src/widgets/radio/base-radio.tsx +0 -511
package/src/widgets/radio/choice-a11y-text.ts +0 -61
package/src/widgets/radio/choice-icon/choice-icon.tsx +0 -218
package/src/widgets/radio/choice-icon/cross-out-line.tsx +0 -51
package/src/widgets/radio/choice-icon/shared-styles.ts +0 -15
package/src/widgets/radio/choice-none-above.tsx +0 -56
package/src/widgets/radio/choice.jsx.fixture.ts +0 -45
package/src/widgets/radio/choice.tsx +0 -359
package/src/widgets/radio/focus-ring.tsx +0 -57
package/src/widgets/radio/option-status.tsx +0 -98
package/src/widgets/radio/util.test.ts +0 -18
package/src/widgets/radio/util.ts +0 -31
package/src/widgets/radio/widget.tsx +0 -520
package/src/widgets/radio.ts +0 -157
package/src/widgets/reaction-diagram.tsx +0 -144
package/src/widgets/sequence.tsx +0 -142
package/src/widgets/simulator.tsx +0 -829
package/src/widgets/sorter.tsx +0 -155
package/src/widgets/table.tsx +0 -393
package/src/widgets/unit.tsx +0 -374
package/src/widgets/video-transcript-link.test.tsx +0 -213
package/src/widgets/video-transcript-link.tsx +0 -84
package/src/widgets/video.tsx +0 -135
package/src/widgets.ts +0 -489
package/src/zoom.ts +0 -555
package/tsconfig-build.json +0 -26
package/tsconfig-build.tsbuildinfo +0 -1

package/src/widgets/__tests__/__snapshots__/interactive-graph.test.ts.snap DELETED Viewed

@@ -1,2889 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`interactive-graph widget question Shoud render predictably: after interaction 1`] = `
-<div>
-  <div
-    class="perseus-renderer perseus-renderer-responsive"
-  >
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="0"
-    >
-      <div
-        class="paragraph"
-      >
-        <strong>
-          Drag the vertices of the triangle below to draw a right triangle with side lengths
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              3
-            </span>
-            <span />
-          </span>
-          ,
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              4
-            </span>
-            <span />
-          </span>
-          , and
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              5
-            </span>
-            <span />
-          </span>
-          .
-        </strong>
-        <div
-          class="perseus-widget-container widget-nohighlight widget-block"
-        >
-          <div
-            class="perseus-widget perseus-widget-interactive-graph"
-            style="width: 400px; height: 400px;"
-          >
-            <div
-              class="graphie-container above-scratchpad"
-              style="width: 400px; height: 400px;"
-            >
-              <div
-                class="graphie"
-                style="position: relative; width: 400px; height: 400px;"
-              >
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <path
-                    d="M371.42857142857144,228.57142857142858L142.85714285714286,57.142857142857146L142.85714285714286,228.57142857142858Z"
-                    fill="#000000"
-                    opacity="0"
-                    stroke="#000000"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                  />
-                </svg>
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <path
-                    d="M371.42857142857144,228.57142857142858L142.85714285714286,57.142857142857146L142.85714285714286,228.57142857142858Z"
-                    fill="#71b307"
-                    fill-opacity="0"
-                    stroke="#71b307"
-                    stroke-width="2"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; fill-opacity: 0;"
-                  />
-                  <path
-                    d="M156.23200184286875,228.57142857142858L156.23200184286875,215.1965695857027"
-                    fill="none"
-                    stroke="#6495ed"
-                    stroke-width="1"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
-                  />
-                  <path
-                    d="M142.85714285714286,215.1965695857027L156.23200184286875,215.1965695857027"
-                    fill="none"
-                    stroke="#6495ed"
-                    stroke-width="1"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
-                  />
-                </svg>
-                <div
-                  style="position: absolute; left: 0px; top: 0px;"
-                >
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 358.42857142857144px; top: 215.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 129.85714285714286px; top: 44.142857142857146px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 129.85714285714286px; top: 215.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                </div>
-                <div
-                  style="position: absolute; left: 0px; top: 0px; z-index: 2;"
-                >
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 347.42857142857144px; top: 204.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 118.85714285714286px; top: 33.142857142857146px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 118.85714285714286px; top: 204.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                </div>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula="5.0"
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 269.14285714285717px; top: 126.85714285714285px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula="3.0"
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 122.85714285714286px; top: 142.85714285714286px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula="4.0"
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 257.14285714285717px; top: 248.57142857142856px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-exports[`interactive-graph widget question Shoud render predictably: after interaction 2`] = `
-<div>
-  <div
-    class="perseus-renderer perseus-renderer-responsive"
-  >
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="0"
-    >
-      <div
-        class="paragraph"
-      >
-        <strong>
-          Plot the image of triangle
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              \\triangle ABC
-            </span>
-            <span />
-          </span>
-           under a reflection across line
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              \\ell
-            </span>
-            <span />
-          </span>
-          .
-        </strong>
-      </div>
-    </div>
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="1"
-    >
-      <div
-        class="paragraph"
-      >
-        <div
-          class="perseus-widget-container widget-nohighlight widget-block"
-        >
-          <div
-            class="perseus-widget perseus-widget-interactive-graph"
-            style="width: 400px; height: 400px;"
-          >
-            <div
-              class="graphie-container above-scratchpad"
-              style="width: 400px; height: 400px;"
-            >
-              <div
-                class="unresponsive-svg-image"
-                style="width: 400px; height: 400px;"
-              >
-                <span
-                  style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
-                >
-                  <div
-                    class="default_xu2jcg-o_O-spinnerContainer_agrn11"
-                  >
-                    <svg
-                      height="48"
-                      viewBox="0 0 48 48"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
-                        d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
-                        fill-rule="nonzero"
-                      />
-                    </svg>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="graphie"
-                style="position: relative; width: 400px; height: 400px;"
-              >
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <path
-                    d="M50,375L225,300L125,300Z"
-                    fill="#000000"
-                    opacity="0"
-                    stroke="#000000"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                  />
-                </svg>
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <path
-                    d="M50,375L225,300L125,300Z"
-                    fill="#71b307"
-                    fill-opacity="0"
-                    stroke="#71b307"
-                    stroke-width="2"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; fill-opacity: 0;"
-                  />
-                </svg>
-                <div
-                  style="position: absolute; left: 0px; top: 0px;"
-                >
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 37px; top: 362px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 212px; top: 287px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 112px; top: 287px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                </div>
-                <div
-                  style="position: absolute; left: 0px; top: 0px; z-index: 2;"
-                >
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 26px; top: 351px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 201px; top: 276px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 101px; top: 276px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                </div>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-exports[`interactive-graph widget question Shoud render predictably: after interaction 3`] = `
-<div>
-  <div
-    class="perseus-renderer perseus-renderer-responsive"
-  >
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="0"
-    >
-      <div
-        class="paragraph"
-      >
-        We want to find the zeros of this polynomial:
-      </div>
-    </div>
-    <div
-      class="paragraph perseus-paragraph-centered"
-      data-perseus-paragraph-index="1"
-    >
-      <div
-        class="perseus-block-math"
-      >
-        <div
-          class="perseus-block-math-inner"
-          style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
-        >
-          <span
-            class="mock-TeX"
-          >
-            p(x)=x(2x+5)(x+1)
-          </span>
-        </div>
-      </div>
-    </div>
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="2"
-    >
-      <div
-        class="paragraph"
-      >
-        <strong>
-          Plot all the zeros (
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              x
-            </span>
-            <span />
-          </span>
-          -intercepts) of the polynomial in the interactive graph.
-        </strong>
-      </div>
-    </div>
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="3"
-    >
-      <div
-        class="paragraph"
-      >
-        <div
-          class="perseus-widget-container widget-nohighlight widget-block"
-        >
-          <div
-            class="perseus-widget perseus-widget-interactive-graph"
-            style="width: 400px; height: 400px;"
-          >
-            <div
-              class="graphie-container above-scratchpad"
-              style="width: 400px; height: 400px;"
-            >
-              <div
-                class="unresponsive-svg-image"
-                style="width: 425px; height: 425px;"
-              >
-                <span
-                  style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
-                >
-                  <div
-                    class="default_xu2jcg-o_O-spinnerContainer_agrn11"
-                  >
-                    <svg
-                      height="48"
-                      viewBox="0 0 48 48"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
-                        d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
-                        fill-rule="nonzero"
-                      />
-                    </svg>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="graphie"
-                style="position: relative; width: 400px; height: 400px;"
-              >
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <rect
-                    fill="#000000"
-                    height="400"
-                    opacity="0"
-                    r="0"
-                    rx="0"
-                    ry="0"
-                    stroke="#000"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
-                    width="400"
-                    x="0"
-                    y="0"
-                  />
-                </svg>
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <image
-                    height="40"
-                    href="https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png"
-                    opacity="0.5"
-                    preserveAspectRatio="none"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"
-                    width="40"
-                    x="360"
-                    y="360"
-                  />
-                </svg>
-                <div
-                  style="font-style: italic; font-weight: bold; font-size: 32px; width: 100%; height: 100%; text-align: center; background-color: white; position: absolute; z-index: 1; transition: opacity .25s ease-in-out; opacity: 0.5;"
-                >
-                  <span
-                    style="position: relative; top: 25%;"
-                  >
-                    Click to add points
-                  </span>
-                </div>
-                <div
-                  style="position: absolute; left: 0px; top: 0px;"
-                >
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 187px; top: 187px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 62px; top: 187px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 137px; top: 187px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                </div>
-                <div
-                  style="position: absolute; left: 0px; top: 0px; z-index: 2;"
-                >
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 176px; top: 176px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 51px; top: 176px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 126px; top: 176px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-exports[`interactive-graph widget question Shoud render predictably: after interaction 4`] = `
-<div>
-  <div
-    class="perseus-renderer perseus-renderer-responsive"
-  >
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="0"
-    >
-      <div
-        class="paragraph"
-      >
-        The graph below contains quadrilateral
-        <span
-          style="white-space: nowrap;"
-        >
-          <span />
-          <span
-            class="mock-TeX"
-          >
-            TREK
-          </span>
-          <span />
-        </span>
-         and the point
-        <span
-          style="white-space: nowrap;"
-        >
-          <span />
-          <span
-            class="mock-TeX"
-          >
-            P(-8,-6)
-          </span>
-          <span />
-        </span>
-        .
-      </div>
-    </div>
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="1"
-    >
-      <div
-        class="paragraph"
-      >
-        <strong>
-          Draw the image of quadrilateral
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              TREK
-            </span>
-            <span />
-          </span>
-           under a dilation whose center is
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              P
-            </span>
-            <span />
-          </span>
-           and scale factor is
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              3
-            </span>
-            <span />
-          </span>
-          .
-        </strong>
-      </div>
-    </div>
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="2"
-    >
-      <div
-        class="paragraph"
-      >
-        <div
-          class="perseus-widget-container widget-nohighlight widget-block"
-        >
-          <div
-            class="perseus-widget perseus-widget-interactive-graph"
-            style="width: 400px; height: 400px;"
-          >
-            <div
-              class="graphie-container above-scratchpad"
-              style="width: 400px; height: 400px;"
-            >
-              <div
-                class="unresponsive-svg-image"
-                style="width: 425px; height: 425px;"
-              >
-                <span
-                  style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
-                >
-                  <div
-                    class="default_xu2jcg-o_O-spinnerContainer_agrn11"
-                  >
-                    <svg
-                      height="48"
-                      viewBox="0 0 48 48"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
-                        d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
-                        fill-rule="nonzero"
-                      />
-                    </svg>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="graphie"
-                style="position: relative; width: 400px; height: 400px;"
-              >
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <rect
-                    fill="#000000"
-                    height="400"
-                    opacity="0"
-                    r="0"
-                    rx="0"
-                    ry="0"
-                    stroke="#000"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
-                    width="400"
-                    x="0"
-                    y="0"
-                  />
-                  <path
-                    d="M116.66666666666667,266.6666666666667L266.6666666666667,16.666666666666668L266.6666666666667,266.6666666666667L216.66666666666669,216.66666666666669Z"
-                    fill="#000000"
-                    opacity="0"
-                    stroke="#000000"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                  />
-                </svg>
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <image
-                    height="40"
-                    href="https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png"
-                    opacity="0.5"
-                    preserveAspectRatio="none"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"
-                    width="40"
-                    x="360"
-                    y="360"
-                  />
-                  <path
-                    d="M116.66666666666667,266.6666666666667L266.6666666666667,16.666666666666668L266.6666666666667,266.6666666666667L216.66666666666669,216.66666666666669Z"
-                    fill="#71b307"
-                    fill-opacity="0"
-                    stroke="#71b307"
-                    stroke-width="2"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; fill-opacity: 0;"
-                  />
-                </svg>
-                <div
-                  style="font-style: italic; font-weight: bold; font-size: 32px; width: 100%; height: 100%; text-align: center; background-color: white; position: absolute; z-index: 1; transition: opacity .25s ease-in-out; opacity: 0.5;"
-                >
-                  <span
-                    style="position: relative; top: 25%;"
-                  >
-                    Click to add vertices
-                  </span>
-                </div>
-                <div
-                  style="position: absolute; left: 0px; top: 0px;"
-                >
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 103.66666666666667px; top: 253.66666666666669px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 253.66666666666669px; top: 3.666666666666668px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 253.66666666666669px; top: 253.66666666666669px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 203.66666666666669px; top: 203.66666666666669px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                </div>
-                <div
-                  style="position: absolute; left: 0px; top: 0px; z-index: 2;"
-                >
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 92.66666666666667px; top: 242.66666666666669px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 242.66666666666669px; top: -7.333333333333332px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 242.66666666666669px; top: 242.66666666666669px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 192.66666666666669px; top: 192.66666666666669px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                </div>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-exports[`interactive-graph widget question Shoud render predictably: first render 1`] = `
-<div>
-  <div
-    class="perseus-renderer perseus-renderer-responsive"
-  >
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="0"
-    >
-      <div
-        class="paragraph"
-      >
-        <strong>
-          Drag the vertices of the triangle below to draw a right triangle with side lengths
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              3
-            </span>
-            <span />
-          </span>
-          ,
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              4
-            </span>
-            <span />
-          </span>
-          , and
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              5
-            </span>
-            <span />
-          </span>
-          .
-        </strong>
-        <div
-          class="perseus-widget-container widget-nohighlight widget-block"
-        >
-          <div
-            class="perseus-widget perseus-widget-interactive-graph"
-            style="width: 400px; height: 400px;"
-          >
-            <div
-              class="graphie-container above-scratchpad"
-              style="width: 400px; height: 400px;"
-            >
-              <div
-                class="graphie"
-                style="position: relative; width: 400px; height: 400px;"
-              >
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <path
-                    d="M257.14285714285717,228.57142857142858L200,114.28571428571429L142.85714285714286,228.57142857142858Z"
-                    fill="#000000"
-                    opacity="0"
-                    stroke="#000000"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                  />
-                </svg>
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <path
-                    d="M257.14285714285717,228.57142857142858L200,114.28571428571429L142.85714285714286,228.57142857142858Z"
-                    fill="#71b307"
-                    fill-opacity="0"
-                    stroke="#71b307"
-                    stroke-width="2"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; fill-opacity: 0;"
-                  />
-                </svg>
-                <div
-                  style="position: absolute; left: 0px; top: 0px;"
-                >
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 244.14285714285717px; top: 215.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 187px; top: 101.28571428571429px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 129.85714285714286px; top: 215.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                </div>
-                <div
-                  style="position: absolute; left: 0px; top: 0px; z-index: 2;"
-                >
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 233.14285714285717px; top: 204.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 176px; top: 90.28571428571429px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 118.85714285714286px; top: 204.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                </div>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula="\\approx 2.2"
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 246.45997239142687px; top: 162.4842995185723px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula="\\approx 2.2"
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 153.54002760857313px; top: 162.48429951857227px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula="2.0"
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 248.57142857142856px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-exports[`interactive-graph widget question Shoud render predictably: first render 2`] = `
-<div>
-  <div
-    class="perseus-renderer perseus-renderer-responsive"
-  >
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="0"
-    >
-      <div
-        class="paragraph"
-      >
-        <strong>
-          Plot the image of triangle
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              \\triangle ABC
-            </span>
-            <span />
-          </span>
-           under a reflection across line
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              \\ell
-            </span>
-            <span />
-          </span>
-          .
-        </strong>
-      </div>
-    </div>
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="1"
-    >
-      <div
-        class="paragraph"
-      >
-        <div
-          class="perseus-widget-container widget-nohighlight widget-block"
-        >
-          <div
-            class="perseus-widget perseus-widget-interactive-graph"
-            style="width: 400px; height: 400px;"
-          >
-            <div
-              class="graphie-container above-scratchpad"
-              style="width: 400px; height: 400px;"
-            >
-              <div
-                class="unresponsive-svg-image"
-                style="width: 400px; height: 400px;"
-              >
-                <span
-                  style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
-                >
-                  <div
-                    class="default_xu2jcg-o_O-spinnerContainer_agrn11"
-                  >
-                    <svg
-                      height="48"
-                      viewBox="0 0 48 48"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
-                        d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
-                        fill-rule="nonzero"
-                      />
-                    </svg>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="graphie"
-                style="position: relative; width: 400px; height: 400px;"
-              >
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <path
-                    d="M275,250L200,125L125,250Z"
-                    fill="#000000"
-                    opacity="0"
-                    stroke="#000000"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                  />
-                </svg>
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <path
-                    d="M275,250L200,125L125,250Z"
-                    fill="#71b307"
-                    fill-opacity="0"
-                    stroke="#71b307"
-                    stroke-width="2"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; fill-opacity: 0;"
-                  />
-                </svg>
-                <div
-                  style="position: absolute; left: 0px; top: 0px;"
-                >
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 262px; top: 237px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 187px; top: 112px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 112px; top: 237px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="26"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
-                </div>
-                <div
-                  style="position: absolute; left: 0px; top: 0px; z-index: 2;"
-                >
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 251px; top: 226px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 176px; top: 101px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: 101px; top: 226px; transform: translateX(0px) translateY(0px) translateZ(0);"
-                  >
-                    <svg
-                      height="48"
-                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
-                </div>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-                <span
-                  class="graphie-label"
-                  data-math-formula=""
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
-                >
-                  <span
-                    class="tex-holder"
-                  />
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-exports[`interactive-graph widget question Shoud render predictably: first render 3`] = `
-<div>
-  <div
-    class="perseus-renderer perseus-renderer-responsive"
-  >
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="0"
-    >
-      <div
-        class="paragraph"
-      >
-        We want to find the zeros of this polynomial:
-      </div>
-    </div>
-    <div
-      class="paragraph perseus-paragraph-centered"
-      data-perseus-paragraph-index="1"
-    >
-      <div
-        class="perseus-block-math"
-      >
-        <div
-          class="perseus-block-math-inner"
-          style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
-        >
-          <span
-            class="mock-TeX"
-          >
-            p(x)=x(2x+5)(x+1)
-          </span>
-        </div>
-      </div>
-    </div>
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="2"
-    >
-      <div
-        class="paragraph"
-      >
-        <strong>
-          Plot all the zeros (
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              x
-            </span>
-            <span />
-          </span>
-          -intercepts) of the polynomial in the interactive graph.
-        </strong>
-      </div>
-    </div>
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="3"
-    >
-      <div
-        class="paragraph"
-      >
-        <div
-          class="perseus-widget-container widget-nohighlight widget-block"
-        >
-          <div
-            class="perseus-widget perseus-widget-interactive-graph"
-            style="width: 400px; height: 400px;"
-          >
-            <div
-              class="graphie-container above-scratchpad"
-              style="width: 400px; height: 400px;"
-            >
-              <div
-                class="unresponsive-svg-image"
-                style="width: 425px; height: 425px;"
-              >
-                <span
-                  style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
-                >
-                  <div
-                    class="default_xu2jcg-o_O-spinnerContainer_agrn11"
-                  >
-                    <svg
-                      height="48"
-                      viewBox="0 0 48 48"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
-                        d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
-                        fill-rule="nonzero"
-                      />
-                    </svg>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="graphie"
-                style="position: relative; width: 400px; height: 400px;"
-              >
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <rect
-                    fill="#000000"
-                    height="400"
-                    opacity="0"
-                    r="0"
-                    rx="0"
-                    ry="0"
-                    stroke="#000"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
-                    width="400"
-                    x="0"
-                    y="0"
-                  />
-                </svg>
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <image
-                    height="40"
-                    href="https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png"
-                    opacity="0.5"
-                    preserveAspectRatio="none"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"
-                    width="40"
-                    x="360"
-                    y="360"
-                  />
-                </svg>
-                <div
-                  style="font-style: italic; font-weight: bold; font-size: 32px; width: 100%; height: 100%; text-align: center; background-color: white; position: absolute; z-index: 1; transition: opacity .25s ease-in-out; opacity: 0.5;"
-                >
-                  <span
-                    style="position: relative; top: 25%;"
-                  >
-                    Click to add points
-                  </span>
-                </div>
-                <div
-                  style="position: absolute; left: 0px; top: 0px;"
-                />
-                <div
-                  style="position: absolute; left: 0px; top: 0px; z-index: 2;"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-exports[`interactive-graph widget question Shoud render predictably: first render 4`] = `
-<div>
-  <div
-    class="perseus-renderer perseus-renderer-responsive"
-  >
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="0"
-    >
-      <div
-        class="paragraph"
-      >
-        The graph below contains quadrilateral
-        <span
-          style="white-space: nowrap;"
-        >
-          <span />
-          <span
-            class="mock-TeX"
-          >
-            TREK
-          </span>
-          <span />
-        </span>
-         and the point
-        <span
-          style="white-space: nowrap;"
-        >
-          <span />
-          <span
-            class="mock-TeX"
-          >
-            P(-8,-6)
-          </span>
-          <span />
-        </span>
-        .
-      </div>
-    </div>
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="1"
-    >
-      <div
-        class="paragraph"
-      >
-        <strong>
-          Draw the image of quadrilateral
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              TREK
-            </span>
-            <span />
-          </span>
-           under a dilation whose center is
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              P
-            </span>
-            <span />
-          </span>
-           and scale factor is
-          <span
-            style="white-space: nowrap;"
-          >
-            <span />
-            <span
-              class="mock-TeX"
-            >
-              3
-            </span>
-            <span />
-          </span>
-          .
-        </strong>
-      </div>
-    </div>
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="2"
-    >
-      <div
-        class="paragraph"
-      >
-        <div
-          class="perseus-widget-container widget-nohighlight widget-block"
-        >
-          <div
-            class="perseus-widget perseus-widget-interactive-graph"
-            style="width: 400px; height: 400px;"
-          >
-            <div
-              class="graphie-container above-scratchpad"
-              style="width: 400px; height: 400px;"
-            >
-              <div
-                class="unresponsive-svg-image"
-                style="width: 425px; height: 425px;"
-              >
-                <span
-                  style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
-                >
-                  <div
-                    class="default_xu2jcg-o_O-spinnerContainer_agrn11"
-                  >
-                    <svg
-                      height="48"
-                      viewBox="0 0 48 48"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
-                        d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
-                        fill-rule="nonzero"
-                      />
-                    </svg>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="graphie"
-                style="position: relative; width: 400px; height: 400px;"
-              >
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <rect
-                    fill="#000000"
-                    height="400"
-                    opacity="0"
-                    r="0"
-                    rx="0"
-                    ry="0"
-                    stroke="#000"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
-                    width="400"
-                    x="0"
-                    y="0"
-                  />
-                  <path
-                    d="M0,0"
-                    fill="#000000"
-                    opacity="0"
-                    stroke="#000000"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                  />
-                </svg>
-                <svg
-                  height="400"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  version="1.1"
-                  width="400"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <image
-                    height="40"
-                    href="https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png"
-                    opacity="0.5"
-                    preserveAspectRatio="none"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"
-                    width="40"
-                    x="360"
-                    y="360"
-                  />
-                  <path
-                    d="M0,0"
-                    fill="#71b307"
-                    fill-opacity="0"
-                    stroke="#71b307"
-                    stroke-width="2"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; fill-opacity: 0;"
-                  />
-                </svg>
-                <div
-                  style="font-style: italic; font-weight: bold; font-size: 32px; width: 100%; height: 100%; text-align: center; background-color: white; position: absolute; z-index: 1; transition: opacity .25s ease-in-out; opacity: 0.5;"
-                >
-                  <span
-                    style="position: relative; top: 25%;"
-                  >
-                    Click to add vertices
-                  </span>
-                </div>
-                <div
-                  style="position: absolute; left: 0px; top: 0px;"
-                />
-                <div
-                  style="position: absolute; left: 0px; top: 0px; z-index: 2;"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;