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;