React Native
Quiz oynatma
Soruları sırayla gösteren akışı yazarsın.
Quiz akışı
Bu derste bir Quiz bileşeni yazacaksın. Bileşen, soruları sırayla gösterir. useState ile index tutarsın; bu, hangi sorunun gösterildiğini belirler. Her soruda question = questions[index] ile o anki soruyu alırsın.
Bileşen, soruyu ve seçenekleri ekrana çizer. Text ile soru metnini, Button ile seçenekleri gösterirsin. Şimdilik yalnızca ilk seçeneği gösterelim; sonraki derste tüm seçenekleri ve cevap kontrolünü ekleyeceğiz. questions sabiti önceki dersten geliyor. Bu ders, useState ve JSX'i bildiğini varsayar; bunları bir quiz akışına uygulayacaksın. Yapacağın şey: bileşen açılışında index 0 olur, ekranda ilk soru görünür.
Uygulama Quiz bileşeni yaz
Önceki dersteki questions sabiti ve loadQuestions işlevi zaten tanımlı (aşağıdaki başlangıç kodunda). Şimdi bir Quiz bileşeni ekle. useState ile index'i 0 olarak başlat. const question = questions[index] ile şu anki soruyu al. Dönüşte <View><Text>{question.question}</Text><Button title={question.options[0]} onPress={() => {}} /></View> kullan.
Örnek çözümü göster
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>
);
}
Akışın genişletilmesi
Bu derste tek seçenekli basit bir akış yazdın. Sonraki adımda bunu genişleteceğiz: tüm seçenekleri göstereceğiz, cevap kontrolü ekleyeceğiz ve skoru hesaplayacağız. Bu, gerçek bir quiz uygulamasının kalbidir.
Akışın mantığı şudur: kullanıcı bir seçeneğe basar → cevap doğruysa skor artar → bir sonraki soruya geçilir. Bu döngü, tüm sorular bitene kadar devam eder. Şimdilik yalnızca ilk adımı attık: soruyu göstermek. Sonraki derslerde handleAnswer gibi bir işlev yazıp bu döngüyü tamamlayacağız. Adım adım ilerlemek, karmaşık bir uygulamayı parçalara ayırmanın en iyi yoludur.
Kendini test et
-
Kavramı rolüne eşle
- index
- Hangi soru
- useState
- State açar
- questions[index]
- Şu anki soru
- Text
- Soru metni
-
Quiz bileşeni index state'ini neden tutar?
const [index, setIndex] = useState(0);
- API çağrısı yapmak için
- Stil verisini tutmak için
- Skoru hesaplamak için
- Hangi sorunun gösterildiğini izlemek için
Cevabı göster
Hangi sorunun gösterildiğini izlemek için — index, hangi sorunun gösterildiğini izler.
-
Şu anki soruyu al
const [index, setIndex] = useState(0);
const question = ____[index];
Cevabı göster
const [index, setIndex] = useState(0);
const question = questions[index];
Sıradaki ders: Skor hesaplama
