diff --git a/webapp/public/questions.json b/webapp/public/questions.json new file mode 100644 index 0000000..23e2c8e --- /dev/null +++ b/webapp/public/questions.json @@ -0,0 +1,44 @@ +{ + "questions":[ + { + "question": "What is the capital of France?", + "answers": ["London", "Paris", "Berlin", "Madrid"] + }, + { + "question": "Who wrote 'Romeo and Juliet'?", + "answers": ["William Shakespeare", "Charles Dickens", "Jane Austen", "Emily Brontë"] + }, + { + "question": "What is the largest mammal?", + "answers": ["Elephant", "Blue whale", "Giraffe", "Hippopotamus"] + }, + { + "question": "Which planet is known as the Red Planet?", + "answers": ["Venus", "Mars", "Jupiter", "Saturn"] + }, + { + "question": "What is the chemical symbol for water?", + "answers": ["H2O", "CO2", "NaCl", "O2"] + }, + { + "question": "Who painted the Mona Lisa?", + "answers": ["Leonardo da Vinci", "Vincent van Gogh", "Pablo Picasso", "Michelangelo"] + }, + { + "question": "Which is the largest ocean on Earth?", + "answers": ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"] + }, + { + "question": "What is the main ingredient in guacamole?", + "answers": ["Tomato", "Onion", "Avocado", "Lime"] + }, + { + "question": "Who is the creator of Facebook?", + "answers": ["Mark Zuckerberg", "Jeff Bezos", "Bill Gates", "Elon Musk"] + }, + { + "question": "Which bird can fly backwards?", + "answers": ["Hummingbird", "Eagle", "Penguin", "Ostrich"] + } + ] +} \ No newline at end of file diff --git a/webapp/src/components/Game/Game.tsx b/webapp/src/components/Game/Game.tsx index b7070a1..9fddeb7 100644 --- a/webapp/src/components/Game/Game.tsx +++ b/webapp/src/components/Game/Game.tsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import Question from "./Question"; import NextQuestion from "./NextQuestion"; import AnswerPanel from "./AnswerPanel"; +import GameOver from "./GameOver"; import { logout, getUsername } from "../../services/auth-service"; import { Nav } from "../general/Nav"; @@ -10,6 +11,9 @@ export default function Game() { const [loading, setLoading] = useState(false); // Nuevo estado para controlar si se están cargando nuevas preguntas const [score, setScore] = useState(0); const [correctSelected, setCorrectSelected] = useState(false); + const [questionCount, setQuestionCount] = useState(0); // Estado para rastrear el número de preguntas mostradas + + const handleNextQuestion = () => { setLoading(true); // Establecer loading en true al hacer clic en "Next Question" @@ -17,6 +21,7 @@ export default function Game() { setTimeout(() => { setLoading(false); // Establecer loading en false después de un tiempo de espera setAnswered(false); // Reiniciar el estado answered + setQuestionCount(questionCount + 1); // Incrementar el contador de preguntas }, 0); }; @@ -24,9 +29,19 @@ export default function Game() { cAnswer = 2; return ['a1', 'b2', 'c3', 'd4']; } + var cAnswer=-1; + + + var questions = ['q1', 'q2', 'q3', 'q4', 'q5', 'q6', 'q7', 'q8', 'q9', 'q10'] + function getQuestion(){ - return 'Which is the correct answer??'; + return questions[questionCount]; + } + + + if (questionCount >= 10) { + return ; } return ( diff --git a/webapp/src/components/Game/GameOver.tsx b/webapp/src/components/Game/GameOver.tsx new file mode 100644 index 0000000..165d980 --- /dev/null +++ b/webapp/src/components/Game/GameOver.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +type props = { + score : number; + }; + +const GameOver = (props : props) =>{ + + return ( +
+

Game Over

+
+

Score: {props.score}

+
+
+ ); + } + +export default GameOver; \ No newline at end of file