0

非同期通信を実装したい

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

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

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

ソースコード

show.html.erb

<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 %>

schema.rb

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

app/assets/javascripts/quiz.js

$(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('再度トライしてください。')
    })
  })
})

app/controllers/quizzes/controller.rb

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

db/seeds.rb

Quiz.create([
  { content: "apple" },
  { content: "banana" },
  { content: "grape" },
  { content: "orange" },
  { content: "melon" },
  ])
1
  • 自己解決しました。
    – YUKIYA
    6月23日 3:03

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。