ruby on rails でのクイズ機能作成

## 作成機能

・newページにてクイズを投稿し、showページでそのクイズの詳細を見、回答した際、正解、不正解が表示される機能。
・showページにて、クイズの解説を隠し、表示させる機能。

#### 正解の場合
![スクリーンショット 2025-01-06 220938.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944112/f3e105fe-00a0-3975-edda-0d5e792fa8d1.png)


#### 不正解の場合
![スクリーンショット 2025-01-06 220921.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944112/b75b29f0-9b80-2baa-f627-6176869f5c07.png)

## 手順

newで投稿ページを作成。

```ruby:app/views/tweets/new.html.erb
<%= form_for @tweet do |t| %>


 <div class="field">
   <%= t.label :quize %>  /* quizeはクイズを指す任意のカラムに変更 */
   <%= t.text_field :quize, :size => 30 %>
 </div>

 <div class="field">
   <%= t.label :correct_answer %> /* correct_answerは正答を指す任意のカラムに変更 */
   <%= t.text_field :correct_answer, :size => 30 %>
 </div>

 

 <div class="field">
  <%= t.label :explanation  %>　 /* explanationは解説を指す任意のカラムに変更 */
  <%= t.text_area :explanation, :size => "30x2" %>
 </div>

   <%= t.submit "投稿する" %>
<% end %>

```
showにて回答し、正誤を判定する。

```ruby:app/views/tweets/show.html.erb
<div class="tweet">
  <p><strong>問題:</strong> <%= @tweet.quize %></p>

  <%= form_with url: check_answer_tweet_path(@tweet), method: :post, local: true do |t| %>
    <div class="field">
      <%= t.label :answer, "回答" %>　/* answerは回答を指す任意のカラムに変更 */
      <%= t.text_field :answer, value: params[:answer] %>
    </div>
    <div class="actions">
      <%= t.submit "答え合わせ" %>
    </div>
   <% end %>

 <% if @is_correct.nil? %>
   <p>答えを入力して送信してください。</p>
 <% elsif @is_correct %>
  <p class="correct">正解です！</p>
 <% else %>
  <p class="incorrect">不正解です。</p>
<% end %>

 
  

<p>デバッグ: @is_correct = <%= @is_correct.inspect %></p>/* デバックコードなので削除推奨 */

  
  <p>作成日時: <%= @tweet.created_at %></p>
</div>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>解説の表示/非表示</title>
  <style>
    .explanation-content {
      display: none; /* 初期状態では非表示 */
      padding: 10px;
      border: 1px solid #ccc;
      background-color: #f9f9f9;
      margin-top: 5px;
    }

    .toggle-button {
      cursor: pointer;
      color: #007bff;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div>
    <span class="toggle-button">解説を表示/非表示</span>
    <div class="explanation-content">
      <p><%= @tweet.explanation %></p>
    </div>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const toggleButton = document.querySelector(".toggle-button");
      const explanationContent = document.querySelector(".explanation-content");

      toggleButton.addEventListener("click", function () {
        // displayを切り替える
        if (explanationContent.style.display === "none" || explanationContent.style.display === "") {
          explanationContent.style.display = "block"; // 表示
        } else {
          explanationContent.style.display = "none"; // 非表示
        }
      });
    });
  </script>
</body>
</html>
```



文字列を照会するためのcheck_answerの動きを追加

  ```ruby:app/assets/controllers/tweet.controller.rb
class TweetsController < ApplicationController
  def index
   @tweets = Tweet.all 
  end
#以下省略

  def check_answer
   @tweet = Tweet.find(params[:id])
   user_answer = params[:answer]
   @is_correct = (@tweet.correct_answer.downcase == user_answer.downcase)
   render :show  # 同じページを再表示
  end
#ここまで追記    
  private
      def tweet_params
        params.require(:tweet).permit(:quize, :correct_answer, :answer, :explanation)
      end
end
```

正解、不正解の色を変更する
```ruby:app/assets/styleseet/application.css
.correct {
    font-weight: bold;
    color: green;
  }
  
.incorrect {
    font-weight: bold;
    color: red;
  }
  ```

rootにて特定のTweetに対する答えを照合する
  ```ruby:app/config/routes.rb
  Rails.application.routes.draw do
   root "tweets#index"
    resources :tweets do
      member do
       post 'check_answer' # 特定のTweetに対する答えを照合する
     end
   end
 end
```

多分これで動くはずです。正直なんかバンドルインストールとかいっぱいした気がするし、寝かせたら動いたので動くかもしれないし、動かないかもしれないです。

基本的な動きは、if構文を利用して、answerの文字列がcorrect_answerと同じだった場合、正解、違った場合不正解と表示されるシステムです。
正直なんで動いてるかはわからない部分はあるし、ほかのコーディングを邪魔するようなこともあったので、クイズアプリをメインに作成する人に利用をお勧めします。実装はしたことあるので動くことだけは保証できます。