正答率表示機能を実装～ChatGPTと一緒に一問一答アプリを開発した話④～ - コトゼニ～学習塾とボクと、時々プログラミング〜

【PR】この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

「一問一答アプリ × ChatGPT」

先日、ChatGPTを活用して一問一答アプリケーション「情報1 一問一答トレーニングGYM」を開発したことをお伝えしました。

▶︎こちらの記事で紹介しています。

2023年6月2日【ChatGPTと開発】高校「情報1」一問一答アプリ

私が開発したこのアプリは、ChatGPTの力を借りながら、実装していきました。

この記事では、一問一答アプリ × ChatGPTの開発の舞台裏や、実際の活用方法について詳しく解説します。

今回は

正答率表示機能を実装

という機能を実装するにあたって、どのように役立ったのか、その様子を紹介します！

ぜひこのシリーズの記事をチェックして、一問一答アプリの新たな魅力とChatGPTとの相乗効果を体感してください！

正答率表示機能を実装

現時点ではユーザーは現在何問目なのか、正答率がいくらなのかわからないため、正答率を表示するように実装します。

正答率は当たり前ですが

正答率＝正答数 / 出題した問題数

で算出することになります。

ですから、正答数、出題した問題数をそれぞれ計上できるようにします。セッションを有効活用します。

出題した問題数はsession[asked_question_ids]の要素数と同じなので、その要素数を取得します。

session[:asked_question_ids].length

正答数は新たにセッションを取得し、正誤判定後に、正答していれば要素を追加することにします。

session[:correct_counts]

新たに、選択肢のボタンにquestion_idをデータとして取得できるように追加します

コトゼニ

別にquestion_idでなくても、choice_idをセッションに追加しても良いのですが…なんとなく、question_idを格納した方がゆくゆく機能を拡張したときに使えそうなので…。

<%= button_to "ア", "/questions/result", {method: :post, params: {choice_id: @choices[0].id, question_id: @question.id}, class: "buttons",data: { "choice-id" => @choices[0].id, "choice-name" =>"ア", "question-id" => @question.id},"csrf-token" => form_authenticity_token  }%>

そしてJavascriptでquestion_idを取得します。

// 選択肢ボタンに問題番号を含めているのでそれを取得
      var question_id = this.getAttribute('data-question-id');

サーバーにchoice_idと共にquestion_idをサーバーに送信。

// 選択肢番号と問題番号を送信
      xhr.send('choice_id=' + encodeURIComponent(choice_id) + '&question_id=' + encodeURIComponent(question_id));

コントローラーでparamsとして読み取り、Questionモデルが当該レコードを取得する。

そして、正答していれば、そのidをsession[:correct_counts]に追加する。

def check
    # binding.pry
    # 選択された値の正誤を判定
    choice = Choice.find(params[:choice_id])
    # q_idを読み取って、当該レコードを取得する
    question = Question.find(params[:question_id])
    if choice.is_answer
      result = true
      # 正答したら、問題番号を正答数計上セッションに追加する
      session[:correct_counts] << question.id
    else
      result = false
    end
    # 正誤判定の結果をJSON形式で返す
    render json: { result: result }
  end

セッションに格納されている要素数を取得し、ビューファイルにインスタンス変数を渡す。

def next_question
    #当メソッドを呼び出す際には最低1回はask~resultメソッドを実行している。そのため、セッションを参考にして分野を指定しながら出題済みの問題を避けて次の問題（インスタンス）を取得できる。
    @question = Question.where(genre_id: session[:selected_genre_ids]).where.not(id: session[:asked_question_ids]).order("RAND()").first

      # session[:asked_question_ids]に取得したインスタンスの問題idを追加格納する。
      if @question.present?
        session[:asked_question_ids] << @question.id
        @choices = @question.choices.includes(:question) #questionとアソシエーション関係なので（）の中にはカラム名ではなく関係のあるモデル名にする「_id」は不要
        @answer = Answer.find(@question.id)

        # -1は出題数を調整するため
        @asked_question_count = (session[:asked_question_ids].length - 1)
        @correct_counts = session[:correct_counts].length

        # to_fは浮動小数（float）への変換
        @correct_rate = ((@correct_counts.to_f / @asked_question_count.to_f) * 100).round(1)
        # 呼び出すビューファイルはaskアクションのビューファイル
        render :ask
    else
        redirect_to root_path, alert: "出題できる問題がありません。"
    end 
  end

なお、@correct_countsは整数型でデータが格納されているので「.to_f」メソッドで浮動小数型に変換しています。

そして、最初の問題かどうかで条件分岐するようにビューファイルに追記します。


<% if @asked_question_count.blank?%>
    <div class="correct-rate">最初の問題です</div>
<% else%>
    <div class="correct-rate"><%= @asked_question_count %>問出題した中、<%= @correct_counts%>問正解。正答率は<%= @correct_rate%>%です</div>
<% end%>
<div class="contents row">
  <div class="question_id">
    <%= "問題 #{@question.id}"%>
(省略)

コトゼニ

これでできあがりました！挙動はこんな感じです