React Native
Quiz modeli
Question modelini ve state'i tasarlarsın.
Quiz modeli
Bir quiz uygulaması için önce veri modelini tasarlarsın. Her soru bir Question nesnesidir: id (benzersiz numara), question (soru metni), options (seçenekler dizisi), answer (doğru seçeneğin indeksi). Bu alanlar bir soruyu tam olarak tanımlar.
Örnek: { id: 1, question: "Türkiye'nin başkenti?", options: ["İstanbul", "Ankara", "İzmir"], answer: 1 }. Burada doğru cevap "Ankara" olduğundan answer 1'dir (indeks 0'dan başlar). Bir quiz, bu nesnelerin bir dizisidir: questions = [...]. Bu yapı, soruları render etmeyi, doğru cevabı kontrol etmeyi ve skoru hesaplamayı kolaylaştırır. Tasarım sade tutulmakla birlikte gerçek bir quiz uygulamasının temelini taşır.
Uygulama Soru dizisi tanımla
Bir questions sabiti tanımla. İçinde 2 soru olsun. Her soru: id, question, options (3 seçenek) ve answer alanlarını taşısın. Birinci soru: { id: 1, question: "Türkiye'nin başkenti?", options: ["İstanbul", "Ankara", "İzmir"], answer: 1 }. İkinci soru: { id: 2, question: "2 + 2 kaçtır?", options: ["3", "4", "5"], answer: 1 }.
Örnek çözümü göster
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 }
];
Modelin önemi
Soru modelini tasarlamak, uygulamanın geri kalanını kolaylaştırır. Sorular bir dizi olarak elimizdeyse; bir sonraki soruya geçmek için indeksi bir artırırız, doğru cevabı kontrol etmek için question.answer'ı kullanırız, skoru hesaplamak için doğru sayısını sayarız.
Bu model, gerçek bir API'den de kolayca yüklenebilir. Sunucu JSON dizi dönerse response.json() ile aynı yapıyı elde ederiz. Sonraki derslerde bu modeli kullanarak soruları API'den yükleyecek, bir quiz akışı yazacak ve skoru hesaplayacağız. Bu derste attığımız temel, tüm projenin omurgasıdır. Temiz veri modeli, temiz uygulama demektir.
Kendini test et
-
Bir Question nesnesinin answer alanı neyi tutar?
{ id: 1, question: "...", options: ["...", "..."], answer: 1 }
- Soru metnini
- Doğru seçeneğin indeksini
- Soru sayısını
- Soru kimliğini
Cevabı göster
Doğru seçeneğin indeksini — answer, doğru seçeneğin options içindeki indeksidir.
-
Question nesnesini tanımla
const question = { id: 1, question: "Başkent?", options: ["İstanbul", "Ankara"], ____: 1 };
Cevabı göster
const question = { id: 1, question: "Başkent?", options: ["İstanbul", "Ankara"], answer: 1 };
-
Alanı rolüne eşle
- id
- Benzersiz numara
- question
- Soru metni
- options
- Seçenekler dizisi
- answer
- Doğru indeks
Sıradaki ders: Soruları yükleme
