@khanacademy/perseus 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (503) hide show
  1. package/.babelrc.js +1 -1
  2. package/CHANGELOG.md +7 -0
  3. package/dist/es/index.js +15 -1
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.css +11934 -0
  6. package/dist/index.js +15 -1
  7. package/dist/index.js.map +1 -1
  8. package/dist/strings.js +148 -1
  9. package/package.json +40 -4
  10. package/src/README.md +7 -0
  11. package/src/__stories__/item-renderer.stories.jsx +27 -0
  12. package/src/__stories__/server-item-renderer.stories.jsx +27 -0
  13. package/src/__testdata__/item-renderer_testdata.js +161 -0
  14. package/src/__testdata__/renderer_testdata.js +123 -0
  15. package/src/__tests__/__snapshots__/item-renderer_test.jsx.snap +233 -0
  16. package/src/__tests__/__snapshots__/perseus-markdown_test.jsx.snap +516 -0
  17. package/src/__tests__/__snapshots__/pure-markdown_test.js.snap +113 -0
  18. package/src/__tests__/__snapshots__/renderer_test.jsx.snap +576 -0
  19. package/src/__tests__/__snapshots__/server-item-renderer_test.jsx.snap +306 -0
  20. package/src/__tests__/a11y_test.jsx +304 -0
  21. package/src/__tests__/item-renderer_test.jsx +892 -0
  22. package/src/__tests__/mock-asset-loading-widget.jsx +57 -0
  23. package/src/__tests__/mock-widget.jsx +35 -0
  24. package/src/__tests__/perseus-markdown_test.jsx +747 -0
  25. package/src/__tests__/pure-markdown_test.js +552 -0
  26. package/src/__tests__/renderability_test.jsx +481 -0
  27. package/src/__tests__/renderer-api_test.jsx +333 -0
  28. package/src/__tests__/renderer_test.jsx +1792 -0
  29. package/src/__tests__/server-item-renderer_test.jsx +516 -0
  30. package/src/__tests__/test-items/image-item.js +25 -0
  31. package/src/__tests__/test-items/input-number-1-item.js +27 -0
  32. package/src/__tests__/test-items/input-number-2-item.js +39 -0
  33. package/src/__tests__/test-items/table-item.js +30 -0
  34. package/src/__tests__/tex-wrangler_test.js +83 -0
  35. package/src/__tests__/util_test.js +41 -0
  36. package/src/a11y.js +46 -0
  37. package/src/all-widgets.js +9 -0
  38. package/src/article-renderer.jsx +215 -0
  39. package/src/asset-context.js +30 -0
  40. package/src/basic-widgets.js +13 -0
  41. package/src/components/__stories__/button-group.stories.jsx +61 -0
  42. package/src/components/__stories__/fixed-to-responsive.stories.jsx +132 -0
  43. package/src/components/__stories__/graph.stories.jsx +27 -0
  44. package/src/components/__stories__/graphie.stories.jsx +28 -0
  45. package/src/components/__stories__/hud.stories.jsx +36 -0
  46. package/src/components/__stories__/icon.stories.jsx +56 -0
  47. package/src/components/__stories__/image-loader.stories.jsx +60 -0
  48. package/src/components/__stories__/info-tip.stories.jsx +33 -0
  49. package/src/components/__stories__/inline-icon.stories.jsx +39 -0
  50. package/src/components/__stories__/input-with-examples.stories.jsx +51 -0
  51. package/src/components/__stories__/lint.stories.jsx +40 -0
  52. package/src/components/__stories__/math-input.stories.jsx +29 -0
  53. package/src/components/__stories__/math-output.stories.jsx +24 -0
  54. package/src/components/__stories__/multi-button-group.stories.jsx +69 -0
  55. package/src/components/__stories__/number-input.stories.jsx +42 -0
  56. package/src/components/__stories__/possible-answers.stories.jsx +22 -0
  57. package/src/components/__stories__/prop-check-box.stories.jsx +62 -0
  58. package/src/components/__stories__/range-input.stories.jsx +28 -0
  59. package/src/components/__stories__/simple-keypad-input.stories.jsx +28 -0
  60. package/src/components/__stories__/sortable.stories.jsx +73 -0
  61. package/src/components/__stories__/stub-tag-editor.stories.jsx +44 -0
  62. package/src/components/__stories__/svg-image.stories.jsx +60 -0
  63. package/src/components/__stories__/tex.stories.jsx +18 -0
  64. package/src/components/__stories__/text-buttons.stories.jsx +51 -0
  65. package/src/components/__stories__/text-input.stories.jsx +34 -0
  66. package/src/components/__stories__/text-list-editor.stories.jsx +33 -0
  67. package/src/components/__stories__/zoomable-tex.stories.jsx +39 -0
  68. package/src/components/__stories__/zoomable.stories.jsx +40 -0
  69. package/src/components/__testdata__/sorter_testdata.js +20 -0
  70. package/src/components/__tests__/__snapshots__/sortable_test.jsx.snap +79 -0
  71. package/src/components/__tests__/__snapshots__/sorter_test.jsx.snap +297 -0
  72. package/src/components/__tests__/number-input_test.jsx +112 -0
  73. package/src/components/__tests__/sortable_test.jsx +234 -0
  74. package/src/components/__tests__/sorter_test.jsx +111 -0
  75. package/src/components/__tests__/zoomable_test.jsx +388 -0
  76. package/src/components/button-group.jsx +131 -0
  77. package/src/components/constants.js +15 -0
  78. package/src/components/fixed-to-responsive.jsx +163 -0
  79. package/src/components/graph.jsx +414 -0
  80. package/src/components/graphie-classes.jsx +148 -0
  81. package/src/components/graphie-movables.jsx +342 -0
  82. package/src/components/graphie.jsx +353 -0
  83. package/src/components/highlighting/highlightable-content.jsx +245 -0
  84. package/src/components/highlighting/highlights.js +208 -0
  85. package/src/components/highlighting/ranges.js +299 -0
  86. package/src/components/highlighting/types.js +73 -0
  87. package/src/components/highlighting/ui/highlight-renderer.jsx +179 -0
  88. package/src/components/highlighting/ui/highlight-set-renderer.jsx +190 -0
  89. package/src/components/highlighting/ui/highlight-tooltip.jsx +153 -0
  90. package/src/components/highlighting/ui/highlighting-ui.jsx +163 -0
  91. package/src/components/highlighting/ui/selection-tracker.jsx +195 -0
  92. package/src/components/highlighting/ui/types.js +21 -0
  93. package/src/components/highlighting/ui/util.js +166 -0
  94. package/src/components/highlighting/word-indexer.jsx +155 -0
  95. package/src/components/hud.jsx +179 -0
  96. package/src/components/icon.jsx +149 -0
  97. package/src/components/image-loader.jsx +175 -0
  98. package/src/components/info-tip/info-tip.jsx +149 -0
  99. package/src/components/info-tip.jsx +38 -0
  100. package/src/components/inline-icon.jsx +81 -0
  101. package/src/components/input-with-examples.jsx +231 -0
  102. package/src/components/lint.jsx +456 -0
  103. package/src/components/math-input.jsx +282 -0
  104. package/src/components/math-output.jsx +128 -0
  105. package/src/components/multi-button-group.jsx +137 -0
  106. package/src/components/new-tooltip/README.md +110 -0
  107. package/src/components/new-tooltip/__stories__/flexible-position.stories.jsx +437 -0
  108. package/src/components/new-tooltip/__stories__/new-tooltip.stories.jsx +665 -0
  109. package/src/components/new-tooltip/__stories__/tooltip-arrow.stories.jsx +70 -0
  110. package/src/components/new-tooltip/__stories__/tooltip-bubble.stories.jsx +98 -0
  111. package/src/components/new-tooltip/__tests__/style-constants_test.js +8 -0
  112. package/src/components/new-tooltip/__tests__/util_test.js +47 -0
  113. package/src/components/new-tooltip/flexible-position.jsx +182 -0
  114. package/src/components/new-tooltip/new-tooltip.jsx +399 -0
  115. package/src/components/new-tooltip/style-constants.js +13 -0
  116. package/src/components/new-tooltip/tooltip-arrow.jsx +184 -0
  117. package/src/components/new-tooltip/tooltip-bubble.jsx +223 -0
  118. package/src/components/new-tooltip/tooltip-portal.jsx +101 -0
  119. package/src/components/new-tooltip/tooltip-positioner.jsx +529 -0
  120. package/src/components/new-tooltip/types.js +183 -0
  121. package/src/components/new-tooltip/util.js +27 -0
  122. package/src/components/number-input.jsx +253 -0
  123. package/src/components/possible-answers.jsx +36 -0
  124. package/src/components/prop-check-box.jsx +78 -0
  125. package/src/components/range-input.jsx +61 -0
  126. package/src/components/simple-keypad-input.jsx +91 -0
  127. package/src/components/sortable.jsx +872 -0
  128. package/src/components/stub-tag-editor.jsx +53 -0
  129. package/src/components/svg-image.jsx +762 -0
  130. package/src/components/tex-buttons.jsx +322 -0
  131. package/src/components/tex.jsx +70 -0
  132. package/src/components/text-input.jsx +82 -0
  133. package/src/components/text-list-editor.jsx +157 -0
  134. package/src/components/tooltip.jsx +395 -0
  135. package/src/components/visibility-observer/__stories__/visibility-observer.stories.jsx +140 -0
  136. package/src/components/visibility-observer/get-scroll-parent.js +45 -0
  137. package/src/components/visibility-observer/visibility-observer.js +109 -0
  138. package/src/components/visibility-observer/visibility-observer.jsx +123 -0
  139. package/src/components/zoomable-tex.jsx +70 -0
  140. package/src/components/zoomable.jsx +304 -0
  141. package/src/components.js +17 -0
  142. package/src/dependencies.js +22 -0
  143. package/src/error-boundary.jsx +48 -0
  144. package/src/extra-widgets.js +75 -0
  145. package/src/gorgon/README +40 -0
  146. package/src/gorgon/__tests__/matcher_test.js +497 -0
  147. package/src/gorgon/__tests__/rule_test.js +101 -0
  148. package/src/gorgon/__tests__/rules_test.js +487 -0
  149. package/src/gorgon/__tests__/selector-parser_test.js +52 -0
  150. package/src/gorgon/__tests__/tree-transformer_test.js +446 -0
  151. package/src/gorgon/gorgon.js +290 -0
  152. package/src/gorgon/proptypes.js +29 -0
  153. package/src/gorgon/rule.js +413 -0
  154. package/src/gorgon/rules/absolute-url.js +24 -0
  155. package/src/gorgon/rules/all-rules.js +72 -0
  156. package/src/gorgon/rules/blockquoted-math.js +10 -0
  157. package/src/gorgon/rules/blockquoted-widget.js +10 -0
  158. package/src/gorgon/rules/double-spacing-after-terminal.js +12 -0
  159. package/src/gorgon/rules/extra-content-spacing.js +12 -0
  160. package/src/gorgon/rules/heading-level-1.js +14 -0
  161. package/src/gorgon/rules/heading-level-skip.js +20 -0
  162. package/src/gorgon/rules/heading-sentence-case.js +11 -0
  163. package/src/gorgon/rules/heading-title-case.js +63 -0
  164. package/src/gorgon/rules/image-alt-text.js +21 -0
  165. package/src/gorgon/rules/image-in-table.js +10 -0
  166. package/src/gorgon/rules/image-spaces-around-urls.js +35 -0
  167. package/src/gorgon/rules/image-widget.js +50 -0
  168. package/src/gorgon/rules/link-click-here.js +11 -0
  169. package/src/gorgon/rules/lint-utils.js +48 -0
  170. package/src/gorgon/rules/long-paragraph.js +14 -0
  171. package/src/gorgon/rules/math-adjacent.js +10 -0
  172. package/src/gorgon/rules/math-align-extra-break.js +11 -0
  173. package/src/gorgon/rules/math-align-linebreaks.js +43 -0
  174. package/src/gorgon/rules/math-empty.js +10 -0
  175. package/src/gorgon/rules/math-font-size.js +12 -0
  176. package/src/gorgon/rules/math-frac.js +10 -0
  177. package/src/gorgon/rules/math-nested.js +11 -0
  178. package/src/gorgon/rules/math-starts-with-space.js +12 -0
  179. package/src/gorgon/rules/math-text-empty.js +10 -0
  180. package/src/gorgon/rules/math-without-dollars.js +14 -0
  181. package/src/gorgon/rules/nested-lists.js +11 -0
  182. package/src/gorgon/rules/profanity.js +10 -0
  183. package/src/gorgon/rules/table-missing-cells.js +20 -0
  184. package/src/gorgon/rules/unbalanced-code-delimiters.js +14 -0
  185. package/src/gorgon/rules/unescaped-dollar.js +10 -0
  186. package/src/gorgon/rules/widget-in-table.js +10 -0
  187. package/src/gorgon/selector.js +506 -0
  188. package/src/gorgon/tree-transformer.js +588 -0
  189. package/src/hint-renderer.jsx +159 -0
  190. package/src/hints-renderer.jsx +359 -0
  191. package/src/icon-paths.js +120 -0
  192. package/src/index.js +149 -2
  193. package/src/init.js +49 -0
  194. package/src/interaction-tracker.js +60 -0
  195. package/src/interactive2/__tests__/movable-mock.js +48 -0
  196. package/src/interactive2/__tests__/movable-point_test.js +146 -0
  197. package/src/interactive2/interactive-util.js +152 -0
  198. package/src/interactive2/movable-helper-methods.js +160 -0
  199. package/src/interactive2/movable-line-options.js +392 -0
  200. package/src/interactive2/movable-line.js +322 -0
  201. package/src/interactive2/movable-point-options.js +190 -0
  202. package/src/interactive2/movable-point.jsx +604 -0
  203. package/src/interactive2/movable-polygon-options.js +351 -0
  204. package/src/interactive2/movable-polygon.js +367 -0
  205. package/src/interactive2/movable.js +273 -0
  206. package/src/interactive2/objective_.js +79 -0
  207. package/src/interactive2/types.js +3 -0
  208. package/src/interactive2/wrapped-defaults.js +86 -0
  209. package/src/interactive2/wrapped-ellipse.js +87 -0
  210. package/src/interactive2/wrapped-line.js +109 -0
  211. package/src/interactive2/wrapped-path.js +47 -0
  212. package/src/interactive2.js +91 -0
  213. package/src/item-renderer.jsx +518 -0
  214. package/src/item-version.js +12 -0
  215. package/src/jipt-paragraphs.js +44 -0
  216. package/src/jquery.mobile.vmouse.js +545 -0
  217. package/src/keypad-context.js +33 -0
  218. package/src/loading-context.js +20 -0
  219. package/src/logging/log.js +107 -0
  220. package/src/logging/log_test.js +41 -0
  221. package/src/mixins/changeable.jsx +115 -0
  222. package/src/mixins/editor-jsonify.jsx +13 -0
  223. package/src/mixins/provide-keypad.jsx +131 -0
  224. package/src/mixins/widget-jsonify-deprecated.jsx +23 -0
  225. package/src/mixins/widget-prop-blacklist.js +36 -0
  226. package/src/multi-items/__stories__/multi-renderer.stories.js +88 -0
  227. package/src/multi-items/__testdata__/multi-renderer_testdata.js +174 -0
  228. package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +994 -0
  229. package/src/multi-items/__tests__/items_test.js +245 -0
  230. package/src/multi-items/__tests__/multi-renderer_test.js +903 -0
  231. package/src/multi-items/__tests__/prop-type-builders_test.js +134 -0
  232. package/src/multi-items/__tests__/shapes_test.js +44 -0
  233. package/src/multi-items/__tests__/trees_test.js +316 -0
  234. package/src/multi-items/item-types.js +55 -0
  235. package/src/multi-items/items.js +176 -0
  236. package/src/multi-items/multi-renderer.jsx +542 -0
  237. package/src/multi-items/prop-type-builders.js +105 -0
  238. package/src/multi-items/shape-types.js +47 -0
  239. package/src/multi-items/shapes.js +53 -0
  240. package/src/multi-items/tree-types.js +42 -0
  241. package/src/multi-items/trees.js +345 -0
  242. package/src/multi-items.js +76 -0
  243. package/src/not-gorgon.js +129 -0
  244. package/src/perseus-api.jsx +270 -0
  245. package/src/perseus-env.js +26 -0
  246. package/src/perseus-error.js +19 -0
  247. package/src/perseus-markdown.jsx +434 -0
  248. package/src/perseus-types.js +1597 -0
  249. package/src/pure-markdown.js +346 -0
  250. package/src/question-paragraph.jsx +30 -0
  251. package/src/renderability.jsx +108 -0
  252. package/src/renderer.jsx +1931 -0
  253. package/src/server-item-renderer.jsx +467 -0
  254. package/src/sigfigs.jsx +492 -0
  255. package/src/styles/articles.less +748 -0
  256. package/src/styles/constants.js +119 -0
  257. package/src/styles/global-constants.js +350 -0
  258. package/src/styles/global-styles.js +307 -0
  259. package/src/styles/khan-exercise.css +1304 -0
  260. package/src/styles/media-queries.js +48 -0
  261. package/src/styles/perseus-renderer.less +1008 -0
  262. package/src/styles/shared.js +132 -0
  263. package/src/styles/util.less +47 -0
  264. package/src/styles/variables.boostrap.less +301 -0
  265. package/src/styles/variables.less +68 -0
  266. package/src/styles/variables.shared.less +356 -0
  267. package/src/styles/widgets/categorizer.less +39 -0
  268. package/src/styles/widgets/definition.less +86 -0
  269. package/src/styles/widgets/dropdown.less +3 -0
  270. package/src/styles/widgets/expression.less +147 -0
  271. package/src/styles/widgets/graded-group.less +36 -0
  272. package/src/styles/widgets/grapher.less +11 -0
  273. package/src/styles/widgets/group.less +19 -0
  274. package/src/styles/widgets/image.less +29 -0
  275. package/src/styles/widgets/interactive-graph.less +61 -0
  276. package/src/styles/widgets/label-image.less +41 -0
  277. package/src/styles/widgets/matcher.less +8 -0
  278. package/src/styles/widgets/matrix.less +120 -0
  279. package/src/styles/widgets/measurer.less +20 -0
  280. package/src/styles/widgets/orderer.less +97 -0
  281. package/src/styles/widgets/passage.less +151 -0
  282. package/src/styles/widgets/plotter.less +33 -0
  283. package/src/styles/widgets/radio.less +52 -0
  284. package/src/styles/widgets/reaction-diagram.less +35 -0
  285. package/src/styles/widgets/sequence.less +5 -0
  286. package/src/styles/widgets/sortable.less +127 -0
  287. package/src/styles/widgets/table.less +56 -0
  288. package/src/styles/widgets/transformer.less +28 -0
  289. package/src/styles/widgets/unit.less +14 -0
  290. package/src/tex-wrangler.js +176 -0
  291. package/src/traversal.jsx +141 -0
  292. package/src/types.js +538 -0
  293. package/src/util/a11y.js +24 -0
  294. package/src/util/answer-types.js +862 -0
  295. package/src/util/answer-types_test.js +115 -0
  296. package/src/util/colors.js +94 -0
  297. package/src/util/fix-passage-refs.jsx +122 -0
  298. package/src/util/graph-utils.js +16 -0
  299. package/src/util/graphie.js +1585 -0
  300. package/src/util/interactive.js +4071 -0
  301. package/src/util/katex-preprocess.js +16 -0
  302. package/src/util/math.js +296 -0
  303. package/src/util/mobile-native-utils.js +14 -0
  304. package/src/util/mobile-native-utils_test.js +24 -0
  305. package/src/util/register-all-widgets-for-testing.js +12 -0
  306. package/src/util/scroll-utils.js +162 -0
  307. package/src/util/sizing-utils.js +46 -0
  308. package/src/util/tex.js +203 -0
  309. package/src/util/url-utils.js +36 -0
  310. package/src/util.js +990 -0
  311. package/src/version.js +11 -0
  312. package/src/widget-container.jsx +174 -0
  313. package/src/widgets/__stories__/categorizer.stories.jsx +15 -0
  314. package/src/widgets/__stories__/cs-program.stories.jsx +15 -0
  315. package/src/widgets/__stories__/definition.stories.jsx +38 -0
  316. package/src/widgets/__stories__/dropdown.stories.jsx +15 -0
  317. package/src/widgets/__stories__/explanation.stories.jsx +19 -0
  318. package/src/widgets/__stories__/expression.stories.jsx +26 -0
  319. package/src/widgets/__stories__/graded-group-set.stories.jsx +32 -0
  320. package/src/widgets/__stories__/graded-group.stories.jsx +32 -0
  321. package/src/widgets/__stories__/grapher.stories.jsx +47 -0
  322. package/src/widgets/__stories__/group.stories.jsx +15 -0
  323. package/src/widgets/__stories__/iframe.stories.jsx +15 -0
  324. package/src/widgets/__stories__/image.stories.jsx +62 -0
  325. package/src/widgets/__stories__/input-number.stories.jsx +90 -0
  326. package/src/widgets/__stories__/interaction.stories.jsx +15 -0
  327. package/src/widgets/__stories__/interactive-graph.stories.jsx +61 -0
  328. package/src/widgets/__stories__/matcher.stories.jsx +15 -0
  329. package/src/widgets/__stories__/matrix.stories.jsx +15 -0
  330. package/src/widgets/__stories__/number-line.stories.jsx +15 -0
  331. package/src/widgets/__stories__/numeric-input.stories.jsx +19 -0
  332. package/src/widgets/__stories__/orderer.stories.jsx +15 -0
  333. package/src/widgets/__stories__/passage-ref.stories.jsx +19 -0
  334. package/src/widgets/__stories__/passage.stories.jsx +19 -0
  335. package/src/widgets/__stories__/radio.stories.jsx +82 -0
  336. package/src/widgets/__stories__/sorter.stories.jsx +15 -0
  337. package/src/widgets/__stories__/transformer.stories.jsx +15 -0
  338. package/src/widgets/__stories__/video.stories.jsx +15 -0
  339. package/src/widgets/__testdata__/categorizer_testdata.js +50 -0
  340. package/src/widgets/__testdata__/cs-program_testdata.js +28 -0
  341. package/src/widgets/__testdata__/dropdown_testdata.js +34 -0
  342. package/src/widgets/__testdata__/explanation_testdata.js +56 -0
  343. package/src/widgets/__testdata__/expression_testdata.js +95 -0
  344. package/src/widgets/__testdata__/graded-group-set_testdata.js +358 -0
  345. package/src/widgets/__testdata__/graded-group_testdata.js +79 -0
  346. package/src/widgets/__testdata__/grapher_testdata.js +376 -0
  347. package/src/widgets/__testdata__/group_testdata.js +156 -0
  348. package/src/widgets/__testdata__/iframe_testdata.js +36 -0
  349. package/src/widgets/__testdata__/image_testdata.js +38 -0
  350. package/src/widgets/__testdata__/input-number_testdata.js +73 -0
  351. package/src/widgets/__testdata__/interaction_testdata.js +264 -0
  352. package/src/widgets/__testdata__/interactive-graph_testdata.js +646 -0
  353. package/src/widgets/__testdata__/matcher_testdata.js +34 -0
  354. package/src/widgets/__testdata__/matrix_testdata.js +29 -0
  355. package/src/widgets/__testdata__/number-line_testdata.js +31 -0
  356. package/src/widgets/__testdata__/numeric-input_testdata.js +266 -0
  357. package/src/widgets/__testdata__/orderer_testdata.js +58 -0
  358. package/src/widgets/__testdata__/passage-ref_testdata.js +41 -0
  359. package/src/widgets/__testdata__/passage_testdata.js +71 -0
  360. package/src/widgets/__testdata__/radio_testdata.js +210 -0
  361. package/src/widgets/__testdata__/sorter_testdata.js +20 -0
  362. package/src/widgets/__testdata__/transformer_testdata.js +109 -0
  363. package/src/widgets/__testdata__/video_testdata.js +22 -0
  364. package/src/widgets/__tests__/__snapshots__/categorizer_test.jsx.snap +928 -0
  365. package/src/widgets/__tests__/__snapshots__/cs-program_test.jsx.snap +75 -0
  366. package/src/widgets/__tests__/__snapshots__/definition_test.js.snap +99 -0
  367. package/src/widgets/__tests__/__snapshots__/dropdown_test.jsx.snap +143 -0
  368. package/src/widgets/__tests__/__snapshots__/explanation_test.js.snap +473 -0
  369. package/src/widgets/__tests__/__snapshots__/expression_test.jsx.snap +38 -0
  370. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt_test.jsx.snap +754 -0
  371. package/src/widgets/__tests__/__snapshots__/graded-group-set_test.jsx.snap +310 -0
  372. package/src/widgets/__tests__/__snapshots__/graded-group_test.jsx.snap +863 -0
  373. package/src/widgets/__tests__/__snapshots__/grapher_test.jsx.snap +2880 -0
  374. package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +1154 -0
  375. package/src/widgets/__tests__/__snapshots__/iframe_test.jsx.snap +69 -0
  376. package/src/widgets/__tests__/__snapshots__/image_test.jsx.snap +388 -0
  377. package/src/widgets/__tests__/__snapshots__/input-number_test.jsx.snap +978 -0
  378. package/src/widgets/__tests__/__snapshots__/interaction_test.jsx.snap +311 -0
  379. package/src/widgets/__tests__/__snapshots__/interactive-graph_test.jsx.snap +2915 -0
  380. package/src/widgets/__tests__/__snapshots__/matcher_test.jsx.snap +1039 -0
  381. package/src/widgets/__tests__/__snapshots__/matrix_test.jsx.snap +450 -0
  382. package/src/widgets/__tests__/__snapshots__/number-line_test.jsx.snap +888 -0
  383. package/src/widgets/__tests__/__snapshots__/numeric-input_test.jsx.snap +930 -0
  384. package/src/widgets/__tests__/__snapshots__/orderer_test.jsx.snap +275 -0
  385. package/src/widgets/__tests__/__snapshots__/passage-ref_test.jsx.snap +446 -0
  386. package/src/widgets/__tests__/__snapshots__/passage_test.jsx.snap +1988 -0
  387. package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +7107 -0
  388. package/src/widgets/__tests__/__snapshots__/video_test.jsx.snap +163 -0
  389. package/src/widgets/__tests__/categorizer_test.jsx +205 -0
  390. package/src/widgets/__tests__/cs-program_test.jsx +45 -0
  391. package/src/widgets/__tests__/definition_test.js +152 -0
  392. package/src/widgets/__tests__/dropdown_test.jsx +106 -0
  393. package/src/widgets/__tests__/explanation_test.js +199 -0
  394. package/src/widgets/__tests__/expression_test.jsx +439 -0
  395. package/src/widgets/__tests__/graded-group-set-jipt_test.jsx +33 -0
  396. package/src/widgets/__tests__/graded-group-set_test.jsx +270 -0
  397. package/src/widgets/__tests__/graded-group_test.jsx +233 -0
  398. package/src/widgets/__tests__/grapher.cypress.jsx +486 -0
  399. package/src/widgets/__tests__/grapher_test.jsx +35 -0
  400. package/src/widgets/__tests__/group_test.jsx +512 -0
  401. package/src/widgets/__tests__/iframe_test.jsx +47 -0
  402. package/src/widgets/__tests__/image_test.jsx +65 -0
  403. package/src/widgets/__tests__/input-number_test.jsx +360 -0
  404. package/src/widgets/__tests__/interaction_test.jsx +33 -0
  405. package/src/widgets/__tests__/interactive-graph.cypress.jsx +697 -0
  406. package/src/widgets/__tests__/interactive-graph_test.jsx +105 -0
  407. package/src/widgets/__tests__/matcher_test.jsx +157 -0
  408. package/src/widgets/__tests__/matrix_test.jsx +84 -0
  409. package/src/widgets/__tests__/number-line_test.jsx +81 -0
  410. package/src/widgets/__tests__/numeric-input_test.jsx +574 -0
  411. package/src/widgets/__tests__/orderer_test.jsx +75 -0
  412. package/src/widgets/__tests__/passage-ref_test.jsx +166 -0
  413. package/src/widgets/__tests__/passage_test.jsx +133 -0
  414. package/src/widgets/__tests__/radio/base-radio_test.jsx +82 -0
  415. package/src/widgets/__tests__/radio_test.jsx +651 -0
  416. package/src/widgets/__tests__/renderQuestion.jsx +65 -0
  417. package/src/widgets/__tests__/unit_test.jsx +144 -0
  418. package/src/widgets/__tests__/video_test.jsx +55 -0
  419. package/src/widgets/categorizer.jsx +338 -0
  420. package/src/widgets/cs-program.jsx +228 -0
  421. package/src/widgets/definition.jsx +141 -0
  422. package/src/widgets/dropdown.jsx +143 -0
  423. package/src/widgets/explanation.jsx +315 -0
  424. package/src/widgets/expression.jsx +654 -0
  425. package/src/widgets/graded-group-answer-bar.jsx +152 -0
  426. package/src/widgets/graded-group-set.jsx +285 -0
  427. package/src/widgets/graded-group.jsx +448 -0
  428. package/src/widgets/grapher/util.jsx +819 -0
  429. package/src/widgets/grapher.jsx +658 -0
  430. package/src/widgets/group.jsx +213 -0
  431. package/src/widgets/iframe.jsx +199 -0
  432. package/src/widgets/image.jsx +309 -0
  433. package/src/widgets/input-number.jsx +410 -0
  434. package/src/widgets/interaction/arrow-picker.jsx +39 -0
  435. package/src/widgets/interaction/color-picker.jsx +69 -0
  436. package/src/widgets/interaction/dash-picker.jsx +46 -0
  437. package/src/widgets/interaction/element-container.jsx +97 -0
  438. package/src/widgets/interaction.jsx +742 -0
  439. package/src/widgets/interactive-graph.jsx +2821 -0
  440. package/src/widgets/label-image/__stories__/answer-choices.stories.jsx +93 -0
  441. package/src/widgets/label-image/__stories__/marker.stories.jsx +172 -0
  442. package/src/widgets/label-image/answer-choices.jsx +311 -0
  443. package/src/widgets/label-image/marker.jsx +365 -0
  444. package/src/widgets/label-image/types.js +33 -0
  445. package/src/widgets/label-image.jsx +841 -0
  446. package/src/widgets/label-image_test.js +840 -0
  447. package/src/widgets/lights-puzzle.jsx +356 -0
  448. package/src/widgets/matcher.jsx +271 -0
  449. package/src/widgets/matrix.jsx +615 -0
  450. package/src/widgets/measurer.jsx +215 -0
  451. package/src/widgets/molecule/__tests__/layout_test.jsx +159 -0
  452. package/src/widgets/molecule/__tests__/parser_test.jsx +142 -0
  453. package/src/widgets/molecule/molecule-drawing.jsx +175 -0
  454. package/src/widgets/molecule/molecule-layout.jsx +367 -0
  455. package/src/widgets/molecule/smiles-parser.jsx +300 -0
  456. package/src/widgets/molecule.jsx +172 -0
  457. package/src/widgets/number-line.jsx +858 -0
  458. package/src/widgets/numeric-input.jsx +622 -0
  459. package/src/widgets/orderer.jsx +753 -0
  460. package/src/widgets/passage/__tests__/passage-markdown_test.jsx +382 -0
  461. package/src/widgets/passage/get-line-height-for-node.js +10 -0
  462. package/src/widgets/passage/passage-markdown.jsx +416 -0
  463. package/src/widgets/passage-ref-target.jsx +70 -0
  464. package/src/widgets/passage-ref.jsx +198 -0
  465. package/src/widgets/passage.jsx +601 -0
  466. package/src/widgets/plotter.jsx +1198 -0
  467. package/src/widgets/radio/__stories__/base-radio.stories.jsx +40 -0
  468. package/src/widgets/radio/__stories__/choice-icon.stories.jsx +157 -0
  469. package/src/widgets/radio/__stories__/choice-none-above.stories.jsx +26 -0
  470. package/src/widgets/radio/__stories__/cross-out-button.stories.jsx +64 -0
  471. package/src/widgets/radio/__stories__/cross-out-menu.stories.jsx +59 -0
  472. package/src/widgets/radio/__stories__/cross-out-tooltip.stories.jsx +59 -0
  473. package/src/widgets/radio/__stories__/focus-ring.stories.jsx +38 -0
  474. package/src/widgets/radio/__stories__/option-status.stories.jsx +118 -0
  475. package/src/widgets/radio/__stories__/toggleable-radio-button.stories.jsx +28 -0
  476. package/src/widgets/radio/base-radio.jsx +642 -0
  477. package/src/widgets/radio/choice-icon.jsx +468 -0
  478. package/src/widgets/radio/choice-none-above.jsx +54 -0
  479. package/src/widgets/radio/choice.jsx +692 -0
  480. package/src/widgets/radio/choice.jsx.fixture.js +64 -0
  481. package/src/widgets/radio/cross-out-button.jsx +136 -0
  482. package/src/widgets/radio/cross-out-menu-wrapper.jsx +492 -0
  483. package/src/widgets/radio/cross-out-tooltip.jsx +129 -0
  484. package/src/widgets/radio/focus-ring.jsx +51 -0
  485. package/src/widgets/radio/option-status.jsx +89 -0
  486. package/src/widgets/radio/toggleable-radio-button.jsx +133 -0
  487. package/src/widgets/radio/util.js +32 -0
  488. package/src/widgets/radio/util_test.js +19 -0
  489. package/src/widgets/radio/widget.jsx +470 -0
  490. package/src/widgets/radio.jsx +156 -0
  491. package/src/widgets/reaction-diagram.jsx +136 -0
  492. package/src/widgets/sequence.jsx +140 -0
  493. package/src/widgets/simulator.jsx +808 -0
  494. package/src/widgets/sorter.jsx +146 -0
  495. package/src/widgets/table.jsx +395 -0
  496. package/src/widgets/transformer.jsx +2870 -0
  497. package/src/widgets/unit.jsx +371 -0
  498. package/src/widgets/video-transcript-link.jsx +84 -0
  499. package/src/widgets/video-transcript-link_test.js +211 -0
  500. package/src/widgets/video.jsx +131 -0
  501. package/src/widgets.js +431 -0
  502. package/src/zoom.js +539 -0
  503. package/src/__tests__/index.test.js +0 -14
package/src/widgets/__tests__/__snapshots__/interactive-graph_test.jsx.snap ADDED
@@ -0,0 +1,2915 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`interactive-graph widget question Shoud render predictably: after interaction 1`] = `
4
+ <div>
5
+ <span
6
+ class="mock-KatexProvider"
7
+ >
8
+ <div
9
+ class="perseus-renderer perseus-renderer-responsive"
10
+ >
11
+ <div
12
+ class="paragraph"
13
+ data-perseus-paragraph-index="0"
14
+ >
15
+ <div
16
+ class="paragraph"
17
+ >
18
+ <strong>
19
+ Drag the vertices of the triangle below to draw a right triangle with side lengths
20
+ <span
21
+ style="white-space: nowrap;"
22
+ >
23
+ <span />
24
+ <span
25
+ class="mock-TeX"
26
+ >
27
+ 3
28
+ </span>
29
+ <span />
30
+ </span>
31
+ ,
32
+ <span
33
+ style="white-space: nowrap;"
34
+ >
35
+ <span />
36
+ <span
37
+ class="mock-TeX"
38
+ >
39
+ 4
40
+ </span>
41
+ <span />
42
+ </span>
43
+ , and
44
+ <span
45
+ style="white-space: nowrap;"
46
+ >
47
+ <span />
48
+ <span
49
+ class="mock-TeX"
50
+ >
51
+ 5
52
+ </span>
53
+ <span />
54
+ </span>
55
+ .
56
+ </strong>
57
+
58
+
59
+ <div
60
+ class="perseus-widget-container widget-nohighlight widget-block"
61
+ >
62
+ <div
63
+ class="perseus-widget perseus-widget-interactive-graph"
64
+ style="width: 400px; height: 400px;"
65
+ >
66
+ <div
67
+ class="graphie-container above-scratchpad"
68
+ style="width: 400px; height: 400px;"
69
+ >
70
+ <div
71
+ class="graphie"
72
+ style="position: relative; width: 400px; height: 400px;"
73
+ >
74
+ <svg
75
+ height="400"
76
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
77
+ version="1.1"
78
+ width="400"
79
+ xmlns="http://www.w3.org/2000/svg"
80
+ >
81
+ <desc
82
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
83
+ >
84
+ Created with Raphaël
85
+ </desc>
86
+ <defs
87
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
88
+ />
89
+ <path
90
+ d="M371.42857142857144,228.57142857142858L142.85714285714286,57.142857142857146L142.85714285714286,228.57142857142858Z"
91
+ fill="#000000"
92
+ opacity="0"
93
+ stroke="#000000"
94
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
95
+ />
96
+ </svg>
97
+ <svg
98
+ height="400"
99
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
100
+ version="1.1"
101
+ width="400"
102
+ xmlns="http://www.w3.org/2000/svg"
103
+ >
104
+ <desc
105
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
106
+ >
107
+ Created with Raphaël
108
+ </desc>
109
+ <defs
110
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
111
+ />
112
+ <path
113
+ d="M371.42857142857144,228.57142857142858L142.85714285714286,57.142857142857146L142.85714285714286,228.57142857142858Z"
114
+ fill="#71b307"
115
+ fill-opacity="0"
116
+ stroke="#71b307"
117
+ stroke-width="2"
118
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; fill-opacity: 0;"
119
+ />
120
+ <path
121
+ d="M156.23200184286875,228.57142857142858L156.23200184286875,215.1965695857027"
122
+ fill="none"
123
+ stroke="#6495ed"
124
+ stroke-width="1"
125
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
126
+ />
127
+ <path
128
+ d="M142.85714285714286,215.1965695857027L156.23200184286875,215.1965695857027"
129
+ fill="none"
130
+ stroke="#6495ed"
131
+ stroke-width="1"
132
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
133
+ />
134
+ </svg>
135
+ <div
136
+ style="position: absolute; left: 0px; top: 0px;"
137
+ >
138
+ <div
139
+ style="position: absolute; width: 26px; height: 26px; left: 358.42857142857144px; top: 215.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
140
+ >
141
+ <svg
142
+ height="26"
143
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
144
+ version="1.1"
145
+ width="26"
146
+ xmlns="http://www.w3.org/2000/svg"
147
+ >
148
+ <desc
149
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
150
+ >
151
+ Created with Raphaël
152
+ </desc>
153
+ <defs
154
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
155
+ />
156
+ <ellipse
157
+ cx="NaN"
158
+ cy="NaN"
159
+ fill="#71b307"
160
+ r="NaN"
161
+ rx="4"
162
+ ry="4"
163
+ stroke="#71b307"
164
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
165
+ transform=""
166
+ />
167
+ </svg>
168
+ </div>
169
+ <div
170
+ style="position: absolute; width: 26px; height: 26px; left: 129.85714285714286px; top: 44.142857142857146px; transform: translateX(0px) translateY(0px) translateZ(0);"
171
+ >
172
+ <svg
173
+ height="26"
174
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
175
+ version="1.1"
176
+ width="26"
177
+ xmlns="http://www.w3.org/2000/svg"
178
+ >
179
+ <desc
180
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
181
+ >
182
+ Created with Raphaël
183
+ </desc>
184
+ <defs
185
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
186
+ />
187
+ <ellipse
188
+ cx="NaN"
189
+ cy="NaN"
190
+ fill="#71b307"
191
+ r="NaN"
192
+ rx="4"
193
+ ry="4"
194
+ stroke="#71b307"
195
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
196
+ transform=""
197
+ />
198
+ </svg>
199
+ </div>
200
+ <div
201
+ style="position: absolute; width: 26px; height: 26px; left: 129.85714285714286px; top: 215.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
202
+ >
203
+ <svg
204
+ height="26"
205
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
206
+ version="1.1"
207
+ width="26"
208
+ xmlns="http://www.w3.org/2000/svg"
209
+ >
210
+ <desc
211
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
212
+ >
213
+ Created with Raphaël
214
+ </desc>
215
+ <defs
216
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
217
+ />
218
+ <ellipse
219
+ cx="NaN"
220
+ cy="NaN"
221
+ fill="#71b307"
222
+ r="NaN"
223
+ rx="4"
224
+ ry="4"
225
+ stroke="#71b307"
226
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
227
+ transform=""
228
+ />
229
+ </svg>
230
+ </div>
231
+ </div>
232
+ <div
233
+ style="position: absolute; left: 0px; top: 0px; z-index: 2;"
234
+ >
235
+ <div
236
+ data-interactive-kind-for-testing="movable-point"
237
+ style="position: absolute; width: 48px; height: 48px; left: 347.42857142857144px; top: 204.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
238
+ >
239
+ <svg
240
+ height="48"
241
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
242
+ version="1.1"
243
+ width="48"
244
+ xmlns="http://www.w3.org/2000/svg"
245
+ >
246
+ <desc
247
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
248
+ >
249
+ Created with Raphaël
250
+ </desc>
251
+ <defs
252
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
253
+ />
254
+ <ellipse
255
+ cx="24"
256
+ cy="24"
257
+ fill="#000000"
258
+ opacity="0"
259
+ rx="24"
260
+ ry="24"
261
+ stroke="#000"
262
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
263
+ />
264
+ </svg>
265
+ </div>
266
+ <div
267
+ data-interactive-kind-for-testing="movable-point"
268
+ style="position: absolute; width: 48px; height: 48px; left: 118.85714285714286px; top: 33.142857142857146px; transform: translateX(0px) translateY(0px) translateZ(0);"
269
+ >
270
+ <svg
271
+ height="48"
272
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
273
+ version="1.1"
274
+ width="48"
275
+ xmlns="http://www.w3.org/2000/svg"
276
+ >
277
+ <desc
278
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
279
+ >
280
+ Created with Raphaël
281
+ </desc>
282
+ <defs
283
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
284
+ />
285
+ <ellipse
286
+ cx="24"
287
+ cy="24"
288
+ fill="#000000"
289
+ opacity="0"
290
+ rx="24"
291
+ ry="24"
292
+ stroke="#000"
293
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
294
+ />
295
+ </svg>
296
+ </div>
297
+ <div
298
+ data-interactive-kind-for-testing="movable-point"
299
+ style="position: absolute; width: 48px; height: 48px; left: 118.85714285714286px; top: 204.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
300
+ >
301
+ <svg
302
+ height="48"
303
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
304
+ version="1.1"
305
+ width="48"
306
+ xmlns="http://www.w3.org/2000/svg"
307
+ >
308
+ <desc
309
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
310
+ >
311
+ Created with Raphaël
312
+ </desc>
313
+ <defs
314
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
315
+ />
316
+ <ellipse
317
+ cx="24"
318
+ cy="24"
319
+ fill="#000000"
320
+ opacity="0"
321
+ rx="24"
322
+ ry="24"
323
+ stroke="#000"
324
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
325
+ />
326
+ </svg>
327
+ </div>
328
+ </div>
329
+ <span
330
+ class="graphie-label"
331
+ data-math-formula=""
332
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
333
+ >
334
+ <span
335
+ class="katex-holder"
336
+ />
337
+ <span
338
+ class="mathjax-holder"
339
+ />
340
+ </span>
341
+ <span
342
+ class="graphie-label"
343
+ data-math-formula=""
344
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
345
+ >
346
+ <span
347
+ class="katex-holder"
348
+ />
349
+ <span
350
+ class="mathjax-holder"
351
+ />
352
+ </span>
353
+ <span
354
+ class="graphie-label"
355
+ data-math-formula=""
356
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
357
+ >
358
+ <span
359
+ class="katex-holder"
360
+ />
361
+ <span
362
+ class="mathjax-holder"
363
+ />
364
+ </span>
365
+ <span
366
+ class="graphie-label"
367
+ data-math-formula="5.0"
368
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 269.14285714285717px; top: 126.85714285714285px; fill: none; stroke: #6495ED;"
369
+ >
370
+ <span
371
+ class="katex-holder"
372
+ />
373
+ <span
374
+ class="mathjax-holder"
375
+ />
376
+ </span>
377
+ <span
378
+ class="graphie-label"
379
+ data-math-formula="3.0"
380
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 122.85714285714286px; top: 142.85714285714286px; fill: none; stroke: #6495ED;"
381
+ >
382
+ <span
383
+ class="katex-holder"
384
+ />
385
+ <span
386
+ class="mathjax-holder"
387
+ />
388
+ </span>
389
+ <span
390
+ class="graphie-label"
391
+ data-math-formula="4.0"
392
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 257.14285714285717px; top: 248.57142857142856px; fill: none; stroke: #6495ED;"
393
+ >
394
+ <span
395
+ class="katex-holder"
396
+ />
397
+ <span
398
+ class="mathjax-holder"
399
+ />
400
+ </span>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </span>
410
+ </div>
411
+ `;
412
+
413
+ exports[`interactive-graph widget question Shoud render predictably: after interaction 2`] = `
414
+ <div>
415
+ <span
416
+ class="mock-KatexProvider"
417
+ >
418
+ <div
419
+ class="perseus-renderer perseus-renderer-responsive"
420
+ >
421
+ <div
422
+ class="paragraph"
423
+ data-perseus-paragraph-index="0"
424
+ >
425
+ <div
426
+ class="paragraph"
427
+ >
428
+ <strong>
429
+ Plot the image of triangle
430
+ <span
431
+ style="white-space: nowrap;"
432
+ >
433
+ <span />
434
+ <span
435
+ class="mock-TeX"
436
+ >
437
+ \\triangle ABC
438
+ </span>
439
+ <span />
440
+ </span>
441
+ under a reflection across line
442
+ <span
443
+ style="white-space: nowrap;"
444
+ >
445
+ <span />
446
+ <span
447
+ class="mock-TeX"
448
+ >
449
+ \\ell
450
+ </span>
451
+ <span />
452
+ </span>
453
+ .
454
+ </strong>
455
+ </div>
456
+ </div>
457
+ <div
458
+ class="paragraph"
459
+ data-perseus-paragraph-index="1"
460
+ >
461
+ <div
462
+ class="paragraph"
463
+ >
464
+ <div
465
+ class="perseus-widget-container widget-nohighlight widget-block"
466
+ >
467
+ <div
468
+ class="perseus-widget perseus-widget-interactive-graph"
469
+ style="width: 400px; height: 400px;"
470
+ >
471
+ <div
472
+ class="graphie-container above-scratchpad"
473
+ style="width: 400px; height: 400px;"
474
+ >
475
+ <div
476
+ class="unresponsive-svg-image"
477
+ style="width: 400px; height: 400px;"
478
+ >
479
+ <span
480
+ style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
481
+ />
482
+ </div>
483
+ <div
484
+ class="graphie"
485
+ style="position: relative; width: 400px; height: 400px;"
486
+ >
487
+ <svg
488
+ height="400"
489
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
490
+ version="1.1"
491
+ width="400"
492
+ xmlns="http://www.w3.org/2000/svg"
493
+ >
494
+ <desc
495
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
496
+ >
497
+ Created with Raphaël
498
+ </desc>
499
+ <defs
500
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
501
+ />
502
+ <path
503
+ d="M50,375L225,300L125,300Z"
504
+ fill="#000000"
505
+ opacity="0"
506
+ stroke="#000000"
507
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
508
+ />
509
+ </svg>
510
+ <svg
511
+ height="400"
512
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
513
+ version="1.1"
514
+ width="400"
515
+ xmlns="http://www.w3.org/2000/svg"
516
+ >
517
+ <desc
518
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
519
+ >
520
+ Created with Raphaël
521
+ </desc>
522
+ <defs
523
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
524
+ />
525
+ <path
526
+ d="M50,375L225,300L125,300Z"
527
+ fill="#71b307"
528
+ fill-opacity="0"
529
+ stroke="#71b307"
530
+ stroke-width="2"
531
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; fill-opacity: 0;"
532
+ />
533
+ </svg>
534
+ <div
535
+ style="position: absolute; left: 0px; top: 0px;"
536
+ >
537
+ <div
538
+ style="position: absolute; width: 26px; height: 26px; left: 37px; top: 362px; transform: translateX(0px) translateY(0px) translateZ(0);"
539
+ >
540
+ <svg
541
+ height="26"
542
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
543
+ version="1.1"
544
+ width="26"
545
+ xmlns="http://www.w3.org/2000/svg"
546
+ >
547
+ <desc
548
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
549
+ >
550
+ Created with Raphaël
551
+ </desc>
552
+ <defs
553
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
554
+ />
555
+ <ellipse
556
+ cx="NaN"
557
+ cy="NaN"
558
+ fill="#71b307"
559
+ r="NaN"
560
+ rx="4"
561
+ ry="4"
562
+ stroke="#71b307"
563
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
564
+ transform=""
565
+ />
566
+ </svg>
567
+ </div>
568
+ <div
569
+ style="position: absolute; width: 26px; height: 26px; left: 212px; top: 287px; transform: translateX(0px) translateY(0px) translateZ(0);"
570
+ >
571
+ <svg
572
+ height="26"
573
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
574
+ version="1.1"
575
+ width="26"
576
+ xmlns="http://www.w3.org/2000/svg"
577
+ >
578
+ <desc
579
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
580
+ >
581
+ Created with Raphaël
582
+ </desc>
583
+ <defs
584
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
585
+ />
586
+ <ellipse
587
+ cx="NaN"
588
+ cy="NaN"
589
+ fill="#71b307"
590
+ r="NaN"
591
+ rx="4"
592
+ ry="4"
593
+ stroke="#71b307"
594
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
595
+ transform=""
596
+ />
597
+ </svg>
598
+ </div>
599
+ <div
600
+ style="position: absolute; width: 26px; height: 26px; left: 112px; top: 287px; transform: translateX(0px) translateY(0px) translateZ(0);"
601
+ >
602
+ <svg
603
+ height="26"
604
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
605
+ version="1.1"
606
+ width="26"
607
+ xmlns="http://www.w3.org/2000/svg"
608
+ >
609
+ <desc
610
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
611
+ >
612
+ Created with Raphaël
613
+ </desc>
614
+ <defs
615
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
616
+ />
617
+ <ellipse
618
+ cx="NaN"
619
+ cy="NaN"
620
+ fill="#71b307"
621
+ r="NaN"
622
+ rx="4"
623
+ ry="4"
624
+ stroke="#71b307"
625
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
626
+ transform=""
627
+ />
628
+ </svg>
629
+ </div>
630
+ </div>
631
+ <div
632
+ style="position: absolute; left: 0px; top: 0px; z-index: 2;"
633
+ >
634
+ <div
635
+ data-interactive-kind-for-testing="movable-point"
636
+ style="position: absolute; width: 48px; height: 48px; left: 26px; top: 351px; transform: translateX(0px) translateY(0px) translateZ(0);"
637
+ >
638
+ <svg
639
+ height="48"
640
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
641
+ version="1.1"
642
+ width="48"
643
+ xmlns="http://www.w3.org/2000/svg"
644
+ >
645
+ <desc
646
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
647
+ >
648
+ Created with Raphaël
649
+ </desc>
650
+ <defs
651
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
652
+ />
653
+ <ellipse
654
+ cx="24"
655
+ cy="24"
656
+ fill="#000000"
657
+ opacity="0"
658
+ rx="24"
659
+ ry="24"
660
+ stroke="#000"
661
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
662
+ />
663
+ </svg>
664
+ </div>
665
+ <div
666
+ data-interactive-kind-for-testing="movable-point"
667
+ style="position: absolute; width: 48px; height: 48px; left: 201px; top: 276px; transform: translateX(0px) translateY(0px) translateZ(0);"
668
+ >
669
+ <svg
670
+ height="48"
671
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
672
+ version="1.1"
673
+ width="48"
674
+ xmlns="http://www.w3.org/2000/svg"
675
+ >
676
+ <desc
677
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
678
+ >
679
+ Created with Raphaël
680
+ </desc>
681
+ <defs
682
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
683
+ />
684
+ <ellipse
685
+ cx="24"
686
+ cy="24"
687
+ fill="#000000"
688
+ opacity="0"
689
+ rx="24"
690
+ ry="24"
691
+ stroke="#000"
692
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
693
+ />
694
+ </svg>
695
+ </div>
696
+ <div
697
+ data-interactive-kind-for-testing="movable-point"
698
+ style="position: absolute; width: 48px; height: 48px; left: 101px; top: 276px; transform: translateX(0px) translateY(0px) translateZ(0);"
699
+ >
700
+ <svg
701
+ height="48"
702
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
703
+ version="1.1"
704
+ width="48"
705
+ xmlns="http://www.w3.org/2000/svg"
706
+ >
707
+ <desc
708
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
709
+ >
710
+ Created with Raphaël
711
+ </desc>
712
+ <defs
713
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
714
+ />
715
+ <ellipse
716
+ cx="24"
717
+ cy="24"
718
+ fill="#000000"
719
+ opacity="0"
720
+ rx="24"
721
+ ry="24"
722
+ stroke="#000"
723
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
724
+ />
725
+ </svg>
726
+ </div>
727
+ </div>
728
+ <span
729
+ class="graphie-label"
730
+ data-math-formula=""
731
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
732
+ >
733
+ <span
734
+ class="katex-holder"
735
+ />
736
+ <span
737
+ class="mathjax-holder"
738
+ />
739
+ </span>
740
+ <span
741
+ class="graphie-label"
742
+ data-math-formula=""
743
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
744
+ >
745
+ <span
746
+ class="katex-holder"
747
+ />
748
+ <span
749
+ class="mathjax-holder"
750
+ />
751
+ </span>
752
+ <span
753
+ class="graphie-label"
754
+ data-math-formula=""
755
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
756
+ >
757
+ <span
758
+ class="katex-holder"
759
+ />
760
+ <span
761
+ class="mathjax-holder"
762
+ />
763
+ </span>
764
+ <span
765
+ class="graphie-label"
766
+ data-math-formula=""
767
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
768
+ >
769
+ <span
770
+ class="katex-holder"
771
+ />
772
+ <span
773
+ class="mathjax-holder"
774
+ />
775
+ </span>
776
+ <span
777
+ class="graphie-label"
778
+ data-math-formula=""
779
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
780
+ >
781
+ <span
782
+ class="katex-holder"
783
+ />
784
+ <span
785
+ class="mathjax-holder"
786
+ />
787
+ </span>
788
+ <span
789
+ class="graphie-label"
790
+ data-math-formula=""
791
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
792
+ >
793
+ <span
794
+ class="katex-holder"
795
+ />
796
+ <span
797
+ class="mathjax-holder"
798
+ />
799
+ </span>
800
+ </div>
801
+ </div>
802
+ </div>
803
+ </div>
804
+ </div>
805
+ </div>
806
+ </div>
807
+ </span>
808
+ </div>
809
+ `;
810
+
811
+ exports[`interactive-graph widget question Shoud render predictably: after interaction 3`] = `
812
+ <div>
813
+ <span
814
+ class="mock-KatexProvider"
815
+ >
816
+ <div
817
+ class="perseus-renderer perseus-renderer-responsive"
818
+ >
819
+ <div
820
+ class="paragraph"
821
+ data-perseus-paragraph-index="0"
822
+ >
823
+ <div
824
+ class="paragraph"
825
+ >
826
+ We want to find the zeros of this polynomial:
827
+ </div>
828
+ </div>
829
+ <div
830
+ class="paragraph perseus-paragraph-centered"
831
+ data-perseus-paragraph-index="1"
832
+ >
833
+ <div
834
+ class="perseus-block-math"
835
+ >
836
+ <div
837
+ class="perseus-block-math-inner"
838
+ style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
839
+ >
840
+ <span
841
+ class="mock-TeX"
842
+ >
843
+ p(x)=x(2x+5)(x+1)
844
+ </span>
845
+ </div>
846
+ </div>
847
+ </div>
848
+ <div
849
+ class="paragraph"
850
+ data-perseus-paragraph-index="2"
851
+ >
852
+ <div
853
+ class="paragraph"
854
+ >
855
+ <strong>
856
+ Plot all the zeros (
857
+ <span
858
+ style="white-space: nowrap;"
859
+ >
860
+ <span />
861
+ <span
862
+ class="mock-TeX"
863
+ >
864
+ x
865
+ </span>
866
+ <span />
867
+ </span>
868
+ -intercepts) of the polynomial in the interactive graph.
869
+ </strong>
870
+ </div>
871
+ </div>
872
+ <div
873
+ class="paragraph"
874
+ data-perseus-paragraph-index="3"
875
+ >
876
+ <div
877
+ class="paragraph"
878
+ >
879
+ <div
880
+ class="perseus-widget-container widget-nohighlight widget-block"
881
+ >
882
+ <div
883
+ class="perseus-widget perseus-widget-interactive-graph"
884
+ style="width: 400px; height: 400px;"
885
+ >
886
+ <div
887
+ class="graphie-container above-scratchpad"
888
+ style="width: 400px; height: 400px;"
889
+ >
890
+ <div
891
+ class="unresponsive-svg-image"
892
+ style="width: 425px; height: 425px;"
893
+ >
894
+ <span
895
+ style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
896
+ />
897
+ </div>
898
+ <div
899
+ class="graphie"
900
+ style="position: relative; width: 400px; height: 400px;"
901
+ >
902
+ <svg
903
+ height="400"
904
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
905
+ version="1.1"
906
+ width="400"
907
+ xmlns="http://www.w3.org/2000/svg"
908
+ >
909
+ <desc
910
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
911
+ >
912
+ Created with Raphaël
913
+ </desc>
914
+ <defs
915
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
916
+ />
917
+ <rect
918
+ fill="#000000"
919
+ height="400"
920
+ opacity="0"
921
+ r="0"
922
+ rx="0"
923
+ ry="0"
924
+ stroke="#000"
925
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
926
+ width="400"
927
+ x="0"
928
+ y="0"
929
+ />
930
+ </svg>
931
+ <svg
932
+ height="400"
933
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
934
+ version="1.1"
935
+ width="400"
936
+ xmlns="http://www.w3.org/2000/svg"
937
+ >
938
+ <desc
939
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
940
+ >
941
+ Created with Raphaël
942
+ </desc>
943
+ <defs
944
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
945
+ />
946
+ <image
947
+ height="40"
948
+ href="https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png"
949
+ opacity="0.5"
950
+ preserveAspectRatio="none"
951
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"
952
+ width="40"
953
+ x="360"
954
+ y="360"
955
+ />
956
+ </svg>
957
+ <div
958
+ 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;"
959
+ >
960
+ <span
961
+ style="position: relative; top: 25%;"
962
+ >
963
+ Click to add points
964
+ </span>
965
+ </div>
966
+ <div
967
+ style="position: absolute; left: 0px; top: 0px;"
968
+ >
969
+ <div
970
+ style="position: absolute; width: 26px; height: 26px; left: 187px; top: 187px; transform: translateX(0px) translateY(0px) translateZ(0);"
971
+ >
972
+ <svg
973
+ height="26"
974
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
975
+ version="1.1"
976
+ width="26"
977
+ xmlns="http://www.w3.org/2000/svg"
978
+ >
979
+ <desc
980
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
981
+ >
982
+ Created with Raphaël
983
+ </desc>
984
+ <defs
985
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
986
+ />
987
+ <ellipse
988
+ cx="NaN"
989
+ cy="NaN"
990
+ fill="#71b307"
991
+ r="NaN"
992
+ rx="4"
993
+ ry="4"
994
+ stroke="#71b307"
995
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
996
+ transform=""
997
+ />
998
+ </svg>
999
+ </div>
1000
+ <div
1001
+ style="position: absolute; width: 26px; height: 26px; left: 62px; top: 187px; transform: translateX(0px) translateY(0px) translateZ(0);"
1002
+ >
1003
+ <svg
1004
+ height="26"
1005
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1006
+ version="1.1"
1007
+ width="26"
1008
+ xmlns="http://www.w3.org/2000/svg"
1009
+ >
1010
+ <desc
1011
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1012
+ >
1013
+ Created with Raphaël
1014
+ </desc>
1015
+ <defs
1016
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1017
+ />
1018
+ <ellipse
1019
+ cx="NaN"
1020
+ cy="NaN"
1021
+ fill="#71b307"
1022
+ r="NaN"
1023
+ rx="4"
1024
+ ry="4"
1025
+ stroke="#71b307"
1026
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1027
+ transform=""
1028
+ />
1029
+ </svg>
1030
+ </div>
1031
+ <div
1032
+ style="position: absolute; width: 26px; height: 26px; left: 137px; top: 187px; transform: translateX(0px) translateY(0px) translateZ(0);"
1033
+ >
1034
+ <svg
1035
+ height="26"
1036
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1037
+ version="1.1"
1038
+ width="26"
1039
+ xmlns="http://www.w3.org/2000/svg"
1040
+ >
1041
+ <desc
1042
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1043
+ >
1044
+ Created with Raphaël
1045
+ </desc>
1046
+ <defs
1047
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1048
+ />
1049
+ <ellipse
1050
+ cx="NaN"
1051
+ cy="NaN"
1052
+ fill="#71b307"
1053
+ r="NaN"
1054
+ rx="4"
1055
+ ry="4"
1056
+ stroke="#71b307"
1057
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1058
+ transform=""
1059
+ />
1060
+ </svg>
1061
+ </div>
1062
+ </div>
1063
+ <div
1064
+ style="position: absolute; left: 0px; top: 0px; z-index: 2;"
1065
+ >
1066
+ <div
1067
+ data-interactive-kind-for-testing="movable-point"
1068
+ style="position: absolute; width: 48px; height: 48px; left: 176px; top: 176px; transform: translateX(0px) translateY(0px) translateZ(0);"
1069
+ >
1070
+ <svg
1071
+ height="48"
1072
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1073
+ version="1.1"
1074
+ width="48"
1075
+ xmlns="http://www.w3.org/2000/svg"
1076
+ >
1077
+ <desc
1078
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1079
+ >
1080
+ Created with Raphaël
1081
+ </desc>
1082
+ <defs
1083
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1084
+ />
1085
+ <ellipse
1086
+ cx="24"
1087
+ cy="24"
1088
+ fill="#000000"
1089
+ opacity="0"
1090
+ rx="24"
1091
+ ry="24"
1092
+ stroke="#000"
1093
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
1094
+ />
1095
+ </svg>
1096
+ </div>
1097
+ <div
1098
+ data-interactive-kind-for-testing="movable-point"
1099
+ style="position: absolute; width: 48px; height: 48px; left: 51px; top: 176px; transform: translateX(0px) translateY(0px) translateZ(0);"
1100
+ >
1101
+ <svg
1102
+ height="48"
1103
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1104
+ version="1.1"
1105
+ width="48"
1106
+ xmlns="http://www.w3.org/2000/svg"
1107
+ >
1108
+ <desc
1109
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1110
+ >
1111
+ Created with Raphaël
1112
+ </desc>
1113
+ <defs
1114
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1115
+ />
1116
+ <ellipse
1117
+ cx="24"
1118
+ cy="24"
1119
+ fill="#000000"
1120
+ opacity="0"
1121
+ rx="24"
1122
+ ry="24"
1123
+ stroke="#000"
1124
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
1125
+ />
1126
+ </svg>
1127
+ </div>
1128
+ <div
1129
+ data-interactive-kind-for-testing="movable-point"
1130
+ style="position: absolute; width: 48px; height: 48px; left: 126px; top: 176px; transform: translateX(0px) translateY(0px) translateZ(0);"
1131
+ >
1132
+ <svg
1133
+ height="48"
1134
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1135
+ version="1.1"
1136
+ width="48"
1137
+ xmlns="http://www.w3.org/2000/svg"
1138
+ >
1139
+ <desc
1140
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1141
+ >
1142
+ Created with Raphaël
1143
+ </desc>
1144
+ <defs
1145
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1146
+ />
1147
+ <ellipse
1148
+ cx="24"
1149
+ cy="24"
1150
+ fill="#000000"
1151
+ opacity="0"
1152
+ rx="24"
1153
+ ry="24"
1154
+ stroke="#000"
1155
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
1156
+ />
1157
+ </svg>
1158
+ </div>
1159
+ </div>
1160
+ </div>
1161
+ </div>
1162
+ </div>
1163
+ </div>
1164
+ </div>
1165
+ </div>
1166
+ </div>
1167
+ </span>
1168
+ </div>
1169
+ `;
1170
+
1171
+ exports[`interactive-graph widget question Shoud render predictably: after interaction 4`] = `
1172
+ <div>
1173
+ <span
1174
+ class="mock-KatexProvider"
1175
+ >
1176
+ <div
1177
+ class="perseus-renderer perseus-renderer-responsive"
1178
+ >
1179
+ <div
1180
+ class="paragraph"
1181
+ data-perseus-paragraph-index="0"
1182
+ >
1183
+ <div
1184
+ class="paragraph"
1185
+ >
1186
+ The graph below contains quadrilateral
1187
+ <span
1188
+ style="white-space: nowrap;"
1189
+ >
1190
+ <span />
1191
+ <span
1192
+ class="mock-TeX"
1193
+ >
1194
+ TREK
1195
+ </span>
1196
+ <span />
1197
+ </span>
1198
+ and the point
1199
+ <span
1200
+ style="white-space: nowrap;"
1201
+ >
1202
+ <span />
1203
+ <span
1204
+ class="mock-TeX"
1205
+ >
1206
+ P(-8,-6)
1207
+ </span>
1208
+ <span />
1209
+ </span>
1210
+ .
1211
+ </div>
1212
+ </div>
1213
+ <div
1214
+ class="paragraph"
1215
+ data-perseus-paragraph-index="1"
1216
+ >
1217
+ <div
1218
+ class="paragraph"
1219
+ >
1220
+ <strong>
1221
+ Draw the image of quadrilateral
1222
+ <span
1223
+ style="white-space: nowrap;"
1224
+ >
1225
+ <span />
1226
+ <span
1227
+ class="mock-TeX"
1228
+ >
1229
+ TREK
1230
+ </span>
1231
+ <span />
1232
+ </span>
1233
+ under a dilation whose center is
1234
+ <span
1235
+ style="white-space: nowrap;"
1236
+ >
1237
+ <span />
1238
+ <span
1239
+ class="mock-TeX"
1240
+ >
1241
+ P
1242
+ </span>
1243
+ <span />
1244
+ </span>
1245
+ and scale factor is
1246
+ <span
1247
+ style="white-space: nowrap;"
1248
+ >
1249
+ <span />
1250
+ <span
1251
+ class="mock-TeX"
1252
+ >
1253
+ 3
1254
+ </span>
1255
+ <span />
1256
+ </span>
1257
+ .
1258
+ </strong>
1259
+
1260
+ </div>
1261
+ </div>
1262
+ <div
1263
+ class="paragraph"
1264
+ data-perseus-paragraph-index="2"
1265
+ >
1266
+ <div
1267
+ class="paragraph"
1268
+ >
1269
+ <div
1270
+ class="perseus-widget-container widget-nohighlight widget-block"
1271
+ >
1272
+ <div
1273
+ class="perseus-widget perseus-widget-interactive-graph"
1274
+ style="width: 400px; height: 400px;"
1275
+ >
1276
+ <div
1277
+ class="graphie-container above-scratchpad"
1278
+ style="width: 400px; height: 400px;"
1279
+ >
1280
+ <div
1281
+ class="unresponsive-svg-image"
1282
+ style="width: 425px; height: 425px;"
1283
+ >
1284
+ <span
1285
+ style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
1286
+ />
1287
+ </div>
1288
+ <div
1289
+ class="graphie"
1290
+ style="position: relative; width: 400px; height: 400px;"
1291
+ >
1292
+ <svg
1293
+ height="400"
1294
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
1295
+ version="1.1"
1296
+ width="400"
1297
+ xmlns="http://www.w3.org/2000/svg"
1298
+ >
1299
+ <desc
1300
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1301
+ >
1302
+ Created with Raphaël
1303
+ </desc>
1304
+ <defs
1305
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1306
+ />
1307
+ <rect
1308
+ fill="#000000"
1309
+ height="400"
1310
+ opacity="0"
1311
+ r="0"
1312
+ rx="0"
1313
+ ry="0"
1314
+ stroke="#000"
1315
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
1316
+ width="400"
1317
+ x="0"
1318
+ y="0"
1319
+ />
1320
+ <path
1321
+ d="M116.66666666666667,266.6666666666667L266.6666666666667,16.666666666666668L266.6666666666667,266.6666666666667L216.66666666666669,216.66666666666669Z"
1322
+ fill="#000000"
1323
+ opacity="0"
1324
+ stroke="#000000"
1325
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
1326
+ />
1327
+ </svg>
1328
+ <svg
1329
+ height="400"
1330
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1331
+ version="1.1"
1332
+ width="400"
1333
+ xmlns="http://www.w3.org/2000/svg"
1334
+ >
1335
+ <desc
1336
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1337
+ >
1338
+ Created with Raphaël
1339
+ </desc>
1340
+ <defs
1341
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1342
+ />
1343
+ <image
1344
+ height="40"
1345
+ href="https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png"
1346
+ opacity="0.5"
1347
+ preserveAspectRatio="none"
1348
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"
1349
+ width="40"
1350
+ x="360"
1351
+ y="360"
1352
+ />
1353
+ <path
1354
+ d="M116.66666666666667,266.6666666666667L266.6666666666667,16.666666666666668L266.6666666666667,266.6666666666667L216.66666666666669,216.66666666666669Z"
1355
+ fill="#71b307"
1356
+ fill-opacity="0"
1357
+ stroke="#71b307"
1358
+ stroke-width="2"
1359
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; fill-opacity: 0;"
1360
+ />
1361
+ </svg>
1362
+ <div
1363
+ 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;"
1364
+ >
1365
+ <span
1366
+ style="position: relative; top: 25%;"
1367
+ >
1368
+ Click to add vertices
1369
+ </span>
1370
+ </div>
1371
+ <div
1372
+ style="position: absolute; left: 0px; top: 0px;"
1373
+ >
1374
+ <div
1375
+ style="position: absolute; width: 26px; height: 26px; left: 103.66666666666667px; top: 253.66666666666669px; transform: translateX(0px) translateY(0px) translateZ(0);"
1376
+ >
1377
+ <svg
1378
+ height="26"
1379
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1380
+ version="1.1"
1381
+ width="26"
1382
+ xmlns="http://www.w3.org/2000/svg"
1383
+ >
1384
+ <desc
1385
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1386
+ >
1387
+ Created with Raphaël
1388
+ </desc>
1389
+ <defs
1390
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1391
+ />
1392
+ <ellipse
1393
+ cx="NaN"
1394
+ cy="NaN"
1395
+ fill="#71b307"
1396
+ r="NaN"
1397
+ rx="4"
1398
+ ry="4"
1399
+ stroke="#71b307"
1400
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1401
+ transform=""
1402
+ />
1403
+ </svg>
1404
+ </div>
1405
+ <div
1406
+ style="position: absolute; width: 26px; height: 26px; left: 253.66666666666669px; top: 3.666666666666668px; transform: translateX(0px) translateY(0px) translateZ(0);"
1407
+ >
1408
+ <svg
1409
+ height="26"
1410
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1411
+ version="1.1"
1412
+ width="26"
1413
+ xmlns="http://www.w3.org/2000/svg"
1414
+ >
1415
+ <desc
1416
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1417
+ >
1418
+ Created with Raphaël
1419
+ </desc>
1420
+ <defs
1421
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1422
+ />
1423
+ <ellipse
1424
+ cx="NaN"
1425
+ cy="NaN"
1426
+ fill="#71b307"
1427
+ r="NaN"
1428
+ rx="4"
1429
+ ry="4"
1430
+ stroke="#71b307"
1431
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1432
+ transform=""
1433
+ />
1434
+ </svg>
1435
+ </div>
1436
+ <div
1437
+ style="position: absolute; width: 26px; height: 26px; left: 253.66666666666669px; top: 253.66666666666669px; transform: translateX(0px) translateY(0px) translateZ(0);"
1438
+ >
1439
+ <svg
1440
+ height="26"
1441
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1442
+ version="1.1"
1443
+ width="26"
1444
+ xmlns="http://www.w3.org/2000/svg"
1445
+ >
1446
+ <desc
1447
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1448
+ >
1449
+ Created with Raphaël
1450
+ </desc>
1451
+ <defs
1452
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1453
+ />
1454
+ <ellipse
1455
+ cx="NaN"
1456
+ cy="NaN"
1457
+ fill="#71b307"
1458
+ r="NaN"
1459
+ rx="4"
1460
+ ry="4"
1461
+ stroke="#71b307"
1462
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1463
+ transform=""
1464
+ />
1465
+ </svg>
1466
+ </div>
1467
+ <div
1468
+ style="position: absolute; width: 26px; height: 26px; left: 203.66666666666669px; top: 203.66666666666669px; transform: translateX(0px) translateY(0px) translateZ(0);"
1469
+ >
1470
+ <svg
1471
+ height="26"
1472
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1473
+ version="1.1"
1474
+ width="26"
1475
+ xmlns="http://www.w3.org/2000/svg"
1476
+ >
1477
+ <desc
1478
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1479
+ >
1480
+ Created with Raphaël
1481
+ </desc>
1482
+ <defs
1483
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1484
+ />
1485
+ <ellipse
1486
+ cx="NaN"
1487
+ cy="NaN"
1488
+ fill="#71b307"
1489
+ r="NaN"
1490
+ rx="4"
1491
+ ry="4"
1492
+ stroke="#71b307"
1493
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1494
+ transform=""
1495
+ />
1496
+ </svg>
1497
+ </div>
1498
+ </div>
1499
+ <div
1500
+ style="position: absolute; left: 0px; top: 0px; z-index: 2;"
1501
+ >
1502
+ <div
1503
+ data-interactive-kind-for-testing="movable-point"
1504
+ style="position: absolute; width: 48px; height: 48px; left: 92.66666666666667px; top: 242.66666666666669px; transform: translateX(0px) translateY(0px) translateZ(0);"
1505
+ >
1506
+ <svg
1507
+ height="48"
1508
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1509
+ version="1.1"
1510
+ width="48"
1511
+ xmlns="http://www.w3.org/2000/svg"
1512
+ >
1513
+ <desc
1514
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1515
+ >
1516
+ Created with Raphaël
1517
+ </desc>
1518
+ <defs
1519
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1520
+ />
1521
+ <ellipse
1522
+ cx="24"
1523
+ cy="24"
1524
+ fill="#000000"
1525
+ opacity="0"
1526
+ rx="24"
1527
+ ry="24"
1528
+ stroke="#000"
1529
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
1530
+ />
1531
+ </svg>
1532
+ </div>
1533
+ <div
1534
+ data-interactive-kind-for-testing="movable-point"
1535
+ style="position: absolute; width: 48px; height: 48px; left: 242.66666666666669px; top: -7.333333333333332px; transform: translateX(0px) translateY(0px) translateZ(0);"
1536
+ >
1537
+ <svg
1538
+ height="48"
1539
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1540
+ version="1.1"
1541
+ width="48"
1542
+ xmlns="http://www.w3.org/2000/svg"
1543
+ >
1544
+ <desc
1545
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1546
+ >
1547
+ Created with Raphaël
1548
+ </desc>
1549
+ <defs
1550
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1551
+ />
1552
+ <ellipse
1553
+ cx="24"
1554
+ cy="24"
1555
+ fill="#000000"
1556
+ opacity="0"
1557
+ rx="24"
1558
+ ry="24"
1559
+ stroke="#000"
1560
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
1561
+ />
1562
+ </svg>
1563
+ </div>
1564
+ <div
1565
+ data-interactive-kind-for-testing="movable-point"
1566
+ style="position: absolute; width: 48px; height: 48px; left: 242.66666666666669px; top: 242.66666666666669px; transform: translateX(0px) translateY(0px) translateZ(0);"
1567
+ >
1568
+ <svg
1569
+ height="48"
1570
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1571
+ version="1.1"
1572
+ width="48"
1573
+ xmlns="http://www.w3.org/2000/svg"
1574
+ >
1575
+ <desc
1576
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1577
+ >
1578
+ Created with Raphaël
1579
+ </desc>
1580
+ <defs
1581
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1582
+ />
1583
+ <ellipse
1584
+ cx="24"
1585
+ cy="24"
1586
+ fill="#000000"
1587
+ opacity="0"
1588
+ rx="24"
1589
+ ry="24"
1590
+ stroke="#000"
1591
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
1592
+ />
1593
+ </svg>
1594
+ </div>
1595
+ <div
1596
+ data-interactive-kind-for-testing="movable-point"
1597
+ style="position: absolute; width: 48px; height: 48px; left: 192.66666666666669px; top: 192.66666666666669px; transform: translateX(0px) translateY(0px) translateZ(0);"
1598
+ >
1599
+ <svg
1600
+ height="48"
1601
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1602
+ version="1.1"
1603
+ width="48"
1604
+ xmlns="http://www.w3.org/2000/svg"
1605
+ >
1606
+ <desc
1607
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1608
+ >
1609
+ Created with Raphaël
1610
+ </desc>
1611
+ <defs
1612
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1613
+ />
1614
+ <ellipse
1615
+ cx="24"
1616
+ cy="24"
1617
+ fill="#000000"
1618
+ opacity="0"
1619
+ rx="24"
1620
+ ry="24"
1621
+ stroke="#000"
1622
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
1623
+ />
1624
+ </svg>
1625
+ </div>
1626
+ </div>
1627
+ <span
1628
+ class="graphie-label"
1629
+ data-math-formula=""
1630
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1631
+ >
1632
+ <span
1633
+ class="katex-holder"
1634
+ />
1635
+ <span
1636
+ class="mathjax-holder"
1637
+ />
1638
+ </span>
1639
+ <span
1640
+ class="graphie-label"
1641
+ data-math-formula=""
1642
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1643
+ >
1644
+ <span
1645
+ class="katex-holder"
1646
+ />
1647
+ <span
1648
+ class="mathjax-holder"
1649
+ />
1650
+ </span>
1651
+ <span
1652
+ class="graphie-label"
1653
+ data-math-formula=""
1654
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1655
+ >
1656
+ <span
1657
+ class="katex-holder"
1658
+ />
1659
+ <span
1660
+ class="mathjax-holder"
1661
+ />
1662
+ </span>
1663
+ <span
1664
+ class="graphie-label"
1665
+ data-math-formula=""
1666
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1667
+ >
1668
+ <span
1669
+ class="katex-holder"
1670
+ />
1671
+ <span
1672
+ class="mathjax-holder"
1673
+ />
1674
+ </span>
1675
+ <span
1676
+ class="graphie-label"
1677
+ data-math-formula=""
1678
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1679
+ >
1680
+ <span
1681
+ class="katex-holder"
1682
+ />
1683
+ <span
1684
+ class="mathjax-holder"
1685
+ />
1686
+ </span>
1687
+ <span
1688
+ class="graphie-label"
1689
+ data-math-formula=""
1690
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1691
+ >
1692
+ <span
1693
+ class="katex-holder"
1694
+ />
1695
+ <span
1696
+ class="mathjax-holder"
1697
+ />
1698
+ </span>
1699
+ <span
1700
+ class="graphie-label"
1701
+ data-math-formula=""
1702
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1703
+ >
1704
+ <span
1705
+ class="katex-holder"
1706
+ />
1707
+ <span
1708
+ class="mathjax-holder"
1709
+ />
1710
+ </span>
1711
+ <span
1712
+ class="graphie-label"
1713
+ data-math-formula=""
1714
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 266.6666666666667px; fill: none; stroke: #6495ED;"
1715
+ >
1716
+ <span
1717
+ class="katex-holder"
1718
+ />
1719
+ <span
1720
+ class="mathjax-holder"
1721
+ />
1722
+ </span>
1723
+ </div>
1724
+ </div>
1725
+ </div>
1726
+ </div>
1727
+ </div>
1728
+ </div>
1729
+ </div>
1730
+ </span>
1731
+ </div>
1732
+ `;
1733
+
1734
+ exports[`interactive-graph widget question Shoud render predictably: first render 1`] = `
1735
+ <div>
1736
+ <span
1737
+ class="mock-KatexProvider"
1738
+ >
1739
+ <div
1740
+ class="perseus-renderer perseus-renderer-responsive"
1741
+ >
1742
+ <div
1743
+ class="paragraph"
1744
+ data-perseus-paragraph-index="0"
1745
+ >
1746
+ <div
1747
+ class="paragraph"
1748
+ >
1749
+ <strong>
1750
+ Drag the vertices of the triangle below to draw a right triangle with side lengths
1751
+ <span
1752
+ style="white-space: nowrap;"
1753
+ >
1754
+ <span />
1755
+ <span
1756
+ class="mock-TeX"
1757
+ >
1758
+ 3
1759
+ </span>
1760
+ <span />
1761
+ </span>
1762
+ ,
1763
+ <span
1764
+ style="white-space: nowrap;"
1765
+ >
1766
+ <span />
1767
+ <span
1768
+ class="mock-TeX"
1769
+ >
1770
+ 4
1771
+ </span>
1772
+ <span />
1773
+ </span>
1774
+ , and
1775
+ <span
1776
+ style="white-space: nowrap;"
1777
+ >
1778
+ <span />
1779
+ <span
1780
+ class="mock-TeX"
1781
+ >
1782
+ 5
1783
+ </span>
1784
+ <span />
1785
+ </span>
1786
+ .
1787
+ </strong>
1788
+
1789
+
1790
+ <div
1791
+ class="perseus-widget-container widget-nohighlight widget-block"
1792
+ >
1793
+ <div
1794
+ class="perseus-widget perseus-widget-interactive-graph"
1795
+ style="width: 400px; height: 400px;"
1796
+ >
1797
+ <div
1798
+ class="graphie-container above-scratchpad"
1799
+ style="width: 400px; height: 400px;"
1800
+ >
1801
+ <div
1802
+ class="graphie"
1803
+ style="position: relative; width: 400px; height: 400px;"
1804
+ >
1805
+ <svg
1806
+ height="400"
1807
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
1808
+ version="1.1"
1809
+ width="400"
1810
+ xmlns="http://www.w3.org/2000/svg"
1811
+ >
1812
+ <desc
1813
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1814
+ >
1815
+ Created with Raphaël
1816
+ </desc>
1817
+ <defs
1818
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1819
+ />
1820
+ <path
1821
+ d="M257.14285714285717,228.57142857142858L200,114.28571428571429L142.85714285714286,228.57142857142858Z"
1822
+ fill="#000000"
1823
+ opacity="0"
1824
+ stroke="#000000"
1825
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
1826
+ />
1827
+ </svg>
1828
+ <svg
1829
+ height="400"
1830
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1831
+ version="1.1"
1832
+ width="400"
1833
+ xmlns="http://www.w3.org/2000/svg"
1834
+ >
1835
+ <desc
1836
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1837
+ >
1838
+ Created with Raphaël
1839
+ </desc>
1840
+ <defs
1841
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1842
+ />
1843
+ <path
1844
+ d="M257.14285714285717,228.57142857142858L200,114.28571428571429L142.85714285714286,228.57142857142858Z"
1845
+ fill="#71b307"
1846
+ fill-opacity="0"
1847
+ stroke="#71b307"
1848
+ stroke-width="2"
1849
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; fill-opacity: 0;"
1850
+ />
1851
+ </svg>
1852
+ <div
1853
+ style="position: absolute; left: 0px; top: 0px;"
1854
+ >
1855
+ <div
1856
+ style="position: absolute; width: 26px; height: 26px; left: 244.14285714285717px; top: 215.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
1857
+ >
1858
+ <svg
1859
+ height="26"
1860
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1861
+ version="1.1"
1862
+ width="26"
1863
+ xmlns="http://www.w3.org/2000/svg"
1864
+ >
1865
+ <desc
1866
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1867
+ >
1868
+ Created with Raphaël
1869
+ </desc>
1870
+ <defs
1871
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1872
+ />
1873
+ <ellipse
1874
+ cx="NaN"
1875
+ cy="NaN"
1876
+ fill="#71b307"
1877
+ r="NaN"
1878
+ rx="4"
1879
+ ry="4"
1880
+ stroke="#71b307"
1881
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1882
+ transform=""
1883
+ />
1884
+ </svg>
1885
+ </div>
1886
+ <div
1887
+ style="position: absolute; width: 26px; height: 26px; left: 187px; top: 101.28571428571429px; transform: translateX(0px) translateY(0px) translateZ(0);"
1888
+ >
1889
+ <svg
1890
+ height="26"
1891
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1892
+ version="1.1"
1893
+ width="26"
1894
+ xmlns="http://www.w3.org/2000/svg"
1895
+ >
1896
+ <desc
1897
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1898
+ >
1899
+ Created with Raphaël
1900
+ </desc>
1901
+ <defs
1902
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1903
+ />
1904
+ <ellipse
1905
+ cx="NaN"
1906
+ cy="NaN"
1907
+ fill="#71b307"
1908
+ r="NaN"
1909
+ rx="4"
1910
+ ry="4"
1911
+ stroke="#71b307"
1912
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1913
+ transform=""
1914
+ />
1915
+ </svg>
1916
+ </div>
1917
+ <div
1918
+ style="position: absolute; width: 26px; height: 26px; left: 129.85714285714286px; top: 215.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
1919
+ >
1920
+ <svg
1921
+ height="26"
1922
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1923
+ version="1.1"
1924
+ width="26"
1925
+ xmlns="http://www.w3.org/2000/svg"
1926
+ >
1927
+ <desc
1928
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1929
+ >
1930
+ Created with Raphaël
1931
+ </desc>
1932
+ <defs
1933
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1934
+ />
1935
+ <ellipse
1936
+ cx="NaN"
1937
+ cy="NaN"
1938
+ fill="#71b307"
1939
+ r="NaN"
1940
+ rx="4"
1941
+ ry="4"
1942
+ stroke="#71b307"
1943
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1944
+ transform=""
1945
+ />
1946
+ </svg>
1947
+ </div>
1948
+ </div>
1949
+ <div
1950
+ style="position: absolute; left: 0px; top: 0px; z-index: 2;"
1951
+ >
1952
+ <div
1953
+ data-interactive-kind-for-testing="movable-point"
1954
+ style="position: absolute; width: 48px; height: 48px; left: 233.14285714285717px; top: 204.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
1955
+ >
1956
+ <svg
1957
+ height="48"
1958
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1959
+ version="1.1"
1960
+ width="48"
1961
+ xmlns="http://www.w3.org/2000/svg"
1962
+ >
1963
+ <desc
1964
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1965
+ >
1966
+ Created with Raphaël
1967
+ </desc>
1968
+ <defs
1969
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1970
+ />
1971
+ <ellipse
1972
+ cx="24"
1973
+ cy="24"
1974
+ fill="#000000"
1975
+ opacity="0"
1976
+ rx="24"
1977
+ ry="24"
1978
+ stroke="#000"
1979
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
1980
+ />
1981
+ </svg>
1982
+ </div>
1983
+ <div
1984
+ data-interactive-kind-for-testing="movable-point"
1985
+ style="position: absolute; width: 48px; height: 48px; left: 176px; top: 90.28571428571429px; transform: translateX(0px) translateY(0px) translateZ(0);"
1986
+ >
1987
+ <svg
1988
+ height="48"
1989
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1990
+ version="1.1"
1991
+ width="48"
1992
+ xmlns="http://www.w3.org/2000/svg"
1993
+ >
1994
+ <desc
1995
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
1996
+ >
1997
+ Created with Raphaël
1998
+ </desc>
1999
+ <defs
2000
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2001
+ />
2002
+ <ellipse
2003
+ cx="24"
2004
+ cy="24"
2005
+ fill="#000000"
2006
+ opacity="0"
2007
+ rx="24"
2008
+ ry="24"
2009
+ stroke="#000"
2010
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
2011
+ />
2012
+ </svg>
2013
+ </div>
2014
+ <div
2015
+ data-interactive-kind-for-testing="movable-point"
2016
+ style="position: absolute; width: 48px; height: 48px; left: 118.85714285714286px; top: 204.57142857142858px; transform: translateX(0px) translateY(0px) translateZ(0);"
2017
+ >
2018
+ <svg
2019
+ height="48"
2020
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2021
+ version="1.1"
2022
+ width="48"
2023
+ xmlns="http://www.w3.org/2000/svg"
2024
+ >
2025
+ <desc
2026
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2027
+ >
2028
+ Created with Raphaël
2029
+ </desc>
2030
+ <defs
2031
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2032
+ />
2033
+ <ellipse
2034
+ cx="24"
2035
+ cy="24"
2036
+ fill="#000000"
2037
+ opacity="0"
2038
+ rx="24"
2039
+ ry="24"
2040
+ stroke="#000"
2041
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
2042
+ />
2043
+ </svg>
2044
+ </div>
2045
+ </div>
2046
+ <span
2047
+ class="graphie-label"
2048
+ data-math-formula=""
2049
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
2050
+ >
2051
+ <span
2052
+ class="katex-holder"
2053
+ />
2054
+ <span
2055
+ class="mathjax-holder"
2056
+ />
2057
+ </span>
2058
+ <span
2059
+ class="graphie-label"
2060
+ data-math-formula=""
2061
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
2062
+ >
2063
+ <span
2064
+ class="katex-holder"
2065
+ />
2066
+ <span
2067
+ class="mathjax-holder"
2068
+ />
2069
+ </span>
2070
+ <span
2071
+ class="graphie-label"
2072
+ data-math-formula=""
2073
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 57.142857142857146px; top: 342.8571428571429px; fill: none; stroke: #6495ED;"
2074
+ >
2075
+ <span
2076
+ class="katex-holder"
2077
+ />
2078
+ <span
2079
+ class="mathjax-holder"
2080
+ />
2081
+ </span>
2082
+ <span
2083
+ class="graphie-label"
2084
+ data-math-formula="\\\\approx 2.2"
2085
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 246.45997239142687px; top: 162.4842995185723px; fill: none; stroke: #6495ED;"
2086
+ >
2087
+ <span
2088
+ class="katex-holder"
2089
+ />
2090
+ <span
2091
+ class="mathjax-holder"
2092
+ />
2093
+ </span>
2094
+ <span
2095
+ class="graphie-label"
2096
+ data-math-formula="\\\\approx 2.2"
2097
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 153.54002760857313px; top: 162.48429951857227px; fill: none; stroke: #6495ED;"
2098
+ >
2099
+ <span
2100
+ class="katex-holder"
2101
+ />
2102
+ <span
2103
+ class="mathjax-holder"
2104
+ />
2105
+ </span>
2106
+ <span
2107
+ class="graphie-label"
2108
+ data-math-formula="2.0"
2109
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 248.57142857142856px; fill: none; stroke: #6495ED;"
2110
+ >
2111
+ <span
2112
+ class="katex-holder"
2113
+ />
2114
+ <span
2115
+ class="mathjax-holder"
2116
+ />
2117
+ </span>
2118
+ </div>
2119
+ </div>
2120
+ </div>
2121
+ </div>
2122
+
2123
+ </div>
2124
+ </div>
2125
+ </div>
2126
+ </span>
2127
+ </div>
2128
+ `;
2129
+
2130
+ exports[`interactive-graph widget question Shoud render predictably: first render 2`] = `
2131
+ <div>
2132
+ <span
2133
+ class="mock-KatexProvider"
2134
+ >
2135
+ <div
2136
+ class="perseus-renderer perseus-renderer-responsive"
2137
+ >
2138
+ <div
2139
+ class="paragraph"
2140
+ data-perseus-paragraph-index="0"
2141
+ >
2142
+ <div
2143
+ class="paragraph"
2144
+ >
2145
+ <strong>
2146
+ Plot the image of triangle
2147
+ <span
2148
+ style="white-space: nowrap;"
2149
+ >
2150
+ <span />
2151
+ <span
2152
+ class="mock-TeX"
2153
+ >
2154
+ \\triangle ABC
2155
+ </span>
2156
+ <span />
2157
+ </span>
2158
+ under a reflection across line
2159
+ <span
2160
+ style="white-space: nowrap;"
2161
+ >
2162
+ <span />
2163
+ <span
2164
+ class="mock-TeX"
2165
+ >
2166
+ \\ell
2167
+ </span>
2168
+ <span />
2169
+ </span>
2170
+ .
2171
+ </strong>
2172
+ </div>
2173
+ </div>
2174
+ <div
2175
+ class="paragraph"
2176
+ data-perseus-paragraph-index="1"
2177
+ >
2178
+ <div
2179
+ class="paragraph"
2180
+ >
2181
+ <div
2182
+ class="perseus-widget-container widget-nohighlight widget-block"
2183
+ >
2184
+ <div
2185
+ class="perseus-widget perseus-widget-interactive-graph"
2186
+ style="width: 400px; height: 400px;"
2187
+ >
2188
+ <div
2189
+ class="graphie-container above-scratchpad"
2190
+ style="width: 400px; height: 400px;"
2191
+ >
2192
+ <div
2193
+ class="unresponsive-svg-image"
2194
+ style="width: 400px; height: 400px;"
2195
+ >
2196
+ <span
2197
+ style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
2198
+ />
2199
+ </div>
2200
+ <div
2201
+ class="graphie"
2202
+ style="position: relative; width: 400px; height: 400px;"
2203
+ >
2204
+ <svg
2205
+ height="400"
2206
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
2207
+ version="1.1"
2208
+ width="400"
2209
+ xmlns="http://www.w3.org/2000/svg"
2210
+ >
2211
+ <desc
2212
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2213
+ >
2214
+ Created with Raphaël
2215
+ </desc>
2216
+ <defs
2217
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2218
+ />
2219
+ <path
2220
+ d="M275,250L200,125L125,250Z"
2221
+ fill="#000000"
2222
+ opacity="0"
2223
+ stroke="#000000"
2224
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
2225
+ />
2226
+ </svg>
2227
+ <svg
2228
+ height="400"
2229
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2230
+ version="1.1"
2231
+ width="400"
2232
+ xmlns="http://www.w3.org/2000/svg"
2233
+ >
2234
+ <desc
2235
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2236
+ >
2237
+ Created with Raphaël
2238
+ </desc>
2239
+ <defs
2240
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2241
+ />
2242
+ <path
2243
+ d="M275,250L200,125L125,250Z"
2244
+ fill="#71b307"
2245
+ fill-opacity="0"
2246
+ stroke="#71b307"
2247
+ stroke-width="2"
2248
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; fill-opacity: 0;"
2249
+ />
2250
+ </svg>
2251
+ <div
2252
+ style="position: absolute; left: 0px; top: 0px;"
2253
+ >
2254
+ <div
2255
+ style="position: absolute; width: 26px; height: 26px; left: 262px; top: 237px; transform: translateX(0px) translateY(0px) translateZ(0);"
2256
+ >
2257
+ <svg
2258
+ height="26"
2259
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2260
+ version="1.1"
2261
+ width="26"
2262
+ xmlns="http://www.w3.org/2000/svg"
2263
+ >
2264
+ <desc
2265
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2266
+ >
2267
+ Created with Raphaël
2268
+ </desc>
2269
+ <defs
2270
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2271
+ />
2272
+ <ellipse
2273
+ cx="NaN"
2274
+ cy="NaN"
2275
+ fill="#71b307"
2276
+ r="NaN"
2277
+ rx="4"
2278
+ ry="4"
2279
+ stroke="#71b307"
2280
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2281
+ transform=""
2282
+ />
2283
+ </svg>
2284
+ </div>
2285
+ <div
2286
+ style="position: absolute; width: 26px; height: 26px; left: 187px; top: 112px; transform: translateX(0px) translateY(0px) translateZ(0);"
2287
+ >
2288
+ <svg
2289
+ height="26"
2290
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2291
+ version="1.1"
2292
+ width="26"
2293
+ xmlns="http://www.w3.org/2000/svg"
2294
+ >
2295
+ <desc
2296
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2297
+ >
2298
+ Created with Raphaël
2299
+ </desc>
2300
+ <defs
2301
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2302
+ />
2303
+ <ellipse
2304
+ cx="NaN"
2305
+ cy="NaN"
2306
+ fill="#71b307"
2307
+ r="NaN"
2308
+ rx="4"
2309
+ ry="4"
2310
+ stroke="#71b307"
2311
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2312
+ transform=""
2313
+ />
2314
+ </svg>
2315
+ </div>
2316
+ <div
2317
+ style="position: absolute; width: 26px; height: 26px; left: 112px; top: 237px; transform: translateX(0px) translateY(0px) translateZ(0);"
2318
+ >
2319
+ <svg
2320
+ height="26"
2321
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2322
+ version="1.1"
2323
+ width="26"
2324
+ xmlns="http://www.w3.org/2000/svg"
2325
+ >
2326
+ <desc
2327
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2328
+ >
2329
+ Created with Raphaël
2330
+ </desc>
2331
+ <defs
2332
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2333
+ />
2334
+ <ellipse
2335
+ cx="NaN"
2336
+ cy="NaN"
2337
+ fill="#71b307"
2338
+ r="NaN"
2339
+ rx="4"
2340
+ ry="4"
2341
+ stroke="#71b307"
2342
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2343
+ transform=""
2344
+ />
2345
+ </svg>
2346
+ </div>
2347
+ </div>
2348
+ <div
2349
+ style="position: absolute; left: 0px; top: 0px; z-index: 2;"
2350
+ >
2351
+ <div
2352
+ data-interactive-kind-for-testing="movable-point"
2353
+ style="position: absolute; width: 48px; height: 48px; left: 251px; top: 226px; transform: translateX(0px) translateY(0px) translateZ(0);"
2354
+ >
2355
+ <svg
2356
+ height="48"
2357
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2358
+ version="1.1"
2359
+ width="48"
2360
+ xmlns="http://www.w3.org/2000/svg"
2361
+ >
2362
+ <desc
2363
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2364
+ >
2365
+ Created with Raphaël
2366
+ </desc>
2367
+ <defs
2368
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2369
+ />
2370
+ <ellipse
2371
+ cx="24"
2372
+ cy="24"
2373
+ fill="#000000"
2374
+ opacity="0"
2375
+ rx="24"
2376
+ ry="24"
2377
+ stroke="#000"
2378
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
2379
+ />
2380
+ </svg>
2381
+ </div>
2382
+ <div
2383
+ data-interactive-kind-for-testing="movable-point"
2384
+ style="position: absolute; width: 48px; height: 48px; left: 176px; top: 101px; transform: translateX(0px) translateY(0px) translateZ(0);"
2385
+ >
2386
+ <svg
2387
+ height="48"
2388
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2389
+ version="1.1"
2390
+ width="48"
2391
+ xmlns="http://www.w3.org/2000/svg"
2392
+ >
2393
+ <desc
2394
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2395
+ >
2396
+ Created with Raphaël
2397
+ </desc>
2398
+ <defs
2399
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2400
+ />
2401
+ <ellipse
2402
+ cx="24"
2403
+ cy="24"
2404
+ fill="#000000"
2405
+ opacity="0"
2406
+ rx="24"
2407
+ ry="24"
2408
+ stroke="#000"
2409
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
2410
+ />
2411
+ </svg>
2412
+ </div>
2413
+ <div
2414
+ data-interactive-kind-for-testing="movable-point"
2415
+ style="position: absolute; width: 48px; height: 48px; left: 101px; top: 226px; transform: translateX(0px) translateY(0px) translateZ(0);"
2416
+ >
2417
+ <svg
2418
+ height="48"
2419
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2420
+ version="1.1"
2421
+ width="48"
2422
+ xmlns="http://www.w3.org/2000/svg"
2423
+ >
2424
+ <desc
2425
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2426
+ >
2427
+ Created with Raphaël
2428
+ </desc>
2429
+ <defs
2430
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2431
+ />
2432
+ <ellipse
2433
+ cx="24"
2434
+ cy="24"
2435
+ fill="#000000"
2436
+ opacity="0"
2437
+ rx="24"
2438
+ ry="24"
2439
+ stroke="#000"
2440
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
2441
+ />
2442
+ </svg>
2443
+ </div>
2444
+ </div>
2445
+ <span
2446
+ class="graphie-label"
2447
+ data-math-formula=""
2448
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
2449
+ >
2450
+ <span
2451
+ class="katex-holder"
2452
+ />
2453
+ <span
2454
+ class="mathjax-holder"
2455
+ />
2456
+ </span>
2457
+ <span
2458
+ class="graphie-label"
2459
+ data-math-formula=""
2460
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
2461
+ >
2462
+ <span
2463
+ class="katex-holder"
2464
+ />
2465
+ <span
2466
+ class="mathjax-holder"
2467
+ />
2468
+ </span>
2469
+ <span
2470
+ class="graphie-label"
2471
+ data-math-formula=""
2472
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
2473
+ >
2474
+ <span
2475
+ class="katex-holder"
2476
+ />
2477
+ <span
2478
+ class="mathjax-holder"
2479
+ />
2480
+ </span>
2481
+ <span
2482
+ class="graphie-label"
2483
+ data-math-formula=""
2484
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
2485
+ >
2486
+ <span
2487
+ class="katex-holder"
2488
+ />
2489
+ <span
2490
+ class="mathjax-holder"
2491
+ />
2492
+ </span>
2493
+ <span
2494
+ class="graphie-label"
2495
+ data-math-formula=""
2496
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
2497
+ >
2498
+ <span
2499
+ class="katex-holder"
2500
+ />
2501
+ <span
2502
+ class="mathjax-holder"
2503
+ />
2504
+ </span>
2505
+ <span
2506
+ class="graphie-label"
2507
+ data-math-formula=""
2508
+ style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 200px; top: 200px; fill: none; stroke: #6495ED;"
2509
+ >
2510
+ <span
2511
+ class="katex-holder"
2512
+ />
2513
+ <span
2514
+ class="mathjax-holder"
2515
+ />
2516
+ </span>
2517
+ </div>
2518
+ </div>
2519
+ </div>
2520
+ </div>
2521
+ </div>
2522
+ </div>
2523
+ </div>
2524
+ </span>
2525
+ </div>
2526
+ `;
2527
+
2528
+ exports[`interactive-graph widget question Shoud render predictably: first render 3`] = `
2529
+ <div>
2530
+ <span
2531
+ class="mock-KatexProvider"
2532
+ >
2533
+ <div
2534
+ class="perseus-renderer perseus-renderer-responsive"
2535
+ >
2536
+ <div
2537
+ class="paragraph"
2538
+ data-perseus-paragraph-index="0"
2539
+ >
2540
+ <div
2541
+ class="paragraph"
2542
+ >
2543
+ We want to find the zeros of this polynomial:
2544
+ </div>
2545
+ </div>
2546
+ <div
2547
+ class="paragraph perseus-paragraph-centered"
2548
+ data-perseus-paragraph-index="1"
2549
+ >
2550
+ <div
2551
+ class="perseus-block-math"
2552
+ >
2553
+ <div
2554
+ class="perseus-block-math-inner"
2555
+ style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
2556
+ >
2557
+ <span
2558
+ class="mock-TeX"
2559
+ >
2560
+ p(x)=x(2x+5)(x+1)
2561
+ </span>
2562
+ </div>
2563
+ </div>
2564
+ </div>
2565
+ <div
2566
+ class="paragraph"
2567
+ data-perseus-paragraph-index="2"
2568
+ >
2569
+ <div
2570
+ class="paragraph"
2571
+ >
2572
+ <strong>
2573
+ Plot all the zeros (
2574
+ <span
2575
+ style="white-space: nowrap;"
2576
+ >
2577
+ <span />
2578
+ <span
2579
+ class="mock-TeX"
2580
+ >
2581
+ x
2582
+ </span>
2583
+ <span />
2584
+ </span>
2585
+ -intercepts) of the polynomial in the interactive graph.
2586
+ </strong>
2587
+ </div>
2588
+ </div>
2589
+ <div
2590
+ class="paragraph"
2591
+ data-perseus-paragraph-index="3"
2592
+ >
2593
+ <div
2594
+ class="paragraph"
2595
+ >
2596
+ <div
2597
+ class="perseus-widget-container widget-nohighlight widget-block"
2598
+ >
2599
+ <div
2600
+ class="perseus-widget perseus-widget-interactive-graph"
2601
+ style="width: 400px; height: 400px;"
2602
+ >
2603
+ <div
2604
+ class="graphie-container above-scratchpad"
2605
+ style="width: 400px; height: 400px;"
2606
+ >
2607
+ <div
2608
+ class="unresponsive-svg-image"
2609
+ style="width: 425px; height: 425px;"
2610
+ >
2611
+ <span
2612
+ style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
2613
+ />
2614
+ </div>
2615
+ <div
2616
+ class="graphie"
2617
+ style="position: relative; width: 400px; height: 400px;"
2618
+ >
2619
+ <svg
2620
+ height="400"
2621
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
2622
+ version="1.1"
2623
+ width="400"
2624
+ xmlns="http://www.w3.org/2000/svg"
2625
+ >
2626
+ <desc
2627
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2628
+ >
2629
+ Created with Raphaël
2630
+ </desc>
2631
+ <defs
2632
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2633
+ />
2634
+ <rect
2635
+ fill="#000000"
2636
+ height="400"
2637
+ opacity="0"
2638
+ r="0"
2639
+ rx="0"
2640
+ ry="0"
2641
+ stroke="#000"
2642
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
2643
+ width="400"
2644
+ x="0"
2645
+ y="0"
2646
+ />
2647
+ </svg>
2648
+ <svg
2649
+ height="400"
2650
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2651
+ version="1.1"
2652
+ width="400"
2653
+ xmlns="http://www.w3.org/2000/svg"
2654
+ >
2655
+ <desc
2656
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2657
+ >
2658
+ Created with Raphaël
2659
+ </desc>
2660
+ <defs
2661
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2662
+ />
2663
+ <image
2664
+ height="40"
2665
+ href="https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png"
2666
+ opacity="0.5"
2667
+ preserveAspectRatio="none"
2668
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"
2669
+ width="40"
2670
+ x="360"
2671
+ y="360"
2672
+ />
2673
+ </svg>
2674
+ <div
2675
+ 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;"
2676
+ >
2677
+ <span
2678
+ style="position: relative; top: 25%;"
2679
+ >
2680
+ Click to add points
2681
+ </span>
2682
+ </div>
2683
+ <div
2684
+ style="position: absolute; left: 0px; top: 0px;"
2685
+ />
2686
+ <div
2687
+ style="position: absolute; left: 0px; top: 0px; z-index: 2;"
2688
+ />
2689
+ </div>
2690
+ </div>
2691
+ </div>
2692
+ </div>
2693
+ </div>
2694
+ </div>
2695
+ </div>
2696
+ </span>
2697
+ </div>
2698
+ `;
2699
+
2700
+ exports[`interactive-graph widget question Shoud render predictably: first render 4`] = `
2701
+ <div>
2702
+ <span
2703
+ class="mock-KatexProvider"
2704
+ >
2705
+ <div
2706
+ class="perseus-renderer perseus-renderer-responsive"
2707
+ >
2708
+ <div
2709
+ class="paragraph"
2710
+ data-perseus-paragraph-index="0"
2711
+ >
2712
+ <div
2713
+ class="paragraph"
2714
+ >
2715
+ The graph below contains quadrilateral
2716
+ <span
2717
+ style="white-space: nowrap;"
2718
+ >
2719
+ <span />
2720
+ <span
2721
+ class="mock-TeX"
2722
+ >
2723
+ TREK
2724
+ </span>
2725
+ <span />
2726
+ </span>
2727
+ and the point
2728
+ <span
2729
+ style="white-space: nowrap;"
2730
+ >
2731
+ <span />
2732
+ <span
2733
+ class="mock-TeX"
2734
+ >
2735
+ P(-8,-6)
2736
+ </span>
2737
+ <span />
2738
+ </span>
2739
+ .
2740
+ </div>
2741
+ </div>
2742
+ <div
2743
+ class="paragraph"
2744
+ data-perseus-paragraph-index="1"
2745
+ >
2746
+ <div
2747
+ class="paragraph"
2748
+ >
2749
+ <strong>
2750
+ Draw the image of quadrilateral
2751
+ <span
2752
+ style="white-space: nowrap;"
2753
+ >
2754
+ <span />
2755
+ <span
2756
+ class="mock-TeX"
2757
+ >
2758
+ TREK
2759
+ </span>
2760
+ <span />
2761
+ </span>
2762
+ under a dilation whose center is
2763
+ <span
2764
+ style="white-space: nowrap;"
2765
+ >
2766
+ <span />
2767
+ <span
2768
+ class="mock-TeX"
2769
+ >
2770
+ P
2771
+ </span>
2772
+ <span />
2773
+ </span>
2774
+ and scale factor is
2775
+ <span
2776
+ style="white-space: nowrap;"
2777
+ >
2778
+ <span />
2779
+ <span
2780
+ class="mock-TeX"
2781
+ >
2782
+ 3
2783
+ </span>
2784
+ <span />
2785
+ </span>
2786
+ .
2787
+ </strong>
2788
+
2789
+ </div>
2790
+ </div>
2791
+ <div
2792
+ class="paragraph"
2793
+ data-perseus-paragraph-index="2"
2794
+ >
2795
+ <div
2796
+ class="paragraph"
2797
+ >
2798
+ <div
2799
+ class="perseus-widget-container widget-nohighlight widget-block"
2800
+ >
2801
+ <div
2802
+ class="perseus-widget perseus-widget-interactive-graph"
2803
+ style="width: 400px; height: 400px;"
2804
+ >
2805
+ <div
2806
+ class="graphie-container above-scratchpad"
2807
+ style="width: 400px; height: 400px;"
2808
+ >
2809
+ <div
2810
+ class="unresponsive-svg-image"
2811
+ style="width: 425px; height: 425px;"
2812
+ >
2813
+ <span
2814
+ style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
2815
+ />
2816
+ </div>
2817
+ <div
2818
+ class="graphie"
2819
+ style="position: relative; width: 400px; height: 400px;"
2820
+ >
2821
+ <svg
2822
+ height="400"
2823
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
2824
+ version="1.1"
2825
+ width="400"
2826
+ xmlns="http://www.w3.org/2000/svg"
2827
+ >
2828
+ <desc
2829
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2830
+ >
2831
+ Created with Raphaël
2832
+ </desc>
2833
+ <defs
2834
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2835
+ />
2836
+ <rect
2837
+ fill="#000000"
2838
+ height="400"
2839
+ opacity="0"
2840
+ r="0"
2841
+ rx="0"
2842
+ ry="0"
2843
+ stroke="#000"
2844
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
2845
+ width="400"
2846
+ x="0"
2847
+ y="0"
2848
+ />
2849
+ <path
2850
+ d="M0,0"
2851
+ fill="#000000"
2852
+ opacity="0"
2853
+ stroke="#000000"
2854
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
2855
+ />
2856
+ </svg>
2857
+ <svg
2858
+ height="400"
2859
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2860
+ version="1.1"
2861
+ width="400"
2862
+ xmlns="http://www.w3.org/2000/svg"
2863
+ >
2864
+ <desc
2865
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2866
+ >
2867
+ Created with Raphaël
2868
+ </desc>
2869
+ <defs
2870
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
2871
+ />
2872
+ <image
2873
+ height="40"
2874
+ href="https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png"
2875
+ opacity="0.5"
2876
+ preserveAspectRatio="none"
2877
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"
2878
+ width="40"
2879
+ x="360"
2880
+ y="360"
2881
+ />
2882
+ <path
2883
+ d="M0,0"
2884
+ fill="#71b307"
2885
+ fill-opacity="0"
2886
+ stroke="#71b307"
2887
+ stroke-width="2"
2888
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; fill-opacity: 0;"
2889
+ />
2890
+ </svg>
2891
+ <div
2892
+ 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;"
2893
+ >
2894
+ <span
2895
+ style="position: relative; top: 25%;"
2896
+ >
2897
+ Click to add vertices
2898
+ </span>
2899
+ </div>
2900
+ <div
2901
+ style="position: absolute; left: 0px; top: 0px;"
2902
+ />
2903
+ <div
2904
+ style="position: absolute; left: 0px; top: 0px; z-index: 2;"
2905
+ />
2906
+ </div>
2907
+ </div>
2908
+ </div>
2909
+ </div>
2910
+ </div>
2911
+ </div>
2912
+ </div>
2913
+ </span>
2914
+ </div>
2915
+ `;