-
Notifications
You must be signed in to change notification settings - Fork 1
/
Questions.tsx
122 lines (112 loc) · 3.58 KB
/
Questions.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import React, { useState, useEffect } from 'react';
interface QuestionsProps {
apiUrl: string; // get data from backend
}
interface Question {
question: string;
options: string[];
correct_answer: number;
explanation: string;
}
const Questions: React.FC<QuestionsProps> = ({ apiUrl }) => {
const [questions, setQuestions] = useState<Question[]>([]);
const [currentQuestionIndex, setCurrentQuestionIndex] = useState<number>(0);
const [userAnswers, setUserAnswers] = useState<number[]>([]);
const [isTimeUp, setIsTimeUp] = useState<boolean>(false);
const [isAnswered, setIsAnswered] = useState<boolean>(false);
const [timer, setTimer] = useState<number>(0);
useEffect(() => {
fetch(apiUrl)
.then((response) => response.json())
.then((data) => {
setQuestions(data);
// Time, depending on questions type
const questionType =
data[0].options.length > 2 ? 'multiple' : 'trueFalse';
setTimer(questionType === 'multiple' ? 90 : 60);
})
.catch((error) => {
console.error('can not communicate with the api:', error);
});
}, [apiUrl]);
useEffect(() => {
let interval: NodeJS.Timeout;
if (timer > 0 && currentQuestionIndex < questions.length && !isTimeUp) {
interval = setInterval(() => {
if (timer > 0) {
setTimer(timer - 1);
} else {
clearInterval(interval);
setIsTimeUp(true);
// when time is up, next q
goToNextQuestion();
}
}, 1000);
}
return () => {
clearInterval(interval);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [timer, currentQuestionIndex, questions, isTimeUp]);
const handleAnswerQuestion = (selectedOption: number) => {
const correctAnswer = questions[currentQuestionIndex].correct_answer;
setUserAnswers([...userAnswers, selectedOption === correctAnswer ? 1 : 0]);
setIsAnswered(true);
};
const goToNextQuestion = () => {
if (currentQuestionIndex < questions.length - 1) {
setCurrentQuestionIndex(currentQuestionIndex + 1);
setIsAnswered(false);
} else {
// Show result
}
};
return (
<div>
{timer > 0 && !isTimeUp && <p>Timer: {timer} second</p>}
{questions.length > 0 && currentQuestionIndex < questions.length ? (
<div>
<h1>Question {currentQuestionIndex + 1}</h1>
<p>{questions[currentQuestionIndex].question}</p>
<ul>
{questions[currentQuestionIndex].options.map((option, index) => (
<li key={index}>
<button
onClick={() => handleAnswerQuestion(index)}
disabled={isAnswered}
>
{option}
</button>
</li>
))}
</ul>
{isAnswered && (
<div>
<p>
Correct Response is:{' '}
{
questions[currentQuestionIndex].options[
questions[currentQuestionIndex].correct_answer
]
}
</p>
<button onClick={goToNextQuestion}>Next Question</button>
</div>
)}
</div>
) : (
<div>
<h1>You have have answred all question</h1>
<p>
Correct answers:{' '}
{userAnswers.filter((answer) => answer === 1).length}
</p>
<p>
Wrong answers: {userAnswers.filter((answer) => answer === 0).length}
</p>
</div>
)}
</div>
);
};
export default Questions;