import React, { useState } from 'react'; import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Dimensions } from 'react-native'; import { CheckCircle, XCircle, Award, Clock } from 'lucide-react-native'; const { width } = Dimensions.get('window'); export default function QuizApp() { const [currentQuestion, setCurrentQuestion] = useState(0); const [selectedOption, setSelectedOption] = useState(null); const [score, setScore] = useState(0); const [showResult, setShowResult] = useState(false); const quizData = [ { question: "What is the capital of France?", options: ["London", "Berlin", "Paris", "Madrid"], correct: 2 }, { question: "Which planet is known as the Red Planet?", options: ["Venus", "Mars", "Jupiter", "Saturn"], correct: 1 }, { question: "What is the largest mammal?", options: ["Elephant", "Blue Whale", "Giraffe", "Hippopotamus"], correct: 1 } ]; const handleSelectOption = (optionIndex: number) => { setSelectedOption(optionIndex); if (optionIndex === quizData[currentQuestion].correct) { setScore(score + 1); } setTimeout(() => { if (currentQuestion < quizData.length - 1) { setCurrentQuestion(currentQuestion + 1); setSelectedOption(null); } else { setShowResult(true); } }, 1000); }; const resetQuiz = () => { setCurrentQuestion(0); setSelectedOption(null); setScore(0); setShowResult(false); }; if (showResult) { return ( Quiz Completed! Your Score: {score}/{quizData.length} Restart Quiz ); } return ( {/* Header */} 10:00 {currentQuestion + 1}/{quizData.length} {/* Progress bar */} {/* Question */} {quizData[currentQuestion].question} {/* Options */} {quizData[currentQuestion].options.map((option, index) => ( handleSelectOption(index)} disabled={selectedOption !== null} > {selectedOption === index ? ( index === quizData[currentQuestion].correct ? ( ) : ( ) ) : ( {String.fromCharCode(65 + index)} )} {option} ))} {/* Explanation */} {selectedOption !== null && ( {selectedOption === quizData[currentQuestion].correct ? 'Correct!' : 'Incorrect!'} {selectedOption === quizData[currentQuestion].correct ? 'Great job! That\'s the right answer.' : `The correct answer is ${quizData[currentQuestion].options[quizData[currentQuestion].correct]}`} )} {/* Footer spacing */} ); }

React Native QuickApp App Preview

Project Screens for QuickApp App