UI enchancements + fixings in question generation

users/index.js

@@ -11,7 +11,7 @@ const app = express();
 const port = 8003;
 
 // Connect to MongoDB
-const mongoUri = process.env.MONGODB_URI;
+const mongoUri = process.env.MONGODB_URI
 
 mongoose.connect(mongoUri).then(
   console.log('Succesfully connected to MongoDB')

webapp/src/components/Game/Game.tsx

@@ -48,6 +48,11 @@ export default function Game(props: Props) {
 
     useEffect(() => {
       getQuestionsFromApi().then((questions : questionType[]) => {
+          questions.map((q) => {
+            if(!isNaN(Number(q.answers[0]))){
+              q.answers = q.answers.map((a) => formatNumberWithDots(a));
+            }
+          });
           setQuestions(questions)
           setLoadingData(false);
       })
@@ -59,11 +64,6 @@ export default function Game(props: Props) {
       setQuestionCount(questionCount+1);
       setLoading(true); 
 
-      if(!isNaN(Number((questions[questionCount].answers[0])))){
-        const newAnswers = questions[questionCount].answers.map((a) => formatNumberWithDots(a));
-        questions[questionCount].answers = newAnswers;
-      }
-
       setTimeout(() => {
         setLoading(false); 
         setAnswered(false);

webapp/src/components/Game/GameOver.tsx

@@ -13,7 +13,11 @@ type props = {
 
 const GameOver = (props: props) => {
 
-
+ const images = {
+  lowScore: '/julien.png',
+  mediumScore: '/rico.webp',
+  highScore: '/kowalski.webp',
+};
 
   const getScore = () => {
     let score = 0;
@@ -25,14 +29,31 @@ const GameOver = (props: props) => {
     return score;
   };
 
+  // Set the image according to the score
+  let score = getScore();
+  let imageToShow;
+  let message;
+  let scorePercentage = (score / props.questions.length) * 100;
+  if (scorePercentage < 50
+  ) {
+    imageToShow = images.lowScore;
+    message = "You are NOT smarter than a penguin";
+  } else if (scorePercentage < 75) {
+    imageToShow = images.mediumScore;
+    message = "You ARE smarter than a penguin";
+  } else {
+    imageToShow = images.highScore;
+    message = "You ARE smarter than the SMARTEST penguin";
+  }
+
   return (
-    <div className="flex flex-col items-center justify-center text-text gap-16">
-      <div className="w-full flex mt-5 justify-center gap-7 items-center">
-
-      <h1 className="text-4xl font-bold self-center ">{props.finalMessage}</h1>
-      <Link className={" text-text hover:text-primary text-4xl "} to={`/home`}>
-      🏠︎
-     </Link>
+    <div className="flex flex-col items-center justify-center text-text gap-5">
+      <div className="w-full flex mt-5 justify-center gap-7 items-center ">
+      <div className="flex flex-col justify-center items-center gap-8 ">
+      <h1 className="text-3xl font-bold text-center w-96">{message}</h1>
+
+      </div>
+      <img src={imageToShow} alt="Score image" className="w-32" /> 
       </div>
       <div>
         <div>
@@ -57,10 +78,12 @@ const GameOver = (props: props) => {
             </tbody>
           </table>
         </div>
+        <div className="flex justify-between items-center gap-6 mt-4">
+        <p className="text-2xl">Score: {getScore()} / {props.questions.length}</p>
+        <Link className="text-text border text-center border-text hover:bg-background2 p-3 rounded-xl text-xl" to={"/home"}>Back to home</Link>
+        </div>
 
-        <p className="text-2xl mt-4">Score: {getScore()} / {props.questions.length}</p>
       </div>
-
     </div>
   );
 };

webapp/src/components/stats/Statistics.tsx

@@ -25,18 +25,18 @@ export default function Statistics () {
 
     return (
         <>
-            <div id="statsHeader" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' , marginTop:'30px'}}>
+            <div id="statsHeader" className="flex flex-col items-center gap-3 mt-3">
                 <div className="avatar"> 
                 <Avatar.Root className="AvatarRoot" style={{ width: '100px', height: '100px' }}>
                         <Avatar.Fallback className="AvatarFallback" style={{fontSize:'2em'}}>{username.toUpperCase().charAt(0)}{username.toUpperCase().charAt(1)}</Avatar.Fallback>
                     </Avatar.Root>
                 </div>
-                <h1 className="h1-statistics" style={{ marginTop: '0.5em', marginBottom:'0.1em', fontSize:'3.1em'}}>{username}</h1> 
-                <h1 className="h2-statistics" >{email}</h1> 
+                <h1 className="text-text text-2xl" >{username}</h1> 
+                <h1 className="text-text text-2xl" >{email}</h1> 
             </div>
             <StatsTable />
             <div className="flex flex-col gap-5 justify-start items-center p-5"> 
-                <Link id="normalGame" className={" text-text border w-70 text-center border-text hover:bg-background2 p-5 rounded-xl font-bold text-3xl"} to={`/Home}`}>Continue Improving </Link>
+                <Link id="normalGame" className={" text-text border w-70 text-center border-text hover:bg-background2 p-4 rounded-xl font-bold text-2xl"} to={`/}`}>Keep Improving </Link>
             </div>
         </>
     )

webapp/src/components/stats/StatsTable.tsx

@@ -26,40 +26,48 @@ export default function StatsTable() {
     };
 
     return (
-        <table className="stats-table text-text text-4xl" data-testid="stats-table">
-            <thead>
-                <tr className="header">
-                    <th className="statistics" style={{ padding: '5px' , fontSize:'1.5em' }}>Statistics</th>
-                    <th className="value" style={{ padding: '5px', fontSize:'1.5em'}}>Value</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr className="body-row"> 
-                    <td className="row-header" style={{ padding: '5px' }}>Correct Answers</td>
-                    <td data-testid="correct-answers" style={{ padding: '5px' }}>{questionsCorrect}</td>
-                </tr>
-                <tr className="body-row">
-                    <td className="row-header" style={{ padding: '5px' }}>Wrong Answers</td>
-                    <td data-testid="wrong-answers" style={{ padding: '5px' }}>{questionsAnswered - questionsCorrect}</td>
-                </tr>
-                <tr className="body-row">
-                    <td className="row-header" style={{ padding: '5px' }}>Gained chesses</td>
-                    <td data-testid="chesses-gained" style={{ padding: '5px' }}>{chesses}</td>
-                </tr>
-                <tr className="body-row">
-                    <td className="row-header" style={{ padding: '5px' }}>Percentage Correct</td>
-                    <td style={{ padding: '5px' }}>
-                        <CircularProgress 
-                            value={ questionsAnswered > 0 ? (Math.round(((questionsCorrect / questionsAnswered) * 100) * 100) / 100) : 0} 
-                            color='#00A078' thickness='.3rem'
-                            size={"3rem"}>
-                            <CircularProgressLabel >
-                                {questionsAnswered > 0 ? (Math.round(((questionsCorrect / questionsAnswered) * 100) * 100) / 100).toFixed(0) : 0}%
-                            </CircularProgressLabel>
-                        </CircularProgress>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+        <div className="container mt-6"> 
+                <div className="image-container">
+                    <img src="/penguinsLeft.webp" alt="Left" />
+                </div>            
+                <table className="stats-table text-text text-4xl " data-testid="stats-table">
+                <thead>
+                    <tr className="header">
+                        <th className="statistics" style={{ padding: '5px' , fontSize:'1.5em' }}>Statistics</th>
+                        <th className="value" style={{ padding: '5px', fontSize:'1.5em'}}>Value</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr className="body-row"> 
+                        <td className="row-header" style={{ padding: '5px' }}>Correct Answers</td>
+                        <td data-testid="correct-answers" style={{ padding: '5px' }}>{questionsCorrect}</td>
+                    </tr>
+                    <tr className="body-row">
+                        <td className="row-header" style={{ padding: '5px' }}>Wrong Answers</td>
+                        <td data-testid="wrong-answers" style={{ padding: '5px' }}>{questionsAnswered - questionsCorrect}</td>
+                    </tr>
+                    <tr className="body-row">
+                        <td className="row-header" style={{ padding: '5px' }}>Gained chesses</td>
+                        <td data-testid="chesses-gained" style={{ padding: '5px' }}>{chesses}</td>
+                    </tr>
+                    <tr className="body-row">
+                        <td className="row-header" style={{ padding: '5px' }}>Percentage Correct</td>
+                        <td style={{ padding: '5px' }}>
+                            <CircularProgress 
+                                value={ questionsAnswered > 0 ? (Math.round(((questionsCorrect / questionsAnswered) * 100) * 100) / 100) : 0} 
+                                color='#00A078' thickness='.3rem'
+                                size={"3rem"}>
+                                <CircularProgressLabel >
+                                    {questionsAnswered > 0 ? (Math.round(((questionsCorrect / questionsAnswered) * 100) * 100) / 100).toFixed(0) : 0}%
+                                </CircularProgressLabel>
+                            </CircularProgress>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <div className="image-container">
+                <img src="/penguinsRight.webp" alt="Right" />
+            </div>
+          </div>
     );
 }

webapp/src/index.css

@@ -2,13 +2,38 @@
 @tailwind components;
 @tailwind utilities;
 
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: stretch; /* This makes the children of the container the same height */
+}
+
+.container > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.container .table-container {
+  flex: 0 0 90%;
+}
+
+.container .image-container {
+  flex: 0 0 10%;
+}
+
 .caja-quesitos {
     width: 120px;
     height: 120px;
 
 }
 
-
 .caja{
   width:100%;
   height:100%;
@@ -253,20 +278,22 @@
 
 .stats-table {
   font-size: 1rem;
-  color: white;
+  color: #f2ecff;
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 80%;
   margin: auto;
-  border-bottom: 1rem;
+  border: 1px solid #f2ecff;
+
+
 
   .header {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     width: 100%;
     padding-bottom: 1rem;
-    border-bottom: .1rem solid white;
+    border-bottom: .1rem solid #f2ecff;
 
     th {
       padding-inline: 1rem;

webapp/src/services/question-service.ts

@@ -12,7 +12,6 @@ let url = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
 export const getQuestionsFromApi = async (): Promise<Question[]> => {
     const response = await axios.get(url + "/GetQuestions");
-    console.log('response:', response);
     return response.data;
 };
 

wikidataservice/index.js

@@ -65,22 +65,23 @@ init().then(([jsonCountryQuestions, jsonElementsQuestions, jsonMovieQuestions,
 
     // Route for getting questions about mixed topics
     app.get('/getQuestions', async (req, res, next) => {
-        try {
-
-            // Generate the questions
-            const questions1 = generateQuestions("What is the capital of: ", jsonCountryQuestions.results.bindings);
-            const questions2 = generateQuestions("What is the element of: ", jsonElementsQuestions.results.bindings);
-            const questions3 = generateQuestions("What is the director of: ", jsonMovieQuestions.results.bindings);
-
-            // Combine the questions
-            const allQuestions = [...questions1, ...questions2, ...questions3];
-
+        try {   
+            // Generate the questions       
+            let questions = []
+            for(let i = 0; i < 2; i++){     
+                questions.push(generateQuestions(jsonHistoryQuestions[i].questionText, jsonHistoryQuestions[i].jsonResult.results.bindings, 1)[0]);
+                questions.push(generateQuestions(jsonSportsQuestions[i].questionText, jsonSportsQuestions[i].jsonResult.results.bindings, 1)[0]);
+                questions.push(generateQuestions(jsonGeographyQuestion[i].questionText, jsonGeographyQuestion[i].jsonResult.results.bindings, 1)[0]);
+                questions.push(generateQuestions(jsonEntertainmentQuestion[i].questionText, jsonEntertainmentQuestion[i].jsonResult.results.bindings, 1)[0]);
+                questions.push(generateQuestions(jsonChemistryQuestion[i].questionText, jsonChemistryQuestion[i].jsonResult.results.bindings, 1)[0]);
+            }
+
+            console.log(questions)
             // Shuffle the questions
-            let shuffled = allQuestions
+            let shuffled = questions
                 .map(value => ({ value, sort: Math.random() }))
                 .sort((a, b) => a.sort - b.sort)
                 .map(({ value }) => value)
-
              res.status(200).json(shuffled.slice(0,10));
         } catch (error) {
             next(error);
@@ -94,7 +95,7 @@ init().then(([jsonCountryQuestions, jsonElementsQuestions, jsonMovieQuestions,
             const randomIndex = Math.floor(Math.random() * jsonHistoryQuestions.length);
             let itemData = jsonHistoryQuestions[randomIndex];
             const questions = generateQuestions(itemData.questionText, itemData.jsonResult.results.bindings, 1);
-
+            console.log(questions)
             res.status(200).json(questions);
         } catch (error) {
             next(error);