@khanacademy/perseus 7.1.1 → 7.2.1

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 (75) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/es/index.css +61 -61
  3. package/dist/es/index.js +100 -168
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.css +61 -61
  6. package/dist/index.js +89 -126
  7. package/dist/index.js.map +1 -1
  8. package/dist/util.d.ts +7 -12
  9. package/dist/util.graphie.d.ts +6 -0
  10. package/dist/util.graphie.js.flow +14 -0
  11. package/dist/util.js.flow +7 -12
  12. package/dist/widgets/plotter.d.ts +47 -13
  13. package/dist/widgets/plotter.js.flow +47 -13
  14. package/package.json +2 -2
  15. package/src/__tests__/item-renderer.test.tsx +1 -1
  16. package/src/components/__stories__/image-loader.stories.tsx +1 -0
  17. package/src/components/graph.tsx +1 -0
  18. package/src/components/icon.tsx +1 -0
  19. package/src/components/image-loader.tsx +1 -0
  20. package/src/components/number-input.tsx +1 -0
  21. package/src/components/sortable.tsx +1 -0
  22. package/src/components/svg-image.tsx +1 -0
  23. package/src/components/tex-buttons.tsx +1 -0
  24. package/src/components/text-input.tsx +1 -0
  25. package/src/components/text-list-editor.tsx +1 -0
  26. package/src/components/zoomable.tsx +1 -0
  27. package/src/hints-renderer.tsx +1 -0
  28. package/src/index.ts +1 -0
  29. package/src/item-renderer.tsx +1 -0
  30. package/src/mixins/provide-keypad.tsx +1 -0
  31. package/src/multi-items/multi-renderer.tsx +1 -0
  32. package/src/renderer.tsx +1 -0
  33. package/src/server-item-renderer.tsx +1 -0
  34. package/src/styles/articles.less +8 -4
  35. package/src/styles/perseus-renderer.less +47 -38
  36. package/src/styles/util.less +1 -1
  37. package/src/styles/variables.boostrap.less +158 -182
  38. package/src/styles/variables.less +20 -20
  39. package/src/styles/variables.shared.less +162 -168
  40. package/src/styles/widgets/categorizer.less +1 -2
  41. package/src/styles/widgets/expression.less +7 -4
  42. package/src/styles/widgets/grapher.less +2 -1
  43. package/src/styles/widgets/image.less +3 -2
  44. package/src/styles/widgets/interactive-graph.less +4 -2
  45. package/src/styles/widgets/label-image.less +2 -1
  46. package/src/styles/widgets/matrix.less +11 -7
  47. package/src/styles/widgets/orderer.less +2 -1
  48. package/src/styles/widgets/passage.less +2 -1
  49. package/src/styles/widgets/plotter.less +4 -3
  50. package/src/styles/widgets/radio.less +4 -2
  51. package/src/styles/widgets/sortable.less +1 -1
  52. package/src/styles/widgets/table.less +2 -1
  53. package/src/styles/widgets/transformer.less +2 -1
  54. package/src/styles/widgets/unit.less +2 -1
  55. package/src/util.graphie.test.ts +45 -0
  56. package/src/util.graphie.ts +59 -0
  57. package/src/util.ts +8 -63
  58. package/src/widgets/__stories__/plotter.stories.tsx +27 -0
  59. package/src/widgets/__testdata__/plotter.testdata.ts +36 -0
  60. package/src/widgets/__tests__/__snapshots__/plotter.test.tsx.snap +863 -0
  61. package/src/widgets/__tests__/plotter.test.tsx +65 -0
  62. package/src/widgets/categorizer.tsx +1 -0
  63. package/src/widgets/graded-group-set.tsx +1 -0
  64. package/src/widgets/graded-group.tsx +1 -0
  65. package/src/widgets/interaction.tsx +1 -0
  66. package/src/widgets/label-image/marker.tsx +1 -0
  67. package/src/widgets/matcher.tsx +1 -0
  68. package/src/widgets/orderer.tsx +1 -0
  69. package/src/widgets/passage-ref-target.tsx +1 -0
  70. package/src/widgets/plotter.tsx +108 -98
  71. package/src/widgets/radio/base-radio.tsx +1 -0
  72. package/src/widgets/radio/choice-icon/choice-icon.tsx +1 -0
  73. package/src/widgets/sorter.tsx +1 -0
  74. package/src/widgets/transformer.tsx +1 -0
  75. package/tsconfig-build.tsbuildinfo +1 -1
@@ -0,0 +1,863 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`plotter widget should snapshot basic question: initial render 1`] = `
4
+ <div>
5
+ <div
6
+ class="perseus-renderer perseus-renderer-responsive"
7
+ >
8
+ <div
9
+ class="paragraph"
10
+ data-perseus-paragraph-index="0"
11
+ >
12
+ <div
13
+ class="paragraph"
14
+ >
15
+ The elementary school principal asked teachers to report the number of students absent in each grade during the past week.
16
+ </div>
17
+ </div>
18
+ <div
19
+ class="paragraph"
20
+ data-perseus-paragraph-index="1"
21
+ >
22
+ <div
23
+ class="paragraph"
24
+ >
25
+ <strong>
26
+ Create a bar graph to show how many students were absent in each grade.
27
+ </strong>
28
+ </div>
29
+ </div>
30
+ <div
31
+ class="paragraph"
32
+ data-perseus-paragraph-index="2"
33
+ >
34
+ <table>
35
+ <thead>
36
+ <tr>
37
+ <th
38
+ scope="col"
39
+ style="text-align: left;"
40
+ >
41
+ School grade
42
+ </th>
43
+ <th
44
+ scope="col"
45
+ style="text-align: center;"
46
+ >
47
+ Number of absent students
48
+ </th>
49
+ </tr>
50
+ </thead>
51
+ <tbody>
52
+ <tr>
53
+ <td
54
+ style="text-align: left;"
55
+ >
56
+ <span
57
+ style="white-space: nowrap;"
58
+ >
59
+ <span />
60
+ <span
61
+ class="mock-TeX"
62
+ >
63
+ 1^{\\text{st}} \\text{ grade}
64
+ </span>
65
+ <span />
66
+ </span>
67
+ </td>
68
+ <td
69
+ style="text-align: center;"
70
+ >
71
+ <span
72
+ style="white-space: nowrap;"
73
+ >
74
+ <span />
75
+ <span
76
+ class="mock-TeX"
77
+ >
78
+ 15
79
+ </span>
80
+ <span />
81
+ </span>
82
+ </td>
83
+ </tr>
84
+ <tr>
85
+ <td
86
+ style="text-align: left;"
87
+ >
88
+ <span
89
+ style="white-space: nowrap;"
90
+ >
91
+ <span />
92
+ <span
93
+ class="mock-TeX"
94
+ >
95
+ 2^{\\text{nd}} \\text{ grade}
96
+ </span>
97
+ <span />
98
+ </span>
99
+ </td>
100
+ <td
101
+ style="text-align: center;"
102
+ >
103
+ <span
104
+ style="white-space: nowrap;"
105
+ >
106
+ <span />
107
+ <span
108
+ class="mock-TeX"
109
+ >
110
+ 25
111
+ </span>
112
+ <span />
113
+ </span>
114
+ </td>
115
+ </tr>
116
+ <tr>
117
+ <td
118
+ style="text-align: left;"
119
+ >
120
+ <span
121
+ style="white-space: nowrap;"
122
+ >
123
+ <span />
124
+ <span
125
+ class="mock-TeX"
126
+ >
127
+ 3^{\\text{rd}} \\text{ grade}
128
+ </span>
129
+ <span />
130
+ </span>
131
+ </td>
132
+ <td
133
+ style="text-align: center;"
134
+ >
135
+ <span
136
+ style="white-space: nowrap;"
137
+ >
138
+ <span />
139
+ <span
140
+ class="mock-TeX"
141
+ >
142
+ 5
143
+ </span>
144
+ <span />
145
+ </span>
146
+ </td>
147
+ </tr>
148
+ <tr>
149
+ <td
150
+ style="text-align: left;"
151
+ >
152
+ <span
153
+ style="white-space: nowrap;"
154
+ >
155
+ <span />
156
+ <span
157
+ class="mock-TeX"
158
+ >
159
+ 4^{\\text{th}} \\text{ grade}
160
+ </span>
161
+ <span />
162
+ </span>
163
+ </td>
164
+ <td
165
+ style="text-align: center;"
166
+ >
167
+ <span
168
+ style="white-space: nowrap;"
169
+ >
170
+ <span />
171
+ <span
172
+ class="mock-TeX"
173
+ >
174
+ 10
175
+ </span>
176
+ <span />
177
+ </span>
178
+ </td>
179
+ </tr>
180
+ <tr>
181
+ <td
182
+ style="text-align: left;"
183
+ >
184
+ <span
185
+ style="white-space: nowrap;"
186
+ >
187
+ <span />
188
+ <span
189
+ class="mock-TeX"
190
+ >
191
+ 5^{\\text{th}} \\text{ grade}
192
+ </span>
193
+ <span />
194
+ </span>
195
+ </td>
196
+ <td
197
+ style="text-align: center;"
198
+ >
199
+ <span
200
+ style="white-space: nowrap;"
201
+ >
202
+ <span />
203
+ <span
204
+ class="mock-TeX"
205
+ >
206
+ 10
207
+ </span>
208
+ <span />
209
+ </span>
210
+ </td>
211
+ </tr>
212
+ </tbody>
213
+ </table>
214
+ </div>
215
+ <div
216
+ class="paragraph"
217
+ data-perseus-paragraph-index="3"
218
+ >
219
+ <div
220
+ class="paragraph"
221
+ >
222
+ <div
223
+ class="perseus-widget-container widget-nohighlight widget-block"
224
+ >
225
+ <div
226
+ class="perseus-widget-plotter graphie perseus-interactive"
227
+ style="margin-bottom: 75px; position: relative; width: 479.99999999999994px; height: 400px;"
228
+ >
229
+ <svg
230
+ height="400"
231
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
232
+ version="1.1"
233
+ width="479.99999999999994"
234
+ xmlns="http://www.w3.org/2000/svg"
235
+ >
236
+ <desc
237
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
238
+ >
239
+ Created with Raphaël
240
+ </desc>
241
+ <defs
242
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
243
+ />
244
+ </svg>
245
+ <svg
246
+ height="400"
247
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
248
+ version="1.1"
249
+ width="479.99999999999994"
250
+ xmlns="http://www.w3.org/2000/svg"
251
+ >
252
+ <desc
253
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
254
+ >
255
+ Created with Raphaël
256
+ </desc>
257
+ <defs
258
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
259
+ />
260
+ <path
261
+ d="M75,325L455,325"
262
+ fill="none"
263
+ opacity="0.3"
264
+ stroke="#000000"
265
+ stroke-width="1"
266
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1; opacity: 0.3;"
267
+ />
268
+ <path
269
+ d="M75,275L455,275"
270
+ fill="none"
271
+ opacity="0.3"
272
+ stroke="#000000"
273
+ stroke-width="1"
274
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1; opacity: 0.3;"
275
+ />
276
+ <path
277
+ d="M75,225L455,225"
278
+ fill="none"
279
+ opacity="0.3"
280
+ stroke="#000000"
281
+ stroke-width="1"
282
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1; opacity: 0.3;"
283
+ />
284
+ <path
285
+ d="M75,175L455,175"
286
+ fill="none"
287
+ opacity="0.3"
288
+ stroke="#000000"
289
+ stroke-width="1"
290
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1; opacity: 0.3;"
291
+ />
292
+ <path
293
+ d="M75,125L455,125"
294
+ fill="none"
295
+ opacity="0.3"
296
+ stroke="#000000"
297
+ stroke-width="1"
298
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1; opacity: 0.3;"
299
+ />
300
+ <path
301
+ d="M75,75L455,75"
302
+ fill="none"
303
+ opacity="0.3"
304
+ stroke="#000000"
305
+ stroke-width="1"
306
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1; opacity: 0.3;"
307
+ />
308
+ <path
309
+ d="M75,25L455,25"
310
+ fill="none"
311
+ opacity="0.3"
312
+ stroke="#000000"
313
+ stroke-width="1"
314
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1; opacity: 0.3;"
315
+ />
316
+ <path
317
+ d="M96.50927358490566,325L96.50927358490566,324.5L146.69827358490565,324.5L146.69827358490565,325L96.50927358490566,325"
318
+ fill="#9ab8ed"
319
+ opacity="1"
320
+ stroke="none"
321
+ stroke-width="2"
322
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
323
+ transform=""
324
+ />
325
+ <path
326
+ d="M121.60377358490565,325L121.60377358490565,331"
327
+ fill="none"
328
+ opacity="1"
329
+ stroke="#000000"
330
+ stroke-width="2"
331
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
332
+ />
333
+ <path
334
+ d="M168.20738679245284,325L168.20738679245284,324.5L218.39638679245283,324.5L218.39638679245283,325L168.20738679245284,325"
335
+ fill="#9ab8ed"
336
+ opacity="1"
337
+ stroke="none"
338
+ stroke-width="4"
339
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4; opacity: 1;"
340
+ transform=""
341
+ />
342
+ <path
343
+ d="M193.30188679245282,325L193.30188679245282,331"
344
+ fill="none"
345
+ opacity="1"
346
+ stroke="#000000"
347
+ stroke-width="2"
348
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
349
+ />
350
+ <path
351
+ d="M239.9055,325L239.9055,324.5L290.0945,324.5L290.0945,325L239.9055,325"
352
+ fill="#9ab8ed"
353
+ opacity="1"
354
+ stroke="none"
355
+ stroke-width="4"
356
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4; opacity: 1;"
357
+ transform=""
358
+ />
359
+ <path
360
+ d="M265,325L265,331"
361
+ fill="none"
362
+ opacity="1"
363
+ stroke="#000000"
364
+ stroke-width="2"
365
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
366
+ />
367
+ <path
368
+ d="M311.60361320754714,325L311.60361320754714,324.5L361.79261320754716,324.5L361.79261320754716,325L311.60361320754714,325"
369
+ fill="#9ab8ed"
370
+ opacity="1"
371
+ stroke="none"
372
+ stroke-width="4"
373
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4; opacity: 1;"
374
+ transform=""
375
+ />
376
+ <path
377
+ d="M336.6981132075471,325L336.6981132075471,331"
378
+ fill="none"
379
+ opacity="1"
380
+ stroke="#000000"
381
+ stroke-width="2"
382
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
383
+ />
384
+ <path
385
+ d="M383.3017264150943,325L383.3017264150943,324.5L433.49072641509434,324.5L433.49072641509434,325L383.3017264150943,325"
386
+ fill="#9ab8ed"
387
+ opacity="1"
388
+ stroke="none"
389
+ stroke-width="4"
390
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4; opacity: 1;"
391
+ transform=""
392
+ />
393
+ <path
394
+ d="M408.3962264150943,325L408.3962264150943,331"
395
+ fill="none"
396
+ opacity="1"
397
+ stroke="#000000"
398
+ stroke-width="2"
399
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
400
+ />
401
+ <path
402
+ d="M75,325L455,325"
403
+ fill="none"
404
+ opacity="1"
405
+ stroke="#000000"
406
+ stroke-width="2"
407
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
408
+ />
409
+ <path
410
+ d="M75,325L75,25"
411
+ fill="none"
412
+ opacity="1"
413
+ stroke="#000000"
414
+ stroke-width="2"
415
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
416
+ />
417
+ </svg>
418
+ <div
419
+ style="position: absolute; left: 0px; top: 0px;"
420
+ >
421
+ <div
422
+ style="position: absolute; width: 485.99999999999994px; height: 6px; left: -3px; top: 322px; transform-origin: 3px 3px; transform: translateX(96.50943396226415px) translateY(0px) translateZ(0)rotate(0deg) scaleX(0.10455974842767292) scaleY(1);"
423
+ >
424
+ <svg
425
+ height="6"
426
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
427
+ version="1.1"
428
+ width="485.99999999999994"
429
+ xmlns="http://www.w3.org/2000/svg"
430
+ >
431
+ <desc
432
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
433
+ >
434
+ Created with Raphaël
435
+ </desc>
436
+ <defs
437
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
438
+ />
439
+ <path
440
+ d="M3,3L482.99999999999994,3"
441
+ fill="none"
442
+ stroke="#71b307"
443
+ stroke-width="4"
444
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4;"
445
+ />
446
+ </svg>
447
+ </div>
448
+ <div
449
+ style="position: absolute; width: 485.99999999999994px; height: 6px; left: -3px; top: 322px; transform-origin: 3px 3px; transform: translateX(168.2075471698113px) translateY(0px) translateZ(0)rotate(0deg) scaleX(0.10455974842767299) scaleY(1);"
450
+ >
451
+ <svg
452
+ height="6"
453
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
454
+ version="1.1"
455
+ width="485.99999999999994"
456
+ xmlns="http://www.w3.org/2000/svg"
457
+ >
458
+ <desc
459
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
460
+ >
461
+ Created with Raphaël
462
+ </desc>
463
+ <defs
464
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
465
+ />
466
+ <path
467
+ d="M3,3L482.99999999999994,3"
468
+ fill="none"
469
+ stroke="#71b307"
470
+ stroke-width="4"
471
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4;"
472
+ />
473
+ </svg>
474
+ </div>
475
+ <div
476
+ style="position: absolute; width: 485.99999999999994px; height: 6px; left: -3px; top: 322px; transform-origin: 3px 3px; transform: translateX(239.90566037735846px) translateY(0px) translateZ(0)rotate(0deg) scaleX(0.10455974842767299) scaleY(1);"
477
+ >
478
+ <svg
479
+ height="6"
480
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
481
+ version="1.1"
482
+ width="485.99999999999994"
483
+ xmlns="http://www.w3.org/2000/svg"
484
+ >
485
+ <desc
486
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
487
+ >
488
+ Created with Raphaël
489
+ </desc>
490
+ <defs
491
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
492
+ />
493
+ <path
494
+ d="M3,3L482.99999999999994,3"
495
+ fill="none"
496
+ stroke="#71b307"
497
+ stroke-width="4"
498
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4;"
499
+ />
500
+ </svg>
501
+ </div>
502
+ <div
503
+ style="position: absolute; width: 485.99999999999994px; height: 6px; left: -3px; top: 322px; transform-origin: 3px 3px; transform: translateX(311.60377358490564px) translateY(0px) translateZ(0)rotate(0deg) scaleX(0.10455974842767286) scaleY(1);"
504
+ >
505
+ <svg
506
+ height="6"
507
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
508
+ version="1.1"
509
+ width="485.99999999999994"
510
+ xmlns="http://www.w3.org/2000/svg"
511
+ >
512
+ <desc
513
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
514
+ >
515
+ Created with Raphaël
516
+ </desc>
517
+ <defs
518
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
519
+ />
520
+ <path
521
+ d="M3,3L482.99999999999994,3"
522
+ fill="none"
523
+ stroke="#71b307"
524
+ stroke-width="4"
525
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4;"
526
+ />
527
+ </svg>
528
+ </div>
529
+ <div
530
+ style="position: absolute; width: 485.99999999999994px; height: 6px; left: -3px; top: 322px; transform-origin: 3px 3px; transform: translateX(383.3018867924528px) translateY(0px) translateZ(0)rotate(0deg) scaleX(0.10455974842767286) scaleY(1);"
531
+ >
532
+ <svg
533
+ height="6"
534
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
535
+ version="1.1"
536
+ width="485.99999999999994"
537
+ xmlns="http://www.w3.org/2000/svg"
538
+ >
539
+ <desc
540
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
541
+ >
542
+ Created with Raphaël
543
+ </desc>
544
+ <defs
545
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
546
+ />
547
+ <path
548
+ d="M3,3L482.99999999999994,3"
549
+ fill="none"
550
+ stroke="#71b307"
551
+ stroke-width="4"
552
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4;"
553
+ />
554
+ </svg>
555
+ </div>
556
+ </div>
557
+ <div
558
+ style="position: absolute; left: 0px; top: 0px; z-index: 2;"
559
+ >
560
+ <div
561
+ data-interactive-kind-for-testing="movable-line"
562
+ style="position: absolute; width: 509.99999999999994px; height: 30px; left: -15px; top: 310px; transform-origin: 15px 15px; transform: translateX(96.50943396226415px) translateY(0px) translateZ(0)rotate(0deg) scaleX(0.10455974842767292) scaleY(1); cursor: move;"
563
+ >
564
+ <svg
565
+ height="30"
566
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
567
+ version="1.1"
568
+ width="509.99999999999994"
569
+ xmlns="http://www.w3.org/2000/svg"
570
+ >
571
+ <desc
572
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
573
+ >
574
+ Created with Raphaël
575
+ </desc>
576
+ <defs
577
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
578
+ />
579
+ <path
580
+ d="M15,15L494.99999999999994,15"
581
+ fill="#000000"
582
+ opacity="0"
583
+ stroke="#000000"
584
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
585
+ />
586
+ </svg>
587
+ </div>
588
+ <div
589
+ data-interactive-kind-for-testing="movable-line"
590
+ style="position: absolute; width: 509.99999999999994px; height: 30px; left: -15px; top: 310px; transform-origin: 15px 15px; transform: translateX(168.2075471698113px) translateY(0px) translateZ(0)rotate(0deg) scaleX(0.10455974842767299) scaleY(1); cursor: move;"
591
+ >
592
+ <svg
593
+ height="30"
594
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
595
+ version="1.1"
596
+ width="509.99999999999994"
597
+ xmlns="http://www.w3.org/2000/svg"
598
+ >
599
+ <desc
600
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
601
+ >
602
+ Created with Raphaël
603
+ </desc>
604
+ <defs
605
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
606
+ />
607
+ <path
608
+ d="M15,15L494.99999999999994,15"
609
+ fill="#000000"
610
+ opacity="0"
611
+ stroke="#000000"
612
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
613
+ />
614
+ </svg>
615
+ </div>
616
+ <div
617
+ data-interactive-kind-for-testing="movable-line"
618
+ style="position: absolute; width: 509.99999999999994px; height: 30px; left: -15px; top: 310px; transform-origin: 15px 15px; transform: translateX(239.90566037735846px) translateY(0px) translateZ(0)rotate(0deg) scaleX(0.10455974842767299) scaleY(1); cursor: move;"
619
+ >
620
+ <svg
621
+ height="30"
622
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
623
+ version="1.1"
624
+ width="509.99999999999994"
625
+ xmlns="http://www.w3.org/2000/svg"
626
+ >
627
+ <desc
628
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
629
+ >
630
+ Created with Raphaël
631
+ </desc>
632
+ <defs
633
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
634
+ />
635
+ <path
636
+ d="M15,15L494.99999999999994,15"
637
+ fill="#000000"
638
+ opacity="0"
639
+ stroke="#000000"
640
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
641
+ />
642
+ </svg>
643
+ </div>
644
+ <div
645
+ data-interactive-kind-for-testing="movable-line"
646
+ style="position: absolute; width: 509.99999999999994px; height: 30px; left: -15px; top: 310px; transform-origin: 15px 15px; transform: translateX(311.60377358490564px) translateY(0px) translateZ(0)rotate(0deg) scaleX(0.10455974842767286) scaleY(1); cursor: move;"
647
+ >
648
+ <svg
649
+ height="30"
650
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
651
+ version="1.1"
652
+ width="509.99999999999994"
653
+ xmlns="http://www.w3.org/2000/svg"
654
+ >
655
+ <desc
656
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
657
+ >
658
+ Created with Raphaël
659
+ </desc>
660
+ <defs
661
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
662
+ />
663
+ <path
664
+ d="M15,15L494.99999999999994,15"
665
+ fill="#000000"
666
+ opacity="0"
667
+ stroke="#000000"
668
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
669
+ />
670
+ </svg>
671
+ </div>
672
+ <div
673
+ data-interactive-kind-for-testing="movable-line"
674
+ style="position: absolute; width: 509.99999999999994px; height: 30px; left: -15px; top: 310px; transform-origin: 15px 15px; transform: translateX(383.3018867924528px) translateY(0px) translateZ(0)rotate(0deg) scaleX(0.10455974842767286) scaleY(1); cursor: move;"
675
+ >
676
+ <svg
677
+ height="30"
678
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
679
+ version="1.1"
680
+ width="509.99999999999994"
681
+ xmlns="http://www.w3.org/2000/svg"
682
+ >
683
+ <desc
684
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
685
+ >
686
+ Created with Raphaël
687
+ </desc>
688
+ <defs
689
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
690
+ />
691
+ <path
692
+ d="M15,15L494.99999999999994,15"
693
+ fill="#000000"
694
+ opacity="0"
695
+ stroke="#000000"
696
+ style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
697
+ />
698
+ </svg>
699
+ </div>
700
+ </div>
701
+ <span
702
+ class="graphie-label"
703
+ data-math-formula="0"
704
+ style="position: absolute; padding: 7px; color: black; left: 75px; top: 325px; fill: none;"
705
+ >
706
+ <span
707
+ class="katex-holder"
708
+ />
709
+ <span
710
+ class="mathjax-holder"
711
+ />
712
+ </span>
713
+ <span
714
+ class="graphie-label"
715
+ data-math-formula="5"
716
+ style="position: absolute; padding: 7px; color: black; left: 75px; top: 275px; fill: none;"
717
+ >
718
+ <span
719
+ class="katex-holder"
720
+ />
721
+ <span
722
+ class="mathjax-holder"
723
+ />
724
+ </span>
725
+ <span
726
+ class="graphie-label"
727
+ data-math-formula="10"
728
+ style="position: absolute; padding: 7px; color: black; left: 75px; top: 225px; fill: none;"
729
+ >
730
+ <span
731
+ class="katex-holder"
732
+ />
733
+ <span
734
+ class="mathjax-holder"
735
+ />
736
+ </span>
737
+ <span
738
+ class="graphie-label"
739
+ data-math-formula="15"
740
+ style="position: absolute; padding: 7px; color: black; left: 75px; top: 175px; fill: none;"
741
+ >
742
+ <span
743
+ class="katex-holder"
744
+ />
745
+ <span
746
+ class="mathjax-holder"
747
+ />
748
+ </span>
749
+ <span
750
+ class="graphie-label"
751
+ data-math-formula="20"
752
+ style="position: absolute; padding: 7px; color: black; left: 75px; top: 125px; fill: none;"
753
+ >
754
+ <span
755
+ class="katex-holder"
756
+ />
757
+ <span
758
+ class="mathjax-holder"
759
+ />
760
+ </span>
761
+ <span
762
+ class="graphie-label"
763
+ data-math-formula="25"
764
+ style="position: absolute; padding: 7px; color: black; left: 75px; top: 75px; fill: none;"
765
+ >
766
+ <span
767
+ class="katex-holder"
768
+ />
769
+ <span
770
+ class="mathjax-holder"
771
+ />
772
+ </span>
773
+ <span
774
+ class="graphie-label"
775
+ data-math-formula="30"
776
+ style="position: absolute; padding: 7px; color: black; left: 75px; top: 25px; fill: none;"
777
+ >
778
+ <span
779
+ class="katex-holder"
780
+ />
781
+ <span
782
+ class="mathjax-holder"
783
+ />
784
+ </span>
785
+ <span
786
+ class="graphie-label"
787
+ data-math-formula="1^{\\text{st}} \\text{}"
788
+ style="position: absolute; padding: 7px; color: black; left: 121.60377358490565px; top: 325px; fill: none; stroke: #71B307; transform: none; transform-origin: 100%;"
789
+ >
790
+ <span
791
+ class="katex-holder"
792
+ />
793
+ <span
794
+ class="mathjax-holder"
795
+ />
796
+ </span>
797
+ <span
798
+ class="graphie-label"
799
+ data-math-formula="2^{\\text{nd}} \\text{}"
800
+ style="position: absolute; padding: 7px; color: black; left: 193.30188679245282px; top: 325px; fill: none; stroke: #71B307; transform: none; transform-origin: 100%;"
801
+ >
802
+ <span
803
+ class="katex-holder"
804
+ />
805
+ <span
806
+ class="mathjax-holder"
807
+ />
808
+ </span>
809
+ <span
810
+ class="graphie-label"
811
+ data-math-formula="3^{\\text{rd}} \\text{}"
812
+ style="position: absolute; padding: 7px; color: black; left: 265px; top: 325px; fill: none; stroke: #71B307; transform: none; transform-origin: 100%;"
813
+ >
814
+ <span
815
+ class="katex-holder"
816
+ />
817
+ <span
818
+ class="mathjax-holder"
819
+ />
820
+ </span>
821
+ <span
822
+ class="graphie-label"
823
+ data-math-formula="4^{\\text{th}} \\text{}"
824
+ style="position: absolute; padding: 7px; color: black; left: 336.6981132075471px; top: 325px; fill: none; stroke: #71B307; transform: none; transform-origin: 100%;"
825
+ >
826
+ <span
827
+ class="katex-holder"
828
+ />
829
+ <span
830
+ class="mathjax-holder"
831
+ />
832
+ </span>
833
+ <span
834
+ class="graphie-label"
835
+ data-math-formula="5^{\\text{th}} \\text{}"
836
+ style="position: absolute; padding: 7px; color: black; left: 408.3962264150943px; top: 325px; fill: none; stroke: #71B307; transform: none; transform-origin: 100%;"
837
+ >
838
+ <span
839
+ class="katex-holder"
840
+ />
841
+ <span
842
+ class="mathjax-holder"
843
+ />
844
+ </span>
845
+ <span
846
+ class="graphie-label"
847
+ style="position: absolute; padding: 7px; color: black; left: 265px; top: 360px; margin-left: 0px; margin-top: 0px; fill: none; stroke: #71B307; font-weight: bold;"
848
+ >
849
+ School grade
850
+ </span>
851
+ <span
852
+ class="graphie-label rotate"
853
+ style="position: absolute; padding: 7px; color: black; left: 14.999999999999995px; top: 175px; margin-left: 0px; margin-top: 0px; fill: none; stroke: #71B307; font-weight: bold;"
854
+ >
855
+ Number of absent students
856
+ </span>
857
+ </div>
858
+ </div>
859
+ </div>
860
+ </div>
861
+ </div>
862
+ </div>
863
+ `;