Gecko [ gandhischool.edu.np ]

Name	Size	Permission	Action
Question.css	984 B	-rw-rw-rw-
Question.tsx	1.76 KB	-rw-rw-rw-

Code Editor : Question.tsx

import React from "react";
import "./Question.css";

type Props = {
  question: string;
  answer: string[];
  callback: any;
  userAnswer: any;
  questionNr: number;
  totalQuestion: number;
};

const Question: React.FC<Props> = ({
  question,
  answer,
  callback,
  userAnswer,
  questionNr,
  totalQuestion,
}) => (
  <div>
    <p className="number">
      Question: {questionNr} / {totalQuestion}
    </p>
    <p dangerouslySetInnerHTML={{ __html: question }} />
    <div>
      {answer.map((ans) => (
        <div key={ans}>
          <button
            className="option"
            disabled={userAnswer}
            value={ans}
            onClick={callback}
            style={{
              backgroundColor: userAnswer
                ? ans === userAnswer.correctAnswer
                  ? "green"
                  : ans === userAnswer.answer
                  ? "red"
                  : "initial"
                : "initial",
              color:
                userAnswer &&
                (ans === userAnswer.correctAnswer || ans === userAnswer.answer)
                  ? "white"
                  : "black",
            }}
          >
            <span dangerouslySetInnerHTML={{ __html: ans }} />
          </button>
        </div>
      ))}
    </div>
    {userAnswer && (
      <div>
        {userAnswer.answer === userAnswer.correctAnswer ? (
          <p style={{ color: "#00d26a", fontWeight: 750 }}>
            ✅Correct! You have guessed the right answer.
          </p>
        ) : (
          <p style={{ color: "#f92f60", fontWeight: 750 }}>
            ❌Wrong! The correct answer is {userAnswer.correctAnswer}.
          </p>
        )}
      </div>
    )}
  </div>
);

export default Question;

${this.title}

Code Editor : Question.tsx