+
+
+
+
Question: {nQuestion}
+
+ { (gameMode !== "infinite" && gameMode !== "threeLife") ?
+
Time: {formatTiempo(segundos)}
+ : ""}
+ { gameMode === "threeLife" ?
+
{images}
:""}
+
+
+
+ {question}
+
+
+ {options.map((option, index) => (
+ handleSubmit(option, index)} key={generateUniqueId()}
+ sx={{ bgcolor: getBackgroundColor(option, index) }}>
+
+
+ {option}
+
+
+
+ ))}
+
+
+
+ { gameMode !== "threeLife" ?
+ {
+ setNextButtonEnabled(false);
+ fetchQuestion();
+ } : null}
+ sx={{ justifyContent: 'center', marginTop: 2 }}
+ className={nextButtonEnabled ? '' : 'isNotSelected'} >
+ Next
+
+ : ""}
+ { gameMode === "infinite" ?
+ handelInfiniteGameFinish( numberCorrect, numberIncorrect, segundosInfinite, goTo, setGameFinished) }
+ sx={{ color: '#f35858', justifyContent: 'center', marginTop: 2 }}>
+ End Game
+
+ : ""}
+
+
+
+ );
+}
+
+export default Question;
diff --git a/webapp/src/components/Start.jsx b/webapp/src/components/Start.jsx
new file mode 100644
index 00000000..83db82bf
--- /dev/null
+++ b/webapp/src/components/Start.jsx
@@ -0,0 +1,33 @@
+
+import Divider from '@mui/material/Divider';
+
+export const Start = ({ goTo }) => {
+
+ return (
+
+ <>
+