From e70b29d78911e545ff654ef270b1e920d0aaa1bc Mon Sep 17 00:00:00 2001
From: Justin <justinstoner2@gmail.com>
Date: Mon, 6 May 2024 10:24:15 -0700
Subject: [PATCH] more stuff

---
 trivia-forge/frontend/src/App.css             | 13 ++++++++-
 .../frontend/src/Components/Questions.jsx     | 27 ++++++++++++-------
 .../frontend/src/Pages/TriviaGenPage.jsx      |  4 ++-
 .../frontend/src/Pages/TriviaReviewPage.jsx   |  3 +++
 4 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/trivia-forge/frontend/src/App.css b/trivia-forge/frontend/src/App.css
index b4ccd15b..df652cc9 100644
--- 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
index 9bfc4967..d1b5895e 100644
--- a/trivia-forge/frontend/src/Components/Questions.jsx
+++ b/trivia-forge/frontend/src/Components/Questions.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Choices from "../Components/Choices";
+import { Card } from "react-bootstrap";
 
 import { Question } from "../Model/Question";
 
@@ -7,16 +8,22 @@ 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
index b1e8f197..c3e4f09d 100644
--- 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
index 37d6aab5..dfd7607f 100644
--- 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>
 	);
 }