more stuff

emmanueposu · May 6, 2024 · e70b29d · e70b29d
1 parent af5a387
commit e70b29d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 12 deletions.
diff --git a/trivia-forge/frontend/src/App.css b/trivia-forge/frontend/src/App.css
@@ -104,9 +104,20 @@
   background-color: white;
 }
 
+h2 {
+  text-align: center;
+}
+
+.CardPadding {
+  margin: 20px;
+  background-color: bisque;
+}
+
 footer {
-  position: absolute;
+  position: fixed;
   bottom: 0;
+  background-color: #282c34;
+  color: white;
   text-align: center;
   width: 100%;
 }

diff --git a/trivia-forge/frontend/src/Components/Questions.jsx b/trivia-forge/frontend/src/Components/Questions.jsx
@@ -1,22 +1,29 @@
 import React from "react";
 import Choices from "../Components/Choices";
+import { Card } from "react-bootstrap";
 
 import { Question } from "../Model/Question";
 
 function Questions({ data }) {
     let choices = data.choices;
     return (
         <div>
-            <div className="card-body">
-                <textarea className="form-control" defaultValue={data.question}></textarea>
-            </div>
-            <Choices choices={choices} />
-            <div className="card-body">
-                <textarea className="form-control" defaultValue={data.answer}></textarea>
-            </div>
-            <div className="card-body">
-                <textarea className="form-control" defaultValue={data.hint}></textarea>
-            </div>
+            <Card className="CardPadding">
+                <h2 className="centered">Question</h2>
+                <div className="card-body">
+                    <textarea className="form-control" defaultValue={data.question}></textarea>
+                </div>
+                <h2>Choices</h2>
+                <Choices choices={choices} />
+                <h2>Answer</h2>
+                <div className="card-body">
+                    <textarea className="form-control" defaultValue={data.answer}></textarea>
+                </div>
+                <h2>Hint</h2>
+                <div className="card-body">
+                    <textarea className="form-control" defaultValue={data.hint}></textarea>
+                </div>
+            </Card>
         </div>
     )
 }

diff --git a/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx b/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx
@@ -53,7 +53,9 @@ function TriviaGenPage() {
 
             //parse response from API
             let sections = completion.choices[0].message.content.split('\n'); // store trivia questions
-
+            for (let i = 0; i < sections.length; i++) {
+                if (sections[i] === '') { sections.splice(i, 1); }
+            }
             //loop through sections and create question and choice objects
             for (let i = 0; i < sections.length; i += 7) {
                 let question = sections[i];

diff --git a/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx b/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom'; // used to access passed state
 import Questions from '../Components/Questions';
+import { Button } from 'react-bootstrap';
 
 function TriviaReviewPage() {
 	// Reference: https://reactrouter.com/en/main/hooks/use-location
@@ -17,6 +18,8 @@ function TriviaReviewPage() {
 				<Questions key={index} data={q} />
 
 			))}
+			<Button variant="primary" size="lg" block>
+				Save Changes</Button>
 		</div>
 	);
 }