Skip to content

Commit

Permalink
lab-site: Generate notes from markdown (3/3)
Browse files Browse the repository at this point in the history 
Update lab .htmlf file now generated from .md files.

Gen-command: make lab
Commit-group: 2/3
  • Loading branch information
@juliaogris
juliaogris committed Aug 22, 2024
1 parent efd7ac0 commit 9fc64fa
Show file tree
Hide file tree
Showing 18 changed files with 244 additions and 279 deletions.
77 changes: 39 additions & 38 deletions frontend/lab/samples/intro/circles.htmlf
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,54 @@
<h1>🇵🇼 Circles</h1>

<p>Run this program and read the code.</p>
<p>⭐ Can you move the circle center to each corner?</p>
<details>
<summary>Hint</summary>
<table class="images">
<tr>
<td>
<img src="samples/intro/img/circles-top-left.svg" alt="Quater cirlce top left" />
</td>
<td><img src="samples/intro/img/circles-top-right.svg" alt="Quater circle top right" /></td>
</tr>
<tr>
<td>
<img src="samples/intro/img/circles-bottom-left.svg" alt="Quater cirlce bottom left" />
</td>
<td>
<img src="samples/intro/img/circles-bottom-right.svg" alt="Quater cirlce bottom right" />
</td>
</tr>
<summary>Result</summary>
<table>
<thead>
<tr>
<th><img src="samples/intro/img/circles-top-left.svg" alt="Quarter circle top left" /></th>
<th>
<img src="samples/intro/img/circles-top-right.svg" alt="Quarter circle top right" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="samples/intro/img/circles-bottom-left.svg" alt="Quarter circle bottom left" />
</td>
<td>
<img src="samples/intro/img/circles-bottom-right.svg" alt="Quarter circle bottom right" />
</td>
</tr>
</tbody>
</table>
</details>

<p>⭐ Draw 2-4 circles that are partly or fully visible.</p>
<details>
<summary>Examples</summary>
<table class="images">
<tr>
<td>
<img src="samples/intro/img/circles-anika.svg" alt="Three circles of same size" />
</td>
<td>
<img
src="samples/intro/img/circles-mali.svg"
alt="Three large overlapping circles in warm colors"
/>
</td>
</tr>
<tr>
<td>
<img src="samples/intro/img/circles-camh.svg" alt="Overlapping circles" />
</td>
<td><img src="samples/intro/img/circles-kathi.svg" alt="Cloud made from circles" /></td>
</tr>
<table>
<thead>
<tr>
<th><img src="samples/intro/img/circles-anika.svg" alt="Three circles of same size" /></th>
<th>
<img
src="samples/intro/img/circles-mali.svg"
alt="Three large overlapping circles in warm colors"
/>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="samples/intro/img/circles-camh.svg" alt="Overlapping circles" /></td>
<td><img src="samples/intro/img/circles-kathi.svg" alt="Cloud made from circles" /></td>
</tr>
</tbody>
</table>
</details>

<p>Which country has this flag? 🇵🇼</p>
<details>
<summary>Answer</summary>
<p><a href="https://en.wikipedia.org/wiki/Palau" target="_blank">Palau</a></p>
<p><a href="https://en.wikipedia.org/wiki/Palau">Palau</a></p>
</details>
71 changes: 35 additions & 36 deletions frontend/lab/samples/intro/coords.htmlf
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,8 @@
<p>Can you figure out the coordinates?</p>
<ol>
<li><strong>Run</strong> this program.</li>
<li>
<strong>Tap</strong> the drawing area (canvas).<br />
What are the coordinates of the red dot? 🔴
</li>
<li><strong>Tap</strong> the drawing area (canvas).</li>
<li>What are the coordinates of the red dot? 🔴</li>
<li><strong>Tap</strong> the canvas again for a hint and the solution. 🎯</li>
</ol>
<details>
Expand All @@ -15,52 +13,53 @@
take a peek at the <a href="#coords-code" target="_blank">full example</a>.
</p>
</details>

<details>
<summary>Coordinates on the Evy Canvas 📖</summary>
<p>Imagine the canvas as a grid. Each point on this grid is identified by two numbers:</p>
<ul>
<li><strong>x-coordinate</strong> How far the point is from the left edge of the canvas.</li>
<li>
<strong>x-coordinate</strong><br />How far the point is from the left edge of the canvas.
</li>
<li>
<strong>y-coordinate</strong><br />How far the point is from the bottom edge of the canvas.
<strong>y-coordinate</strong><br />
How far the point is from the bottom edge of the canvas.
</li>
</ul>
<p>You write these coordinates together like this: <code>x y</code>.</p>
<figure>
<p>
<img src="samples/intro/img/coords-30-60.svg" alt="Coordinates 30 60 on the Evy Canvas" />
<figcaption>
Coordinates of the Evy Canvas.<br />
<a
href="https://play.evy.dev/#content=H4sIAAAAAAAAA2WRQW6DMBBF9z7Fl9cFbIidmG2lXgKxoOAQqwRHhpDQqnevDIaq6mpmnv/M99hJglb32lWjRm2ta4YoY5Fk8TC1eJjxQpIEeprh7j2iaJjayN7H/9I/QE8zqTtdOdDHxYyaktaZhtS2sw70vavqD0oephkvYPGBkM70GgycMXK1k0/ZyjjzKbnZbkaxFCUKdQKPxZr4euVBtEzxMBZQp9KDEDwn6/xsN8gYJNv85W6VMQhVokgVxLFEkfEQFx5EqYL0VukxiI+QvNw48Q836ue4L8rJ2fYjvgbzqfMDztXVdHNO34yr8Gob/YKr7e1wq2pNv8NNlQAnfgrok66IQ4mA5h1tIkZDYyog0wCXJbeDjCNVW3/+yzmDkJtVnnke/svphu7vJhmpjas7DU5+AAOGBlk8AgAA"
target="_blank"
>Image Source</a
>
</figcaption>
</figure>

<a
href="https://play.evy.dev/#content=H4sIAAAAAAAAA2WRQW6DMBBF9z7Fl9cFbIidmG2lXgKxoOAQqwRHhpDQqnevDIaq6mpmnv/M99hJglb32lWjRm2ta4YoY5Fk8TC1eJjxQpIEeprh7j2iaJjayN7H/9I/QE8zqTtdOdDHxYyaktaZhtS2sw70vavqD0oephkvYPGBkM70GgycMXK1k0/ZyjjzKbnZbkaxFCUKdQKPxZr4euVBtEzxMBZQp9KDEDwn6/xsN8gYJNv85W6VMQhVokgVxLFEkfEQFx5EqYL0VukxiI+QvNw48Q836ue4L8rJ2fYjvgbzqfMDztXVdHNO34yr8Gob/YKr7e1wq2pNv8NNlQAnfgrok66IQ4mA5h1tIkZDYyog0wCXJbeDjCNVW3/+yzmDkJtVnnke/svphu7vJhmpjas7DU5+AAOGBlk8AgAA"
>Image Source</a
>
</p>
<p>
The Evy canvas ranges from coordinates <code>0 0</code> to <code>100 100</code>. This means that
the corners of the canvas have the following coordinates:
</p>
<table>
<tr>
<td>Bottom left</td>
<td><code>0 0</code></td>
</tr>
<tr>
<td>Bottom right</td>
<td><code>100 0</code></td>
</tr>
<tr>
<td>Top left</td>
<td><code>0 1000</code></td>
</tr>
<tr>
<td>Top right</td>
<td><code>100 100</code></td>
</tr>
<thead>
<tr>
<th>Corner</th>
<th>Coordinates</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bottom left</td>
<td><code>0 0</code></td>
</tr>
<tr>
<td>Bottom right</td>
<td><code>100 0</code></td>
</tr>
<tr>
<td>Top left</td>
<td><code>100 0</code></td>
</tr>
<tr>
<td>Top right</td>
<td><code>100 100</code></td>
</tr>
</tbody>
</table>
<p>
The center of the canvas has the coordinates <code>50 50</code>. The point <code>30 60</code> is
Expand Down
8 changes: 3 additions & 5 deletions frontend/lab/samples/intro/helloworld.htmlf
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
<h1>👋🌏 Hello World!</h1>
<p>
Check out the program on the right 👉.<br />
Hit <strong>Run</strong> to see the result!
</p>
<p>Check out the program on the right 👉.</p>
<p>Hit <strong>Run</strong> to see the result!</p>
<p>Can you change the program to print <strong>your name</strong>? ⭐</p>
<p>
Check out the docs for more info on the
<a href="/docs/builtins.html#print" target="_blank"><code>print</code></a> command.
<a href="/docs/builtins.html#print"><code>print</code></a> command.
</p>
15 changes: 7 additions & 8 deletions frontend/lab/samples/intro/loop.htmlf
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
<h1>💫 Loops</h1>

<p>Can you change this program to</p>
<ul class="starlist">
<li>print the numbers from 0 to 20?</li>
<li>sleep only 0.2 seconds?</li>
<li>print even numbers only?</li>
<li>print odd numbers only?</li>
<ul>
<li>⭐️ <code>print</code> the numbers from <code>0</code> to <code>20</code>?</li>
<li>⭐️ <code>sleep</code> only <code>0.2</code> seconds?</li>
<li>⭐️ <code>print</code> even numbers only?</li>
<li>⭐️ <code>print</code> odd numbers only?</li>
</ul>

<details>
<summary>Understanding Loops 📖</summary>
<p>
Expand All @@ -18,7 +16,8 @@
<pre><code class="language-evy">while loop_condition
loop_body
// …
end</code></pre>
end
</code></pre>
<ul>
<li><code>while</code>: Start of the loop.</li>
<li><strong>loop_condition</strong>: As long as this condition is true, the loop repeats.</li>
Expand Down
65 changes: 38 additions & 27 deletions frontend/lab/samples/intro/move.htmlf
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,71 @@
<h1>🟣🚚 Moving Dot</h1>
<p>⭐ Can you draw 6 purple circles at x coordinates 0, 20, 40, 60, 80, and 100?</p>
<details>
<summary>Hint</summary>
<img src="samples/intro/img/move-6circles.svg" alt="6 circles on horizontally center aligned" />
<summary>Result</summary>
<p>
<img src="samples/intro/img/move-6circles.svg" alt="6 circles on horizontally center aligned" />
</p>
</details>

<p>⭐ Can you draw these 6 purple circles using a loop?</p>
<details>
<summary>Loop structure</summary>
<pre><code class="language-evy">while loop_condition
loop_body
// …
end</code></pre>
end
</code></pre>
<details>
<summary>Hint</summary>
<summary>Code hint 🧚</summary>
<pre><code class="language-evy">x:num
while x <= ❓
while x &lt;= ❓
move x 50
circle 10
x = x + ❓
end</code></pre>
end
</code></pre>
</details>
</details>
<p>
⭐ Can you change the program to make the circle move from left to right, using the
<a href="/docs/builtins.html#clear" target="_blank"><code>clear</code></a> and
<a href="/docs/builtins.html#sleep" target="_blank"><code>sleep</code></a> commands?
<a href="/docs/builtins.html#clear"><code>clear</code></a> and
<a href="/docs/builtins.html#sleep"><code>sleep</code></a> commands?
</p>

<details>
<summary>Hint</summary>
<img src="samples/intro/img/1-circle.gif" alt="one horizontally moving circle" />
<pre><code class="language-evy">while // …
<summary>Result</summary>
<p><img src="samples/intro/img/1-circle.gif" alt="one horizontally moving circle" /></p>
<details>
<summary>Code hint 🧚</summary>
<pre><code class="language-evy">while // …
clear
// …
sleep 0.2
end</code></pre>
end
</code></pre>
</details>
</details>

<p>⭐ Make 2 circles move in opposite direction</p>
<details>
<summary>Hint</summary>
<img src="samples/intro/img/2-circles.gif" alt="two horizontally moving circle" />
<pre><code class="language-evy">move x 40
circle 10
move 100-x 60
// …</code></pre>
<summary>Result</summary>
<p><img src="samples/intro/img/2-circles.gif" alt="two horizontally moving circles" /></p>
<details>
<summary>Code hint 🧚</summary>
<pre><code class="language-evy">move x 40
circle 10
move 100-x 60
// …
</code></pre>
</details>
</details>

<p>⭐ Make 4 circles move in opposite direction</p>
<details>
<summary>Hint</summary>
<img src="samples/intro/img/4-circles.gif" alt="four moving circles" />

<pre><code class="language-evy">move 100-x 60
<summary>Result</summary>
<p><img src="samples/intro/img/4-circles.gif" alt="four moving circles" /></p>
<details>
<summary>Code hint 🧚</summary>
<pre><code class="language-evy">move 100-x 60
circle 10
move 40 x
// …</code></pre>
// …
</code></pre>
</details>
</details>
29 changes: 13 additions & 16 deletions frontend/lab/samples/intro/var.htmlf
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,22 @@
<h1>🧮 Variables</h1>

<ul class="starlist">
<ul>
<li>
<em>Don't run the code yet!</em><br />
What will the first two
<a href="/docs/builtins.html#print" target="_blank"><code>print</code></a> commands show?
⭐️ <em>Don't run the code yet!</em> What will the first two
<a href="/docs/builtins.html#print"><code>print</code></a> commands show?
</li>
<li>What about the last two?</li>
<li>Can you print your name and your age using variables?</li>
<li>⭐️ What about the last two?</li>
<li>⭐️ Can you print your name and your age using variables?</li>
</ul>

<details>
<summary>Understanding Variables 📖</summary>
<p>In Evy, we create a variable and its type with the pattern:</p>
<pre><code><span class="ident">name:type</span></code></pre>
<p>
Let's <strong>declare</strong> the variable <code>x</code>, which can only store a number value:
</p>
<pre><code class="language-evy"><span class="ident">x</span><span class="punc">:</span><span class="keyword">num</span></code></pre>
<p>Now we can <strong>assign</strong> a value to it using the equality sign <code>=</code>:</p>
<pre><code class="language-evy"><span class="ident">x</span><span class="ws"> </span><span class="op">=</span><span class="ws"> </span><span class="num">3</span><span class="ws"> </span><span class="op">+</span><span class="ws"> </span><span class="num">4</span></code></pre>

<pre><code class="language-evy">name:type
</code></pre>
<p>Let's <em>declare</em> the variable <code>x</code>, which can only store a number value:</p>
<pre><code class="language-evy">x:num
</code></pre>
<p>Now we can <em>assign</em> a value to it using the equality sign <code>=</code>:</p>
<pre><code class="language-evy">x = 3 + 4
</code></pre>
<p>📌 A variable <em>must</em> be declared before it can be used.</p>
</details>
12 changes: 5 additions & 7 deletions frontend/lab/samples/intro/welcome.htmlf
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,15 @@
Programming is for everyone – no special skills required, just curiosity and a willingness to
learn.
</p>
<p>
Let's dive in! Hit <strong>Run</strong> on the right 👉. <br />
That's what we'll build up to in this first lab—a bit of a whirlwind tour.
</p>
<p>Let's dive in! Hit <strong>Run</strong> on the right 👉.</p>
<p>That's what we'll build up to in this first lab—a bit of a whirlwind tour.</p>
<h2>🚀 Let's get started!</h2>
<p>There is also a step-by-step walk through video guide 🎬:</p>
<iframe
src="https://www.youtube.com/embed/FBqyiU4iZNY"
title="YouTube video player for Lab 1 walk through"
src="https://www.youtube-nocookie.com/embed/FBqyiU4iZNY"
title="YouTube video player for Introductory Lab Walk Through"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
class="youtube"
Expand Down
Loading

0 comments on commit 9fc64fa

Please sign in to comment.