diff --git a/src/mockData/QuizDetails.ts b/src/mockData/QuizDetails.ts index 319714f..135d179 100644 --- a/src/mockData/QuizDetails.ts +++ b/src/mockData/QuizDetails.ts @@ -47,7 +47,7 @@ const Quiz_Details: QuizDetails[] = [ answer: ["single threaded"], result: false, timeLimit: 40, - type: "textInpit" + type: "textInput" }, { question: "is javascript", @@ -64,5 +64,13 @@ const Quiz_Details: QuizDetails[] = [ }, ]; +export let test = [ + { + a: "ss" + }, + { + a: "aa" + }, +] export default Quiz_Details; \ No newline at end of file diff --git a/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx b/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx index 244f609..957f72a 100644 --- a/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx +++ b/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx @@ -7,6 +7,8 @@ import goodJobIcon from "../../assets/icons/good_job.svg"; import { closeCircle, checkmarkCircle } from "ionicons/icons"; import { Link } from "react-router-dom"; +import Quiz_Details from '../../mockData/QuizDetails'; + const PreliminaryRoundResults: React.FC = () => { return ( @@ -18,7 +20,7 @@ const PreliminaryRoundResults: React.FC = () => {
You have scored
-
85%
+
{(parseInt(localStorage.getItem("answer")!) / Quiz_Details.length) * 100}%

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. @@ -29,11 +31,11 @@ const PreliminaryRoundResults: React.FC = () => {

-
17 Questions
+
{localStorage.getItem("answer")} Questions
-
3 Questions
+
{Quiz_Details.length - parseInt(localStorage.getItem("answer")!)} Questions
diff --git a/src/pages/quiz/Options.tsx b/src/pages/quiz/Options.tsx index 373a3a3..ac6ce11 100644 --- a/src/pages/quiz/Options.tsx +++ b/src/pages/quiz/Options.tsx @@ -1,27 +1,31 @@ import { IonButton, IonCheckbox, IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react'; import { useEffect, useRef, useState } from 'react'; +import { Link } from 'react-router-dom'; import Input from '../../components/formInput/Input'; import styles from './Options.module.scss'; interface OwnProps { options: string[] | undefined; type: string; + answer: string[]; + lastQuestion: boolean; + questionNumber: number; updateQuestionNumber: () => void; + } const Options: React.FC = (props) => { const [selected, setSelected] = useState(undefined); const [selectedOptions, setSelectedOptions] = useState([]); - const [textInput, setTextInput] = useState(""); - const [answers, setAnswers] = useState([]); + const [textInput, setTextInput] = useState(""); + const [answers, setAnswers] = useState(0); const inputRef = useRef(null); - useEffect(() => { - console.log("render"); setSelected(undefined); setSelectedOptions([]); + setTextInput(""); }, [props.options]); const selectChecked = (option: string) => { @@ -34,14 +38,37 @@ const Options: React.FC = (props) => { setSelectedOptions(newOption); } - console.log(selectedOptions); - console.log(selected); + const validateAnswer = () => { + if (props.type === "singleSelect") { + if (props.answer.includes(selected!)) { + setAnswers(answers + 1); + } + } else if (props.type === "multiSelect") { + if (props.answer.length === selectedOptions.length && props.answer.sort().join(',') === selectedOptions.sort().join(',')) { + + setAnswers(answers + 1); + } + } else if (props.type === "textInput") { + if (props.answer.includes(textInput)) { + setAnswers(answers + 1); + } + } + } const handleInput = () => { setTextInput(inputRef.current?.value!) - console.log(textInput); } + if ((selected || textInput)) { + console.log("decision"); + } + + if (props.lastQuestion) { + console.log("last"); + localStorage.setItem("answer", answers.toString()); + } + + const options = props.options!.map((option, key) => { return ( @@ -75,7 +102,7 @@ const Options: React.FC = (props) => { {MultiSelectOptions}
} - {props.type === "textInpit" && + {props.type === "textInput" &&
= (props) => { onChange={handleInput} />
} - -
props.updateQuestionNumber()}> - Next -
+ {!props.lastQuestion && +
0 || textInput) ? styles.active : "")} + onClick={(selected || selectedOptions.length > 0 || textInput) ? () => { props.updateQuestionNumber(); validateAnswer(); } : undefined}> + Next +
+ } + + {props.lastQuestion && + < Link to="/preliminaryRoundResults" className={styles.button + " " + (selected ? styles.active : "")}> + Next Step + + } ); } diff --git a/src/pages/quiz/Quiz.tsx b/src/pages/quiz/Quiz.tsx index da46d7f..d6a9e86 100644 --- a/src/pages/quiz/Quiz.tsx +++ b/src/pages/quiz/Quiz.tsx @@ -41,7 +41,10 @@ const Quiz: React.FC = () => { + type={Quiz_Details[questionNumber - 1].type} + answer={Quiz_Details[questionNumber - 1].answer} + lastQuestion={Quiz_Details.length === questionNumber} + questionNumber={questionNumber} /> {/*