Untitled
unknown
plain_text
10 months ago
1.6 kB
2
Indexable
import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { Box, Button, Input, Select, Text, VStack } from '@chakra-ui/react'; const Home = () => { const navigate = useNavigate(); const [name, setName] = useState(''); const [category, setCategory] = useState(''); const [difficulty, setDifficulty] = useState(''); const [numQuestions, setNumQuestions] = useState(10); const startQuiz = () => { navigate('/quiz', { state: { name, category, difficulty, numQuestions }, }); }; return ( <> <Box p={5} w="660px" m="auto" mt="20vh"> <VStack spacing={4}> <Text align="center" fontSize='2xl'>Set up your Quiz</Text> <Input placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} /> <Select placeholder="Category" onChange={(e) => setCategory(e.target.value)}> <option value="9">General Knowledge</option> <option value="21">Sports</option> <option value="22">Geography</option> </Select> <Select placeholder="Difficulty" onChange={(e) => setDifficulty(e.target.value)}> <option value="easy">Easy</option> <option value="medium">Medium</option> <option value="hard">Hard</option> </Select> <Input type="number" placeholder="Number of Questions" value={numQuestions} onChange={(e) => setNumQuestions(e.target.value)} /> <Button onClick={startQuiz} w="100%" bg="red" color="white">Start Quiz</Button> </VStack> </Box> </> ); }; export default Home;
Editor is loading...
Leave a Comment