Fix: クイズ機能の改善、見出しの重複修正、ナビゲーション整理

Atsushi Ambo · Atsushi Ambo · commit 15626549ca2a · 2025-05-07T00:43:42.000+09:00
- クイズの正誤表示と解説表示を改善
- 重複していた見出しを整理
- ナビゲーションの重複を解消
- ヘッダーの不要なテキストを非表示に
diff --git a/docs/ops-essentials/hands-on.md b/docs/ops-essentials/hands-on.md
@@ -0,0 +1,71 @@
+# Hands-on: ラボの遊び方
+
+!!! tip "クイックスタート"
+    ```bash
+    # ラボ環境を起動
+    docker compose --profile game up -d
+    # ネットワーク演習を開始
+    python3 tools/cli/game.py play 01-network
+    ```
+
+## ラボの特徴
+
+- **実践的なシナリオ**: 実際のトラブルシューティングを想定した課題
+- **段階的な学習**: 基礎から応用までステップバイステップで学べる
+- **即時フィードバック**: 解答チェックで理解度を確認
+
+## 収録ゲーム
+
+| ID | テーマ | 学ぶこと | 想定時間 |
+|----|--------|----------|----------|
+| **01-network** | ポートマッピングデバッグ | Docker ネットワーク基礎・Nginx | 20分 |
+| **02-monitor** | 監視入門 | Prometheus Exporter 追加 | 30分 |
+| _Coming soon_ | ログ分析 | ELKスタック | - |
+
+## 各ラボの進め方
+
+### 1. ラボの開始
+
+```bash
+# 特定のラボを開始
+python3 tools/cli/game.py play 01-network
+```
+
+### 2. 課題の確認
+
+- 表示される問題文をよく読み、何を解決すべきか理解します
+- 必要に応じて、ヒントを参照できます
+
+### 3. 課題に取り組む
+
+- 指示に従って環境を操作します
+- 複数の方法で解決できる場合がありますので、自由に試してみてください
+
+### 4. 解答チェック
+
+```bash
+# 解答をチェック
+python3 tools/cli/game.py check
+```
+
+## トラブルシューティング
+
+- **Dockerが起動しない場合**: `docker compose down` で一度クリーンアップしてから再起動
+- **問題が表示されない場合**: ラボIDが正しいか確認してください
+- **その他**: `python3 tools/cli/game.py --help` でヘルプを表示
+
+## ラボの終了
+
+```bash
+# ラボ環境を停止
+python3 tools/cli/game.py stop
+
+# すべてのコンテナを削除
+# docker compose down
+```
+
+## フィードバック
+
+問題や改善点がありましたら、GitHubのIssueでお知らせください。
+
+[新しいIssueを作成](https://github.com/your-username/skillmap.dev/issues/new)
diff --git a/docs/ops-essentials/level1.md b/docs/ops-essentials/level1.md
@@ -53,7 +53,9 @@
 - **スケーラビリティ**: ペタバイト級のデータを水平分散して保存可能で、トラフィック増加に応じて自動的にスケールします。
 - **コスト効率**: オンデマンド課金モデルで、使用した分だけのコストで済みます。
 
-## 1-C ケーススタディ: GitHubの初期アーキテクチャ
+## 1-C ケーススタディ & アーキテクチャ図
+
+### GitHubの初期アーキテクチャ
 
 GitHubの初期の2層アーキテクチャは、シンプルながらも堅牢な設計で知られています。
 
@@ -71,7 +73,7 @@ GitHubの初期の2層アーキテクチャは、シンプルながらも堅牢
 
 **学び**: シンプルな設計から始め、必要に応じて複雑化していく進化的アーキテクチャの好例です。
 
-## 1-C アーキテクチャ図
+### アーキテクチャ図
 
 ```mermaid
 graph TD
diff --git a/docs/ops-essentials/level2.md b/docs/ops-essentials/level2.md
@@ -163,21 +163,21 @@ Airbnbは、初期段階ではcronを多用していましたが、スケーラ
   <summary>クイズ: 監視の基本</summary>
   <p>システム監視において、リソース監視に含まれるのは？</p>
   <ul class="quiz-options">
-    <li data-correct="true">CPU使用率</li>
-    <li data-correct="true">メモリ使用量</li>
-    <li data-correct="false">HTTPステータスコード</li>
-    <li data-correct="true">ディスクI/O</li>
+    <li data-correct="true" data-explain="CPU使用率はシステムの処理能力を計測する重要なリソース監視項目です。ボトルネックの特定やキャパシティプランニングに役立ちます。">CPU使用率</li>
+    <li data-correct="true" data-explain="メモリ使用量はシステムのパフォーマンスに直結する重要なリソース指標で、メモリリークの検出にも役立ちます。">メモリ使用量</li>
+    <li data-correct="false" data-explain="HTTPステータスコードはアプリケーション監視の項目で、リソース監視には含まれません。">HTTPステータスコード</li>
+    <li data-correct="true" data-explain="ディスクI/Oはストレージのパフォーマンスを計測する重要なリソース監視項目です。">ディスクI/O</li>
   </ul>
 </details>
 
 <details class="quiz">
   <summary>クイズ: ログ管理</summary>
   <p>ログ管理で重要な「3-2-1ルール」とは？</p>
   <ul class="quiz-options">
-    <li data-correct="false">3つのログレベル、2つの保存先、1つのバックアップ</li>
-    <li data-correct="true">3つのコピー、2つのメディア、1つはオフサイト</li>
-    <li data-correct="false">3時間ごとのログ取得、2時間の保持、1週間のアーカイブ</li>
-    <li data-correct="false">3つの監視項目、2つのアラート、1つのダッシュボード</li>
+    <li data-correct="false" data-explain="ログレベルの数や保存先の数は、3-2-1ルールとは関係ありません。">3つのログレベル、2つの保存先、1つのバックアップ</li>
+    <li data-correct="true" data-explain="3-2-1ルールとは、データ保護のベストプラクティスで、3つのコピーを2つの異なるメディアに保存し、そのうち1つはオフサイトに保管するというものです。これにより、災害時やシステム障害時のデータ損失リスクを最小限に抑えられます。">3つのコピー、2つのメディア、1つはオフサイト</li>
+    <li data-correct="false" data-explain="ログの取得間隔や保持期間は、3-2-1ルールとは異なる概念です。">3時間ごとのログ取得、2時間の保持、1週間のアーカイブ</li>
+    <li data-correct="false" data-explain="監視項目やアラートの数は、3-2-1ルールとは無関係です。">3つの監視項目、2つのアラート、1つのダッシュボード</li>
   </ul>
 </details>
 
diff --git a/docs/ops-essentials/level3.md b/docs/ops-essentials/level3.md
@@ -187,30 +187,30 @@ Netflixは、マイクロサービスアーキテクチャとクラウドネイ
   <summary>クイズ: スケーリング戦略</summary>
   <p>スケールアウトのメリットとして正しいものは？</p>
   <ul class="quiz-options">
-    <li data-correct="true">耐障害性が向上する</li>
-    <li data-correct="false">サーバー1台あたりの処理能力が向上する</li>
-    <li data-correct="false">初期コストが安い</li>
-    <li data-correct="false">メンテナンスが簡単</li>
+    <li data-correct="true" data-explain="スケールアウトでは複数のサーバーで負荷を分散するため、1台が停止しても他がカバーでき、耐障害性が向上します。">耐障害性が向上する</li>
+    <li data-correct="false" data-explain="サーバー1台あたりの処理能力はスケールアップで向上します。スケールアウトは台数を増やすことで全体の処理能力を向上させます。">サーバー1台あたりの処理能力が向上する</li>
+    <li data-correct="false" data-explain="スケールアウトは複数のサーバーが必要なため、初期コストは高くなりがちです。">初期コストが安い</li>
+    <li data-correct="false" data-explain="複数のサーバーを管理する必要があるため、メンテナンスは相対的に複雑になります。">メンテナンスが簡単</li>
   </ul>
 </details>
 
 <details class="quiz">
   <summary>クイズ: ロードバランサー</summary>
   <p>L7ロードバランサーの特徴として正しいものは？</p>
   <ul class="quiz-options">
-    <li data-correct="true">HTTPヘッダーに基づいたルーティングが可能</li>
-    <li data-correct="false">TCPレベルでのみ動作する</li>
-    <li data-correct="false">SSL終端ができない</li>
-    <li data-correct="false">レイヤー4で動作する</li>
+    <li data-correct="true" data-explain="L7ロードバランサーはアプリケーション層（HTTP/HTTPS）で動作するため、HTTPヘッダーやURLパスに基づいた高度なルーティングが可能です。">HTTPヘッダーに基づいたルーティングが可能</li>
+    <li data-correct="false" data-explain="TCPレベルでのみ動作するのはL4ロードバランサーの特徴です。">TCPレベルでのみ動作する</li>
+    <li data-correct="false" data-explain="L7ロードバランサーはSSL/TLS終端が可能で、バックエンドサーバーの暗号化処理を軽減できます。">SSL終端ができない</li>
+    <li data-correct="false" data-explain="レイヤー4で動作するのはL4ロードバランサーで、L7はアプリケーション層（レイヤー7）で動作します。">レイヤー4で動作する</li>
   </ul>
 </details>
 <details class="quiz">
   <summary>クイズ: 高可用性</summary>
   <p>高可用性を実現するための要素でないものは？</p>
   <ul class="quiz-options">
-    <li data-correct="false">冗長化</li>
-    <li data-correct="false">フェイルオーバー</li>
-    <li data-correct="true">単一障害点の導入</li>
-    <li data-correct="false">ヘルスチェック</li>
+    <li data-correct="false" data-explain="冗長化は、システムの重要なコンポーネントを複数用意することで、1つが故障してもサービスを継続できるようにする重要な要素です。">冗長化</li>
+    <li data-correct="false" data-explain="フェイルオーバーは、障害発生時に自動的に予備システムに切り替える仕組みで、高可用性に不可欠です。">フェイルオーバー</li>
+    <li data-correct="true" data-explain="単一障害点の導入は、システムの信頼性を低下させる要因であり、高可用性を実現するための要素ではありません。むしろ排除すべきものです。">単一障害点の導入</li>
+    <li data-correct="false" data-explain="ヘルスチェックは、システムの健全性を監視し、異常を検知するために重要な要素です。">ヘルスチェック</li>
   </ul>
 </details>
diff --git a/docs/theme/extra.css b/docs/theme/extra.css
@@ -47,6 +47,50 @@ details.quiz summary:hover {
   line-height: 1.5;
 }
 
+/* Hide redundant skip to content text in header */
+.md-header-nav__title {
+  display: none;
+}
+
+/* Quiz result labels and explanations */
+.result-label {
+  font-weight: 700;
+  margin-left: 8px;
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.85em;
+}
+
+.quiz-options li.correct .result-label {
+  color: #22c55e;
+  background-color: rgba(34, 197, 94, 0.1);
+}
+
+.quiz-options li.incorrect .result-label {
+  color: #ef4444;
+  background-color: rgba(239, 68, 68, 0.1);
+}
+
+.explain {
+  margin-top: 8px;
+  padding: 8px 12px;
+  background-color: #f8fafc;
+  border-radius: 6px;
+  border-right: 3px solid #e2e8f0;
+  font-size: 0.9rem;
+  color: #475569;
+  line-height: 1.5;
+}
+
+.quiz-options li.correct .explain {
+  border-right-color: #22c55e;
+}
+
+.quiz-options li.incorrect .explain {
+  border-right-color: #ef4444;
+}
+
 /* Quiz explanation styles */
 .quiz-options li {
   position: relative;
diff --git a/docs/theme/quiz.js b/docs/theme/quiz.js
@@ -1,5 +1,19 @@
 // Quiz interaction functionality with explanations
 document.addEventListener("DOMContentLoaded", () => {
+  // Mark function to handle quiz answer feedback
+  const mark = (li, ok) => {
+    li.classList.add(ok ? "correct" : "incorrect");
+    if (!li.querySelector(".result-label")) {
+      li.insertAdjacentHTML("beforeend",
+        `<span class="result-label">${ok ? "✔ 正解" : "✖ 不正解"}</span>`
+      );
+      const exp = li.dataset.explain || "";
+      if (exp) li.insertAdjacentHTML("beforeend",
+        `<div class="explain">${exp}</div>`
+      );
+    }
+  };
+
   // Initialize all quiz options
   document.querySelectorAll(".quiz-options").forEach((list) => {
     list.querySelectorAll("li").forEach((li) => {
@@ -8,38 +22,22 @@ document.addEventListener("DOMContentLoaded", () => {
         if (li.classList.contains("clicked")) return;
         
         const isCorrect = li.dataset.correct === "true";
-        const explanation = li.dataset.explain || "";
         
-        // Add appropriate class based on answer
-        li.classList.add(isCorrect ? "correct" : "incorrect");
-        li.classList.add("clicked");
+        // Mark the clicked answer
+        mark(li, isCorrect);
         
-        // Add explanation if exists
-        if (explanation) {
-          const explainEl = document.createElement("div");
-          explainEl.className = "explanation";
-          explainEl.textContent = explanation;
-          li.appendChild(explainEl);
-        }
-        
-        // Disable further clicks on all options and show explanations
+        // Mark all other options as disabled
         list.querySelectorAll("li").forEach((option) => {
           option.style.pointerEvents = "none";
           
           // Show correct answer with explanation if user clicked wrong one
-          if (option.dataset.correct === "true") {
-            if (!isCorrect) {
-              option.classList.add("correct");
-              if (option.dataset.explain) {
-                const correctExplain = document.createElement("div");
-                correctExplain.className = "explanation";
-                correctExplain.textContent = option.dataset.explain;
-                option.appendChild(correctExplain);
-              }
-            }
+          if (option.dataset.correct === "true" && !isCorrect) {
+            mark(option, true);
           }
         });
-        
+      });
+    });
+  });
         // Prevent event bubbling
         e.stopPropagation();
       });
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -45,3 +45,4 @@ nav:
       - Level 1 – Foundations: ops-essentials/level1.md
       - Level 2 – Ops Routine: ops-essentials/level2.md
       - Level 3 – Scale & HA: ops-essentials/level3.md
+      - Hands-on ラボ: ops-essentials/hands-on.md
