퀴즈 앱 만들기

▶ 10개의 퀴즈가 있다, 이 퀴즈를 참 또는 거짓 버튼을 눌러 맞추는 앱을 만들것이다.

퀴즈 앱 화면

1. xml 파일로 화면 구성하기

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txtQuiz"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="68dp"
        android:layout_marginRight="20dp"
        android:gravity="center"
        android:text="퀴즈"
        android:textSize="26sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="44dp"
        android:layout_marginRight="20dp"
        android:max="10"
        android:progress="3"
        android:progressTint="#E91E63"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtQuiz" />

    <TextView
        android:id="@+id/txtResult"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="89dp"
        android:layout_marginRight="20dp"
        android:gravity="center"
        android:text="결과"
        android:textSize="26sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/progressBar" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="81dp"
        android:layout_marginRight="20dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtResult">

        <Button
            android:id="@+id/btnTrue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="20dp"
            android:layout_weight="1"
            android:backgroundTint="#2196F3"
            android:text="참"
            android:textSize="26sp" />

        <Button
            android:id="@+id/btnFalse"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:backgroundTint="#CA2A2A"
            android:text="거짓"
            android:textSize="26sp" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

android:max="10"

▷ progressBar의 최대치가 10이란 뜻 즉 progressBar를 10등분하여 한 문제 풀 때마다 바의 색이 1등분씩 체워진다.

2. Quiz 클래스 만들어주기

클래스를 만들기 전에 해당 클래스를 저장할 model 패키지를 만들어준다.

package com.example.quiz.model;

public class Quiz {

    public int question;
    public boolean answer;

    public Quiz(int question, boolean answer) {
        this.question = question;
        this.answer = answer;
    }
}

▷ Quiz 클래스는 문제와 답으로 구성되어있다.

3. MainActivity 코드 추가

그 전에 앱에서 사용할 Quiz들을 strings.xml파일에 저장하자!

<resources>
    <string name="app_name">QuizApp</string>


    <string name="my_laptop_name">Macbook Pro</string>


    <string name="correct_text">Correct!</string>
    <string name="incorrect_text">Incorrect!</string>
    <string name="first_score_text">0/10</string>
    <string name="correct_toast_message">Great!</string>
    <string name="incorrect_toast_message">Not good!</string>

    <string name="q1">A honey bee can fly at 15mph.</string>
    <string name="q2">A jellyfish is approximately 95% water.!</string>
    <string name="q3">Elephants are the only mammals that can\'t jump</string>
    <string name="q4">Cats can hear ultrasound.</string>
    <string name="q5">A human brain weighs about three pounds.</string>
    <string name="q6">The tongue is the fastest healing part of the body.</string>
    <string name="q7">Americans, on average, eat 18 acres of \"pizza\" a day.</string>
    <string name="q8">A kangaroo can jump 30 feet.</string>
    <string name="q9">A pigeon\'s feathers are heavier than its bones.</string>
    <string name="q10">The tallest man was 8 ft. 11 in.</string>


</resources>

---

package com.example.quiz;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;

import com.example.quiz.model.Quiz;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    TextView txtQuiz;
    ProgressBar progressBar;
    TextView txtResult;
    Button btnTrue;
    Button btnFalse;

    // 퀴즈 저장용 멤버 변수
    ArrayList<Quiz> quizArrayList = new ArrayList<>();

    Quiz quiz;

    int currentQuizIndex = 0;

    int answer = 0;

    // AlertDiaLog 알러트 다이얼로그 만들기
    private void showAlertDialog(){ // 3개 제공해준다
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("퀴즈 끝~");
        builder.setMessage("맞춘 문제 갯수: "+answer);
        // 이 다이얼 로그의 외곽 부분을 눌렀을 때, 사라 지지 않도록 하는 코드
        builder.setCancelable(false);
        builder.setPositiveButton("확인", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                // 퀴즈를 처음부터 다시 풀 수 있도록 할 것이다.
                currentQuizIndex = 0;
                Quiz quiz = quizArrayList.get(currentQuizIndex);
                txtQuiz.setText(quiz.question);
                txtResult.setText("결과");
                txtResult.setText("결과");

                progressBar.setProgress(currentQuizIndex+1,true);
                answer = 0;
            }
        });
        builder.setNegativeButton("종료", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                // 현재의 액티비티(MainActivity)를 종료시키는 코드! 앱을 종료시키는게 아님
                finish();
            }
        });
        builder.show();
    }


    void setQuiz(){
        Quiz q1 = new Quiz(R.string.q1, true);
        Quiz q2 = new Quiz(R.string.q2, false);
        Quiz q3 = new Quiz(R.string.q3, true);
        Quiz q4 = new Quiz(R.string.q4, false);
        Quiz q5 = new Quiz(R.string.q5, true);
        Quiz q6 = new Quiz(R.string.q6, false);
        Quiz q7 = new Quiz(R.string.q7, true);
        Quiz q8 = new Quiz(R.string.q8, false);
        Quiz q9 = new Quiz(R.string.q9, true);
        Quiz q10 = new Quiz(R.string.q10, false);

        quizArrayList.add(q1);
        quizArrayList.add(q2);
        quizArrayList.add(q3);
        quizArrayList.add(q4);
        quizArrayList.add(q5);
        quizArrayList.add(q6);
        quizArrayList.add(q7);
        quizArrayList.add(q8);
        quizArrayList.add(q9);
        quizArrayList.add(q10);

    }
    private boolean getQuiz(){

        if (currentQuizIndex >= quizArrayList.size()) {
            txtResult.setText("맞춘 문제 갯수: "+answer);

            // 팝업을 띄우자.
            showAlertDialog();
            return false;
        }

        quiz = quizArrayList.get(currentQuizIndex);
        txtQuiz.setText(quiz.question);
        progressBar.setProgress(currentQuizIndex+1,true);

        currentQuizIndex = currentQuizIndex + 1;

        return true;
    }


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        txtQuiz = findViewById(R.id.txtQuiz);
        progressBar = findViewById(R.id.progressBar);
        txtResult = findViewById(R.id.txtResult);
        btnTrue = findViewById(R.id.btnTrue);
        btnFalse = findViewById(R.id.btnFalse);

        // 퀴즈를 내야 한다.
        // 퀴즈를 먼저 메모리에 변수로 만들어야 한다.
        // 퀴즈가 여러개니까, 여러개를 하나의 변수로 처리할 수 있는 데이터 스트럭쳐가 필요하고,
        // 자바의 가장 유용한 데이터스트럭처, 어레이리스트 사용한다.

        // R. 으로하는건 다 숫자여서 R.string.q1쓰면 에러가난다
        setQuiz(); // 코드가 너무 기니까 함수로 만들어줘서 쓴다 실무에서도!
        progressBar.setProgress(1,true);

        // 문제를 출제한다.
        quiz = quizArrayList.get(0);

        // 화면에 표시
        txtQuiz.setText(quiz.question);
        btnTrue.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (!getQuiz()){
                    return;
                }

                if(quiz.answer == true){
                    txtResult.setText("정답입니다.");
                    answer += 1;
                }else{
                    txtResult.setText("오답입니다.");
                }


        }
        });
        btnFalse.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (!getQuiz()){
                    return;
                }

                if(quiz.answer == false){
                    txtResult.setText("정답입니다.");
                    answer += 1;
                }else{
                    txtResult.setText("오답입니다.");
                }


        }
        });

    }
}