UNESA
s1-pmat@unesa.ac.id

Seri Tutorial Android Studio (Bagian 7: Menyelesaikan Kuis – Membuat Halaman Skor)

Seri Tutorial Android Studio (Bagian 7: Menyelesaikan Kuis – Membuat Halaman Skor)

- kategori Serba-serbi 73 Views

Selamat datang di Bagian 7! Di Bagian 6, kita membuat kuis dinamis yang luar biasa. Namun, di akhir kuis, aplikasi kita hanya menampilkan `Toast` "Kuis Selesai!" dan berhenti di sana. Ini tidak bagus.

Hari ini, kita akan menyelesaikan alur kuis kita. Kita akan:

  • Membuat Activity baru untuk Halaman Skor.
  • Menambahkan variabel untuk melacak skor di QuizActivity.
  • Belajar mengirim data (skor) dari QuizActivity ke ScoreActivity menggunakan Intent.putExtra().
  • Menampilkan skor akhir dan tombol "Coba Lagi".

Langkah 1: Membuat ScoreActivity

Pertama, buat halaman baru untuk skor Anda.

  1. Klik kanan pada folder java/com.namapaketanda... Anda.
  2. Pilih New > Activity > Empty Views Activity.
  3. Beri nama Activity baru ini: ScoreActivity.
  4. Pastikan "Generate a Layout File" tercentang (akan bernama activity_score.xml).
  5. Klik Finish.

Langkah 2: Mendesain Halaman Skor (activity_score.xml)

Buka activity_score.xml. Kita perlu satu TextView untuk label (misal: "Skor Akhir Anda"), satu TextView besar untuk skornya (misal: "8 / 10"), dan satu Button untuk kembali ke Menu Utama.



<TextView
    android:id="@+id/textLabelSkor"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Skor Akhir Anda:"
    android:textSize="28sp"
    ... (Atur 'constraints' agar di tengah atas) ...
/>

<TextView
    android:id="@+id/textTampilSkor"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="10 / 10"
    android:textSize="48sp"
    android:textStyle="bold"
    ... (Atur 'constraints' agar di bawah textLabelSkor) ...
/>

<Button
    android:id="@+id/btnKembaliKeMenu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Kembali ke Menu"
    ... (Atur 'constraints' agar di bawah textTampilSkor) ...
/>

Langkah 3: Memodifikasi QuizActivity.kt (Untuk Melacak & Mengirim Skor)

Kembali ke QuizActivity.kt. Kita perlu melakukan dua perubahan:

  1. Menambahkan variabel score dan menambahkannya saat jawaban benar.
  2. Mengganti Toast "Kuis Selesai!" dengan logika untuk membuka ScoreActivity sambil mengirim data skor.

Ganti lagi SELURUH isi file QuizActivity.kt Anda dengan kode yang sudah disempurnakan ini:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import android.content.Intent // <-- PENTING UNTUK PINDAH ACTIVITY
import com.namapaketanda.aplikasimatematika.databinding.ActivityQuizBinding

class QuizActivity : AppCompatActivity() {

    private lateinit var binding: ActivityQuizBinding
    private lateinit var questionList: List
    private var currentQuestionIndex = 0
    private var score = 0 // <-- VARIABEL SKOR BARU

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

        questionList = getQuestions()
        loadQuestion()
        setupListeners()
    }

    private fun loadQuestion() { ... } // (Salin fungsi loadQuestion dari Bagian 6)
    private fun setupListeners() { ... } // (Salin fungsi setupListeners dari Bagian 6)

    // FUNGSI INI TELAH DIMODIFIKASI
    private fun checkAnswer(selectedIndex: Int) {
        val correctIndex = questionList[currentQuestionIndex].correctAnswerIndex

        if (selectedIndex == correctIndex) {
            Toast.makeText(this, "Benar!", Toast.LENGTH_SHORT).show()
            score++ // <-- TAMBAHKAN SKOR JIKA BENAR
        } else {
            Toast.makeText(this, "Salah. Jawaban: ${questionList[currentQuestionIndex].options[correctIndex]}", Toast.LENGTH_SHORT).show()
        }

        currentQuestionIndex++
        if (currentQuestionIndex < questionList.size) {
            loadQuestion()
        } else {
            // Kuis Selesai! Panggil fungsi baru
            goToScoreScreen()
        }
    }

    // FUNGSI BARU UNTUK MENGIRIM DATA
    private fun goToScoreScreen() {
        // 1. Buat Intent untuk ScoreActivity
        val intent = Intent(this, ScoreActivity::class.java)
        
        // 2. Lampirkan data skor kita ke Intent
        intent.putExtra("SKOR_AKHIR", score)
        intent.putExtra("TOTAL_SOAL", questionList.size)

        // 3. Mulai Activity baru
        startActivity(intent)
        finish() // Menutup QuizActivity agar pengguna tidak bisa kembali ke kuis
    }

    private fun getQuestions(): List { ... } // (Salin fungsi getQuestions dari Bagian 6)
}

Langkah 4: Menerima Data di ScoreActivity.kt

Terakhir, kita perlu mengambil data yang kita kirim. Buka ScoreActivity.kt dan ganti semua isinya dengan ini:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.content.Intent
import com.namapaketanda.aplikasimatematika.databinding.ActivityScoreBinding

class ScoreActivity : AppCompatActivity() {

    private lateinit var binding: ActivityScoreBinding

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

        // 1. Ambil data yang dikirim dari Intent
        val finalScore = intent.getIntExtra("SKOR_AKHIR", 0)
        val totalQuestions = intent.getIntExtra("TOTAL_SOAL", 0)

        // 2. Tampilkan data ke TextView
        binding.textTampilSkor.text = "$finalScore / $totalQuestions"

        // 3. Atur tombol "Kembali ke Menu"
        binding.btnKembaliKeMenu.setOnClickListener {
            // Buka MenuActivity dan tutup halaman skor ini
            val intent = Intent(this, MenuActivity::class.java)
            startActivity(intent)
            finish()
        }
    }
}

Kesimpulan & Apa Selanjutnya?

Selesai! Jalankan aplikasi Anda dan selesaikan kuis. Anda sekarang akan dibawa ke halaman skor baru yang menampilkan hasil akurat Anda. Anda telah menciptakan alur aplikasi yang lengkap!

Anda telah menguasai salah satu keterampilan terpenting: mengirim data antar Activity.

Di Bagian 8, kita akan beristirahat dari logika dan fokus pada seni. Kita akan belajar cara mempercantik aplikasi kita dengan mengubah warna, tema, dan menambahkan gambar.

-> Lanjutkan ke Bagian 8: Mempercantik Tampilan (UI Polish)

Keywords: Android Intent putExtra, getIntExtra, Mengirim Data antar Activity, Halaman Skor Android, Tutorial Kotlin, Aplikasi Kuis, finish(), Pendidikan Matematika

Scroll to Top