目錄

1. Debug
2. 畫面調整
3. 正確與錯誤
4. 目前進度

正文

Debug

好的，我發現我做了一件很白癡的事情，我的 ansNumber 的亂數範圍設錯了，所以程式才會 Crash ，修正一下問題：

_ansNumber = (0 .. 3).random()

畫面調整

1. 我們先處理按鈕，我這邊主要針對的是 layout_width 和 layout_height 兩個參數，一開始用 wrap_content， 從字面上來看就知道這會讓按鈕隨著 text 的內容變大變小，所以這邊我直接用數字鎖定大小，如下：

   <Button
   		android:layout_width="0dp"
   		android:layout_height="100dp"/>
   

2. 因為後面要透過更換按鈕的背景顏色來顯示回答是否正確，所以我們先把按鈕的背景調成可愛的顏色：

   <Button
           android:id="@+id/button"
           android:layout_width="0dp"
           android:layout_height="100dp"
           android:backgroundTint="@color/light_orange"/>
   
   <!--我有在 colors.xml 新增這行 <color name="light_orange">#FFAF60</color> -->
   

3. 主要的調整結束了，如果大家對於畫面還有不滿意的地方可以自行微調！

正確與錯誤

1. 接續昨天的進度，我們已經可以正常的回答了並且有延遲時間讓我們顯示正確與錯誤的畫面，第一步就是完善我們的 Test 這個 class，程式碼如下：

   public fun getAnsNumber(): Int{ // 為了方便顯示所以多了一個答案選項回傳
       return _ansNumber
   }
   public fun isCorrect(number: Int): Boolean{ // number 是指使用者所選擇的選項號碼
       if(number==_ansNumber)
           return true
       return false
   }
   

2. 我們需要學會怎麼在這裡修改背景顏色，語法如下：

   viewBinding.firstButton.setBackgroundColor(Color.parseColor("#009100")) // 綠色
   viewBinding.firstButton.setBackgroundColor(Color.parseColor("#EA0000")) // 紅色
   

3. 接下來用 if 呼叫 isCorrect 來判斷是否正確，並且修改對應的按鈕顏色

   viewBinding.firstButton.setOnClickListener{
       if(test.isCorrect(0)){ // 若回答正確
           viewBinding.firstButton.setBackgroundColor(Color.parseColor("#009100"))
       }
       else{ // 若回答錯誤
           showCorrectAns(viewBinding) // 顯示正確的按鈕
           viewBinding.firstButton.setBackgroundColor(Color.parseColor("#EA0000"))
       }
       Handler().postDelayed(Runnable {
           resetButton(viewBinding) // 準備重新出題時，要重製按鈕顏色
           setPaper(viewBinding)
       },1200);
   }
   

4. showCorrect 程式碼如下：

   public fun showCorrectAns(viewBinding: FragmentHomeBinding){
         when(test.getAnsNumber()){
             0 -> viewBinding.firstButton.setBackgroundColor(Color.parseColor("#009100"))
             1 -> viewBinding.secondButton.setBackgroundColor(Color.parseColor("#009100"))
             2 -> viewBinding.thirdButton.setBackgroundColor(Color.parseColor("#009100"))
             3 -> viewBinding.fouthButton.setBackgroundColor(Color.parseColor("#009100"))
             else -> resetButton(viewBinding)
         }
     }
   

5. resetButton 程式碼如下：

   public fun resetButton(viewBinding: FragmentHomeBinding){
       viewBinding.firstButton.setBackgroundColor(Color.parseColor("#FFAF60"))
       viewBinding.secondButton.setBackgroundColor(Color.parseColor("#FFAF60"))
       viewBinding.thirdButton.setBackgroundColor(Color.parseColor("#FFAF60"))
       viewBinding.fouthButton.setBackgroundColor(Color.parseColor("#FFAF60"))
   }
   

進度展示

如果覺得題目跳轉太慢，可以修改延遲的時間喔！

影片連結

總結

太棒了！我們已經把主要功能做出來了，只是時間真的過得好快，明天就是最後一篇了，哭哭。

下一篇我盡可能把設定的功能做出來！