AICodeCraft

Your React Native Quiz App is Ready!

import React, { useState } from 'react'; import { View, Text, TextInput, TouchableOpacity, FlatList, StyleSheet } from 'react-native'; const QuizApp = () => { const [quizzes, setQuizzes] = useState([]); const [currentQuiz, setCurrentQuiz] = useState(null); const [currentQuestion, setCurrentQuestion] = useState(0); const [score, setScore] = useState(0); const [showScore, setShowScore] = useState(false); const [quizTitle, setQuizTitle] = useState(''); const [questionText, setQuestionText] = useState(''); const [options, setOptions] = useState(['', '', '', '']); const [correctAnswer, setCorrectAnswer] = useState(''); const createQuiz = () => { if (quizTitle && questionText && options.every(option => option !== '') && correctAnswer) { const newQuiz = { title: quizTitle, questions: [{ question: questionText, options: options, correctAnswer: correctAnswer }] }; setQuizzes([...quizzes, newQuiz]); resetQuizCreation(); } else { alert('Please fill in all fields'); } }; const resetQuizCreation = () => { setQuizTitle(''); setQuestionText(''); setOptions(['', '', '', '']); setCorrectAnswer(''); }; const startQuiz = (quiz) => { setCurrentQuiz(quiz); setCurrentQuestion(0); setScore(0); setShowScore(false); }; const handleAnswer = (answer) => { if (answer === currentQuiz.questions[currentQuestion].correctAnswer) { setScore(score + 1); } const nextQuestion = currentQuestion + 1; if (nextQuestion < currentQuiz.questions.length) { setCurrentQuestion(nextQuestion); } else { setShowScore(true); } }; const renderQuizCreation = () => ( Create a New Quiz {options.map((option, index) => ( { const newOptions = [...options]; newOptions[index] = text; setOptions(newOptions); }} placeholderTextColor="#999" /> ))} Create Quiz ); const renderQuizList = () => ( Available Quizzes index.toString()} renderItem={({ item }) => ( startQuiz(item)}> {item.title} )} /> ); const renderQuiz = () => { if (showScore) { return ( You scored {score} out of {currentQuiz.questions.length} setCurrentQuiz(null)}> Back to Quizzes ); } const question = currentQuiz.questions[currentQuestion]; return ( {question.question} {question.options.map((option, index) => ( handleAnswer(option)} > {option} ))} ); }; return ( {currentQuiz ? renderQuiz() : ( <> {renderQuizCreation()} {renderQuizList()} )} ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#f5f5f5', }, quizCreationContainer: { marginBottom: 20, backgroundColor: '#ffffff', padding: 15, borderRadius: 10, elevation: 3, }, quizListContainer: { backgroundColor: '#ffffff', padding: 15, borderRadius: 10, elevation: 3, }, sectionTitle: { fontSize: 20, fontWeight: 'bold', marginBottom: 10, color: '#333', }, input: { borderWidth: 1, borderColor: '#ddd', padding: 10, marginBottom: 10, borderRadius: 5, fontSize: 16, backgroundColor: '#fff', }, button: { backgroundColor: '#4CAF50', padding: 15, borderRadius: 5, alignItems: 'center', }, buttonText: { color: '#fff', fontSize: 16, fontWeight: 'bold', }, quizItem: { backgroundColor: '#e0e0e0', padding: 15, marginBottom: 10, borderRadius: 5, }, quizItemText: { fontSize: 16, color: '#333', }, quizContainer: { backgroundColor: '#ffffff', padding: 20, borderRadius: 10, elevation: 3, }, questionText: { fontSize: 18, fontWeight: 'bold', marginBottom: 20, color: '#333', }, optionButton: { backgroundColor: '#2196F3', padding: 15, marginBottom: 10, borderRadius: 5, }, optionButtonText: { color: '#fff', fontSize: 16, }, scoreContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, scoreText: { fontSize: 24, fontWeight: 'bold', marginBottom: 20, color: '#333', }, }); export default QuizApp;