agila-learning-examples/en/expanded-8-1/lesson-3/lesson.html

<!doctype html><html lang="en"><meta charset="utf-8"><title>Respond to an event</title><h1>Respond to an event</h1><p>15-minute session: read for 3 minutes, trace for 3, experiment for 7, and complete the check for 2. Spend longer whenever you need.</p><p>JavaScript changes behavior. The listener waits for a click, updates done, and renders the new text. Predict the display after three clicks. Add a reset button that updates both state and the visible count. Reload the preview: this counter is memory in a page, not a saved account record.</p><pre><code class="language-web">&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;
&lt;title&gt;Agila study&lt;/title&gt;
&lt;main&gt;&lt;h1&gt;Study counter&lt;/h1&gt;&lt;button id=&quot;add&quot;&gt;Complete one&lt;/button&gt;&lt;p id=&quot;count&quot; aria-live=&quot;polite&quot;&gt;0&lt;/p&gt;&lt;/main&gt;
&lt;script&gt;let done=0;document.getElementById(&quot;add&quot;).addEventListener(&quot;click&quot;,()=&gt;{done+=1;document.getElementById(&quot;count&quot;).textContent=String(done);});&lt;/script&gt;&lt;/html&gt;</code></pre><h3>Practice and evidence</h3><p>Keep three notes: your prediction, the actual result, and why they match or differ. The completion check grades understanding; the practice task builds skill.</p></html>