Score calculation
- React Native course
- Intermediate
- Lesson 45/116
- 6 min
Write the score calculation screen.
Score calculation
In this lesson you will add score calculation to the quiz flow. You keep score with useState. When the user presses a choice, a handleAnswer function runs. This function checks if the pressed choice equals question.answer; if so it calls setScore(score + 1); then it moves to the next question with setIndex(index + 1).
This lesson also shows useState for number state. score is a number; it grows by one on each correct answer. You show it with <Text>Score: {score}</Text>. The handleAnswer function turns user input into a state change; this pattern is very common in React. You will extend the Quiz component from the previous lesson.
Practice Add handleAnswer and score
The Quiz component from the previous lesson is already defined below. Now extend it. Start score with useState(0). Write function handleAnswer(i): if i === question.answer call setScore(score + 1); always call setIndex(index + 1). Make the button's onPress call () => handleAnswer(0). Add <Text>Score: {score}</Text> to the return.
Starter code
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>
);
}
// Start score state at 0
// Write handleAnswer(i): if i === question.answer raise score; raise index
// Button onPress calls the answer handler
// Add a Text showing the scoreSample 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 [score, setScore] = useState(0);
const question = questions[index];
function handleAnswer(i) {
if (i === question.answer) setScore(score + 1);
setIndex(index + 1);
}
return (
<View>
<Text>{question.question}</Text>
<Button title={question.options[0]} onPress={() => handleAnswer(0)} />
<Text>Skor: {score}</Text>
</View>
);
}Showing the score
Showing the score on screen tells the user about their progress. You do it with <Text>Score: {score}</Text>. The {score} uses the JSX rule of writing a JavaScript expression in curly braces; this way you embed the state value in the text.
Every time the score updates the component re-renders and the new value appears on screen. This is the essence of React's reactive nature: when state changes the UI updates automatically. In the next lesson you will combine all parts into a full QuizApp that loads questions from the API, runs the flow and shows the score. This lesson prepared us for the final step: combining everything.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Start the score state
const [score, ____] = useState(0);const [score, setScore] = useState(0);Explanation: setScore updates the score state.
2 What does the handleAnswer function do?
function handleAnswer(i) { /* ... */ }- If the answer is correct the score goes up; it always moves to the next question Correct answer
- Only the score goes up
- Nothing
- It only moves to the next question
Explanation: If the answer is correct the score rises; you always move to the next question.
3 Match the concept to its role
| Term | Meaning |
|---|---|
score |
Number correct |
handleAnswer |
Answer handler |
question.answer |
Correct index |
setIndex(index + 1) |
Next question |