HTMLの課題を追加し、軽微な文言修正を行いました。

sYakusHinineko · sYakusHinineko · commit 98007d7d9885 · 2023-10-12T06:13:14.000+09:00
diff --git a/docs/1-trial-session/02-html/_samples/travel-list/index.html b/docs/1-trial-session/02-html/_samples/travel-list/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>Title</title>
+  </head>
+  <body>
+    <div>遠足の持ち物</div>
+    <ul>
+      <li><strong>お弁当</strong></li>
+      <li>水筒</li>
+      <li>タオル</li>
+      <li>レジャーシート</li>
+    </ul>
+  </body>
+</html>
diff --git a/docs/1-trial-session/02-html/easier-task-sample.png b/docs/1-trial-session/02-html/easier-task-sample.png
diff --git a/docs/1-trial-session/02-html/index.md b/docs/1-trial-session/02-html/index.md
@@ -122,6 +122,18 @@ html <Term type="element">要素</Term>の直属の子<Term type="element">要
 
 :::
 
+## 課題
+
+単一の HTML ファイルのみを使用して、遠足の持ち物リストを作成してみましょう。お弁当は何よりも重要なので太字にしましょう。
+
+<ViewSource url={import.meta.url} path="_samples/travel-list" />
+
+![簡単な課題の例](./easier-task-sample.png)
+
+### ヒント
+
+箇条書きを作るときに、そのまま「・」を打ってはいけません。分からなければ Google で「HTML 箇条書き」と検索してみましょう。
+
 ## 課題 (時間が余った場合)
 
 単一の HTML ファイルのみを使用して、下のようなフォームを作成してみましょう。いきなり飛躍した感がありますが、やることは単純で、ひたすら HTML タグを並べるのみです。
diff --git a/docs/1-trial-session/07-if-statement/index.md b/docs/1-trial-session/07-if-statement/index.md
@@ -90,31 +90,32 @@ let age = 20;
 
 <Details summary={<summary>課題が解けたら…</summary>}>
 
-課題は解けましたか？まずは動作することが大事ですが、慣れてきたら可読性の高い綺麗なコードを書くように心がけたいものです。おそらく、今回の課題を次のように書く人がいるのではないでしょうか。
+課題は解けましたか？解答例はこちらです。
 
-```javascript showLineNumbers
+```javascript title="script.js" showLineNumbers
 if (age < 18) {
   document.write("選挙権はありません。");
-} else if (age >= 18 && age < 25) {
+} else if (age < 25) {
   document.write("投票に行けます。");
 } else {
   document.write("衆議院議員に立候補できます。");
 }
 ```
 
-この問題のコードを書くのに、`&&` のような論理演算子は必要ありません。`if` 文の処理の仕方を理解していると、条件式を簡単に記述できます。
+まずは動作することが大事ですが、慣れてきたら可読性の高い綺麗なコードを書くように心がけたいものです。おそらく、今回の課題を次のように書く人がいるのではないでしょうか。
 
-```javascript showLineNumbers
+```javascript title="script.js" showLineNumbers
 if (age < 18) {
   document.write("選挙権はありません。");
-} else if (age < 25) {
+} else if (age >= 18 && age < 25) {
   document.write("投票に行けます。");
 } else {
   document.write("衆議院議員に立候補できます。");
 }
 ```
+この問題のコードを書くのに、`&&` のような論理演算子は必要ありません。`if` 文の処理の仕方を理解していると、条件式を簡単に記述できます。
 
-`if` 文では、条件式が`true` ならば処理が実行されて`if` 文が終了し、`false` ならば次の条件式が評価される、という処理を繰り返します。したがって、「1行目の条件式が`false` だった場合」という意味の条件式を3行目にまで書き込む必要はないわけです。
+`if` 文では、条件式が `true` ならば処理が実行されて`if` 文が終了し、`false` ならば次の条件式が評価される、という処理を繰り返します。したがって、「1行目の条件式が`false` だった場合」という意味の条件式を3行目にまで書き込む必要はないわけです。
 
 </Details>
 
