Skip to content

演習問題実行画面の実装 (#90)#93

Merged
kdix-23-071 merged 5 commits intodevelopfrom
feature/issue-90-exercise-execution-v2
Feb 21, 2026
Merged

演習問題実行画面の実装 (#90)#93
kdix-23-071 merged 5 commits intodevelopfrom
feature/issue-90-exercise-execution-v2

Conversation

@kdix-23-071
Copy link
Contributor

概要

Issue #90 の演習問題実行画面を実装しました。

実装内容

画面構成

  • 演習詳細ページ: /exercises/[category]/[exerciseId]
  • レッスン一覧: アコーディオン形式で展開/折りたたみ可能
  • 確認テスト: 問題表示エリアと解答入力エリアを分離

問題形式対応

  • 記述式問題: コーディング問題(HTML/CSS/Responsive/Security)
  • 選択式問題: 座学問題(JavaScript基礎/機械学習基礎)

主要な変更

UI/UX改善

  • 背景色をクリーム色(bg-[#FDFEF0])に変更し視認性向上
  • アコーディオン形式のレッスン表示で画面内完結
  • 問題と解答欄を明確に分離

問題の質向上

  • 全6問題に詳細な説明を追加(学習目標を明確化)
  • 座学問題を選択式に変更(理解度チェックに最適化)
  • 問題文を改善し、より実践的な内容に

型システム拡張

  • type: "text" | "choice" で問題形式を切り替え
  • 選択式問題用の choices?: string[] フィールド追加
  • ConfirmationTestコンポーネントで両形式に対応

変更ファイル

  • frontend/src/app/exercises/[category]/[exerciseId]/page.tsx
  • frontend/src/features/exercise/components/ConfirmationTest.tsx
  • frontend/src/features/exercise/types/exerciseDetail.ts
  • frontend/src/features/exercise/api/mockExerciseDetail.ts

テスト

  • ✅ npm run lint: エラー0件
  • ✅ TypeScriptコンパイル: エラーなし
  • ✅ 選択式/記述式両方のUI動作確認

関連Issue

Closes #90

- 全演習に詳細な説明を追加(学習目標を明確化)
- 座学問題を選択式に変更(JavaScript、ML)
- 記述式問題のタイトルと問題文を改善
- 選択式・記述式のtype属性でUI切り替え対応
@kdix-23-071
Copy link
Contributor Author

Screenshot 2026-02-22 at 0 40 56 Screenshot 2026-02-22 at 0 40 45 Screenshot 2026-02-22 at 0 40 19 Screenshot 2026-02-22 at 0 40 13

@kdix-23-071 kdix-23-071 merged commit 12a3239 into develop Feb 21, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

演習実行画面の実装

1 participant