作成機能
・newページにてクイズを投稿し、showページでそのクイズの詳細を見、回答した際、正解、不正解が表示される機能。
・showページにて、クイズの解説を隠し、表示させる機能。
正解の場合
不正解の場合
手順
newで投稿ページを作成。
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にて回答し、正誤を判定する。
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の動きを追加
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
正解、不正解の色を変更する
app/assets/styleseet/application.css
.correct {
font-weight: bold;
color: green;
}
.incorrect {
font-weight: bold;
color: red;
}
rootにて特定のTweetに対する答えを照合する
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と同じだった場合、正解、違った場合不正解と表示されるシステムです。
正直なんで動いてるかはわからない部分はあるし、ほかのコーディングを邪魔するようなこともあったので、クイズアプリをメインに作成する人に利用をお勧めします。実装はしたことあるので動くことだけは保証できます。