紙面で解答できるようにプリントアウト機能を実装～ChatGPTと一緒に一問一答アプリを開発した話⑤～

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

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

「一問一答アプリ × ChatGPT」

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

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

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

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

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

今回は

紙面で解答できるようにプリントアウトできる機能

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

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

紙面で解答できるように印刷用出題形式を実装する

Webアプリケーションではありますが、学習塾などで小テストとして使用してもらいたいなぁと考えているため、紙面で印刷できるように整えたいと思います。

流れとしては

トップ画面から

出題範囲の設定
プリント用の画面へ遷移

の順に遷移するようにします。

そして①はselect_questionsアクション、②はprintアクションとして定義する

まずはルーティングを以下のように編集します。

Rails.application.routes.draw do
  root to: 'questions#choose'
  resources :questions, only: [ :show] do
    collection do
      get 'choose'
      post 'ask'
      post 'result'
      post 'next_question'
      post 'check'
      get 'select_questions'
      post 'print'
    end
    resources :choices, only: [:index] #このコードでネスト関係を作り、questionコントローラーと同時に作動させる。とりあえずindexを定義。
    resources :answers, only: [:index]  
  end
end

そしてQuestionコントローラーを編集します。

class QuestionsController < ApplicationController
（省略）

  def next_question
（省略）
  end

  def select_questions
    @genres = Genre.all
  end

  def print
    # 出題数をパラムスより取得する
    question_count = params[:question_count].to_i
    # 出題範囲が選択されているか否かで条件分岐
    # 出題範囲が選択されていない場合
    if params[:genre].blank?
      # Genreモデルからカラム「id」の値だけを取得し、セッションに格納する（これで全ての分野のidを取得できる）
      genre_ids = Genre.pluck(:id)
    else
      # 選択された分野をparamsから受け取り、セッションに格納する
      genre_ids = params[:genre][:genre_ids].reject(&:empty?)
    end
    @questions = Question.where(genre_id: genre_ids).order("RAND()").limit(question_count)

  end


end

しかし！

なぜかコントローラーで取得したインスタンスとビューファイルに渡されたインスタンス変数で中身が変わるという怪奇現象が起こったので、chatGPTに相談してみました。

しかし、相談してみたものの、解決に直結する方法は得られず。

そこで、多少強引感もありますが、インスタンス変数として渡されたquestionレコードについてeachメソッドを使って一つずつ処理する際に、取り出したレコードを元にビューファイルでモデルを動かすように記述しました。

コトゼニ

良くないとは思いつつ…

<% @questions.each_with_index do |question, index|%>
          <tr class="col-6 border px-3">
            <td><%= index + 1 %></td>
            <td class="col-4"><%= question.text %></td>
            <% choices = []%>
            <% choices = Choice.where(question_id: question.id)%> 
（省略）
<% end %>

コトゼニ

そして実装できた挙動がこんな感じです

問題プリント画面のサンプル

とりあえずは狙い通りの挙動にできました。

この時点でのビューファイルはこちらです。

<%= form_with url: print_questions_path, method: :post, local: true, class: 'form' do |form| %>

<div class="field">
  <%= form.label :genres %><br />
    <%= collection_check_boxes(:genre, :genre_ids, @genres, :id, :name, {include_hidden: false}) do |b| %>
      <%= b.label { b.check_box + b.text } %>
    <% end %>
</div>
<% [1,3,5]は出題数。追って編集%>
<div class="field">
  <% [1, 3, 5].each do |count| %>
    <div>
      <%= radio_button_tag :question_count, count, count == 10 %>
      <%= label_tag "question_count_#{count}", "#{count}問" %>
    </div>
  <% end %>

</div>

  <%= form.submit value: '出題開始', class: 'btn mx-auto d-block common-btn',data:{"turbolinks"=>false} %>
<% end %>

<div class="contents row col-10 px-3">
  <table class="col-8 border">
    <tr>
      <td>番号</td>
      <td>問題</td>
      <td>選択肢</td>
    </tr>

      <% @questions.each_with_index do |question, index|%>
          <tr class="col-6 border px-3">
            <td><%= index + 1 %></td>
            <td class="col-4"><%= question.text %></td>
            <% choices = []%>
            <% choices = Choice.where(question_id: question.id)%> 
              <td>
                <p>ア.  <%= choices[0].choice%></p>
                <p>イ.  <%= choices[1].choice%></p>
                <p>ウ.  <%= choices[2].choice%></p>
                <p>エ.  <%= choices[3].choice%></p>
        
              </td>
          </tr>
      <% end %>
  </table>
<%= button_to "問題を作成し直す", "/questions/select_questions", {method: :get, "csrf-token" => form_authenticity_token }%>
<%= button_to "トップページへ", root_path, {method: :get, "csrf-token" => form_authenticity_token }%>
</div>