Add multilingual language and systems learning tracks
This commit is contained in:
Admin committed
1 parent
07338189fc
commit
d8d1c40118
844 files changed
+6061
No files matched your search
@@ -0,0 +1,9 @@
|
||||
# Web Development · 2
|
||||
|
||||
[Agila University track](https://edu.agilaos.com/track.php?track=8&lang=en)
|
||||
|
||||
About 15 minutes per lesson. Predict, run, change, explain, then complete the check in University.
|
||||
|
||||
- [Lesson 1: Validate input and label controls](lesson-1/lesson.html)
|
||||
- [Lesson 2: Render data as text](lesson-2/lesson.html)
|
||||
- [Lesson 3: Ship a small tested website](lesson-3/lesson.html)
|
||||
@@ -0,0 +1,5 @@
|
||||
<!doctype html><html lang="en"><meta charset="utf-8"><title>Validate input and label controls</title><h1>Validate input and label controls</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>A visible label explains an input. The for attribute connects it to an id. Test empty input, 0, 1, 60, 61, and 1.5. HTML constraints help users but a real server must validate again because browser requests can be changed. This preview does not submit data to a server.</p><pre><code class="language-web"><!doctype html>
|
||||
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Agila study</title>
|
||||
<main><h1>Study time</h1><label for="minutes">Minutes (1–60)</label><input id="minutes" type="number" min="1" max="60"><button id="check">Check</button><p id="result" role="status"></p></main>
|
||||
<script>document.getElementById("check").onclick=()=>{const raw=document.getElementById("minutes").value;const n=Number(raw);document.getElementById("result").textContent=raw.trim()!==""&&Number.isInteger(n)&&n>=1&&n<=60?"Ready":"Use a whole number from 1 to 60";};</script></html></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>
|
||||
@@ -0,0 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Agila study</title>
|
||||
<main><h1>Study time</h1><label for="minutes">Minutes (1–60)</label><input id="minutes" type="number" min="1" max="60"><button id="check">Check</button><p id="result" role="status"></p></main>
|
||||
<script>document.getElementById("check").onclick=()=>{const raw=document.getElementById("minutes").value;const n=Number(raw);document.getElementById("result").textContent=raw.trim()!==""&&Number.isInteger(n)&&n>=1&&n<=60?"Ready":"Use a whole number from 1 to 60";};</script></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
<!doctype html><html lang="en"><meta charset="utf-8"><title>Render data as text</title><h1>Render data as text</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>The third task contains characters that resemble HTML. textContent displays those characters as text. Replacing it with innerHTML would interpret markup and can create an injection risk with untrusted data. Add an item containing an ampersand and angle brackets. Verify that the visible result preserves the literal text.</p><pre><code class="language-web"><!doctype html>
|
||||
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Agila study</title>
|
||||
<main><h1>Tasks</h1><ul id="tasks"></ul></main>
|
||||
<script>const tasks=["Read","Test","<strong>Explain</strong>"];for(const text of tasks){const li=document.createElement("li");li.textContent=text;document.getElementById("tasks").append(li);}</script></html></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>
|
||||
@@ -0,0 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Agila study</title>
|
||||
<main><h1>Tasks</h1><ul id="tasks"></ul></main>
|
||||
<script>const tasks=["Read","Test","<strong>Explain</strong>"];for(const text of tasks){const li=document.createElement("li");li.textContent=text;document.getElementById("tasks").append(li);}</script></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
<!doctype html><html lang="en"><meta charset="utf-8"><title>Ship a small tested website</title><h1>Ship a small tested website</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>Combine the semantic page, responsive card, validated input, and counter into a study planner. The sample checks only its remaining-work function. Add tests for empty input and keyboard use, then deliberately break one condition to ensure a test fails. Save your source on Forge. Publishing needs a host, domain, HTTPS, and a rollback plan; this isolated preview is your workshop.</p><pre><code class="language-web"><!doctype html>
|
||||
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Agila study</title>
|
||||
<main><h1>Planner checks</h1><pre id="result"></pre></main>
|
||||
<script>function remaining(total,done){return Math.max(0,total-done)}const cases=[[4,1,3],[4,4,0],[4,5,0],[0,0,0]];document.getElementById("result").textContent=cases.map(([t,d,want])=>`${t},${d}: ${remaining(t,d)===want?"PASS":"FAIL"}`).join("\n");</script></html></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>
|
||||
@@ -0,0 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Agila study</title>
|
||||
<main><h1>Planner checks</h1><pre id="result"></pre></main>
|
||||
<script>function remaining(total,done){return Math.max(0,total-done)}const cases=[[4,1,3],[4,4,0],[4,5,0],[0,0,0]];document.getElementById("result").textContent=cases.map(([t,d,want])=>`${t},${d}: ${remaining(t,d)===want?"PASS":"FAIL"}`).join("\n");</script></html>
|
||||
Reference in new issue
Block a user