전 시간에 setQuestion,defaultOptionsView까지 완료했습니다.
다음으로 onCreate에서 사용자이름을 받고 또 질문리스트까지 Constants에서 받아오고
옵션에서 onclick이벤트를 처리하기 위해 모든 옵션과 다음 질문으로 넘어갈 버튼에
setOnClickListener를 한 후 class QuizQuestionActivity에 View.OnClickListener를 추가해주세요
class QuizQuestionActivity : AppCompatActivity(), View.OnClickListener {
private var mCurrentPosition : Int = 1 //첫질문 시작
private var mQuestionList : ArrayList<Question>? = null //질문목록을 설정하기 위해 사용할 수 있는 개체가 필요
private var mSelectedOptionPosition : Int = 0 //현재선택한값체크
private var mCorrectAnswers : Int = 0
private var mUserName: String? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_quiz_question)
mUserName = intent.getStringExtra(Constants.USER_NAME) //사용자이름받음
mQuestionList = Constants.getQuestions() //전체프로젝트범위에 속하지못함 그래서 위에설정
setQuestion()
tv_option_one.setOnClickListener(this)
tv_option_two.setOnClickListener(this)
tv_option_three.setOnClickListener(this)
tv_option_four.setOnClickListener(this)
btn_submit.setOnClickListener(this)
}여기서 override fun onClick 을 추가하라는 경고메세지를 따라 생성해주시고 onClick에 대해 작성하기 전에 먼저 올바른 색상을 할당하여 선택한 옵션에 색을 변경하도록 돕는
answerView함수와 어떤 옵션이 선택되었는 지 옵션의 테두리와 글씨체를 변경하도록 돕는
selectedOptionView함수를 작성하겠습니다.
answerView
private fun answerView(answer: Int, drawalbeView:Int) { //답변보기기능
when(answer) {
1-> {
tv_option_one.background = ContextCompat.getDrawable(
this, drawalbeView
)
}
2-> {
tv_option_two.background = ContextCompat.getDrawable(
this, drawalbeView
)
}
3-> {
tv_option_three.background = ContextCompat.getDrawable(
this, drawalbeView
)
}
4-> {
tv_option_four.background = ContextCompat.getDrawable(
this, drawalbeView
)
}
}
}selectedOptionView
private fun selectedOptionView(tv:TextView,selectedOptionNum : Int) {
//올바른 선택을 위해 어떤 옵션이 선택되었는지 알아야함
//여기서 우리가 할 일은 기본 옵션 보기를 설정하여 모든 옵션을 기본값으로 설정하는 것
defaultOptionsView()
mSelectedOptionPosition = selectedOptionNum //현재선택한 옵션이 패러미터의 옵션
//선택한 옵션이 여기에서 선택한 옵션 번호가 새로 선택된 옵션 위치가 된다
tv.setTextColor(Color.parseColor("#363A43"))
tv.setTypeface(tv.typeface, Typeface.BOLD) //텍스트 굵게 설정
//drawable을 사용하기 위해 contextcompat사용함
tv.background = ContextCompat.getDrawable(
this,
R.drawable.selected_option_border_bg //선택된 border로 변경
)
}여기서 selected_option_border_bg는 전에 작성한 defalut_option_border_bg를 복사 붙여넣기 후 이름을 변경하고 원하시는 색상이나 테두리 두께로 값을 변경해주시면 됩니다.
그 후 대망의 onClick을 작성해보도록 하겠습니다.
onClick함수에서는 문제리스트들을 가져와서 그 데이터들과 사용자가 선택한 값을 비교해서 맞다면 초록색, 틀리다면 빨간색 배경을 출력하도록 돕고 다음 문제로 넘겨주는 등 거의 모든 역할을 수행합니다.
override fun onClick(v: View?) { //메서드의 멤버 구현 선택하고 테두리를 볼 수 있도록 구현
when(v?.id) {
R.id.tv_option_one -> {
selectedOptionView(tv_option_one,1) //num을 아래 함수에 넘겨줌
//activity quiz question xml에 id가 tv option one인 textview를 함수에 직접전달됨
}
R.id.tv_option_two -> {
selectedOptionView(tv_option_two,2) //num을 아래 함수에 넘겨줌
//activity quiz question xml에 id가 tv option two인 textview를 함수에 직접전달됨
}
R.id.tv_option_three -> {
selectedOptionView(tv_option_three,3) //num을 아래 함수에 넘겨줌
//activity quiz question xml에 id가 tv option three인 textview를 함수에 직접전달됨
}
R.id.tv_option_four -> {
selectedOptionView(tv_option_four,4) //num을 아래 함수에 넘겨줌
//activity quiz question xml에 id가 tv option four인 textview를 함수에 직접전달됨
}
R.id.btn_submit -> {
if (mSelectedOptionPosition == 0) { //선택한 옵션위치가 0인 상황에서는 다음위치로 이동
mCurrentPosition += 1
when{
mCurrentPosition <= mQuestionList!!.size -> {
setQuestion()
}
else -> {
val intent = Intent(this, ResultActivity::class.java) //이름값을 result에 넘겨줌
intent.putExtra(Constants.USER_NAME, mUserName)//액티비티간 값을 넘겨줄때 사용
intent.putExtra(Constants.CORRECT_ANSWERS, mCorrectAnswers)
intent.putExtra(Constants.TOTAL_QUESTIONS, mQuestionList!!.size)
startActivity(intent)
finish()
}
}
} else {
//리스트에 있는 문제들의 data를 가져와서 data의 correctAnswer값이
//고른 옵션 위치와 같다면 초록 아니면 빨간색을 answerView함수를 통해 할당한다
val question = mQuestionList?.get(mCurrentPosition - 1)
if (question!!.correctAnswer != mSelectedOptionPosition) {
answerView(mSelectedOptionPosition, R.drawable.wrong_option_border_bg)
} else {
mCorrectAnswers += 1 //정답일경우 추가
}
answerView(question!!.correctAnswer, R.drawable.correct_option_border_bg)
//정답은 어떤 경우에도 녹색
//else에 묶이면 틀릴 경우 초록이 빨강과 같이 출력되지 않음을 방지하기위해 else는 안씀
if (mCurrentPosition == mQuestionList!!.size) {
//선택한 후 다음 질문으로 넘어갈때 size에 끝이라면 FINISH로 치환
btn_submit.text = "Finish"
} else {
btn_submit.text = "GO To NEXT QUESTION"
}
//when에서 문제를 생성하기에 여기서 초기화
//선택한 옵션위치를 다시 0으로 초기화
mSelectedOptionPosition = 0
}
}
}
}when을 통해 각 id요소에 selectedOptionView를 통해 위에서 작성한 selected_option_border_bg로 할당하도록 하고, btn_submit 클릭 시 다음 문제로 넘어가고 만약 문제의 끝이라면 submit의 text를 finish로 변경하고 끝이 아니라면 go to next question으로 변경하도록합니다. 그 후 다음 문제에서는 선택하지 않은 상태일테니 mSelectedOptionPosition 변수를 0으로 초기화 합니다.
또한 정답개수를 계산하여 ResultActivity로 값을 넘겨주는 역할을 하였습니다.
ResultActivity에 대해서는 다음 시간에 마무리 지어보겠습니다.
ResultActivity는 처음 받은 사용자의 이름을 출력함과 동시에 정답개수를 출력하고 finish버튼을 누루면 처음으로 돌아가도록 설정할 예정입니다. 감사합니다.
