diff --git a/src/App.tsx b/src/App.tsx index a637e77..31d579d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,18 +1,57 @@ -import React from 'react'; +import React, {useState} from 'react'; +// eslint-disable-next-line @typescript-eslint/no-unused-vars import logo from './logo.svg'; import baselhack from './assests/images/logohack.png'; import './App.css'; import { QuestionCard } from './component/question-card'; import { UserForm } from './component/user-form'; +import Language from './components/Language'; +import Difficulty from './components/Difficulty'; +import Questions from './components/Questions'; + const App: React.FunctionComponent = () => { + const [selectedLanguage, setSelectedLanguage] = useState(null); + const [selectedDifficulty, setSelectedDifficulty] = useState( + null + ); + const [apiUrl, setApiUrl] = useState(null); + + const handleLanguageSelect = (language: string) => { + setSelectedLanguage(language); + }; + + const handleDifficultySelect = (difficulty: string) => { + setSelectedDifficulty(difficulty); + + // difficulty lvl depending on users choice + if (difficulty === 'Beginner') { + setApiUrl('http://localhost:3000/expert.json'); + } else if (difficulty === 'Advanced') { + setApiUrl('http://localhost:3000/advanced.json'); + } else if (difficulty === 'Expert') { + setApiUrl('https://www.api.org/sda125'); + } + }; return (
Logo HackBasel
Certifever help
- +
+ {!selectedLanguage ? ( + + ) : !selectedDifficulty ? ( + + ) : apiUrl ? ( + + ) : ( +
+

Uploading...

+
+ )} +
console.log(formData)}>
diff --git a/src/components/Questions.tsx b/src/components/Questions.tsx index fb8589f..17f7462 100644 --- a/src/components/Questions.tsx +++ b/src/components/Questions.tsx @@ -92,7 +92,7 @@ const Questions: React.FC = ({ apiUrl }) => { {isAnswered && (

- Correct:{' '} + Correct Response is:{' '} { questions[currentQuestionIndex].options[ questions[currentQuestionIndex].correct_answer