ut-code · aster-void · Oct 19, 2023 · Oct 18, 2023 · Oct 18, 2023 · Oct 18, 2023
diff --git a/docs/1-trial-session/02-html/index.md b/docs/1-trial-session/02-html/index.md
@@ -2,6 +2,7 @@
 title: HTML
 ---
 
+import Answer from "@site/src/components/Answer";
 import Term from "@site/src/components/Term";
 import ViewSource from "@site/src/components/ViewSource";
 import createFileVideo from "./create-file.mp4";
@@ -132,10 +133,31 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
 
 箇条書きを作るときには、単に「・」と書くのではなく箇条書き用のタグを使います。「HTML 箇条書き」などと検索してみましょう。
 
-### 解答例
+<Answer title="持ち物リスト">
+
+```html
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>Title</title>
+  </head>
+  <body>
+    <h1>遠足の持ち物</h1>
+    <ul>
+      <li><strong>お弁当</strong></li>
+      <li>水筒</li>
+      <li>タオル</li>
+      <li>レジャーシート</li>
+    </ul>
+  </body>
+</html>
+```
 
 <ViewSource url={import.meta.url} path="_samples/excursion" />
 
+</Answer>
+
 ## 課題 (時間が余った場合)
 
 単一の HTML ファイルのみを使用して、下のようなフォームを作成してみましょう。いきなり飛躍した感がありますが、やることは単純で、ひたすら HTML タグを並べるのみです。
@@ -148,6 +170,35 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
 - テキストボックスは `input` タグで作成できます。
 - 最後の箇条書きには `ul` タグや `li` タグを使用しています。
 
-### 解答例
+<Answer title="フォーム">
+
+```html
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>課題: HTMLのみを使用してフォームを作成する</title>
+  </head>
+  <body>
+    <p>新規登録</p>
+    <table>
+      <tr>
+        <th>ID</th>
+        <td><input type="text" /></td>
+      </tr>
+      <tr>
+        <th>パスワード</th>
+        <td><input type="password" /></td>
+      </tr>
+    </table>
+    <ul>
+      <li>IDは他のユーザーと重複させることはできません。</li>
+      <li>パスワードは8文字以上です。</li>
+    </ul>
+  </body>
+</html>
+```
 
 <ViewSource url={import.meta.url} path="_samples/form" />
+
+</Answer>
diff --git a/docs/1-trial-session/07-if-statement/index.md b/docs/1-trial-session/07-if-statement/index.md
@@ -88,7 +88,7 @@ const age = 20;
 - 18 歳以上 ～ 25 歳未満なら `投票に行けます` と表示する
 - 25 歳以上なら `衆議院議員に立候補できます` と表示する
 
-<Answer>
+<Answer title="選挙権">
 
 if ～ else if ～ else 構文を使うと、次のように書くことができます。
 

diff --git a/docs/1-trial-session/08-loop/index.md b/docs/1-trial-session/08-loop/index.md
@@ -191,9 +191,7 @@ const string2 = `10から2を引くと${10 - 2}です。`;
 いくつにすればよいでしょうか？
 :::
 
-### 解答例
-
-<Answer>
+<Answer title="10の階乗">
 
 ```javascript
 let product = 1;
@@ -241,9 +239,7 @@ document.write(product);
 自然数`n`を`i`で割ったあまりは `n % i`で求められます。
 :::
 
-### 解答例
-
-<Answer>
+<Answer title="素数判定">
 
 変数の、最後に代入した値のみを保持する性質を利用します。
 

diff --git a/docs/1-trial-session/09-functions/_samples/multiply/index.html b/docs/1-trial-session/09-functions/_samples/multiply/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>2つの積 解答例</title>
+  </head>
+  <body>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/docs/1-trial-session/09-functions/_samples/multiply/script.js b/docs/1-trial-session/09-functions/_samples/multiply/script.js
@@ -0,0 +1,6 @@
+function multiply(a, b) {
+  const result = a * b;
+  return result;
+}
+
+document.write(multiply(3, 4));
diff --git a/docs/1-trial-session/09-functions/index.md b/docs/1-trial-session/09-functions/index.md
@@ -83,6 +83,25 @@ function tryToDrive() {
 
 :::
 
+### 確認課題
+
+引数を 2 つとり、その積を<Term type="javascriptReturnValue">戻り値</Term>として<Term type="javascriptReturn">返す</Term><Term type="javascriptFunction">関数</Term> `multiply` を定義してください。
+
+<Answer type="2つの積">
+
+```javascript
+function multiply(a, b) {
+  const result = a * b;
+  return result;
+}
+
+document.write(multiply(3, 4));
+```
+
+<ViewSource url={import.meta.url} path="_samples/multiply" />
+
+</Answer>
+
 ## <Term type="javascriptVariable">変数</Term>の<Term type="javascriptScope">スコープ</Term>
 
 <p><Term type="javascriptFunction">関数</Term>内で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>は、<Term type="javascriptFunction">関数</Term>内でのみ有効です。<Term type="javascriptVariable">変数</Term>が有効な範囲のことを、その<Term type="javascriptVariable">変数</Term>の<Term type="javascriptScope" strong>スコープ</Term>と呼んでいます。</p>
@@ -175,7 +194,7 @@ for (let i = 0; i < 10; i += 1) {
 <p><Term type="javascriptIfStatement">if 文</Term>を使って、<code>a</code> が大きい場合と <code>b</code> が大きい場合で処理を書き分けます。</p>
 :::
 
-<Answer>
+<Answer title="大きい数">
 
 ```javascript
 function max(a, b) {
@@ -227,7 +246,7 @@ document.write(calculateCost(3.5));
 > - 月間転送量 < 5.0 (GB) のとき、携帯電話料金は 月間転送量 × 600 (円/GB)
 > - 月間転送量 >= 5.0 (GB) のとき、携帯電話料金は 3000 (円)
 
-<Answer>
+<Answer title="携帯電話料金">
 
 ```javascript
 function calculateCost(monthlyDataUsage) {

diff --git a/docs/1-trial-session/10-array/index.md b/docs/1-trial-session/10-array/index.md
@@ -129,7 +129,7 @@ const numbers = [-3, -1, 9, -10, 3, 7, 6, 1, 0, 5];
 
 :::
 
-<Answer>
+<Answer title="配列の要素の和">
 
 ```javascript
 const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
@@ -190,7 +190,7 @@ const array4 = [-878, -40, -324, -410, -592, -610, -880, -65, -423, -32];
 
 :::
 
-<Answer>
+<Answer title="配列の最大値">
 
 配列の最初の値を初期値に設定することで解消します。
 

diff --git a/docs/1-trial-session/11-object/index.md b/docs/1-trial-session/11-object/index.md
@@ -2,6 +2,7 @@
 title: オブジェクト
 ---
 
+import Answer from "@site/src/components/Answer";
 import Term from "@site/src/components/Term";
 import ViewSource from "@site/src/components/ViewSource";
 
@@ -71,4 +72,19 @@ const nextYearTanaka = incrementAge(tanaka);
 document.write(nextYearTanaka.age); // 19 と表示されてほしい
 ```
 
+<Answer title="年齢を増やす">
+
+```javascript
+function incrementAge(person) {
+  person.age = person.age + 1;
+  return person;
+}
+
+const tanaka = { name: "田中", age: 18 };
+const nextYearTanaka = incrementAge(tanaka);
+document.write(nextYearTanaka.age);
+```
+
 <ViewSource url={import.meta.url} path="_samples/incrementAge" />
+
+</Answer>
diff --git a/docs/1-trial-session/12-css/index.md b/docs/1-trial-session/12-css/index.md
@@ -2,6 +2,7 @@
 title: ウェブサイトの見た目を整える
 ---
 
+import Answer from "@site/src/components/Answer";
 import Term from "@site/src/components/Term";
 import ViewSource from "@site/src/components/ViewSource";
 
@@ -73,4 +74,31 @@ CSS の<Term type="cssProperty">プロパティ</Term>には `color` (文字色)
 - 枠線の内側にも余白があります (padding)
 - ボックスに影がついています (box-shadow)
 
+<Answer title="シンプルなボックス">
+
+```html
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>Title</title>
+  </head>
+  <body>
+    <div
+      style="
+        border: 1px solid #aaa;
+        border-radius: 10px;
+        margin: 30px;
+        padding: 30px;
+        box-shadow: 0px 0px 2px 1px #aaa;
+      "
+    >
+      Foo
+    </div>
+  </body>
+</html>
+```
+
 <ViewSource url={import.meta.url} path="_samples/foo" />
+
+</Answer>
diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md
@@ -2,6 +2,7 @@
 title: DOM
 ---
 
+import Answer from "@site/src/components/Answer";
 import Term from "@site/src/components/Term";
 import ViewSource from "@site/src/components/ViewSource";
 
@@ -55,4 +56,31 @@ element.style.backgroundColor = "red";
 
 [CSS の節](../12-css/index.md)の課題を、<Term type="styleAttribute">style 属性</Term>を使用せずに JavaScript のみで実現してみましょう。
 
+<Answer title="JavaScriptを用いたCSSスタイリング">
+
+```html
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>Title</title>
+  </head>
+  <body>
+    <div id="foo">Foo</div>
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```javascript
+const element = document.getElementById("foo");
+element.style.border = "1px solid #aaa";
+element.style.borderRadius = "10px";
+element.style.margin = "30px";
+element.style.padding = "30px";
+element.style.boxShadow = "0px 0px 2px 1px #aaa";
+```
+
 <ViewSource url={import.meta.url} path="_samples/css" />
+
+</Answer>
diff --git a/docs/2-browser-apps/03-class/index.md b/docs/2-browser-apps/03-class/index.md
@@ -114,7 +114,7 @@ tanaka.introduceSelf();
 
 自分自身の年齢を 1 増やすメソッド `incrementAge` を定義して、実行してみてください。
 
-<Answer>
+<Answer title="年齢を増やすメソッド">
 
 ```javascript
 class Student {
@@ -275,7 +275,7 @@ tanaka.introduceSelf(); // 私の名前は田中です。18歳です。ドイツ
 
 `Student` クラスを継承して `SeniorStudent` クラスを作ってみましょう。`SeniorStudent` クラスのインスタンスは `researchQuestion` プロパティを持ち、`introduceSelf` メソッドを実行すると自分の名前を出力した後に自分の研究内容を紹介するようにしてみましょう。
 
-<Answer>
+<Answer title="学生のClassの定義">
 
 ```javascript
 class Student {
@@ -347,6 +347,9 @@ document.write(false.toString()); // false
 
 ### 課題
 
+<!-- FIXME: 雑すぎるので修正してください
+Answerタグもその時に追加してください。 -->
+
 `document.getElementById` 関数で `div` 要素を取得すると、[`HTMLDivElement` クラス](https://developer.mozilla.org/ja/docs/Web/API/HTMLDivElement)のインスタンスが返されます。このクラスは [`HTMLElement` クラス](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement) を継承しており、さらに `HTMLElement` クラスは [`Element` クラス](https://developer.mozilla.org/ja/docs/Web/API/Element)を、`Element` クラスは [`Node` クラス](https://developer.mozilla.org/ja/docs/Web/API/Node)を継承しています。
 
 ![HTMLDivElementの継承関係](./html-inheritance.drawio.svg)

diff --git a/docs/2-browser-apps/04-anonymous-function/index.md b/docs/2-browser-apps/04-anonymous-function/index.md
@@ -133,7 +133,7 @@ const students = ["Hazel", "Dorian", "Scarlett", "Daisy"];
 
 :::
 
-<Answer>
+<Answer title="箇条書き">
 
 ```javascript
 const students = ["Hazel", "Dorian", "Scarlett", "Daisy"];
@@ -162,7 +162,7 @@ if (/* すべての点数が 50 点以上なら */) {
 
 :::
 
-<Answer>
+<Answer title="進級可能？">
 
 `Array#every` メソッドを使うと、配列の全要素が指定された関数でテストできます
 
@@ -185,7 +185,7 @@ const minScore = scores.reduce(/* コールバック関数 */);
 document.write(minScore); // 55
 ```
 
-<Answer>
+<Answer title="Array#reduceの使い方">
 
 ```javascript
 const scores = [90, 65, 70, 55, 80];

diff --git a/src/components/Answer/index.jsx b/src/components/Answer/index.jsx
@@ -4,11 +4,11 @@ import Details from "@theme/Details";
 /**
  * component that hide an answer
  */
-export default function Answer({ type = undefined, children }) {
+export default function Answer({ title = undefined, children }) {
   return (
     <Details
       summary={
-        type ? <summary>解答例: {type}</summary> : <summary>解答例</summary>
+        title ? <summary>解答例: {title}</summary> : <summary>解答例</summary>
       }
     >
       {children}