Skor hesaplama
- React Native kursu
- Orta seviye
- Ders 45/116
- 6 dk
Skor hesaplama ekranı yazarsın.
Skor hesaplama
Bu derste quiz akışına skor hesaplamayı ekleyeceğiz. useState ile score tutarsın. Kullanıcı bir seçeneğe basınca handleAnswer işlevi çağrılır. Bu işlev, basılan seçenek question.answer'a eşitse setScore(score + 1) yapar; sonra setIndex(index + 1) ile bir sonraki soruya geçer.
Bu ders, useState'in nesne state değil sayı state için kullanımını da gösterir. score bir sayıdır; her doğru cevapta bir artar. Ekranda <Text>Skor: {score}</Text> ile gösterirsin. handleAnswer işlevi, kullanıcı etkileşimini state değişimine çevirir; bu desen React'te çok yaygındır. Önceki dersteki Quiz bileşenini genişleteceğiz; başlangıç kodu önceki çözümü içerir.
Uygulama handleAnswer ve score ekle
Önceki dersteki Quiz bileşeni zaten tanımlı (aşağıdaki başlangıç kodunda). Şimdi bileşeni genişlet. useState ile score'u 0 olarak başlat. function handleAnswer(i) yaz: i === question.answer ise setScore(score + 1) yap; her zaman setIndex(index + 1) yap. Button'un onPress'ini () => handleAnswer(0) yap. Dönüşe <Text>Skor: {score}</Text> ekle.
Başlangıç kodu
import { useState } from "react";
import { Text, View, Button } from "react-native";
const questions = [
{ id: 1, question: "Türkiye'nin başkenti?", options: ["İstanbul", "Ankara", "İzmir"], answer: 1 }
];
function Quiz() {
const [index, setIndex] = useState(0);
const question = questions[index];
return (
<View>
<Text>{question.question}</Text>
<Button title={question.options[0]} onPress={() => {}} />
</View>
);
}
// score state'ini 0 olarak başlat
// handleAnswer(i) yaz: i === question.answer ise score'u artır; index'i artır
// Button onPress'inde cevap işleyicini çağır
// Skor gösteren Text ekleÖrnek çözüm
import { useState } from "react";
import { Text, View, Button } from "react-native";
const questions = [
{ id: 1, question: "Türkiye'nin başkenti?", options: ["İstanbul", "Ankara", "İzmir"], answer: 1 }
];
function Quiz() {
const [index, setIndex] = useState(0);
const [score, setScore] = useState(0);
const question = questions[index];
function handleAnswer(i) {
if (i === question.answer) setScore(score + 1);
setIndex(index + 1);
}
return (
<View>
<Text>{question.question}</Text>
<Button title={question.options[0]} onPress={() => handleAnswer(0)} />
<Text>Skor: {score}</Text>
</View>
);
}Skorun gösterimi
Skoru ekranda göstermek, kullanıcıya ilerlemesini bildirir. <Text>Skor: {score}</Text> ile bunu yaparsın. {score} JSX'in süslü parantez içinde JavaScript ifadesi yazma desenidir; bu sayede state değerini metne gömersin.
Skor her güncellendiğinde bileşen yeniden render edilir ve yeni değer ekranda görünür. Bu, React'in reaktif yapısının özüdür: state değişince UI otomatik güncellenir. Bir sonraki derste tüm parçaları birleştirip API'den soru yükleyen, akışı çalıştıran ve skoru gösteren tam bir QuizApp yazacağız. Bu ders, son adım olan birleştirmeye hazırlandık.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Skor state'ini başlat
const [score, ____] = useState(0);const [score, setScore] = useState(0);Açıklama: setScore ile score state'ini güncellersin.
2 handleAnswer işlevinde ne yapılır?
function handleAnswer(i) { /* ... */ }- Cevap doğruysa skor artırılır; her zaman sonraki soruya geçilir Doğru cevap
- Yalnızca skor artırılır
- Hiçbir şey
- Yalnızca sonraki soruya geçilir
Açıklama: doğruysa skor artar; her zaman sonraki soruya geçilir.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
score |
Doğru sayısı |
handleAnswer |
Cevap işleyicisi |
question.answer |
Doğru indeks |
setIndex(index + 1) |
Sonraki soru |