[안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part4 - 답변 체크 이벤트

안녕하세요. 이번 시간에는 퀴즈 앱 만들기 네 번째 시간 - 답변 체크 이벤트를 만들어 보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.11.23 - [안드로이드] - [안드로이드 코틀린] 간단한 퀴즈앱 만드는 방법 part3 - 답변 선택 이벤트

[안드로이드 코틀린] 간단한 퀴즈앱 만드는 방법 part3 - 답변 선택 이벤트

---

목차

1. 실행 화면
2. 정답 답변 drawable correct_option_background.xml
3. 오답 답변 drawable wrong_option_background.xml
4. 메인 코드 구현 MainActivity.kt

---

1. 실행 화면

2. 정답 답변 drawable correct_option_background.xml

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

 - 설명 - 

 1. 정답 답변 background에 적용할 파일

 2. 색상을 초록색으로 변경

 3. solid

   내부 설정

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- 내부 색상 -->
    <solid android:color="@android:color/holo_green_light" />
</shape>

3. 오답 답변 drawable wrong_option_background.xml

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

- 설명 - 

 1. 오답 답변 background에 적용할 파일

 2. 색상을 빨강색으로 변경

 3. solid

   내부 설정

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- 내부 색상 -->
    <solid android:color="@android:color/holo_red_light" />
</shape>

 

반응형

 

4. 메인 코드 구현 MainActivity.kt

 - 설명 - 

 1. setOptionStyle()

  getQuestionData() 함수 첫 줄에 추가

 2. binding.submitBtn.setOnClickListener

   답변 체크 이벤트 

 3. selectedOption != question.correct_answer

   선택 답변과 정답 비교

 4. setColor()

   해당 답변 색상 변경 함수

 5. binding.submitBtn.text = getString(R.string.submit, "다음")

   답변 체크 버튼 텍스트 변경

 class MainActivity : AppCompatActivity(), View.OnClickListener {

    private lateinit var binding:ActivityMainBinding

    private var currentPosition: Int = 1 //질문 위치
    private var selectedOption: Int = 0 //선택 답변 값
    private var score: Int = 0 // 점수

    private lateinit var questionList: ArrayList<Question>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //질문 리스트 가져오기
        questionList = QuestionData.getQuestion()

        //화면 셋팅
        getQuestionData()

        binding.option1Text.setOnClickListener(this)
        binding.option2Text.setOnClickListener(this)
        binding.option3Text.setOnClickListener(this)
        binding.option4Text.setOnClickListener(this)

        //답변 체크 이벤트
        binding.submitBtn.setOnClickListener {

            if(selectedOption != 0){

                val question = questionList[currentPosition-1]

                //정답 체크(선택 답변과 정답을 비교)
                if(selectedOption != question.correct_answer) { //오답

                    setColor(selectedOption, R.drawable.wrong_option_background)

                    callDialog("오답", "정답 ${question.correct_answer}")
                }
                setColor(question.correct_answer, R.drawable.correct_option_background)

                if(currentPosition == questionList.size){
                    binding.submitBtn.text = getString(R.string.submit, "끝")
                }else{
                    binding.submitBtn.text = getString(R.string.submit, "다음")
                }

            }else{
                //위치값 상승
                currentPosition++
                when{
                    //전체 문제 숫자가 현재 위치보다 크면 다음 문제로 셋팅
                    currentPosition <= questionList.size -> {
                        //다음 문제 셋팅
                        getQuestionData()
                    }

                    else ->{
                        //결과 액티비티로 넘어가는 코드
                        Toast.makeText(this, "끝", Toast.LENGTH_SHORT).show()
                    }
                }
            }
            //선택값 초기화
            selectedOption = 0
        }//submitBtn

    } //onCreate

    /**
     * 답변 배경색상 변경
     */
    private fun setColor(opt: Int, color: Int){
        when(opt){
            1 -> binding.option1Text.background = ContextCompat.getDrawable(this, color)
            2 -> binding.option2Text.background = ContextCompat.getDrawable(this, color)
            3 -> binding.option3Text.background = ContextCompat.getDrawable(this, color)
            4 -> binding.option4Text.background = ContextCompat.getDrawable(this, color)
        }
    }

    /**
     * 정답 확인 다이얼로그
     */
    private fun callDialog(alertTitle: String, correctAnswer: String){

        AlertDialog.Builder(this)
            .setTitle(alertTitle)
            .setMessage("정답: $correctAnswer")
            .setPositiveButton("OK"){
                dialogInterface, i ->
                dialogInterface.dismiss() //창 닫기
            }
            .setCancelable(false)
            .show()
    }


    /**
     * 문제 셋팅
     */
    private fun getQuestionData(){

        //답변 설정 초기화
        setOptionStyle()

        //질문 변수에 담기
        val question = questionList[currentPosition-1]

        //상태바 위치
        binding.progressBar.progress = currentPosition

        //상태바 최대값
        binding.progressBar.max = questionList.size

        //현재 위치 표시
        binding.progressText.text = getString(R.string.count_label, currentPosition, questionList.size)

        //질문 표시
        binding.questionText.text = question.question

        //답변 표시
        binding.option1Text.text = question.option_one
        binding.option2Text.text = question.option_two
        binding.option3Text.text = question.option_three
        binding.option4Text.text = question.option_four

        setSubmitBtn("제출")
    }

    //제출 버튼 텍스트 설정
    private fun setSubmitBtn(name: String){

        binding.submitBtn.text = getString(R.string.submit, name)
    }

    /**
     * 답변 스타일 설정
     */
    private fun setOptionStyle(){

        var optionList: ArrayList<TextView> = arrayListOf()
        optionList.add(binding.option1Text)
        optionList.add(binding.option2Text)
        optionList.add(binding.option3Text)
        optionList.add(binding.option4Text)

        //답변 텍스트뷰 설정
        for(op in optionList){
            op.setTextColor(Color.parseColor("#555151"))
            op.background = ContextCompat.getDrawable(this, R.drawable.option_background)
            op.typeface = Typeface.DEFAULT
        }
    }

    /**
     * 답변 선택 이벤트
     */
    private fun selectedOptionStyle(view: TextView, opt: Int){

        //옵션 초기화
        setOptionStyle()

        //위치 담기
        selectedOption = opt

        view.setTextColor((Color.parseColor("#5F00FF")))
        view.background = ContextCompat.getDrawable(this, R.drawable.selected_option_background)
        view.typeface = Typeface.DEFAULT_BOLD
    }

    override fun onClick(view: View) {
        when(view.id){
            R.id.option1_text -> selectedOptionStyle(binding.option1Text, 1)
            R.id.option2_text -> selectedOptionStyle(binding.option2Text, 2)
            R.id.option3_text -> selectedOptionStyle(binding.option3Text, 3)
            R.id.option4_text -> selectedOptionStyle(binding.option4Text, 4)
        }
    }
}

2022.08.18 - [안드로이드] - [안드로이드 코틀린] 내가 원하는 글씨체 폰트(Font) 적용하는 방법

[안드로이드 코틀린] 내가 원하는 글씨체 폰트(Font) 적용하는 방법

2021.12.03 - [안드로이드] - [안드로이드] BottomNavigationView 하단 탭 쉽게 만드는 방법 1-1

[안드로이드] BottomNavigationView 하단 탭 쉽게 만드는 방법 1-1

2022.03.16 - [안드로이드] - [안드로이드] Firebase Storage 이미지 업로드 part1

[안드로이드] Firebase Storage 이미지 업로드 part1