@khanacademy/perseus 5.0.0 → 6.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 (115) hide show
  1. package/CHANGELOG.md +62 -0
  2. package/dist/components/fixed-to-responsive.d.ts +27 -1
  3. package/dist/components/fixed-to-responsive.js.flow +27 -1
  4. package/dist/components/graph.d.ts +42 -26
  5. package/dist/components/graph.js.flow +42 -28
  6. package/dist/components/graphie.d.ts +34 -22
  7. package/dist/components/graphie.js.flow +37 -24
  8. package/dist/components/hud.d.ts +8 -14
  9. package/dist/components/hud.js.flow +7 -14
  10. package/dist/components/inline-icon.d.ts +9 -19
  11. package/dist/components/inline-icon.js.flow +26 -13
  12. package/dist/components/lint.d.ts +41 -13
  13. package/dist/components/lint.js.flow +42 -13
  14. package/dist/components/math-output.d.ts +15 -11
  15. package/dist/components/math-output.js.flow +15 -11
  16. package/dist/components/sortable.d.ts +17 -9
  17. package/dist/components/sortable.js.flow +22 -9
  18. package/dist/components/svg-image.d.ts +5 -3
  19. package/dist/components/svg-image.js.flow +5 -3
  20. package/dist/components/tooltip.d.ts +45 -4
  21. package/dist/components/tooltip.js.flow +44 -31
  22. package/dist/es/index.css +0 -3
  23. package/dist/es/index.js +478 -649
  24. package/dist/es/index.js.map +1 -1
  25. package/dist/index.css +0 -3
  26. package/dist/index.js +482 -646
  27. package/dist/index.js.map +1 -1
  28. package/dist/perseus-types.d.ts +11 -9
  29. package/dist/perseus-types.js.flow +11 -9
  30. package/dist/renderer.d.ts +2 -2
  31. package/dist/renderer.js.flow +1 -3
  32. package/dist/styles/shared.d.ts +0 -1
  33. package/dist/styles/shared.js.flow +0 -1
  34. package/dist/types.d.ts +0 -10
  35. package/dist/types.js.flow +0 -13
  36. package/dist/util/a11y.d.ts +0 -1
  37. package/dist/util/a11y.js.flow +0 -1
  38. package/dist/util/interactive.d.ts +2 -0
  39. package/dist/util/interactive.js.flow +2 -0
  40. package/dist/util.d.ts +3 -3
  41. package/dist/util.js.flow +4 -3
  42. package/dist/widgets/grapher.d.ts +1 -1
  43. package/dist/widgets/grapher.js.flow +12 -3
  44. package/dist/widgets/matcher.d.ts +7 -3
  45. package/dist/widgets/matcher.js.flow +7 -3
  46. package/dist/widgets/number-line.d.ts +1 -1
  47. package/dist/widgets/number-line.js.flow +1 -1
  48. package/package.json +2 -2
  49. package/src/__tests__/__snapshots__/item-renderer.test.tsx.snap +151 -159
  50. package/src/__tests__/__snapshots__/renderer.test.tsx.snap +358 -394
  51. package/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap +169 -189
  52. package/src/components/__stories__/lint.stories.tsx +56 -21
  53. package/src/components/__stories__/sortable.stories.tsx +5 -5
  54. package/src/components/__stories__/tooltip.stories.tsx +52 -0
  55. package/src/components/__tests__/__snapshots__/sortable.test.tsx.snap +114 -30
  56. package/src/components/__tests__/__snapshots__/sorter.test.tsx.snap +172 -204
  57. package/src/components/__tests__/sortable.test.tsx +54 -16
  58. package/src/components/__tests__/sorter.test.tsx +12 -9
  59. package/src/components/fixed-to-responsive.tsx +43 -38
  60. package/src/components/graph.tsx +95 -81
  61. package/src/components/graphie.tsx +62 -32
  62. package/src/components/hud.tsx +104 -115
  63. package/src/components/inline-icon.tsx +15 -32
  64. package/src/components/input-with-examples.tsx +4 -4
  65. package/src/components/lint.tsx +47 -41
  66. package/src/components/math-output.tsx +17 -11
  67. package/src/components/simple-keypad-input.tsx +2 -2
  68. package/src/components/sortable.tsx +134 -94
  69. package/src/components/svg-image.tsx +10 -11
  70. package/src/components/tooltip.tsx +189 -171
  71. package/src/interactive2/types.ts +2 -2
  72. package/src/mixins/provide-keypad.tsx +2 -2
  73. package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap +708 -764
  74. package/src/perseus-types.ts +13 -9
  75. package/src/renderer.tsx +11 -22
  76. package/src/types.ts +0 -18
  77. package/src/util/interactive.ts +18 -5
  78. package/src/util/tex.ts +13 -77
  79. package/src/util.ts +3 -4
  80. package/src/widgets/__stories__/test-keypad-context-wrapper.tsx +2 -2
  81. package/src/widgets/__tests__/__snapshots__/categorizer.test.ts.snap +717 -773
  82. package/src/widgets/__tests__/__snapshots__/cs-program.test.ts.snap +28 -36
  83. package/src/widgets/__tests__/__snapshots__/definition.test.ts.snap +52 -60
  84. package/src/widgets/__tests__/__snapshots__/dropdown.test.ts.snap +100 -108
  85. package/src/widgets/__tests__/__snapshots__/explanation.test.ts.snap +212 -260
  86. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt.test.ts.snap +613 -641
  87. package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap +249 -261
  88. package/src/widgets/__tests__/__snapshots__/graded-group.test.ts.snap +671 -735
  89. package/src/widgets/__tests__/__snapshots__/grapher.test.ts.snap +2676 -2684
  90. package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap +938 -1002
  91. package/src/widgets/__tests__/__snapshots__/iframe.test.ts.snap +28 -36
  92. package/src/widgets/__tests__/__snapshots__/image.test.ts.snap +227 -255
  93. package/src/widgets/__tests__/__snapshots__/input-number.test.ts.snap +353 -357
  94. package/src/widgets/__tests__/__snapshots__/interaction.test.ts.snap +255 -259
  95. package/src/widgets/__tests__/__snapshots__/interactive-graph.test.ts.snap +2401 -2433
  96. package/src/widgets/__tests__/__snapshots__/matcher.test.tsx.snap +600 -756
  97. package/src/widgets/__tests__/__snapshots__/matrix.test.ts.snap +420 -428
  98. package/src/widgets/__tests__/__snapshots__/number-line.test.ts.snap +762 -770
  99. package/src/widgets/__tests__/__snapshots__/numeric-input.test.ts.snap +373 -393
  100. package/src/widgets/__tests__/__snapshots__/orderer.test.ts.snap +116 -148
  101. package/src/widgets/__tests__/__snapshots__/passage-ref.test.ts.snap +289 -301
  102. package/src/widgets/__tests__/__snapshots__/passage.test.tsx.snap +1679 -1711
  103. package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap +2692 -2960
  104. package/src/widgets/__tests__/__snapshots__/video.test.ts.snap +90 -98
  105. package/src/widgets/__tests__/matcher.test.tsx +33 -9
  106. package/src/widgets/expression.tsx +9 -6
  107. package/src/widgets/grapher.tsx +3 -3
  108. package/src/widgets/image.tsx +2 -2
  109. package/src/widgets/interactive-graph.tsx +5 -5
  110. package/src/widgets/matcher.tsx +43 -24
  111. package/src/widgets/number-line.tsx +1 -1
  112. package/src/widgets/simulator.tsx +4 -6
  113. package/{tsconfig.json → tsconfig-build.json} +6 -6
  114. package/tsconfig-build.tsbuildinfo +1 -0
  115. package/tsconfig.tsbuildinfo +0 -1
package/src/widgets/__tests__/__snapshots__/passage-ref.test.ts.snap CHANGED
@@ -2,445 +2,433 @@
2
2
 
3
3
  exports[`passage-ref widget should render with invalid reference 1`] = `
4
4
  <div>
5
- <span
6
- class="mock-KatexProvider"
5
+ <div
6
+ class="perseus-renderer perseus-renderer-responsive"
7
7
  >
8
8
  <div
9
- class="perseus-renderer perseus-renderer-responsive"
9
+ class="paragraph"
10
+ data-perseus-paragraph-index="0"
10
11
  >
11
12
  <div
12
13
  class="paragraph"
13
- data-perseus-paragraph-index="0"
14
14
  >
15
15
  <div
16
- class="paragraph"
16
+ class="perseus-widget-container widget-nohighlight widget-block"
17
17
  >
18
- <div
19
- class="perseus-widget-container widget-nohighlight widget-block"
20
- >
21
- <div>
18
+ <div>
19
+ <div
20
+ class="perseus-widget-passage-container"
21
+ >
22
22
  <div
23
- class="perseus-widget-passage-container"
23
+ class="perseus-widget-passage-instructions"
24
24
  >
25
- <div
26
- class="perseus-widget-passage-instructions"
27
- >
28
-
25
+
29
26
 
30
- </div>
27
+ </div>
28
+ <div
29
+ class="perseus-widget-passage"
30
+ >
31
+ <h3
32
+ class="perseus-sr-only"
33
+ >
34
+ Beginning of reading passage.
35
+ </h3>
31
36
  <div
32
- class="perseus-widget-passage"
37
+ class="passage-text"
33
38
  >
34
- <h3
35
- class="perseus-sr-only"
36
- >
37
- Beginning of reading passage.
38
- </h3>
39
39
  <div
40
- class="passage-text"
40
+ class="container_6htn2u"
41
41
  >
42
- <div
43
- class="container_6htn2u"
44
- >
42
+ <div>
45
43
  <div>
46
44
  <div>
47
- <div>
48
- <div />
49
- </div>
45
+ <div />
50
46
  </div>
51
47
  </div>
52
- <div
53
- class="content_gor68n"
54
- >
48
+ </div>
49
+ <div
50
+ class="content_gor68n"
51
+ >
52
+ <div>
55
53
  <div>
56
- <div>
57
- <div
58
- aria-hidden="true"
59
- class="measurer_225hir"
60
- >
61
- <div
62
- class="paragraph"
63
- >
64
- Line Height Measurement
65
- </div>
66
- </div>
54
+ <div
55
+ aria-hidden="true"
56
+ class="measurer_225hir"
57
+ >
67
58
  <div
68
59
  class="paragraph"
69
60
  >
70
- <span>
71
- Our electronic devices are keeping us awake—not just because we spend time using them when we should be sleeping
72
- </span>
73
- <span>
74
- , but also because they emit a blue light that keeps our brains awake
75
- </span>
76
- <span>
77
- . One study showed that people who used screens that emitted blue light were unable to produce sufficient melatonin
78
- </span>
79
- <span>
80
- , a hormone that
81
- </span>
82
- <span
83
- style="display: inline-block; width: 0px; visibility: hidden;"
84
- >
85
- _
86
- </span>
87
- <span>
88
- promotes
89
- </span>
90
- <span
91
- style="display: inline-block; width: 0px; visibility: hidden;"
92
- >
93
- _
94
- </span>
95
- <span>
96
- sleep
97
- </span>
98
- <span>
99
- . In order to enjoy a more restful night
100
- </span>
101
- <span>
102
- , experts recommend shutting off screens at least two hours before bed
103
- </span>
104
- <span>
105
- .
106
- </span>
61
+ Line Height Measurement
107
62
  </div>
108
63
  </div>
64
+ <div
65
+ class="paragraph"
66
+ >
67
+ <span>
68
+ Our electronic devices are keeping us awake—not just because we spend time using them when we should be sleeping
69
+ </span>
70
+ <span>
71
+ , but also because they emit a blue light that keeps our brains awake
72
+ </span>
73
+ <span>
74
+ . One study showed that people who used screens that emitted blue light were unable to produce sufficient melatonin
75
+ </span>
76
+ <span>
77
+ , a hormone that
78
+ </span>
79
+ <span
80
+ style="display: inline-block; width: 0px; visibility: hidden;"
81
+ >
82
+ _
83
+ </span>
84
+ <span>
85
+ promotes
86
+ </span>
87
+ <span
88
+ style="display: inline-block; width: 0px; visibility: hidden;"
89
+ >
90
+ _
91
+ </span>
92
+ <span>
93
+ sleep
94
+ </span>
95
+ <span>
96
+ . In order to enjoy a more restful night
97
+ </span>
98
+ <span>
99
+ , experts recommend shutting off screens at least two hours before bed
100
+ </span>
101
+ <span>
102
+ .
103
+ </span>
104
+ </div>
109
105
  </div>
110
106
  </div>
111
107
  </div>
112
108
  </div>
113
- <div
114
- class="perseus-sr-only"
115
- >
116
- End of reading passage.
117
- </div>
109
+ </div>
110
+ <div
111
+ class="perseus-sr-only"
112
+ >
113
+ End of reading passage.
118
114
  </div>
119
115
  </div>
120
116
  </div>
121
117
  </div>
122
118
  </div>
123
119
  </div>
120
+ </div>
121
+ <div
122
+ class="paragraph"
123
+ data-perseus-paragraph-index="1"
124
+ >
124
125
  <div
125
126
  class="paragraph"
126
- data-perseus-paragraph-index="1"
127
127
  >
128
+ We can see the word “promotes” is used in
128
129
  <div
129
- class="paragraph"
130
+ class="perseus-widget-container widget-nohighlight widget-inline"
130
131
  >
131
- We can see the word “promotes” is used in
132
- <div
133
- class="perseus-widget-container widget-nohighlight widget-inline"
134
- >
135
- <span>
136
- lines
137
- ?–?
138
-
139
- </span>
140
- </div>
132
+ <span>
133
+ lines
134
+ ?–?
135
+
136
+ </span>
141
137
  </div>
142
138
  </div>
143
139
  </div>
144
- </span>
140
+ </div>
145
141
  </div>
146
142
  `;
147
143
 
148
144
  exports[`passage-ref widget should render with multi-line reference 1`] = `
149
145
  <div>
150
- <span
151
- class="mock-KatexProvider"
146
+ <div
147
+ class="perseus-renderer perseus-renderer-responsive"
152
148
  >
153
149
  <div
154
- class="perseus-renderer perseus-renderer-responsive"
150
+ class="paragraph"
151
+ data-perseus-paragraph-index="0"
155
152
  >
156
153
  <div
157
154
  class="paragraph"
158
- data-perseus-paragraph-index="0"
159
155
  >
160
156
  <div
161
- class="paragraph"
157
+ class="perseus-widget-container widget-nohighlight widget-block"
162
158
  >
163
- <div
164
- class="perseus-widget-container widget-nohighlight widget-block"
165
- >
166
- <div>
159
+ <div>
160
+ <div
161
+ class="perseus-widget-passage-container"
162
+ >
167
163
  <div
168
- class="perseus-widget-passage-container"
164
+ class="perseus-widget-passage-instructions"
169
165
  >
170
- <div
171
- class="perseus-widget-passage-instructions"
172
- >
173
-
166
+
174
167
 
175
- </div>
168
+ </div>
169
+ <div
170
+ class="perseus-widget-passage"
171
+ >
172
+ <h3
173
+ class="perseus-sr-only"
174
+ >
175
+ Beginning of reading passage.
176
+ </h3>
176
177
  <div
177
- class="perseus-widget-passage"
178
+ class="passage-text"
178
179
  >
179
- <h3
180
- class="perseus-sr-only"
181
- >
182
- Beginning of reading passage.
183
- </h3>
184
180
  <div
185
- class="passage-text"
181
+ class="container_6htn2u"
186
182
  >
187
- <div
188
- class="container_6htn2u"
189
- >
183
+ <div>
190
184
  <div>
191
185
  <div>
192
- <div>
193
- <div />
194
- </div>
186
+ <div />
195
187
  </div>
196
188
  </div>
197
- <div
198
- class="content_gor68n"
199
- >
189
+ </div>
190
+ <div
191
+ class="content_gor68n"
192
+ >
193
+ <div>
200
194
  <div>
201
- <div>
202
- <div
203
- aria-hidden="true"
204
- class="measurer_225hir"
205
- >
206
- <div
207
- class="paragraph"
208
- >
209
- Line Height Measurement
210
- </div>
211
- </div>
195
+ <div
196
+ aria-hidden="true"
197
+ class="measurer_225hir"
198
+ >
212
199
  <div
213
200
  class="paragraph"
214
201
  >
215
- <span>
216
- Our electronic devices are keeping us awake—not just because we spend time using them when we should be sleeping
217
- </span>
218
- <span>
219
- , but also because they emit a blue light that keeps our brains awake
220
- </span>
221
- <span>
222
- . One study showed that people who used screens that emitted blue light were unable to produce sufficient melatonin
223
- </span>
224
- <span>
225
- , a hormone that
226
- </span>
227
- <span
228
- style="display: inline-block; width: 0px; visibility: hidden;"
229
- >
230
- _
231
- </span>
232
- <span>
233
- promotes
234
- </span>
235
- <span
236
- style="display: inline-block; width: 0px; visibility: hidden;"
237
- >
238
- _
239
- </span>
240
- <span>
241
- sleep
242
- </span>
243
- <span>
244
- . In order to enjoy a more restful night
245
- </span>
246
- <span>
247
- , experts recommend shutting off screens at least two hours before bed
248
- </span>
249
- <span>
250
- .
251
- </span>
202
+ Line Height Measurement
252
203
  </div>
253
204
  </div>
205
+ <div
206
+ class="paragraph"
207
+ >
208
+ <span>
209
+ Our electronic devices are keeping us awake—not just because we spend time using them when we should be sleeping
210
+ </span>
211
+ <span>
212
+ , but also because they emit a blue light that keeps our brains awake
213
+ </span>
214
+ <span>
215
+ . One study showed that people who used screens that emitted blue light were unable to produce sufficient melatonin
216
+ </span>
217
+ <span>
218
+ , a hormone that
219
+ </span>
220
+ <span
221
+ style="display: inline-block; width: 0px; visibility: hidden;"
222
+ >
223
+ _
224
+ </span>
225
+ <span>
226
+ promotes
227
+ </span>
228
+ <span
229
+ style="display: inline-block; width: 0px; visibility: hidden;"
230
+ >
231
+ _
232
+ </span>
233
+ <span>
234
+ sleep
235
+ </span>
236
+ <span>
237
+ . In order to enjoy a more restful night
238
+ </span>
239
+ <span>
240
+ , experts recommend shutting off screens at least two hours before bed
241
+ </span>
242
+ <span>
243
+ .
244
+ </span>
245
+ </div>
254
246
  </div>
255
247
  </div>
256
248
  </div>
257
249
  </div>
258
- <div
259
- class="perseus-sr-only"
260
- >
261
- End of reading passage.
262
- </div>
250
+ </div>
251
+ <div
252
+ class="perseus-sr-only"
253
+ >
254
+ End of reading passage.
263
255
  </div>
264
256
  </div>
265
257
  </div>
266
258
  </div>
267
259
  </div>
268
260
  </div>
261
+ </div>
262
+ <div
263
+ class="paragraph"
264
+ data-perseus-paragraph-index="1"
265
+ >
269
266
  <div
270
267
  class="paragraph"
271
- data-perseus-paragraph-index="1"
272
268
  >
269
+ We can see the word “promotes” is used in
273
270
  <div
274
- class="paragraph"
271
+ class="perseus-widget-container widget-nohighlight widget-inline"
275
272
  >
276
- We can see the word “promotes” is used in
277
- <div
278
- class="perseus-widget-container widget-nohighlight widget-inline"
279
- >
280
- <span>
281
- lines
282
- 4–6
283
-
284
- <div
285
- class="perseus-sr-only"
286
- >
287
- mocked reference content
288
- </div>
289
- </span>
290
- </div>
273
+ <span>
274
+ lines
275
+ 4–6
276
+
277
+ <div
278
+ class="perseus-sr-only"
279
+ >
280
+ mocked reference content
281
+ </div>
282
+ </span>
291
283
  </div>
292
284
  </div>
293
285
  </div>
294
- </span>
286
+ </div>
295
287
  </div>
296
288
  `;
297
289
 
298
290
  exports[`passage-ref widget should render with single-line reference 1`] = `
299
291
  <div>
300
- <span
301
- class="mock-KatexProvider"
292
+ <div
293
+ class="perseus-renderer perseus-renderer-responsive"
302
294
  >
303
295
  <div
304
- class="perseus-renderer perseus-renderer-responsive"
296
+ class="paragraph"
297
+ data-perseus-paragraph-index="0"
305
298
  >
306
299
  <div
307
300
  class="paragraph"
308
- data-perseus-paragraph-index="0"
309
301
  >
310
302
  <div
311
- class="paragraph"
303
+ class="perseus-widget-container widget-nohighlight widget-block"
312
304
  >
313
- <div
314
- class="perseus-widget-container widget-nohighlight widget-block"
315
- >
316
- <div>
305
+ <div>
306
+ <div
307
+ class="perseus-widget-passage-container"
308
+ >
317
309
  <div
318
- class="perseus-widget-passage-container"
310
+ class="perseus-widget-passage-instructions"
319
311
  >
320
- <div
321
- class="perseus-widget-passage-instructions"
322
- >
323
-
312
+
324
313
 
325
- </div>
314
+ </div>
315
+ <div
316
+ class="perseus-widget-passage"
317
+ >
318
+ <h3
319
+ class="perseus-sr-only"
320
+ >
321
+ Beginning of reading passage.
322
+ </h3>
326
323
  <div
327
- class="perseus-widget-passage"
324
+ class="passage-text"
328
325
  >
329
- <h3
330
- class="perseus-sr-only"
331
- >
332
- Beginning of reading passage.
333
- </h3>
334
326
  <div
335
- class="passage-text"
327
+ class="container_6htn2u"
336
328
  >
337
- <div
338
- class="container_6htn2u"
339
- >
329
+ <div>
340
330
  <div>
341
331
  <div>
342
- <div>
343
- <div />
344
- </div>
332
+ <div />
345
333
  </div>
346
334
  </div>
347
- <div
348
- class="content_gor68n"
349
- >
335
+ </div>
336
+ <div
337
+ class="content_gor68n"
338
+ >
339
+ <div>
350
340
  <div>
351
- <div>
352
- <div
353
- aria-hidden="true"
354
- class="measurer_225hir"
355
- >
356
- <div
357
- class="paragraph"
358
- >
359
- Line Height Measurement
360
- </div>
361
- </div>
341
+ <div
342
+ aria-hidden="true"
343
+ class="measurer_225hir"
344
+ >
362
345
  <div
363
346
  class="paragraph"
364
347
  >
365
- <span>
366
- Our electronic devices are keeping us awake—not just because we spend time using them when we should be sleeping
367
- </span>
368
- <span>
369
- , but also because they emit a blue light that keeps our brains awake
370
- </span>
371
- <span>
372
- . One study showed that people who used screens that emitted blue light were unable to produce sufficient melatonin
373
- </span>
374
- <span>
375
- , a hormone that
376
- </span>
377
- <span
378
- style="display: inline-block; width: 0px; visibility: hidden;"
379
- >
380
- _
381
- </span>
382
- <span>
383
- promotes
384
- </span>
385
- <span
386
- style="display: inline-block; width: 0px; visibility: hidden;"
387
- >
388
- _
389
- </span>
390
- <span>
391
- sleep
392
- </span>
393
- <span>
394
- . In order to enjoy a more restful night
395
- </span>
396
- <span>
397
- , experts recommend shutting off screens at least two hours before bed
398
- </span>
399
- <span>
400
- .
401
- </span>
348
+ Line Height Measurement
402
349
  </div>
403
350
  </div>
351
+ <div
352
+ class="paragraph"
353
+ >
354
+ <span>
355
+ Our electronic devices are keeping us awake—not just because we spend time using them when we should be sleeping
356
+ </span>
357
+ <span>
358
+ , but also because they emit a blue light that keeps our brains awake
359
+ </span>
360
+ <span>
361
+ . One study showed that people who used screens that emitted blue light were unable to produce sufficient melatonin
362
+ </span>
363
+ <span>
364
+ , a hormone that
365
+ </span>
366
+ <span
367
+ style="display: inline-block; width: 0px; visibility: hidden;"
368
+ >
369
+ _
370
+ </span>
371
+ <span>
372
+ promotes
373
+ </span>
374
+ <span
375
+ style="display: inline-block; width: 0px; visibility: hidden;"
376
+ >
377
+ _
378
+ </span>
379
+ <span>
380
+ sleep
381
+ </span>
382
+ <span>
383
+ . In order to enjoy a more restful night
384
+ </span>
385
+ <span>
386
+ , experts recommend shutting off screens at least two hours before bed
387
+ </span>
388
+ <span>
389
+ .
390
+ </span>
391
+ </div>
404
392
  </div>
405
393
  </div>
406
394
  </div>
407
395
  </div>
408
- <div
409
- class="perseus-sr-only"
410
- >
411
- End of reading passage.
412
- </div>
396
+ </div>
397
+ <div
398
+ class="perseus-sr-only"
399
+ >
400
+ End of reading passage.
413
401
  </div>
414
402
  </div>
415
403
  </div>
416
404
  </div>
417
405
  </div>
418
406
  </div>
407
+ </div>
408
+ <div
409
+ class="paragraph"
410
+ data-perseus-paragraph-index="1"
411
+ >
419
412
  <div
420
413
  class="paragraph"
421
- data-perseus-paragraph-index="1"
422
414
  >
415
+ We can see the word “promotes” is used in
423
416
  <div
424
- class="paragraph"
417
+ class="perseus-widget-container widget-nohighlight widget-inline"
425
418
  >
426
- We can see the word “promotes” is used in
427
- <div
428
- class="perseus-widget-container widget-nohighlight widget-inline"
429
- >
430
- <span>
431
- line
432
- 4
433
-
434
- <div
435
- class="perseus-sr-only"
436
- >
437
- mocked reference content
438
- </div>
439
- </span>
440
- </div>
419
+ <span>
420
+ line
421
+ 4
422
+
423
+ <div
424
+ class="perseus-sr-only"
425
+ >
426
+ mocked reference content
427
+ </div>
428
+ </span>
441
429
  </div>
442
430
  </div>
443
431
  </div>
444
- </span>
432
+ </div>
445
433
  </div>
446
434
  `;