Gecko [ gandhischool.edu.np ]

Name	Size	Permission
components	[ DIR ]	dr-xr-xr-x
images	[ DIR ]	dr-xr-xr-x
API.ts	1.27 KB	-rw-rw-rw-
App.css	2.93 KB	-rw-rw-rw-
App.tsx	5.5 KB	-rw-rw-rw-
index.tsx	465 B	-rw-rw-rw-
main.tsx	220 B	-rw-rw-rw-
react-app-env.d.ts	41 B	-rw-rw-rw-
utils.ts	98 B	-rw-rw-rw-

Code Editor : App.tsx

import React, { useState, useEffect } from "react";
import { fetchQuizQuestions, fetchCategories } from "./API";
// Components
import Question from "./components/Question";
// types
import { QuestionsState, Difficulty } from "./API";
// Styles
import "./App.css";

export type AnswerObject = {
  question: string;
  answer: string;
  correct: boolean;
  correctAnswer: string;
};

const TOTAL_QUESTIONS = 10;
const TOTAL_TIME = 5 * 60; // 5 minutes in seconds

const App: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [questions, setQuestions] = useState<QuestionsState[]>([]);
  const [number, setNumber] = useState(0);
  const [userAnswers, setUserAnswers] = useState<AnswerObject[]>([]);
  const [score, setScore] = useState(0);
  const [gameOver, setGameOver] = useState(true);
  const [timeOver, setTimeOver] = useState(TOTAL_TIME);
  const [timerActive, setTimerActive] = useState(false);
  const [timeUp, setTimeUp] = useState(false);
  const [categories, setCategories] = useState<{ id: number; name: string }[]>([]);
  const [selectedCategory, setSelectedCategory] = useState<string>("");

useEffect(() => {
    let timer: NodeJS.Timeout;

if (timerActive && timeOver > 0) {
      timer = setTimeout(() => {
        setTimeOver((prev) => prev - 1);
      }, 1000);
    } else if (timeOver === 0) {
      setTimeUp(true);
      setGameOver(true);
      setTimerActive(false);
    }

return () => clearTimeout(timer);
  }, [timeOver, timerActive]);

// Fetch available categories from the API
  useEffect(() => {
    const fetchAllCategories = async () => {
      const categoriesData = await fetchCategories(); // Fetch categories from API
      setCategories(categoriesData);
    };

fetchAllCategories();
  }, []);

const startTrivia = async () => {
    if (!selectedCategory) {
      alert("Please select a category....!");
      return;
    }

setLoading(true);
    setGameOver(false);
    setTimerActive(true);
    setTimeUp(false);
    setTimeOver(TOTAL_TIME);

const newQuestions = await fetchQuizQuestions(
      TOTAL_QUESTIONS,
      Difficulty.EASY,
      selectedCategory // Now this contains the category ID
    );

setQuestions(newQuestions);
    setScore(0);
    setUserAnswers([]);
    setNumber(0);
    setLoading(false);
  };

const checkAnswer = (e: React.MouseEvent<HTMLButtonElement>) => {
    if (!gameOver) {
      const answer = e.currentTarget.value;
      const correct = questions[number].correct_answer === answer;

if (correct) setScore((prev) => prev + 1);

const answerObject: AnswerObject = {
        question: questions[number].question,
        answer,
        correct,
        correctAnswer: questions[number].correct_answer,
      };

setUserAnswers((prev) => [...prev, answerObject]);

if (userAnswers.length + 1 === TOTAL_QUESTIONS) {
        setGameOver(true);
        setTimerActive(false);
      }
    }
  };

const nextQuestion = () => {
    const nextQ = number + 1;

if (nextQ === TOTAL_QUESTIONS) {
      setGameOver(true);
      setTimerActive(false);
    } else {
      setNumber(nextQ);
    }
  };

const formatTime = (time: number) => {
    const minutes = Math.floor(time / 60);
    const seconds = time % 60;
    return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
  };

const handleCategoryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedCategory(e.target.value);
  };

return (
    <div className="main">
      <h1>LMS Quiz App</h1>

{timeUp && (
        <div className="result">
          <h2>Time's up!</h2>
          <p>
            You scored <span className="result">{score}</span> out of {TOTAL_QUESTIONS}.
          </p>
          <p>You couldn't complete all the given questions in time...</p>
        </div>
      )}

{gameOver && !timeUp && userAnswers.length === TOTAL_QUESTIONS && (
        <div className="result">
          <h2>Quiz Completed!</h2>
          <p>
            You scored <span className="result">{score}</span> out of {TOTAL_QUESTIONS}.
          </p>
        </div>
      )}

{gameOver || userAnswers.length === TOTAL_QUESTIONS ? (
        <div className="mid">
          {/* Category Selection Dropdown */}
          <select
            value={selectedCategory}
            onChange={handleCategoryChange}
            className="category-select"
          >
            <option value="">-- Select Category --</option>
            {categories.map((category) => (
              <option key={category.id} value={category.id}>
                {category.name}
              </option>
            ))}
          </select>

<button className="start" onClick={startTrivia}>
            Start Quiz
          </button>
        </div>
      ) : null}

{!gameOver ? <p className="score">Score: {score}</p> : null}
      {!gameOver && <p className="number">Time Left: {formatTime(timeOver)}🕰️</p>}
      {loading ? <p>Loading Questions...</p> : null}

{!loading && !gameOver && !timeUp && (
        <Question
          questionNr={number + 1}
          totalQuestion={TOTAL_QUESTIONS}
          question={questions[number].question}
          answer={questions[number].answers}
          userAnswer={userAnswers ? userAnswers[number] : undefined}
          callback={checkAnswer}
        />
      )}

{!gameOver &&
      !loading &&
      userAnswers.length === number + 1 &&
      number !== TOTAL_QUESTIONS - 1 ? (
        <button className="next" onClick={nextQuestion}>
          Next Question
        </button>
      ) : null}
    </div>
  );
};

export default App;

${this.title}

Code Editor : App.tsx