

# 非同期通信を実装したい

Ruby on RailsとjQueryで「英単語クイズアプリ」の作成をしています。  
ユーザーは出題された英単語の穴埋めを考えて英単語を完成させ、「text_filed_tag」に入力し、送信をクリックします。正解なら次の問題へ、不正解なら再度同じ問題を解く、というものです。

解決方法わかる方いらっしゃいましたら是非ご教授お願いします。

検証ツールで表示されるエラーです。

[![](https://i.stack.imgur.com/5fWZf.jpg)](https://i.stack.imgur.com/5fWZf.jpg)

### ソースコード

`show.html.erb`

[code]

    <h1>英単語クイズ</h1>
    <p id="question"><%= @question %></p>
    <%= form_with(url: check_answer_quiz_path(@quiz), method: "post", id: "quiz-form", local: false) do %>
      <%= text_field_tag :answer,  '', id: 'answer' %>
      <%= hidden_field_tag :correct_answer, @answer %>
      <%= submit_tag "送信" %>
    <% end %>
    
[/code]

`schema.rb`

[code]

    create_table "quizzes", force: :cascade do |t|
        t.string "content", null: false
        t.string "hint"
        t.datetime "created_at", null: false
        t.datetime "updated_at", null: false
        t.string "questions"
        t.string "answers"
        t.string "word"
    end
    
[/code]

`app/assets/javascripts/quiz.js`

[code]

    $(document).on('turbolinks:load', function() {
      $('#quiz-form').on('submit', function(e) {
        e.preventDefault();
        
        $.ajax({
          url: $(this).attr('action'),
          type: 'POST',
          dataType: 'json',
          data: $(this).serialize()
        })
        
        .done(function(data){
          if(data.status === 'success'){
            $('#question').text(data.question);
            $('#quiz-form').attr('action', '/quizzes/' + data.id + '/check_answer');
            $('#answer').val('');
          } else if (data.status == 'finished'){
            $('body').html('<h1>おめでとうございます！</h1><span>全てのの問題を解答しました！</span>');
          } else if (data.status === 'error'){
            alert(data.message);
          }
        })
        .fail(function(){
          alert('再度トライしてください。')
        })
      })
    })
    
[/code]

`app/controllers/quizzes/controller.rb`

[code]

    def show
       quiz_data = Quiz.random_question
       @quiz = Quiz.find_by(content: quiz_data[:answer])
       @question = quiz_data[:question]
       @answer = quiz_data[:answer]
    end
    
      def check_answer
        @quiz = Quiz.find(params[:id]) #問題のIDを取得
        if @quiz.content.downcase == params[:answer].downcase
           #ユーザー出した答え(params[:answer])とDBに保存されている正解(@questions.answer)を比較している
           @next_quiz = Quiz.find_by(id: @quiz.id + 1)
           #正解したら次の問題(@question.id)に1を加える
           if @next_quiz
             render json: { status: 'success', question: @next_quiz.content, id: @next_quiz.id }
           else
             render json: { status: 'finished' }
           end
        else
          render json: { status: 'error', message: '不正解です。もう1度挑戦しよう!!'}
        end
      end
    
[/code]

`db/seeds.rb`

[code]

    Quiz.create([
      { content: "apple" },
      { content: "banana" },
      { content: "grape" },
      { content: "orange" },
      { content: "melon" },
      ])
    
[/code]


CC BY-SA 4.0
2023-06-21T04:55:45.567
95317
2023-06-21T04:59:43.587
2023-06-21T04:59:43.587
3060
58381
question
ruby-on-rails ruby html jquery
Rails & jQuery 検証ツールエラーについて