非同期通信を実装したい
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" },
])