Running the quiz

Write the flow that shows questions in turn.

Quiz flow

In this lesson you will write a Quiz component. The component shows the questions in turn. You keep an index with useState; this decides which question is shown. For each question you take the current question with question = questions[index].

The component draws the question and its choices on screen. You show the question text with Text and the choices with Button. For now we show only the first choice; in the next lesson we add all choices and answer checking. This lesson assumes you know useState and JSX; you will apply them to a quiz flow. On mount index is 0 and the first question appears.

Exercise Write the Quiz component

The questions constant and loadQuestions function from the previous lesson are already defined below. Now add a Quiz component. Start index with useState(0). Get the current question with const question = questions[index]. Return <View><Text>{question.question}</Text><Button title={question.options[0]} onPress={() => {}} /></View>.

Show example solution

import { useState } from "react";
import { Text, View, Button } from "react-native";

const questions = [
  { id: 1, question: "Capital of Turkey?", 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>
  );
}

Extending the flow

In this lesson you wrote a simple flow with one choice. In the next step we will extend it: show all choices, add answer checking and compute the score. This is the heart of a real quiz app.

The flow logic is this: the user presses a choice → if the answer is correct the score increases → move to the next question. This loop continues until all questions are done. For now we only took the first step: showing the question. In the next lessons you will write a function such as handleAnswer to complete this loop. Stepping forward one piece at a time is the best way to break down a complex app.

Test yourself

Match the concept to its role

index

Which question
useState

Opens state
questions[index]

Current question
Text

Question text
Why does the Quiz component keep an index state?
```
const [index, setIndex] = useState(0);
```
- To make an API call
- To hold style data
- To calculate the score
- To track which question is shown
Show answer

To track which question is shown — index tracks which question is shown.

Get the current question

const [index, setIndex] = useState(0);
const question = ____[index];

Show answer

const [index, setIndex] = useState(0);
const question = questions[index];

Next lesson: Score calculation

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies