resolved merge conflicts

src/App.js

@@ -1,13 +1,14 @@
 import './App.css';
 import Header from './Header';
-import Game from './Game';
+import Game from './routes/Game';
 import Footer from './Footer';
+import { Outlet} from "react-router-dom";
 
 function App() {
 	return (
 		<div>
 			<Header />
-			<Game />
+			<Outlet />
 			<Footer />
 		</div>
 	);

src/Assets/Styles/styles.css

@@ -192,8 +192,12 @@ body {
     font-size: larger;
     width: 30%;
     height: 4rem;
-    padding: 0.5rem;
-    color: white
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-width: 0px;
+    text-decoration: none;
 }
 
 @media (max-width:725px) {
@@ -214,4 +218,26 @@ body {
 
 .footer a {
     color: white;
+}
+.results-container {
+    height: auto;
+    background-color: white;
+    margin: auto 20%;
+    border-radius: 1rem;
+    padding-top: 0.01rem;
+    padding-bottom: 0.5rem;
+    margin-bottom: 3rem;
+    text-align: center;
+}
+
+@media (max-width:650px) {
+    .results-container {
+        margin: auto 10%;
+        margin-bottom: 2rem;
+    }
+}
+.results-text{
+    color:black;
+    line-height: 2rem;
+
 }

src/Components/Submit/Submit.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { Link } from "react-router-dom";
 
 
-export default class Submit extends React.Component {
-
-    render() {
-        return (
-            <button className='navButton' to='/results'>
+export default class Submit extends React.Component{
+    
+    render(){
+        return(
+            <Link className = 'navButton' to = '/results'>
                 Submit
-            </button>
+            </Link>
         );
     }
 }

src/index.js

@@ -2,13 +2,26 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './styles.css';
 import App from './App';
+import Results from './routes/Results';
+import Game from './routes/Game';
+import { BrowserRouter,
+  Routes,
+  Route, Navigate, } from "react-router-dom";
 
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-	<React.StrictMode>
-		<App />
-	</React.StrictMode>
+  <BrowserRouter>
+    <Routes>
+      <Route path="/" element={<Navigate to="/game" />}></Route>
+      <Route path = '/' element = {<App/>}>
+        <Route path = 'results' element = {<Results/>}></Route>
+        <Route path = 'game' element = {<Game/>}></Route>
+        <Route path="*" element={<Navigate to="game" />} />
+      </Route>
+
+    </Routes>
+  </BrowserRouter>
 );
 
 

src/routes/Game.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import Question from '../Question';
+import Answer from '../Answer';
+import Score from '../Score';
+import Previous from '../Previous';
+import RightButton from '../RightButton';
+
+export default class Game extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            questionNum: 0,
+            score: 0,
+            numAnswered: 0,
+            length: 10,
+        };
+        this.changeQNum = this.changeQNum.bind(this);
+        this.incrementScore = this.incrementScore.bind(this);
+        this.incrementNumAnswered = this.incrementNumAnswered.bind(this);
+    }
+
+
+    changeQNum(increment) {
+        const newQ = this.state.questionNum + increment;
+        if (newQ >= 0 && newQ < this.state.length) {
+            this.setState({ questionNum: newQ });
+        }
+    }
+
+    incrementScore() {
+        this.setState({ score: this.state.score + 1 });
+        sessionStorage.setItem("score", this.state.score + 1);
+    }
+
+    incrementNumAnswered() {
+        this.setState({ numAnswered: this.state.numAnswered + 1 });
+        sessionStorage.setItem("numAnswered", this.state.numAnswered + 1);
+    }
+
+    render() {
+        return (
+            <div className='panel'>
+                <h3><Question questionNumber={this.state.questionNum} /></h3>
+                <Answer questionNum={this.state.questionNum}
+                    incrementScore={this.incrementScore}
+                    incrementNumAnswered={this.incrementNumAnswered}
+                    numAnswered={this.state.numAnswered} />
+                <div className='nav'>
+                    <Previous onClick={this.changeQNum} />
+                    <Score numAnswered={this.state.numAnswered}
+                        score={this.state.score} />
+                    <RightButton onClick={this.changeQNum}
+                        numAnswered={this.state.numAnswered}
+                        questionNum={this.state.questionNum}
+                        length={this.state.length} />
+                </div>
+            </div>
+        );
+    }
+}

src/routes/Results.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Results = () => {
+  let score = sessionStorage.getItem("score");
+  if (score === null){
+    score = 0;
+  }
+  return (
+    <div className = 'results-container'>
+      <h2 className = 'results-text'>Thanks for playing! <br/> Here was your final score: {score}/{sessionStorage.getItem("numAnswered")}</h2>
+    </div>
+
+  )
+}
+
+export default Results