Enhance: インタラクティブなチェックリストとクイズ機能を実装

- チェックリストをクリック可能にし、状態をlocalStorageに保存
- クイズのクリックイベントを改善（event.currentTargetを使用）
- タスクリストのスタイルを追加（打ち消し線、ホバー効果など）
- mkdocs.ymlを更新してpymdownx.tasklistを有効化
- extra.jsを追加してチェックリストの状態を永続化

Author: Atsushi Ambo

docs/theme/extra.css

@@ -52,6 +52,31 @@ details.quiz summary:hover {
   display: none;
 }
 
+/* Task list styles */
+.task-list-item { 
+  list-style: none; 
+  margin-left: -1.5em;
+}
+.task-list-item input[type="checkbox"] {
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+.task-list-item input:checked + p,
+.task-list-item input:checked + span,
+.task-list-item input:checked { 
+  text-decoration: line-through;
+  opacity: 0.7;
+}
+
+/* Quiz styles */
+.quiz-options li { 
+  user-select: none;
+  transition: all 0.2s ease;
+}
+.quiz-options li:hover {
+  transform: translateX(4px);
+}
+
 /* Quiz result labels and explanations */
 .result-label {
   font-weight: 700;

docs/theme/extra.js

@@ -0,0 +1,15 @@
+// Task list persistence
+(() => {
+  // Persist task-list checkboxes
+  const STORAGE_KEY = "skillmap-checklist";
+  const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
+
+  // Mark saved states
+  document.querySelectorAll("ul.task-list input[type=checkbox]").forEach((cb, i) => {
+    cb.checked = saved[i] ?? cb.checked;
+    cb.addEventListener("change", () => {
+      saved[i] = cb.checked;
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(saved));
+    });
+  });
+})();

docs/theme/quiz.js

@@ -18,6 +18,7 @@ document.addEventListener("DOMContentLoaded", () => {
   document.querySelectorAll(".quiz-options").forEach((list) => {
     list.querySelectorAll("li").forEach((li) => {
       li.addEventListener("click", (e) => {
+        const li = e.currentTarget; // Use the element that was actually clicked
         // Prevent multiple clicks
         if (li.classList.contains("clicked")) return;
 

mkdocs.yml

@@ -19,14 +19,18 @@ theme:
     - extra.css
   extra_javascript:
     - quiz.js
+    - extra.js
 
 markdown_extensions:
   - admonition
   - pymdownx.superfences
   - pymdownx.tabbed
+  - pymdownx.tasklist:
+      custom_checkbox: true
+      clickable_checkbox: true
+      class: task-list
   - attr_list
   - md_in_html
-  - pymdownx.snippets
 
 plugins:
   - search