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} />
{/*