4. 問題と選択肢を表示する
目次
はじめに
前回はクイズを出題するための用意をしました。
今回はリストからクイズを取り出して、実際にクイズ画面に表示してみましょう。
問題と選択肢を表示する
1. 問題と選択肢をセットする
showNextQuiz 関数に以下のコードを書きます。
| private fun showNextQuiz() { | |
| // クイズを１問取り出す | |
| val quiz = quizData[0] | |
| // 問題をセット | |
| binding.questionLabel.text = quiz[0] | |
| // 選択肢をセット | |
| binding.answerBtn1.text = quiz[1] | |
| binding.answerBtn2.text = quiz[2] | |
| binding.answerBtn3.text = quiz[3] | |
| binding.answerBtn4.text = quiz[4] | |
| } |
3行目では quizData リストの0番目のクイズを取り出しています。
取り出したクイズは
という順番で要素が入っています。
それぞれ取り出して questionLabel と answerBtn にセットしていきます。
2. showNextQuiz を呼び出す
アプリを起動したらすぐにクイズが出題されるように、onCreate 関数内で showNextQuiz 関数を呼び出します。
11行目を追加します。
| override fun onCreate(savedInstanceState: Bundle?) { | |
| super.onCreate(savedInstanceState) | |
| binding = ActivityMainBinding.inflate(layoutInflater) | |
| setContentView(binding.root) | |
| binding.answerBtn1.setOnClickListener { checkAnswer(it) } | |
| binding.answerBtn2.setOnClickListener { checkAnswer(it) } | |
| binding.answerBtn3.setOnClickListener { checkAnswer(it) } | |
| binding.answerBtn4.setOnClickListener { checkAnswer(it) } | |
| showNextQuiz() | |
| } |
3. アプリを実行する
アプリをエミュレータで実行してみましょう。
quizData リストの最初の要素である「北海道」の問題と選択肢が表示されたでしょうか？
4. 出題順をシャッフルする
MutableList には要素をシャッフルする shuffle 関数が用意されています。
たった１行書くだけで出題順をシャッフルすることができます。
6行目を追加します。
| override fun onCreate(savedInstanceState: Bundle?) { | |
| /* 省略 */ | |
| binding.answerBtn3.setOnClickListener { checkAnswer(it) } | |
| binding.answerBtn4.setOnClickListener { checkAnswer(it) } | |
| quizData.shuffle() | |
| showNextQuiz() | |
| } |
5. 選択肢をシャッフルする
次にボタンに表示する選択肢をシャッフルします。
MutableList の中に MutableList を入れた２次元リストにしたので、取り出した quiz も MutableList 型になっています。
同じように shuffle 関数を使いますが、今回は都道府県を取り出してからシャッフルします。
showNextQuiz 関数を以下のように書き換えます。
| private fun showNextQuiz() { | |
| // クイズを１問取り出す | |
| val quiz = quizData[0] | |
| // 問題をセット | |
| binding.questionLabel.text = quiz[0] | |
| // 正解をセット | |
| rightAnswer = quiz[1] | |
| // 都道府県名を削除 | |
| quiz.removeAt(0) | |
| // 正解と選択肢３つをシャッフル | |
| quiz.shuffle() | |
| // 正解と選択肢をセット | |
| binding.answerBtn1.text = quiz[0] | |
| binding.answerBtn2.text = quiz[1] | |
| binding.answerBtn3.text = quiz[2] | |
| binding.answerBtn4.text = quiz[3] | |
| // 出題したクイズを削除する | |
| quizData.removeAt(0) | |
| } |
9行目
quiz リストは
となっています。
"正解"は正誤判定をするために使いたいので、シャッフルする前に取り出しておきます。
12行目
都道府県名はボタンに表示する選択肢ではないので削除しておきます。
15行目
都道府県名は削除したので、この時点で quiz リストに残っているのは正解と３つの選択肢です。
これら４つの順番を shuffle 関数を使ってシャッフルします。
シャッフルしてから解答ボタンにセットすることで、毎回違う順番で選択肢を表示できるようになります。
24行目
同じクイズが出題されないように quizData リストから問題を削除しておきます。
6. アプリを実行する
それではクイズがランダムに表示されるかエミュレーターで確認してみましょう！
ランダムに出題されるかを確認するために、一度アプリを終了して再度開いてみてください。
問題文が変わって、解答ボタンの順番もシャッフルされているでしょうか？
次に行うこと
次回はクイズアプリで一番重要な機能「正解・不正解の判定」を実装していきます。
ここまでのコード
0 コメント