はじめに

ゆる〜く学ぶ。みんなのWeb勉強コミュニティー。　「にゅ〜ぶる会」を運用中です。
https://newburu.github.io/

そこで、何か教育用のコンテンツが欲しいなぁ〜と思い立ち、今回の企画をスタートしました！

Railsで基本情報技術者試験の過去問題サイトを作ります！

最終目標

問題・回答の登録は、Scaffoldで簡易でOK
APIを用意して、ランダムに問題を抽出する機能を追加する
TwitterBOT、LINEBOT、SlackBOTが出来たら良いな

履歴

１：構築編
　　https://qiita.com/newburu/items/ed59f47ac645b19620f6
２：日本語化(i18n)編
　　https://qiita.com/newburu/items/4f12fdb61bf6cd601545
３：親子関係、登録編
　　https://qiita.com/newburu/items/f2a20289be5ec1fc1b77
４：親子関係、参照編
　　本ページ
５：API編
　　https://qiita.com/newburu/items/89f9f847a2648bdd006c
６：SlackBOT編
　　https://qiita.com/newburu/items/aeeb9acb453da786bd59
７：Herokuデプロイ〜自動化編
　　https://qiita.com/newburu/items/0a8bb02e1e8c8fe737c7

今回やる事

登録した親子関係の情報を参照系の画面に表示します

※レイアウトをやろうと思いましたが、こちらの方が優先なので、予定を変更させて頂きました。

登録した親子関係の情報を参照系の画面に表示します

1. まずは、現状を確認しましょう。

登録画面

問題一覧画面

問題参照画面

2. 問題参照画面のViewを直します。

今回やる事は、ここ。

問題参照画面に、回答一覧を追加するよ！

元ソース

app/views/questions/show.html.slim

p#notice = notice

p
  strong = "#{Question.human_attribute_name(:category1)}:"
  = @question.category1
p
  strong = "#{Question.human_attribute_name(:category2)}:"
  = @question.category2
p
  strong = "#{Question.human_attribute_name(:category3)}:"
  = @question.category3
p
  strong = "#{Question.human_attribute_name(:msg)}:"
  = @question.msg

// ここに回答一覧を足していきます。

=> link_to t('btn.edit'), edit_question_path(@question)
'|
=< link_to t('btn.back'), questions_path

修正後ソース

app/views/questions/show.html.slim

p#notice = notice

p
  strong = "#{Question.human_attribute_name(:category1)}:"
  = @question.category1
p
  strong = "#{Question.human_attribute_name(:category2)}:"
  = @question.category2
p
  strong = "#{Question.human_attribute_name(:category3)}:"
  = @question.category3
p
  strong = "#{Question.human_attribute_name(:msg)}:"
  = @question.msg

// ここに回答一覧を足します。
p
  strong = "#{Question.human_attribute_name(:answers)}:"
  // 問題の子供として、has_manyしているanswersでループ(each)します。そして、その値(回答モデル)はanswerに渡します。
  - @question.answers.each do |answer|
    p
      strong = "#{Answer.human_attribute_name(:msg)}:"
      = answer.msg
    p
      strong = "#{Answer.human_attribute_name(:correct)}:"
      = answer.correct

=> link_to t('btn.edit'), edit_question_path(@question)
'|
=< link_to t('btn.back'), questions_path

完成した画面

追加されましたね！

今回はここまで

ありがとうございました！
画面周りは、まだまだ綺麗にする要素はいっぱいあるけど、
次回は、API化していこうかな。