labsite: Update contents to align with Next button (2/2)

Generate the *.htmlf files for the labs from their Markdown source.

We have removed verbose Headings for `<details>` section to fit on button.
This way details summary and next button are visually aligned.

We've also added to each section revealed by a Next button click a Heading.

As per usual I've reworded the content a little to make it more consistent with
how the labs have evolved. Hints are a little more elaborate now.

Commit-group:2/2
Gen-command: make lab

frontend/lab/samples/ifs/alpha.htmlf

@@ -1,13 +1,18 @@
 <h1>🌈 Transparent Colors</h1>
-<p>⭐ <strong>Read</strong> and <strong>Run</strong> the code. Does it make sense to you?</p>
-<p>⭐ <strong>Complete it</strong> to create the following drawing:</p>
+<h2>⭐ Intro</h2>
+<p><strong>Read</strong> the code. What do you think will happen when you run it?</p>
+<p><strong>Run</strong> the code. Was it what you expected?</p>
+<p><button class="next-btn">Next</button></p>
+<h2>⭐ Add a Yellow Rectangle</h2>
+<p>Complete the code to create the following drawing:</p>
 <p>
   <img src="samples/ifs/img/red-dot-two-squares.svg" alt="simple drawing of circles and squares" />
 </p>
+<p><button class="next-btn">Next</button></p>
+<h2>⭐ Tweak the Alpha</h2>
 <p>
-  ⭐ <strong>Modify the Alpha</strong> parameter to the
-  <a href="/docs/builtins.html#hsl"><code>hsl</code></a> function to make the bottom quadrant grey,
-  like so:
+  Tweak the Alpha parameter to the <a href="/docs/builtins.html#hsl"><code>hsl</code></a> function,
+  its fourth parameter, to make the bottom left quadrant grey:
 </p>
 <p>
   <img
@@ -16,7 +21,7 @@
   />
 </p>
 <details>
-  <summary>Understanding Alpha 📖</summary>
+  <summary>Docs</summary>
   <p>
     In the interactive <a href="/docs/builtins.html#hsl"><code>hsl</code></a> function
     <a href="#hsl">color explorer</a> we learned how hsl takes three values: hue, saturation,

frontend/lab/samples/ifs/bounce.htmlf

@@ -3,6 +3,7 @@
 <p>
   Check out the <a href="#bounce-show">bouncing ball page 🏓📺</a> or observe the animation below.
 </p>
+<h2>Demo</h2>
 <details>
   <summary>Animation demo</summary>
   <p><img src="samples/ifs/img/bounce.gif" alt="small centered circle" /></p>
@@ -26,7 +27,7 @@
   <a href="#pulse">Pulse challenge</a>.
 </p>
 <details>
-  <summary>Code hint 🧚</summary>
+  <summary>Hint</summary>
   <p>Inside the loop body add:</p>
   <pre><code class="language-evy">x = x + inc
 if x &lt; 10 or x &gt; 90

frontend/lab/samples/ifs/chat.htmlf

@@ -1,10 +1,16 @@
 <h1>💬 Let's Chat</h1>
-<p>⭐ <strong>Before you run the code:</strong> Can you predict what will happen?</p>
-<p>Now, hit <strong>Run</strong> and see if you were right!</p>
-<p>⭐ <strong>Think about it:</strong> What's the purpose of the <code>:=</code> operator?</p>
+<h2>⭐ Intro</h2>
+<p><strong>Read</strong> the code. What do you think will happen when you run it?</p>
+<p><strong>Run</strong> the code. Was it what you expected?</p>
+<p><button class="next-btn">Next</button></p>
+<h2>⭐ Type Inference</h2>
+<p>Note the new <code>:=</code> operator. Have a guess how it works.</p>
 <details>
-  <summary><code>:=</code> Declaration with type inference 📖</summary>
-  <p>In Evy, you can declare a variable and assign it a value in one step using <code>:=</code>.</p>
+  <summary>Docs</summary>
+  <p>
+    In Evy, you can declare a variable and assign it a value in one step using <code>:=</code>. This
+    is called <strong>Declaration with Type Inference</strong>.
+  </p>
   <p>Instead of</p>
   <pre><code class="language-evy">s:string
 s = &quot;banana&quot;
@@ -13,12 +19,14 @@ s = &quot;banana&quot;
   <pre><code class="language-evy">s := &quot;banana&quot;
 </code></pre>
 </details>
+<p><button class="next-btn">Next</button></p>
+<h2>⭐ Add <code>else if</code></h2>
 <p>
-  ⭐ <strong>Challenge:</strong> Can you add a different response if the answer is &quot;no&quot;?
-  Use <code>else if</code> to create an alternative message.
+  Can you add a different response to the program if the answer is <code>&quot;no&quot;</code>? Use
+  <code>else if</code> to create an alternative message.
 </p>
 <details>
-  <summary>Code hint 🧚</summary>
+  <summary>Hint</summary>
   <pre><code class="language-evy">if answer == &quot;yes&quot;
     print &quot;🍪 Sweet!&quot;
 else if answer == ❓
@@ -28,27 +36,23 @@ else
 end
 </code></pre>
 </details>
-<p>⭐ <strong>Your turn:</strong> Can you create your own chat bot?</p>
-<details>
-  <summary>Some ideas</summary>
-  <ul>
-    <li>🍦 Ask about their favorite ice cream flavor instead of cookies.</li>
-    <li>
-      🎁 Ask if they want to open a surprise.
-      <ul>
-        <li>
-          If they say <code>&quot;yes&quot;</code>, reveal the surprise (let your imagination run
-          wild 🐉).
-        </li>
-        <li>
-          If they say <code>&quot;no&quot;</code>, respond with something like &quot;And so it
-          remains my secret 🔒&quot;.
-        </li>
-        <li>If they say anything else, respond with &quot;I don't understand.&quot;</li>
-      </ul>
-    </li>
-  </ul>
-  <p>
-    You could also ask about their favorite color, band, or football team and respond accordingly!
-  </p>
-</details>
+<p><button class="next-btn">Next</button></p>
+<h2>⭐ Your Turn</h2>
+<p>Can you create your own chat bot?</p>
+<h3>Some ideas</h3>
+<p>🍦 Ask about their favorite ice cream flavor instead of cookies.</p>
+<p>🎁 Ask if they want to open a surprise.</p>
+<ul>
+  <li>
+    If they say <code>&quot;yes&quot;</code>, reveal the surprise (let your imagination run wild
+    🐉).
+  </li>
+  <li>
+    If they say <code>&quot;no&quot;</code>, respond with something like
+    <code>&quot;And so it remains my secret 🔒&quot;</code>.
+  </li>
+  <li>If they say anything else, respond with <code>&quot;I don't understand.&quot;</code></li>
+</ul>
+<p>
+  You could also ask about their favorite color, band, or football team and respond accordingly!
+</p>

frontend/lab/samples/ifs/pi.htmlf

@@ -1,28 +1,40 @@
 <h1>🥧 Monte Carlo 💕 π</h1>
+<h2>⭐ Introduction</h2>
 <p>
-  This lab shows how to estimate the mathematical constant π (pi) using a Monte Carlo algorithm.
+  This lab shows how to estimate the mathematical constant <strong>π</strong> (pi) using a
+  <strong>Monte Carlo algorithm</strong>.
 </p>
 <ul>
-  <li>⭐ What do you know about <strong>π</strong>?</li>
-  <li>⭐ Do you know the <strong>area</strong> of a circle with radius <code>1</code>?</li>
+  <li>What do you know about <strong>π</strong>?</li>
+  <li>Do you know the <strong>area</strong> of a circle with radius <code>1</code>?</li>
 </ul>
-<h2>Quarter circle</h2>
+<details>
+  <summary>Docs</summary>
+  <p>
+    A <strong>Monte Carlo algorithm</strong> is a computer program that simulates the behavior of
+    other systems. It's not a method that gives you a perfectly precise answer, but rather an
+    approximate one, often relying on <strong>randomness</strong> and <strong>statistics</strong> to
+    reach a result. The more times you run it, the closer you get to the true answer.
+  </p>
+</details>
+<p><button class="next-btn">Next</button></p>
+<h2>⭐ Quarter circle</h2>
 <p><img src="samples/ifs/img/quarter-circle.svg" alt="quarter circle" /></p>
 <p>
-  ⭐ What's the <strong>area</strong> of the red <strong>quarter-circle</strong> if the radius is
+  What's the <strong>area</strong> of the red <strong>quarter-circle</strong> if the radius is
   <code>1</code>? Can you estimate it to the nearest tenth?
 </p>
 <p>
-  ⭐ What's the total <strong>area</strong> of the <strong>square</strong> (including both the red
-  and black areas)?
+  What's the total <strong>area</strong> of the <strong>square</strong> (including both the red and
+  black areas)?
 </p>
 <p>
-  ⭐ If we place a dot <strong>randomly</strong> within the square, what's the
+  If we place a dot <strong>randomly</strong> within the square, what's the
   <strong>probability</strong> it will land inside the red quarter-circle? Does your answer make
   sense visually?
 </p>
 <details>
-  <summary>Math hint 🧮</summary>
+  <summary>Hint</summary>
   <ul>
     <li>
       <p>
@@ -47,7 +59,8 @@
       <p>
         <strong>Probability:</strong> The probability of a random point landing inside the red
         quarter-circle is the ratio of the quarter-circle's area to the square's area:
-        <code>(π / 4) / 1 = π / 4</code>. This is about 0.8, which seems visually reasonable.
+        <code>(π / 4) / 1 = π / 4</code>. This is about <code>0.8</code>, which seems visually
+        reasonable.
       </p>
     </li>
     <li>
@@ -61,33 +74,30 @@
     </li>
   </ul>
 </details>
-<h2>Let's get coding</h2>
+<p><button class="next-btn">Next</button></p>
+<h2>⭐ Draw a Red Quarter Circle</h2>
 <p>
-  ⭐ <strong>Your Task:</strong> Modify the code on the right to draw
-  <code>&quot;red&quot;</code> dots for points inside the quarter-circle, just like in the image
-  above.
+  Modify the code on the right to draw <code>&quot;red&quot;</code> dots for points inside the
+  quarter-circle, just like in the image above.
 </p>
 <p>
   Use the <a href="/docs/builtins.html#sqrt"><code>sqrt</code></a> function to calculate the
   distance from each dot to the circle's center at <code>0 0</code>.
 </p>
-<details>
-  <summary>Math hint 🧮</summary>
-  <p>
-    The distance from the circle's center at <code>0 0</code> to any point <code>x y</code> is
-    calculated using the Pythagorean theorem <code>a² + b² = c²</code>:
-  </p>
-  <pre><code class="language-evy">c := sqrt a*a+b*b
+<p>
+  The distance from the circle's center at <code>0 0</code> to any point <code>x y</code> is
+  calculated using the Pythagorean theorem <code>a² + b² = c²</code>:
+</p>
+<pre><code class="language-evy">c := sqrt a*a+b*b
 </code></pre>
-  <p><img src="samples/ifs/img/quarter-circle-triangle.svg" alt="quarter circle" /></p>
-  <p>
-    If this distance is less than or equal to <code>1</code>, the point lies within the
-    quarter-circle and should be colored red. (Remember, we're scaling <code>x</code> and
-    <code>y</code> by 100 when positioning the dots, as the Evy canvas is 100 by 100.)
-  </p>
-</details>
+<p><img src="samples/ifs/img/quarter-circle-triangle.svg" alt="quarter circle" /></p>
+<p>
+  If this distance is less than or equal to <code>1</code>, the point lies within the quarter-circle
+  and should be colored red. (Remember, we're scaling <code>x</code> and <code>y</code> by 100 when
+  positioning the dots, as the Evy canvas is 100 by 100.)
+</p>
 <details>
-  <summary>Code hint 🧚</summary>
+  <summary>Hint</summary>
   <p>
     Add the following code inside the loop after declaring <code>x</code> and <code>y</code> and
     before drawing the circle.
@@ -100,18 +110,16 @@ else
 end
 </code></pre>
 </details>
-<h2>Estimate π</h2>
-<p>⭐ Can you calculate π by tallying up red dots and black dots?</p>
-<details>
-  <summary>Math hint 🧮</summary>
-  <p>
-    We know the total number of points is <code>i</code>. Let's count the
-    <code>&quot;red&quot;</code> dots in the variable <code>reds</code>. We'll then calculate the
-    ratio of <code>reds / i</code> and multiply by <code>4</code> to get an estimate of π.
-  </p>
-</details>
+<p><button class="next-btn">Next</button></p>
+<h2>⭐ Estimate π</h2>
+<p>Can you calculate π by tallying up red dots and black dots?</p>
+<p>
+  We know the total number of points is <code>i</code>. Let's count the
+  <code>&quot;red&quot;</code> dots in the variable <code>reds</code>. We'll then calculate the
+  ratio of <code>reds / i</code> and multiply by <code>4</code> to get an estimate of π.
+</p>
 <details>
-  <summary>Code hint 🧚</summary>
+  <summary>Hint</summary>
   <p>At the top of your code, add:</p>
   <pre><code class="language-evy">reds := 0
 </code></pre>
@@ -124,18 +132,9 @@ else // ...
   <p>And at the bottom of the loop, add:</p>
   <pre><code class="language-evy">while // ...
   // ...
-  pi := reds / total * 4
+  pi := reds / i * 4
   cls // clears the text output
   print &quot;PI: &quot; pi
 end
 </code></pre>
 </details>
-<details>
-  <summary>Monte Carlo Algorithm 📖</summary>
-  <p>
-    A <strong>Monte Carlo algorithm</strong> is a computer program that simulates the behavior of
-    other systems. It's not a method that gives you a perfectly precise answer, but rather an
-    approximate one, often relying on <strong>randomness</strong> and <strong>statistics</strong> to
-    reach a result. The more times you run it, the closer you get to the true answer.
-  </p>
-</details>