@khanacademy/perseus 4.0.2 → 6.0.0

package/src/widgets/__tests__/__snapshots__/interaction.test.ts.snap

@@ -2,310 +2,306 @@
 
 exports[`interaction widget should render 1`] = `
 <div>
-  <span
-    class="mock-KatexProvider"
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
   >
     <div
-      class="perseus-renderer perseus-renderer-responsive"
+      class="paragraph"
+      data-perseus-paragraph-index="0"
     >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="0"
       >
-        <div
-          class="paragraph"
-        >
-          Drag the dot all the way to the right.
-        </div>
+        Drag the dot all the way to the right.
       </div>
+    </div>
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="1"
+    >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="1"
       >
         <div
-          class="paragraph"
+          class="perseus-widget-container widget-nohighlight widget-block"
         >
           <div
-            class="perseus-widget-container widget-nohighlight widget-block"
+            class="graphie-container"
           >
             <div
-              class="graphie-container"
+              class="graphie"
+              style="position: relative; width: 479.99999999999994px; height: 120.00000000000001px;"
             >
-              <div
-                class="graphie"
-                style="position: relative; width: 479.99999999999994px; height: 120.00000000000001px;"
+              <svg
+                height="120.00000000000001"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
+                version="1.1"
+                width="479.99999999999994"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  height="120.00000000000001"
-                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
-                  version="1.1"
-                  width="479.99999999999994"
-                  xmlns="http://www.w3.org/2000/svg"
+                <desc
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
                 >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                </svg>
-                <svg
-                  height="120.00000000000001"
+                  Created with Raphaël
+                </desc>
+                <defs
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                />
+              </svg>
+              <svg
+                height="120.00000000000001"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                version="1.1"
+                width="479.99999999999994"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <desc
                   style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  version="1.1"
-                  width="479.99999999999994"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <desc
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  >
-                    Created with Raphaël
-                  </desc>
-                  <defs
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                  />
-                  <path
-                    d="M254.59459459459455,636.5217391304348L254.5785950953643,635.6596267341514L254.53065974038762,634.8009167016342L254.45097770861094,633.9489979690746L254.33986346861047,633.1072326705054L254.19775553752822,632.2789428689938L254.02521475044523,631.467397445977L253.82292204702173,630.6757992004796L253.5916757841394,629.9072722091297L253.33238858515142,629.1648494968558L253.04608373817518,628.4514610669225L252.73389115764147,627.7699223375465L252.39704292503845,627.1229230307273L252.0368684264488,626.513016557143L251.6547891060704,625.9426099390051L251.25231285642542,625.4139543106413L250.8310280673972,624.9291360342974L250.39259735758142,624.4900684662169L249.93875101268972,624.0984844055008L249.47128015690274,623.755929255539L248.99202968412115,623.4637549250093L248.5028909770123,623.2231144925131L248.0057944425869,623.0349576558989L247.5027018937646,622.9000269842405L246.99559880699437,622.8188549872548L246.48648648648643,622.7917620137299L245.9773741659785,622.8188549872548L245.4702710792083,622.9000269842405L244.96717853038598,623.0349576558989L244.47008199596056,623.2231144925131L243.9809432888517,623.4637549250093L243.50169281607012,623.755929255539L243.03422196028313,624.0984844055008L242.58037561539143,624.4900684662169L242.14194490557566,624.9291360342974L241.72066011654746,625.4139543106413L241.31818386690247,625.9426099390051L240.9361045465241,626.513016557143L240.57593004793443,627.1229230307273L240.23908181533136,627.7699223375465L239.92688923479767,628.4514610669225L239.64058438782146,629.1648494968558L239.38129718883349,629.9072722091297L239.15005092595115,630.6757992004796L238.94775822252765,631.467397445977L238.77521743544466,632.2789428689938L238.6331095043624,633.1072326705055L238.52199526436195,633.9489979690746L238.44231323258526,634.8009167016344L238.39437787760858,635.6596267341514L238.37837837837833,636.5217391304348L238.39437787760858,637.3838515267182L238.44231323258526,638.2425615592352L238.52199526436195,639.094480291795L238.6331095043624,639.9362455903641L238.77521743544466,640.7645353918757L238.94775822252765,641.5760808148926L239.15005092595115,642.3676790603901L239.3812971888335,643.1362060517399L239.64058438782146,643.8786287640137L239.9268892347977,644.592017193947L240.23908181533142,645.2735559233231L240.57593004793446,645.9205552301422L240.93610454652412,646.5304617037265L241.3181838669025,647.1008683218645L241.7206601165475,647.6295239502281L242.14194490557568,648.1143422265723L242.5803756153915,648.5534097946527L243.03422196028316,648.9449938553686L243.50169281607015,649.2875490053307L243.98094328885173,649.5797233358603L244.47008199596058,649.8203637683565L244.96717853038598,650.0085206049705L245.4702710792083,650.1434512766289L245.9773741659785,650.2246232736147L246.48648648648643,650.2517162471395L246.99559880699437,650.2246232736147L247.5027018937646,650.1434512766289L248.0057944425869,650.0085206049705L248.5028909770123,649.8203637683565L248.99202968412115,649.5797233358603L249.47128015690274,649.2875490053307L249.93875101268972,648.9449938553686L250.3925973575814,648.5534097946527L250.8310280673972,648.1143422265723L251.2523128564254,647.6295239502281L251.65478910607038,647.1008683218645L252.03686842644876,646.5304617037265L252.39704292503842,645.9205552301422L252.73389115764144,645.2735559233231L253.04608373817516,644.5920171939471L253.3323885851514,643.8786287640137L253.59167578413937,643.1362060517399L253.82292204702173,642.3676790603901L254.0252147504452,641.5760808148926L254.1977555375282,640.7645353918758L254.33986346861045,639.9362455903643L254.45097770861094,639.094480291795L254.53065974038762,638.2425615592355L254.5785950953643,637.3838515267184L254.59459459459455,636.5217391304349"
-                    fill="none"
-                    stroke="#6495ed"
-                    stroke-dasharray="0"
-                    stroke-width="4"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4;"
-                  />
-                  <path
-                    d="M19.459459459459445,62.60869565217392L19.459459459459445,114.78260869565217"
-                    fill="none"
-                    stroke="none"
-                    stroke-dasharray="4,3"
-                    stroke-width="1"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
-                  />
-                  <path
-                    d="M84.3243243243243,62.60869565217392L84.3243243243243,114.78260869565217"
-                    fill="none"
-                    stroke="none"
-                    stroke-dasharray="4,3"
-                    stroke-width="1"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
-                  />
-                  <path
-                    d="M149.18918918918916,62.60869565217392L149.18918918918916,114.78260869565217"
-                    fill="none"
-                    stroke="none"
-                    stroke-dasharray="4,3"
-                    stroke-width="1"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
-                  />
-                  <path
-                    d="M214.054054054054,62.60869565217392L214.054054054054,114.78260869565217"
-                    fill="none"
-                    stroke="none"
-                    stroke-dasharray="4,3"
-                    stroke-width="1"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
-                  />
-                  <path
-                    d="M278.91891891891885,62.60869565217392L278.91891891891885,114.78260869565217"
-                    fill="none"
-                    stroke="none"
-                    stroke-dasharray="4,3"
-                    stroke-width="1"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
-                  />
-                  <path
-                    d="M343.78378378378375,62.60869565217392L343.78378378378375,114.78260869565217"
-                    fill="none"
-                    stroke="none"
-                    stroke-dasharray="4,3"
-                    stroke-width="1"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
-                  />
-                  <path
-                    d="M408.6486486486486,62.60869565217392L408.6486486486486,114.78260869565217"
-                    fill="none"
-                    stroke="none"
-                    stroke-dasharray="4,3"
-                    stroke-width="1"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
-                  />
-                  <path
-                    d="M473.51351351351343,62.60869565217392L473.51351351351343,114.78260869565217"
-                    fill="none"
-                    stroke="none"
-                    stroke-dasharray="4,3"
-                    stroke-width="1"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
-                  />
-                  <path
-                    d="M19.459459459459445,10.434782608695661L149.18918918918916,10.434782608695661"
-                    fill="none"
-                    stroke="none"
-                    stroke-dasharray="0"
-                    stroke-width="2"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2;"
-                  />
-                  <ellipse
-                    cx="278.91891891891885"
-                    cy="104.34782608695652"
-                    fill="none"
-                    rx="4"
-                    ry="4"
-                    stroke="none"
-                    stroke-width="2"
-                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2;"
-                  />
-                </svg>
+                  Created with Raphaël
+                </desc>
+                <defs
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                />
+                <path
+                  d="M254.59459459459455,636.5217391304348L254.5785950953643,635.6596267341514L254.53065974038762,634.8009167016342L254.45097770861094,633.9489979690746L254.33986346861047,633.1072326705054L254.19775553752822,632.2789428689938L254.02521475044523,631.467397445977L253.82292204702173,630.6757992004796L253.5916757841394,629.9072722091297L253.33238858515142,629.1648494968558L253.04608373817518,628.4514610669225L252.73389115764147,627.7699223375465L252.39704292503845,627.1229230307273L252.0368684264488,626.513016557143L251.6547891060704,625.9426099390051L251.25231285642542,625.4139543106413L250.8310280673972,624.9291360342974L250.39259735758142,624.4900684662169L249.93875101268972,624.0984844055008L249.47128015690274,623.755929255539L248.99202968412115,623.4637549250093L248.5028909770123,623.2231144925131L248.0057944425869,623.0349576558989L247.5027018937646,622.9000269842405L246.99559880699437,622.8188549872548L246.48648648648643,622.7917620137299L245.9773741659785,622.8188549872548L245.4702710792083,622.9000269842405L244.96717853038598,623.0349576558989L244.47008199596056,623.2231144925131L243.9809432888517,623.4637549250093L243.50169281607012,623.755929255539L243.03422196028313,624.0984844055008L242.58037561539143,624.4900684662169L242.14194490557566,624.9291360342974L241.72066011654746,625.4139543106413L241.31818386690247,625.9426099390051L240.9361045465241,626.513016557143L240.57593004793443,627.1229230307273L240.23908181533136,627.7699223375465L239.92688923479767,628.4514610669225L239.64058438782146,629.1648494968558L239.38129718883349,629.9072722091297L239.15005092595115,630.6757992004796L238.94775822252765,631.467397445977L238.77521743544466,632.2789428689938L238.6331095043624,633.1072326705055L238.52199526436195,633.9489979690746L238.44231323258526,634.8009167016344L238.39437787760858,635.6596267341514L238.37837837837833,636.5217391304348L238.39437787760858,637.3838515267182L238.44231323258526,638.2425615592352L238.52199526436195,639.094480291795L238.6331095043624,639.9362455903641L238.77521743544466,640.7645353918757L238.94775822252765,641.5760808148926L239.15005092595115,642.3676790603901L239.3812971888335,643.1362060517399L239.64058438782146,643.8786287640137L239.9268892347977,644.592017193947L240.23908181533142,645.2735559233231L240.57593004793446,645.9205552301422L240.93610454652412,646.5304617037265L241.3181838669025,647.1008683218645L241.7206601165475,647.6295239502281L242.14194490557568,648.1143422265723L242.5803756153915,648.5534097946527L243.03422196028316,648.9449938553686L243.50169281607015,649.2875490053307L243.98094328885173,649.5797233358603L244.47008199596058,649.8203637683565L244.96717853038598,650.0085206049705L245.4702710792083,650.1434512766289L245.9773741659785,650.2246232736147L246.48648648648643,650.2517162471395L246.99559880699437,650.2246232736147L247.5027018937646,650.1434512766289L248.0057944425869,650.0085206049705L248.5028909770123,649.8203637683565L248.99202968412115,649.5797233358603L249.47128015690274,649.2875490053307L249.93875101268972,648.9449938553686L250.3925973575814,648.5534097946527L250.8310280673972,648.1143422265723L251.2523128564254,647.6295239502281L251.65478910607038,647.1008683218645L252.03686842644876,646.5304617037265L252.39704292503842,645.9205552301422L252.73389115764144,645.2735559233231L253.04608373817516,644.5920171939471L253.3323885851514,643.8786287640137L253.59167578413937,643.1362060517399L253.82292204702173,642.3676790603901L254.0252147504452,641.5760808148926L254.1977555375282,640.7645353918758L254.33986346861045,639.9362455903643L254.45097770861094,639.094480291795L254.53065974038762,638.2425615592355L254.5785950953643,637.3838515267184L254.59459459459455,636.5217391304349"
+                  fill="none"
+                  stroke="#6495ed"
+                  stroke-dasharray="0"
+                  stroke-width="4"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4;"
+                />
+                <path
+                  d="M19.459459459459445,62.60869565217392L19.459459459459445,114.78260869565217"
+                  fill="none"
+                  stroke="none"
+                  stroke-dasharray="4,3"
+                  stroke-width="1"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
+                />
+                <path
+                  d="M84.3243243243243,62.60869565217392L84.3243243243243,114.78260869565217"
+                  fill="none"
+                  stroke="none"
+                  stroke-dasharray="4,3"
+                  stroke-width="1"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
+                />
+                <path
+                  d="M149.18918918918916,62.60869565217392L149.18918918918916,114.78260869565217"
+                  fill="none"
+                  stroke="none"
+                  stroke-dasharray="4,3"
+                  stroke-width="1"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
+                />
+                <path
+                  d="M214.054054054054,62.60869565217392L214.054054054054,114.78260869565217"
+                  fill="none"
+                  stroke="none"
+                  stroke-dasharray="4,3"
+                  stroke-width="1"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
+                />
+                <path
+                  d="M278.91891891891885,62.60869565217392L278.91891891891885,114.78260869565217"
+                  fill="none"
+                  stroke="none"
+                  stroke-dasharray="4,3"
+                  stroke-width="1"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
+                />
+                <path
+                  d="M343.78378378378375,62.60869565217392L343.78378378378375,114.78260869565217"
+                  fill="none"
+                  stroke="none"
+                  stroke-dasharray="4,3"
+                  stroke-width="1"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
+                />
+                <path
+                  d="M408.6486486486486,62.60869565217392L408.6486486486486,114.78260869565217"
+                  fill="none"
+                  stroke="none"
+                  stroke-dasharray="4,3"
+                  stroke-width="1"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
+                />
+                <path
+                  d="M473.51351351351343,62.60869565217392L473.51351351351343,114.78260869565217"
+                  fill="none"
+                  stroke="none"
+                  stroke-dasharray="4,3"
+                  stroke-width="1"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1;"
+                />
+                <path
+                  d="M19.459459459459445,10.434782608695661L149.18918918918916,10.434782608695661"
+                  fill="none"
+                  stroke="none"
+                  stroke-dasharray="0"
+                  stroke-width="2"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2;"
+                />
+                <ellipse
+                  cx="278.91891891891885"
+                  cy="104.34782608695652"
+                  fill="none"
+                  rx="4"
+                  ry="4"
+                  stroke="none"
+                  stroke-width="2"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2;"
+                />
+              </svg>
+              <div
+                style="position: absolute; left: 0px; top: 0px;"
+              >
                 <div
-                  style="position: absolute; left: 0px; top: 0px;"
+                  style="position: absolute; width: 26px; height: 26px; left: 6.459459459459445px; top: -2.565217391304339px; transform: translateX(0px) translateY(0px) translateZ(0);"
                 >
-                  <div
-                    style="position: absolute; width: 26px; height: 26px; left: 6.459459459459445px; top: -2.565217391304339px; transform: translateX(0px) translateY(0px) translateZ(0);"
+                  <svg
+                    height="26"
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                    version="1.1"
+                    width="26"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <svg
-                      height="26"
+                    <desc
                       style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="26"
-                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="NaN"
-                        cy="NaN"
-                        fill="#71b307"
-                        r="NaN"
-                        rx="4"
-                        ry="4"
-                        stroke="#71b307"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                        transform=""
-                      />
-                    </svg>
-                  </div>
+                      Created with Raphaël
+                    </desc>
+                    <defs
+                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                    />
+                    <ellipse
+                      cx="NaN"
+                      cy="NaN"
+                      fill="#71b307"
+                      r="NaN"
+                      rx="4"
+                      ry="4"
+                      stroke="#71b307"
+                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                      transform=""
+                    />
+                  </svg>
                 </div>
+              </div>
+              <div
+                style="position: absolute; left: 0px; top: 0px; z-index: 2;"
+              >
                 <div
-                  style="position: absolute; left: 0px; top: 0px; z-index: 2;"
+                  data-interactive-kind-for-testing="movable-point"
+                  style="position: absolute; width: 48px; height: 48px; left: -4.540540540540555px; top: -13.565217391304339px; transform: translateX(0px) translateY(0px) translateZ(0);"
                 >
-                  <div
-                    data-interactive-kind-for-testing="movable-point"
-                    style="position: absolute; width: 48px; height: 48px; left: -4.540540540540555px; top: -13.565217391304339px; transform: translateX(0px) translateY(0px) translateZ(0);"
+                  <svg
+                    height="48"
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                    version="1.1"
+                    width="48"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <svg
-                      height="48"
+                    <desc
                       style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      version="1.1"
-                      width="48"
-                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <desc
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      >
-                        Created with Raphaël
-                      </desc>
-                      <defs
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
-                      />
-                      <ellipse
-                        cx="24"
-                        cy="24"
-                        fill="#000000"
-                        opacity="0"
-                        rx="24"
-                        ry="24"
-                        stroke="#000"
-                        style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
-                      />
-                    </svg>
-                  </div>
+                      Created with Raphaël
+                    </desc>
+                    <defs
+                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                    />
+                    <ellipse
+                      cx="24"
+                      cy="24"
+                      fill="#000000"
+                      opacity="0"
+                      rx="24"
+                      ry="24"
+                      stroke="#000"
+                      style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; cursor: move;"
+                    />
+                  </svg>
                 </div>
+              </div>
+              <span
+                class="graphie-label"
+                data-math-formula="\\Huge 2"
+                style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 116.59637038983988px; top: 88.69565217391305px; fill: none;"
+              >
                 <span
-                  class="graphie-label"
-                  data-math-formula="\\Huge 2"
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 116.59637038983988px; top: 88.69565217391305px; fill: none;"
-                >
-                  <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
-                  />
-                </span>
+                  class="katex-holder"
+                />
                 <span
-                  class="graphie-label"
-                  data-math-formula="\\Huge 5"
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 181.46123525470475px; top: 88.69565217391305px; fill: none;"
-                >
-                  <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
-                  />
-                </span>
+                  class="mathjax-holder"
+                />
+              </span>
+              <span
+                class="graphie-label"
+                data-math-formula="\\Huge 5"
+                style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 181.46123525470475px; top: 88.69565217391305px; fill: none;"
+              >
                 <span
-                  class="graphie-label"
-                  data-math-formula="\\Huge 9"
-                  style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 246.3261001195696px; top: 88.69565217391305px; fill: none;"
-                >
-                  <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
-                  />
-                </span>
+                  class="katex-holder"
+                />
                 <span
-                  class="graphie-label"
-                  data-math-formula="\\small 259"
-                  style="position: absolute; padding: 7px; color: gray; left: 19.459459459459445px; top: 26.08695652173914px; fill: none;"
-                >
-                  <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
-                  />
-                </span>
+                  class="mathjax-holder"
+                />
+              </span>
+              <span
+                class="graphie-label"
+                data-math-formula="\\Huge 9"
+                style="position: absolute; padding: 7px; color: rgb(100, 149, 237); left: 246.3261001195696px; top: 88.69565217391305px; fill: none;"
+              >
                 <span
-                  class="graphie-label"
-                  data-math-formula="\\small 259 \\times 10"
-                  style="position: absolute; padding: 7px; color: gray; left: 149.18918918918916px; top: 26.08695652173914px; fill: none;"
-                >
-                  <span
-                    class="katex-holder"
-                  />
-                  <span
-                    class="mathjax-holder"
-                  />
-                </span>
-              </div>
+                  class="katex-holder"
+                />
+                <span
+                  class="mathjax-holder"
+                />
+              </span>
+              <span
+                class="graphie-label"
+                data-math-formula="\\small 259"
+                style="position: absolute; padding: 7px; color: gray; left: 19.459459459459445px; top: 26.08695652173914px; fill: none;"
+              >
+                <span
+                  class="katex-holder"
+                />
+                <span
+                  class="mathjax-holder"
+                />
+              </span>
+              <span
+                class="graphie-label"
+                data-math-formula="\\small 259 \\times 10"
+                style="position: absolute; padding: 7px; color: gray; left: 149.18918918918916px; top: 26.08695652173914px; fill: none;"
+              >
+                <span
+                  class="katex-holder"
+                />
+                <span
+                  class="mathjax-holder"
+                />
+              </span>
             </div>
           </div>
         </div>
       </div>
+    </div>
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="2"
+    >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="2"
       >
-        <div
-          class="paragraph"
-        >
-          <em>
-            Notice that we add a zero to the empty place value.
-          </em>
-           
-        </div>
+        <em>
+          Notice that we add a zero to the empty place value.
+        </em>
+         
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;