Quiz oynatma
- React Native kursu
- Orta seviye
- Ders 44/116
- 6 dk
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.
Başlangıç kodu
const questions = [
{ id: 1, question: "Türkiye'nin başkenti?", options: ["İstanbul", "Ankara", "İzmir"], answer: 1 },
{ id: 2, question: "2 + 2 kaçtır?", options: ["3", "4", "5"], answer: 1 }
];
async function loadQuestions() {
const response = await fetch("https://api.example.com/questions");
const data = await response.json();
return data;
}
// useState ve Text, View, Button'ı içe aktar
// Quiz bileşeni yaz
// index state'ini 0 olarak başlat
// şu anki soruyu al
// View, Text ve Button ile gösterÖ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 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.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
index |
Hangi soru |
useState |
State açar |
questions[index] |
Şu anki soru |
Text |
Soru metni |
2 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 Doğru cevap
Açıklama: index, hangi sorunun gösterildiğini izler.
3 Şu anki soruyu al
const [index, setIndex] = useState(0);
const question = ____[index];const [index, setIndex] = useState(0);
const question = questions[index];Açıklama: questions[index] ile şu anki soruyu alırsın.