Create an Interactive Quiz App Using React-Native

// App.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Quiz from './Quiz';

const App = () => {
	return (
		<View style={{ flex: 1, }}>
			<Text style={styles.heading}>
				Interactive Quiz App
			</Text>
			<Quiz />
		</View>
	);
};

export default App;
const styles = StyleSheet.create({
	heading: {
		fontSize: 25,
		paddingVertical: 60,
		paddingHorizontal: 10,
		fontWeight: 'bold',
		color: 'green',
	}

})

//Quiz.js

import React, { useState, useEffect } from 'react';
import {
	View, Text, TouchableOpacity,
	StyleSheet
} from 'react-native';

import { quizData } from './quizData'

const Quiz = () => {
	const [currentQuestion, setCurrentQuestion] =
		useState(0);
	const [score, setScore] = useState(0);
	const [quizCompleted, setQuizCompleted] =
		useState(false);
	const [timeLeft, setTimeLeft] = useState(10);

	useEffect(() => {
		const timer = setTimeout(() => {
			if (timeLeft > 0) {
				setTimeLeft(timeLeft - 1);
			} else {
				if (currentQuestion <
					quizData.length - 1) {
					setCurrentQuestion(currentQuestion + 1);
					setTimeLeft(10);
				} else {
					setQuizCompleted(true);
				}
			}
		}, 1000);

		return () => clearTimeout(timer);
	}, [currentQuestion, timeLeft]);

	const handleAnswer = (selectedOption) => {
		if (selectedOption ===
			quizData[currentQuestion].correctAnswer) {
			setScore(score + 1);
		}

		if (currentQuestion <
			quizData.length - 1) {
			setCurrentQuestion(currentQuestion + 1);
			setTimeLeft(10);
		} else {
			setQuizCompleted(true);
		}
	};

	const handleRetest = () => {
		setCurrentQuestion(0);
		setScore(0);
		setQuizCompleted(false);
		setTimeLeft(10);
	};
	// Display questions and answers when the quiz is completed
	const displayAnswers =
		quizData.map((question, index) => (
			<View key={index}>
				<Text style={styles.question}>
					Question {index + 1}:  
					{" "+quizData[index].question}
				</Text>
				<Text style={styles.correctAnswer}>
					Correct Answer: 
					{" "+quizData[index].correctAnswer}
				</Text>

			</View>
		));

	return (
		<View style={styles.container}>
			{quizCompleted ? (
				<View>
					<Text style={styles.score}>
						Your Score: {score} / 5
					</Text>
					<Text style={styles.question}>
						Questions and Answers: 
					</Text>
					{displayAnswers}
					<TouchableOpacity
						style={styles.retestButton}
						onPress={handleRetest}>
						<Text style={styles.buttonText}>
							Retest
						</Text>
					</TouchableOpacity>
				</View>
			) : (
				<View>
					<Text style={styles.question}>
						{quizData[currentQuestion].question}
					</Text>
					<Text style={styles.timer}>
						Time Left: {timeLeft} sec
					</Text>
					{quizData[currentQuestion]
						.options.map((option, index) => (
							<TouchableOpacity
								key={index}
								style={styles.option}
								onPress={() => handleAnswer(option)}
							>
								<Text style={{fontSize: 16,
		fontWeight: 'bold',
        color: 'black',}}>
									{option}
								</Text>
							</TouchableOpacity>
						))}
				</View>
			)}
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems: 'center',
	},
	question: {
		fontSize: 18,
		fontWeight: 'bold',
		marginBottom: 2,
	},
	option: {
		backgroundColor: '#DDDDDD',
		padding: 10,
		marginBottom: 10,
		alignItems: 'center',
        color: 'black',
	},
	buttonText: {
		fontSize: 16,
		fontWeight: 'bold',
        color: 'white',
	},
	score: {
		fontSize: 18,
		fontWeight: 'bold',
		marginBottom: 20,
	},
	retestButton: {
		backgroundColor: 'blue',
		padding: 10,
        borderRadius: 8,
		alignItems: 'center',
        color: 'white',
	},
	timer: {
		fontSize: 11,
		fontWeight: 'bold',
		backgroundColor: 'green',
		paddingVertical: 11,
		margin: 10,
		borderRadius: 8,
        alignItems: 'center',
        alignSelf: 'center',
        color: 'white',
        padding: 10

	},
	correctAnswer: {
		color: 'green',
        marginBottom: 10,
        fontSize: 16,
		fontWeight: 'bold',

	},

});
export default Quiz;

// quizData.js

export const quizData = [
	{
		question: "What is the capital of France?",
		options: ["London", "Berlin", "Paris", "Madrid"],
		correctAnswer: "Paris",
	},
	{
		question: "What is 2 + 2?",
		options: ["3", "4", "5", "6"],
		correctAnswer: "4",
	},
	{
		question: "What is the largest ocean on Earth?",
		options: ["Pacific Ocean", "Atlantic Ocean", 
				"Indian Ocean", "Arctic Ocean"],
		correctAnswer: "Pacific Ocean",
	},
	{
		question: "What is the tallest mountain on Earth?",
		options: ["Mount Everest", "Mount Kilimanjaro", 
				"Mount Fuji", "Mount Denali"],
		correctAnswer: "Mount Everest",
	},
	{
		question: "What is the chemical symbol for water?",
		options: ["H2O", "CO2", "O2", "N2"],
		correctAnswer: "H2O",
	},
];