Webapp interface

docs/src/10_quality_requirements.adoc

@@ -96,7 +96,7 @@ occurs.
 |The user must correctly answer questions on different topics. This will improve the user experience and maintain the interest of the participants.
 |High
 
-|Integrity
+|Fiability
 |The game must be played without errors.
 |The answer determined as correct for each question by the system shall be the one that is actually correct.
 |Medium

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-circular-progressbar": "^2.1.0"
+  }
+}

questionsservice/questiongeneratorservice/package.json

@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/arquisoft/wiq_es6c#readme",
   "dependencies": {
+    "cors": "^2.8.5",
     "express": "^4.18.2",
     "axios": "^1.6.5",
     "cors": "^2.8.5",

webapp/package.json

@@ -10,8 +10,11 @@
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "axios": "^1.6.5",
+    "fetch": "^1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.1",
+    "react-circular-progressbar": "^2.1.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^3.5.1"
   },

webapp/src/App.js

@@ -17,7 +17,7 @@ function App() {
     <Container component="main" maxWidth="xs">
       <CssBaseline />
       <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-        Welcome to wiq_0
+        Welcome to wiq_06c
       </Typography>
       {showLogin ? <Login /> : <AddUser />}
       <Typography component="div" align="center" sx={{ marginTop: 2 }}>

webapp/src/App.test.js

@@ -1,8 +1,17 @@
 import { render, screen } from '@testing-library/react';
 import App from './App';
+import { ContextFun } from './components/Context';
+import { BrowserRouter as Router } from 'react-router-dom';
+
 
 test('renders learn react link', () => {
-  render(<App />);
+  render(
+  <ContextFun>
+    <Router>
+      <App />
+    </Router>
+  </ContextFun>
+  );
   const linkElement = screen.getByText(/Welcome to wiq_0/i);
   expect(linkElement).toBeInTheDocument();
 });

webapp/src/components/Context.js

@@ -0,0 +1,17 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const Context = createContext();
+
+export function ContextFun({ children }) {
+    const [usernameGlobal, setUsernameGlobal] = useState('');
+
+    return (
+        <Context.Provider value={{ usernameGlobal, setUsernameGlobal }}>
+            {children}
+        </Context.Provider>
+    );
+}
+
+export function useUser() {
+    return useContext(Context);
+}

webapp/src/components/FirstGame.css

@@ -0,0 +1,41 @@
+button {
+    font-size: 20px; 
+    width: 200px;
+    height: 50px; 
+    justify-content: center;
+    margin-bottom: 15px;
+}
+
+.questionStructure .answers {
+    display: flex;
+    justify-content: center; /* Alinea los elementos en el centro horizontal /
+    align-items: center; / Alinea los elementos en el centro vertical /
+    height: 100vh; / Ajusta la altura al 100% del viewport */
+}
+
+.allAnswers {
+    width:100%;
+    display: block;
+}
+
+.asnwers {
+    width:100%;
+}
+.progressBar {
+    height: 100%; 
+    margin-top: 10;
+    width:10%;
+    display: inline-block;
+}  
+
+.question {
+    height: 100%;
+    width: 90%;
+    display: inline-block;
+}
+
+.questionText {
+    display: flex;
+    margin-bottom: 25px;
+
+}