In this workshop we will be learning how to make a flag matching quiz app. The questions model is implemented in such a way that you can replace the questions and MCQ choices with any content that you like! You can choose whatever quiz topic you want and impress your friends with your Android skills.
- Install Android Studio from here
- Clone this repository into your machine which contains all the frontend and XML templates required for the workshop.
git clone https://github.com/AtrikDas/Kotlin-workshop-frontend.git
- Open the folder in Android Studio.
Getting the textfield in the homepage to work and linking the button to the next page.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
btn_start.setOnClickListener{
if (et_name.text.toString().isEmpty()){
Toast.makeText(this, "Please enter your name", Toast.LENGTH_SHORT).show()
}else{
val intent = Intent(this, QuizQuestionsActivity::class.java)
startActivity(intent)
finish()
}
}
}
}Creating the question model.
data class Question (
val id: Int,
val question: String,
val image: Int,
val optionOne: String,
val optionTwo: String,
val optionThree: String,
val optionFour: String,
val correctAnswer: Int
)Write a function to return an ArrayList of all the questions and their respective MCQ choices in our app.
object Constants {
const val USER_NAME: String = "user_name"
const val TOTAL_QUESTIONS: String = "total_questions"
const val CORRECT_ANSWERS: String = "correct_answers"
fun getQuestions(): ArrayList<Question> {
val questionsList = ArrayList<Question>()
// 1
val que1 = Question(
1, "What country does this flag belong to?",
R.drawable.ic_flag_of_argentina,
"Argentina", "Australia",
"Armenia", "Austria", 1
)
questionsList.add(que1)
// 2
val que2 = Question(
2, "What country does this flag belong to?",
R.drawable.ic_flag_of_australia,
"Angola", "Austria",
"Australia", "Armenia", 3
)
questionsList.add(que2)
// 3
val que3 = Question(
3, "What country does this flag belong to?",
R.drawable.ic_flag_of_brazil,
"Belarus", "Belize",
"Brunei", "Brazil", 4
)
questionsList.add(que3)
// 4
val que4 = Question(
4, "What country does this flag belong to?",
R.drawable.ic_flag_of_belgium,
"Bahamas", "Belgium",
"Barbados", "Belize", 2
)
questionsList.add(que4)
// 5
val que5 = Question(
5, "What country does this flag belong to?",
R.drawable.ic_flag_of_fiji,
"Gabon", "France",
"Fiji", "Finland", 3
)
questionsList.add(que5)
// 6
val que6 = Question(
6, "What country does this flag belong to?",
R.drawable.ic_flag_of_germany,
"Germany", "Georgia",
"Greece", "none of these", 1
)
questionsList.add(que6)
// 7
val que7 = Question(
7, "What country does this flag belong to?",
R.drawable.ic_flag_of_denmark,
"Dominica", "Egypt",
"Denmark", "Ethiopia", 3
)
questionsList.add(que7)
// 8
val que8 = Question(
8, "What country does this flag belong to?",
R.drawable.ic_flag_of_india,
"Ireland", "Iran",
"Hungary", "India", 4
)
questionsList.add(que8)
// 9
val que9 = Question(
9, "What country does this flag belong to?",
R.drawable.ic_flag_of_new_zealand,
"Australia", "New Zealand",
"Tuvalu", "United States of America", 2
)
questionsList.add(que9)
// 10
val que10 = Question(
10, "What country does this flag belong to?",
R.drawable.ic_flag_of_kuwait,
"Kuwait", "Jordan",
"Sudan", "Palestine", 1
)
questionsList.add(que10)
return questionsList
}
}Connecting the Question UI to the data model.
class QuizQuestionsActivity : AppCompatActivity(){
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_quiz_questions)
val questionsList = Constants.getQuestions()
val currentPosition = 1
val question: Question? = questionsList[currentPosition - 1]
progressBar.progress = currentPosition
tv_progress.text = "$currentPosition" + "/" + progressBar.max
tv_question.text = question!!.question
iv_image.setImageResource(question.image)
tv_option_one.text = question.optionOne
tv_option_two.text = question.optionTwo
tv_option_three.text = question.optionThree
tv_option_four.text = question.optionFour
}
}Create a function for setting the question to UI components.
class QuizQuestionsActivity : AppCompatActivity(){
private var mCurrentPosition: Int = 1
private var mQuestionsList: ArrayList<Question>? = null
private var mSelectedOptionPosition: Int = 0
private var mCorrectAnswers: Int = 0
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_quiz_questions)
val questionsList = Constants.getQuestions()
setQuestion()
}
private fun setQuestion() {
val question = mQuestionsList!![mCurrentPosition - 1]
defaultOptionsView()
progressBar.progress = mCurrentPosition
tv_progress.text = "$mCurrentPosition" + "/" + progressBar.max
tv_question.text = question!!.question
iv_image.setImageResource(question.image)
tv_option_one.text = question.optionOne
tv_option_two.text = question.optionTwo
tv_option_three.text = question.optionThree
tv_option_four.text = question.optionFour
}
}Create a function to set default options view when the new question is loaded or when the answer is reselected.
private fun defaultOptionsView() {
val options = ArrayList<TextView>()
options.add(0, tv_option_one)
options.add(1, tv_option_two)
options.add(2, tv_option_three)
options.add(3, tv_option_four)
for (option in options) {
option.setTextColor(Color.parseColor("#7A8089"))
option.typeface = Typeface.DEFAULT
option.background = ContextCompat.getDrawable(
this,
R.drawable.default_option_border_bg
)
}
}Implement the onClickListener() and create a function to set the view of selected option view.
class QuizQuestionsActivity : AppCompatActivity(), View.OnClickListener {
.
.
.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_quiz_questions)
mQuestionsList = 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(v: View?) {
when (v?.id) {
R.id.tv_option_one -> {
selectedOptionView(tv_option_one, 1)
}
R.id.tv_option_two -> {
selectedOptionView(tv_option_two, 2)
}
R.id.tv_option_three -> {
selectedOptionView(tv_option_three, 3)
}
R.id.tv_option_four -> {
selectedOptionView(tv_option_four, 4)
}
}
}
private fun selectedOptionView(tv: TextView, selectedOptionNum: Int) {
defaultOptionsView()
mSelectedOptionPosition = selectedOptionNum
tv.setTextColor(
Color.parseColor("#363A43")
)
tv.setTypeface(tv.typeface, Typeface.BOLD)
tv.background = ContextCompat.getDrawable(
this,
R.drawable.selected_option_border_bg
)
}
}Create a function for answer view which is used to highlight if the answer is wrong or right.
private fun answerView(answer: Int, drawableView: Int) {
when (answer) {
1 -> {
tv_option_one.background = ContextCompat.getDrawable(
this,
drawableView
)
}
2 -> {
tv_option_two.background = ContextCompat.getDrawable(
this,
drawableView
)
}
3 -> {
tv_option_three.background = ContextCompat.getDrawable(
this,
drawableView
)
}
4 -> {
tv_option_four.background = ContextCompat.getDrawable(
this,
drawableView
)
}
}
}Setting the logic for the submit button.
override fun onClick(v: View?) {
when (v?.id) {
R.id.tv_option_one -> {
selectedOptionView(tv_option_one, 1)
}
R.id.tv_option_two -> {
selectedOptionView(tv_option_two, 2)
}
R.id.tv_option_three -> {
selectedOptionView(tv_option_three, 3)
}
R.id.tv_option_four -> {
selectedOptionView(tv_option_four, 4)
}
R.id.btn_submit -> {
if (mSelectedOptionPosition == 0) {
mCurrentPosition++
when {
mCurrentPosition <= mQuestionsList!!.size -> {
setQuestion()
}
else -> {
Toast.makeText(this, "You have successfully completed the quiz!", Toast.LENGTH_SHORT).show()
}
}
} else {
val question = mQuestionsList?.get(mCurrentPosition - 1)
if (question!!.correctAnswer != mSelectedOptionPosition) {
answerView(mSelectedOptionPosition, R.drawable.wrong_option_border_bg)
}
else {
mCorrectAnswers++
}
answerView(question.correctAnswer, R.drawable.correct_option_border_bg)
if (mCurrentPosition == mQuestionsList!!.size) {
btn_submit.text = "FINISH"
} else {
btn_submit.text = "GO TO NEXT QUESTION"
}
mSelectedOptionPosition = 0
}
}
}
}private fun setQuestion() {
val question = mQuestionsList!![mCurrentPosition - 1]
defaultOptionsView()
if (mCurrentPosition == mQuestionsList!!.size) {
btn_submit.text = "FINISH"
} else {
btn_submit.text = "SUBMIT"
}
.
.
.
}Sending username and number of correct answers data via intents to the Results page.
object Constants {
const val USER_NAME: String = "user_name"
const val TOTAL_QUESTIONS: String = "total_questions"
const val CORRECT_ANSWERS: String = "correct_answers"
.
.
.
}.
.
.
val intent = Intent(this, QuizQuestionsActivity::class.java)
intent.putExtra(Constants.USER_NAME, et_name.text.toString())
startActivity(intent)
finish()
.
.
.class QuizQuestionsActivity : AppCompatActivity(), View.OnClickListener {
.
.
.
private var mUserName: String? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_quiz_questions)
mUserName = intent.getStringExtra(Constants.USER_NAME)
.
.
.
}
override fun onClick(v: View?) {
.
.
.
when {
mCurrentPosition <= mQuestionsList!!.size -> {
setQuestion()
}
else -> {
val intent = Intent(this, ResultActivity::class.java)
intent.putExtra(Constants.USER_NAME, mUserName)
intent.putExtra(Constants.CORRECT_ANSWERS, mCorrectAnswers)
intent.putExtra(Constants.TOTAL_QUESTIONS, mQuestionsList!!.size)
startActivity(intent)
finish()
}
}
.
.
.
}
}Displaying the data on the Results page.
class ResultActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_result)
val userName = intent.getStringExtra(Constants.USER_NAME)
tv_name.text = userName
val totalQuestions = intent.getIntExtra(Constants.TOTAL_QUESTIONS, 0)
val correctAnswers = intent.getIntExtra(Constants.CORRECT_ANSWERS, 0)
tv_score.text = "Your Score is $correctAnswers out of $totalQuestions."
btn_finish.setOnClickListener {
startActivity(Intent(this, MainActivity::class.java))
finish()
}
}
}That's it! You have built a quiz application using kotlin from scratch. Feel free to go back to Step 3 and change the questions according to whatever topic you'd like.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.