【開発ログ】クイズ正解・不正解の処理

今回は、単語学習にゲーム性を加えることで聞いて・選んで・覚える学習体験を目指しました。
次回は、これを「学習データ」として残せるよう、履歴保存・時間計測に取り組みます。

前回

• Quiz機能の実装

前回の記事はこちら

---

今回

• Quiz完了処理
  　- 正解した場合のみ「学習完了」として記録。
  　- 学習履歴APIと連携し、学習イベントを保存予定。

• 学習時間の記録
  　- 開始時間・終了時間をサーバーで記録し、
  　　単語練習＋クイズ時間を統合した「総学習時間」を取得。

---

① Quiz完了処理

• 正解の時
  • api/study-event/route.tsで学習イベント追加、statusをlearnに変更。
  • 次のクイズに自動で移行fetchQuiz()を再び呼び出す。

例

async追加すること。

const selectOption = async (id: string) => {
  setSelectedId(id);
  if (!correctedWord) return;

  const correct = id === correctedWord.id;　//正解
  setIsCorrect(correct);

  if (correct) {
    // 学習完了
    await fetch("/api/learn/complete", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ wordId: correctedWord.id }),
    });

    // 時間をおいて、次の問題へ
    await new Promise((resolve)=>setTimeout(resolve,1000));

      fetchQuiz(); // 新しい問題
      setSelectedId(null);　
      setIsCorrect(null);
  }
};

---

② 学習時間の記録

• 学習ページ入場時に「開始時間」をサーバーへ送信
• ページ離脱またはタイムオーバーで「終了時間」を記録
• クイズページでも同様の流れで学習時間を統合

これにより、単語練習＋クイズ時間を合わせた「総学習時間」を算出できます。

学習時間の記録は想定より調整が多く時間がかかったため、
詳細は次回のポストでまとめます。

---

悩んだこと・学んだこと

• 学習時間の定義
  　最初は「アプリを開いている時間＝学習時間」にしようかと思ったが、
  　結局「実際に学習操作をしている時間」だけを正確に記録する設計に決定。
  　これで、後のダッシュボード分析も明確になりそう。

---

次回やること

• 学習時間の定義

• Firebaseセッションの安定化
  　- Cookieの有効期限切れ時に自動再認証できるよう改善。

• UI/UX改善
  　- ダッシュボードとエディタのデザインを統一。
  　- スマホ表示時の余白・カード間のレイアウトを再調整。