Merge branch 'main' into local

public/advanced.json

@@ -0,0 +1,35 @@
+[
+    {
+        "question": "What is the key difference between Python 2 and Python 3?",
+        "options": [
+          "Python 2 is no longer supported by the Python Software Foundation.",
+          "Python 3 has a different syntax and introduces new features.",
+          "Python 2 is faster than Python 3.",
+          "Python 3 is not backward compatible with Python 2."
+        ],
+        "correct_answer": 1,
+        "explanation": "Python 2 and Python 3 have significant differences in syntax and features. Python 3 was introduced to address some design flaws in Python 2 and to improve the language overall."
+      },
+      {
+        "question": "What is the key difference between Python 2 and Python 3?",
+        "options": [
+          "Python 2 is no longer supported by the Python Software Foundation.",
+          "Python 3 has a different syntax and introduces new features.",
+          "Python 2 is faster than Python 3.",
+          "Python 3 is not backward compatible with Python 2."
+        ],
+        "correct_answer": 1,
+        "explanation": "Python 2 and Python 3 have significant differences in syntax and features. Python 3 was introduced to address some design flaws in Python 2 and to improve the language overall."
+      },
+      {
+        "question": "What is the key difference between Python 2 and Python 3?",
+        "options": [
+          "Python 2 is no longer supported by the Python Software Foundation.",
+          "Python 3 has a different syntax and introduces new features.",
+          "Python 2 is faster than Python 3.",
+          "Python 3 is not backward compatible with Python 2."
+        ],
+        "correct_answer": 1,
+        "explanation": "Python 2 and Python 3 have significant differences in syntax and features. Python 3 was introduced to address some design flaws in Python 2 and to improve the language overall."
+      }
+]

public/expert.json

@@ -0,0 +1,30 @@
+
+[
+{
+  "question": "True or False: In Python, '==' and 'is' operators are used interchangeably to compare two objects.",
+  "options": [
+    "True",
+    "False"
+  ],
+  "correct_answer": 1,
+  "explanation": "False. In Python, '==' is used to compare the values of two objects, while 'is' is used to check if two objects refer to the same memory location."
+},
+{
+  "question": "True or False: In Python, '==' and 'is' operators are used interchangeably to compare two objects.",
+  "options": [
+    "True",
+    "False"
+  ],
+  "correct_answer": 1,
+  "explanation": "False. In Python, '==' is used to compare the values of two objects, while 'is' is used to check if two objects refer to the same memory location."
+},
+{
+  "question": "True or False: In Python, '==' and 'is' operators are used interchangeably to compare two objects.",
+  "options": [
+    "True",
+    "False"
+  ],
+  "correct_answer": 1,
+  "explanation": "False. In Python, '==' is used to compare the values of two objects, while 'is' is used to check if two objects refer to the same memory location."
+}
+]

src/components/Difficulty.tsx

@@ -0,0 +1,27 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { useState } from 'react';
+
+interface DifficultyProps {
+  onSelectDifficulty: (selectedDifficulty: string) => void;
+}
+
+const Difficulty: React.FC<DifficultyProps> = ({ onSelectDifficulty }) => {
+  const difficulties = ['Beginner', 'Advanced', 'Expert'];
+
+  return (
+    <div>
+      <h2>Choose a difficulty level please:</h2>
+      <ul>
+        {difficulties.map((difficulty, index) => (
+          <li key={index}>
+            <button onClick={() => onSelectDifficulty(difficulty)}>
+              {difficulty}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Difficulty;

src/components/Language.tsx

@@ -0,0 +1,35 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { useState } from 'react';
+
+interface LanguageProps {
+  onSelectLanguage: (selectedLanguage: string) => void;
+}
+
+const Language: React.FC<LanguageProps> = ({ onSelectLanguage }) => {
+  const languages = [
+    'Javascript',
+    'Python',
+    'PHP',
+    'React',
+    'Angular',
+    'Vue',
+    'Tailwind',
+  ];
+
+  return (
+    <div>
+      <h2>Choose a programming language to test yourself please:</h2>
+      <ul>
+        {languages.map((language, index) => (
+          <li key={index}>
+            <button onClick={() => onSelectLanguage(language)}>
+              {language}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Language;

src/components/Questions.tsx

@@ -0,0 +1,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:{' '}
+                {
+                  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;