Quiz modeli
- React Native kursu
- Orta seviye
- Ders 42/116
- 6 dk
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 }.
Başlangıç kodu
// questions sabitini tanımla
// 2 sorudan oluşan bir dizi olsun
// her soru id, question, options ve answer taşısınÖrnek çözüm
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.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir Question nesnesinin answer alanı neyi tutar?
{ id: 1, question: "...", options: ["...", "..."], answer: 1 }- Soru metnini
- Doğru seçeneğin indeksini Doğru cevap
- Soru sayısını
- Soru kimliğini
Açıklama: answer, doğru seçeneğin options içindeki indeksidir.
2 Question nesnesini tanımla
const question = { id: 1, question: "Başkent?", options: ["İstanbul", "Ankara"], ____: 1 };const question = { id: 1, question: "Başkent?", options: ["İstanbul", "Ankara"], answer: 1 };Açıklama: answer doğru seçeneğin indeksini tutar.
3 Alanı rolüne eşle
| Kavram | Anlamı |
|---|---|
id |
Benzersiz numara |
question |
Soru metni |
options |
Seçenekler dizisi |
answer |
Doğru indeks |