From d4f08428d3bd5a4e317822601e1051b684f10022 Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Sat, 30 Mar 2024 14:02:52 +0100
Subject: [PATCH 1/9] Small adjustments to UI

---
 .../src/frontend/src/assets/icon.css          |  4 +++
 .../src/frontend/src/assets/main.css          |  1 +
 .../frontend/src/components/TheWelcome.vue    |  6 ++--
 .../src/components/create-quiz/CreateView.vue | 13 ++++++++
 .../src/components/sidebar/SidebarLink.vue    |  1 +
 .../src/frontend/src/router/index.js          |  5 +++
 .../src/frontend/src/views/DashboardView.vue  | 32 +++++++++++++++++--
 7 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 FullstackProsjekt/src/frontend/src/assets/icon.css
 create mode 100644 FullstackProsjekt/src/frontend/src/components/create-quiz/CreateView.vue

diff --git a/FullstackProsjekt/src/frontend/src/assets/icon.css b/FullstackProsjekt/src/frontend/src/assets/icon.css
new file mode 100644
index 0000000..629beb9
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/assets/icon.css
@@ -0,0 +1,4 @@
+.icon-home{
+    background-image: url("../components/icons/home.png");
+    height: 50px;
+}
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index 0d44904..70d5346 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -1,4 +1,5 @@
 body {
     font-family: Arial, sans-serif;
     margin: 0 0 0 27px;
+    background-color: #F2F2F2;
 }
diff --git a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
index 6236461..205f479 100644
--- a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
+++ b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
@@ -18,7 +18,7 @@ export default {
 			<img id="logo" src="../components/icons/brain.png"/>
 			<h1 class="heading">BrainStormer</h1>
 			<p> An easy way to learn and share quizzes. <br> Make your own quiz now! </p>
-			<a href="" class="hero-btn">CREATE QUIZ</a>
+			<router-link to="/createQuiz" class="hero-btn">CREATE QUIZ </router-link>
 		</div>
 	</section>
 
@@ -98,6 +98,7 @@ export default {
 	border: 1px solid #CCA43B;
 	background: #CCA43B;
 	transition: 1s;
+	color: #242F40;
 }
 
 /*Info with three levels*/
@@ -125,7 +126,7 @@ p{
 }
 .course-col{
 	flex-basis: 31%;
-	background: #E5E5E5;
+	background: #cccaca;
 	border-radius: 10px;
 	margin-bottom: 5%;
 	padding: 20px;
@@ -139,6 +140,7 @@ h3{
 }
 .course-col:hover{
 	box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);
+
 }
 
 @media (max-width: 700px){
diff --git a/FullstackProsjekt/src/frontend/src/components/create-quiz/CreateView.vue b/FullstackProsjekt/src/frontend/src/components/create-quiz/CreateView.vue
new file mode 100644
index 0000000..282d80c
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/components/create-quiz/CreateView.vue
@@ -0,0 +1,13 @@
+<script>
+
+</script>
+
+
+<template>
+	<body>
+		<h1>
+			Hey create a quiz
+		</h1>
+	</body>
+
+</template>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/components/sidebar/SidebarLink.vue b/FullstackProsjekt/src/frontend/src/components/sidebar/SidebarLink.vue
index 69bb7ad..93a77cf 100644
--- a/FullstackProsjekt/src/frontend/src/components/sidebar/SidebarLink.vue
+++ b/FullstackProsjekt/src/frontend/src/components/sidebar/SidebarLink.vue
@@ -62,6 +62,7 @@ export default {
 
 .link.active {
 	background-color: var(--sidebar-item-active);
+	color: #242F40;
 }
 
 .link .icon {
diff --git a/FullstackProsjekt/src/frontend/src/router/index.js b/FullstackProsjekt/src/frontend/src/router/index.js
index 8e5fec7..2ac1df3 100644
--- a/FullstackProsjekt/src/frontend/src/router/index.js
+++ b/FullstackProsjekt/src/frontend/src/router/index.js
@@ -34,6 +34,11 @@ const router = createRouter({
     name: 'signup',
     component: () => import('../views/SignupView.vue')
     },
+    {
+      path: '/createQuiz',
+      name: 'create Quiz',
+      component: () => import('../components/create-quiz/CreateView.vue')
+    },
   ]
 })
 
diff --git a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
index a446e69..97c663e 100644
--- a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
@@ -5,7 +5,7 @@
 	<body class="dashboard">
 		<h1>Dashboard</h1>
 		<input class="searchBox" placeholder="Search">
-
+		<router-link to="/createQuiz" class="hero-btn">CREATE QUIZ </router-link>
 		<div class="row">
 			<div class="course-col">
 				<h3>Quiz 1</h3>
@@ -42,12 +42,30 @@
 
 <style>
 .dashboard{
-	padding: 10px;
+	padding: 20px;
 }
 .searchBox{
 	padding: 10px;
 }
 
+
+.hero-btn{
+	display: inline-block;
+	text-decoration: none;
+	color: #242F40;
+	border: 1px solid #242F40;
+	padding: 12px 34px;
+	font-size: 16px;
+	background: transparent;
+	position: relative;
+	cursor: pointer;
+}
+.hero-btn:hover{
+	border: 1px solid #CCA43B;
+	background: #CCA43B;
+	transition: 1s;
+}
+
 .row{
 	margin-top: 5%;
 	display: flex;
@@ -65,4 +83,14 @@
 .course-col:hover{
 	box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);
 }
+
+@media (max-width: 700px){
+	.text-box h1{
+		font-size: 42px;
+		transition: 1s;
+	}
+	.row{
+		flex-direction: column;
+	}
+}
 </style>
\ No newline at end of file
-- 
GitLab


From 2045ba1cfed176457f25136481fe57f78606d460 Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Sat, 30 Mar 2024 14:31:09 +0100
Subject: [PATCH 2/9] Added photo layout to DashboardView.vue

---
 .../src/frontend/src/views/DashboardView.vue          | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
index 97c663e..4375e8a 100644
--- a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
@@ -4,11 +4,12 @@
 <template>
 	<body class="dashboard">
 		<h1>Dashboard</h1>
-		<input class="searchBox" placeholder="Search">
+		<input class="searchBox" placeholder="Search for category..."> <br>
 		<router-link to="/createQuiz" class="hero-btn">CREATE QUIZ </router-link>
 		<div class="row">
 			<div class="course-col">
 				<h3>Quiz 1</h3>
+				<img id="quizImg" src="../components/photos/background.png"/>
 				<p>Insert photo </p>
 			</div>
 			<div class="course-col">
@@ -45,10 +46,11 @@
 	padding: 20px;
 }
 .searchBox{
+	width: 250px;
 	padding: 10px;
+	margin-bottom: 50px;
 }
 
-
 .hero-btn{
 	display: inline-block;
 	text-decoration: none;
@@ -84,6 +86,11 @@
 	box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);
 }
 
+#quizImg{
+	height: 250px;
+	border-radius: 5px;
+}
+
 @media (max-width: 700px){
 	.text-box h1{
 		font-size: 42px;
-- 
GitLab


From 8de228ac90ec5cc182301d4af90a8ba2935101ce Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Sat, 30 Mar 2024 15:25:17 +0100
Subject: [PATCH 3/9] Created OverviewQuizView.vue instead of
 CreateQuizView.vue and color tweaks on buttons

---
 .../frontend/src/components/TheWelcome.vue    |  2 +-
 .../src/components/create-quiz/CreateView.vue | 13 ----
 .../src/frontend/src/router/index.js          |  7 +-
 .../src/frontend/src/views/CreateQuizView.vue | 55 +++++++++++++
 .../src/frontend/src/views/DashboardView.vue  |  7 +-
 .../frontend/src/views/OverviewQuizView.vue   | 77 +++++++++++++++++++
 6 files changed, 144 insertions(+), 17 deletions(-)
 delete mode 100644 FullstackProsjekt/src/frontend/src/components/create-quiz/CreateView.vue
 create mode 100644 FullstackProsjekt/src/frontend/src/views/CreateQuizView.vue
 create mode 100644 FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue

diff --git a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
index 205f479..2c91553 100644
--- a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
+++ b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
@@ -18,7 +18,7 @@ export default {
 			<img id="logo" src="../components/icons/brain.png"/>
 			<h1 class="heading">BrainStormer</h1>
 			<p> An easy way to learn and share quizzes. <br> Make your own quiz now! </p>
-			<router-link to="/createQuiz" class="hero-btn">CREATE QUIZ </router-link>
+			<router-link to="/overviewQuiz" class="hero-btn">CREATE QUIZ </router-link>
 		</div>
 	</section>
 
diff --git a/FullstackProsjekt/src/frontend/src/components/create-quiz/CreateView.vue b/FullstackProsjekt/src/frontend/src/components/create-quiz/CreateView.vue
deleted file mode 100644
index 282d80c..0000000
--- a/FullstackProsjekt/src/frontend/src/components/create-quiz/CreateView.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-
-</script>
-
-
-<template>
-	<body>
-		<h1>
-			Hey create a quiz
-		</h1>
-	</body>
-
-</template>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/router/index.js b/FullstackProsjekt/src/frontend/src/router/index.js
index 2ac1df3..57ba835 100644
--- a/FullstackProsjekt/src/frontend/src/router/index.js
+++ b/FullstackProsjekt/src/frontend/src/router/index.js
@@ -37,7 +37,12 @@ const router = createRouter({
     {
       path: '/createQuiz',
       name: 'create Quiz',
-      component: () => import('../components/create-quiz/CreateView.vue')
+      component: () => import('../views/CreateQuizView.vue')
+    },
+    {
+      path: '/overviewQuiz',
+      name: 'overview Quiz',
+      component: () => import('../views/OverviewQuizView.vue')
     },
   ]
 })
diff --git a/FullstackProsjekt/src/frontend/src/views/CreateQuizView.vue b/FullstackProsjekt/src/frontend/src/views/CreateQuizView.vue
new file mode 100644
index 0000000..fe357ec
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/views/CreateQuizView.vue
@@ -0,0 +1,55 @@
+<script>
+
+</script>
+
+
+<template>
+	<body>
+	<h1>Create a question to your quiz</h1>
+	<div class="question-table">
+		<table class="table">
+			<thead>
+			<tr>
+				<th scope="col">#</th>
+				<th scope="col">Question</th>
+				<th scope="col">Action</th>
+			</tr>
+			</thead>
+			<tbody>
+			<tr>
+				<th scope="row">1</th>
+				<td>What is Vue?</td>
+				<td>
+					<button> View</button>
+					<button> Edit</button>
+					<button> Delete</button>
+				</td>
+			</tr>
+			<tr>
+				<th scope="row">2</th>
+				<td>Is this question 2?</td>
+				<td>
+					<button> View</button>
+					<button> Edit</button>
+					<button> Delete</button>
+				</td>
+			</tr>
+			</tbody>
+		</table>
+	</div>
+
+	<button> Create Question </button> <br>
+	<button> SAVE QUIZ </button>
+
+	</body>
+
+</template>
+
+<style>
+.question-table{
+	align-items: stretch;
+	width: 100%;
+	background-color: #b0b0b0;
+
+}
+</style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
index 4375e8a..e62d15e 100644
--- a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
@@ -5,7 +5,7 @@
 	<body class="dashboard">
 		<h1>Dashboard</h1>
 		<input class="searchBox" placeholder="Search for category..."> <br>
-		<router-link to="/createQuiz" class="hero-btn">CREATE QUIZ </router-link>
+		<router-link to="/overviewQuiz" class="hero-btn">CREATE QUIZ </router-link>
 		<div class="row">
 			<div class="course-col">
 				<h3>Quiz 1</h3>
@@ -87,8 +87,10 @@
 }
 
 #quizImg{
-	height: 250px;
+	height: 200px;
 	border-radius: 5px;
+	display: flex;
+
 }
 
 @media (max-width: 700px){
@@ -99,5 +101,6 @@
 	.row{
 		flex-direction: column;
 	}
+
 }
 </style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
new file mode 100644
index 0000000..caf4273
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
@@ -0,0 +1,77 @@
+<script>
+
+</script>
+
+
+<template>
+	<body>
+
+	<h1>Select your quiz</h1>
+	<div class="question-table">
+	<table class="table">
+		<thead>
+		<tr>
+			<th scope="col">#</th>
+			<th scope="col">Quiz</th>
+			<th scope="col">Action</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr>
+			<th scope="row">1</th>
+			<td>Vue Quiz</td>
+			<td>
+				<router-link to="/playQuiz" class="play-btn">Play</router-link>
+				<router-link to="/createQuiz" class="edit-btn">Edit</router-link>
+				<button class="delete-btn"> Delete</button>
+			</td>
+		</tr>
+		<tr>
+			<th scope="row">2</th>
+			<td>What is Java?</td>
+			<td>
+				<router-link to="/playQuiz" class="play-btn">Play</router-link>
+				<router-link to="/overviewQuiz" class="edit-btn">Edit</router-link>
+				<button class="delete-btn"> Delete</button>
+			</td>
+		</tr>
+		</tbody>
+	</table>
+	</div>
+	</body>
+
+</template>
+
+<style>
+.question-table{
+	width: 500px;
+	background-color: #b0b0b0;
+	padding: 10px;
+	margin: 20px;
+}
+
+.play-btn{
+	height: 25px;
+	padding: 5px;
+	text-decoration: none;
+	background-color: #242F40;
+	border-color: transparent;
+	color: #FFFFFF;
+}
+.edit-btn{
+	height: 25px;
+	padding: 5px;
+	text-decoration: none;
+	background-color: #CCA43B;
+	border-color: transparent;
+	color: #242F40;
+}
+.delete-btn{
+	height: 25px;
+	padding: 5px;
+	text-decoration: none;
+	background-color: #cc513b;
+	border-color: transparent;
+	color: #242F40;
+}
+</style>
\ No newline at end of file
-- 
GitLab


From 2f7a4feb4d60c074bbdaf213167c516adf861daf Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Sun, 31 Mar 2024 16:40:04 +0200
Subject: [PATCH 4/9] Created Modal for CreateQuizView.vue

---
 .../src/components/NewQuestionModel.vue       |  83 ++++++++++++
 .../src/frontend/src/views/CreateQuizView.vue | 123 +++++++++++++-----
 .../frontend/src/views/OverviewQuizView.vue   |  76 ++++++-----
 3 files changed, 211 insertions(+), 71 deletions(-)
 create mode 100644 FullstackProsjekt/src/frontend/src/components/NewQuestionModel.vue

diff --git a/FullstackProsjekt/src/frontend/src/components/NewQuestionModel.vue b/FullstackProsjekt/src/frontend/src/components/NewQuestionModel.vue
new file mode 100644
index 0000000..0c94841
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/components/NewQuestionModel.vue
@@ -0,0 +1,83 @@
+<script setup>
+const props = defineProps({
+	show: Boolean
+})
+</script>
+
+<template>
+	<Transition name="modal">
+		<div v-if="show" class="modal-mask">
+			<div class="modal-container">
+				<div class="modal-header">
+					<slot name="header">default header</slot>
+				</div>
+
+				<div class="modal-body">
+					<slot name="body">default body</slot>
+				</div>
+
+				<div class="modal-footer">
+					<slot name="footer">
+						default footer
+						<button
+								class="modal-default-button"
+								@click="$emit('close')"
+						>OK</button>
+					</slot>
+				</div>
+			</div>
+		</div>
+	</Transition>
+</template>
+
+<style>
+.modal-mask {
+	position: fixed;
+	z-index: 9998;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.5);
+	display: flex;
+	transition: opacity 0.3s ease;
+}
+
+.modal-container {
+	width: 300px;
+	margin: auto;
+	padding: 20px 30px;
+	background-color: #fff;
+	border-radius: 2px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+	transition: all 0.3s ease;
+}
+
+.modal-header h3 {
+	margin-top: 0;
+	color: rgba(4, 20, 30, 0.8);
+}
+
+.modal-body {
+	margin: 20px 0;
+}
+
+.modal-default-button {
+	float: right;
+}
+
+
+.modal-enter-from {
+	opacity: 0;
+}
+
+.modal-leave-to {
+	opacity: 0;
+}
+
+.modal-enter-from .modal-container,
+.modal-leave-to .modal-container {
+	-webkit-transform: scale(1.1);
+	transform: scale(1.1);
+}
+</style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/views/CreateQuizView.vue b/FullstackProsjekt/src/frontend/src/views/CreateQuizView.vue
index fe357ec..782ab25 100644
--- a/FullstackProsjekt/src/frontend/src/views/CreateQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/CreateQuizView.vue
@@ -1,55 +1,106 @@
-<script>
+<script setup>
+import NewQuestionModel from "@/components/NewQuestionModel.vue";
+import {ref} from "vue";
+
+const showNewQuestionModal=ref(false)
+
+function createQuestion() {
+	showNewQuestionModal.value = true;
+}
+function destroyModal(){
+	showNewQuestionModal.value = false;
+}
 
 </script>
 
 
 <template>
 	<body>
-	<h1>Create a question to your quiz</h1>
-	<div class="question-table">
-		<table class="table">
-			<thead>
-			<tr>
-				<th scope="col">#</th>
-				<th scope="col">Question</th>
-				<th scope="col">Action</th>
-			</tr>
-			</thead>
-			<tbody>
-			<tr>
-				<th scope="row">1</th>
-				<td>What is Vue?</td>
-				<td>
-					<button> View</button>
-					<button> Edit</button>
-					<button> Delete</button>
-				</td>
-			</tr>
-			<tr>
-				<th scope="row">2</th>
-				<td>Is this question 2?</td>
-				<td>
-					<button> View</button>
-					<button> Edit</button>
-					<button> Delete</button>
-				</td>
-			</tr>
-			</tbody>
-		</table>
-	</div>
-
-	<button> Create Question </button> <br>
-	<button> SAVE QUIZ </button>
+		<div class="createQuestion-page">
+			<h1>Create a question to your quiz</h1>
+			<div class="question-table">
+				<table class="table">
+					<thead>
+					<tr>
+						<th scope="col">#</th>
+						<th scope="col">Question</th>
+						<th scope="col">Action</th>
+					</tr>
+					</thead>
+					<tbody>
+					<tr>
+						<th scope="row">1</th>
+						<td>What is Vue?</td>
+						<td>
+							<button class="play-btn">View</button>
+							<button class="edit-btn">Edit</button>
+							<button class="delete-btn"> Delete</button>
+						</td>
+					</tr>
+
+					</tbody>
+				</table>
+
+				<Teleport to="body">
+					<NewQuestionModel :show="showNewQuestionModal" @close="destroyModal">
+
+					</NewQuestionModel>
+				</Teleport>
+
+			</div>
 
+			<button @click="createQuestion" class="create-question-btn"> Create Question </button> <br>
+			<button class="save-question-btn"> SAVE QUIZ </button>
+		</div>
 	</body>
 
 </template>
 
 <style>
+.createQuestion-page{
+	padding: 20px;
+}
 .question-table{
 	align-items: stretch;
 	width: 100%;
 	background-color: #b0b0b0;
+}
+
+.play-btn{
+	height: 25px;
+	padding: 5px;
+	text-decoration: none;
+	background-color: #242F40;
+	border-color: transparent;
+	color: #FFFFFF;
+}
+.edit-btn{
+	height: 25px;
+	padding: 5px;
+	text-decoration: none;
+	background-color: #CCA43B;
+	border-color: transparent;
+	color: #242F40;
+}
+.delete-btn{
+	height: 25px;
+	padding: 5px;
+	text-decoration: none;
+	background-color: #cc513b;
+	border-color: transparent;
+	color: #242F40;
+}
+.create-question-btn{
+	padding: 20px;
+	margin: 10px;
+	background-color: #242F40;
+	color: #F2F2F2;
+}
+.save-question-btn{
+	padding: 20px;
+	margin: 10px;
+	background-color: #CCA43B;
 
 }
+
 </style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
index caf4273..73729a0 100644
--- a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
@@ -5,49 +5,55 @@
 
 <template>
 	<body>
+		<div class="overViewQuestion-page">
+		<h1>Your quizzes</h1>
+		<p> Select a quiz fo your creation to either play, edit or delete</p>
+			<div class="question-table">
+				<table class="table">
+					<thead>
+					<tr>
+						<th scope="col">#</th>
+						<th scope="col">Quiz</th>
+						<th scope="col">Action</th>
+					</tr>
+					</thead>
+					<tbody>
+					<tr>
+						<th scope="row">1</th>
+						<td>Vue Quiz</td>
+						<td>
+							<router-link to="/playQuiz" class="play-btn">Play</router-link>
+							<router-link to="/createQuiz" class="edit-btn">Edit</router-link>
+							<button class="delete-btn"> Delete</button>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row">2</th>
+						<td>What is Java?</td>
+						<td>
+							<router-link to="/playQuiz" class="play-btn">Play</router-link>
+							<router-link to="/overviewQuiz" class="edit-btn">Edit</router-link>
+							<button class="delete-btn"> Delete</button>
+						</td>
+					</tr>
+
+					</tbody>
+				</table>
+			</div>
+		</div>
 
-	<h1>Select your quiz</h1>
-	<div class="question-table">
-	<table class="table">
-		<thead>
-		<tr>
-			<th scope="col">#</th>
-			<th scope="col">Quiz</th>
-			<th scope="col">Action</th>
-		</tr>
-		</thead>
-		<tbody>
-		<tr>
-			<th scope="row">1</th>
-			<td>Vue Quiz</td>
-			<td>
-				<router-link to="/playQuiz" class="play-btn">Play</router-link>
-				<router-link to="/createQuiz" class="edit-btn">Edit</router-link>
-				<button class="delete-btn"> Delete</button>
-			</td>
-		</tr>
-		<tr>
-			<th scope="row">2</th>
-			<td>What is Java?</td>
-			<td>
-				<router-link to="/playQuiz" class="play-btn">Play</router-link>
-				<router-link to="/overviewQuiz" class="edit-btn">Edit</router-link>
-				<button class="delete-btn"> Delete</button>
-			</td>
-		</tr>
-		</tbody>
-	</table>
-	</div>
 	</body>
 
 </template>
 
 <style>
+.overViewQuestion-page{
+	padding: 20px;
+}
+
 .question-table{
-	width: 500px;
-	background-color: #b0b0b0;
+	width: 450px;
 	padding: 10px;
-	margin: 20px;
 }
 
 .play-btn{
-- 
GitLab


From 9eb3d4cbc034d12e241ec6ec49c2cd254ff29960 Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Sun, 31 Mar 2024 18:02:25 +0200
Subject: [PATCH 5/9] Layout to Module to CreateQuizView.vue and adding answer
 functionality

---
 FullstackProsjekt/src/frontend/src/App.vue    |   4 +-
 .../src/frontend/src/assets/main.css          |  67 ++++++++
 .../{ => shared}/NewQuestionModel.vue         |  14 +-
 .../{ => shared}/sidebar/Sidebar.vue          |   6 +-
 .../{ => shared}/sidebar/SidebarLink.vue      |   2 +-
 .../components/{ => shared}/sidebar/state.js  |   0
 .../src/frontend/src/views/CreateQuizView.vue | 148 ++++++++++++------
 .../frontend/src/views/OverviewQuizView.vue   |  32 +---
 8 files changed, 180 insertions(+), 93 deletions(-)
 rename FullstackProsjekt/src/frontend/src/components/{ => shared}/NewQuestionModel.vue (90%)
 rename FullstackProsjekt/src/frontend/src/components/{ => shared}/sidebar/Sidebar.vue (88%)
 rename FullstackProsjekt/src/frontend/src/components/{ => shared}/sidebar/SidebarLink.vue (96%)
 rename FullstackProsjekt/src/frontend/src/components/{ => shared}/sidebar/state.js (100%)

diff --git a/FullstackProsjekt/src/frontend/src/App.vue b/FullstackProsjekt/src/frontend/src/App.vue
index 25bbd9a..d1c1942 100644
--- a/FullstackProsjekt/src/frontend/src/App.vue
+++ b/FullstackProsjekt/src/frontend/src/App.vue
@@ -1,7 +1,7 @@
 <script>
 import { RouterLink, RouterView } from 'vue-router'
-import Sidebar from "@/components/sidebar/Sidebar.vue"
-import { sidebarWidth}  from "@/components/sidebar/state.js";
+import Sidebar from "@/components/shared/sidebar/Sidebar.vue"
+import { sidebarWidth}  from "@/components/shared/sidebar/state.js";
 export default {
 	components:{Sidebar},
 	setup(){
diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index 70d5346..b480eb3 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -3,3 +3,70 @@ body {
     margin: 0 0 0 27px;
     background-color: #F2F2F2;
 }
+.table{
+    width: 450px;
+    padding: 10px;
+    background-color: #dcdcdc;
+}
+
+.play-btn{
+    height: 25px;
+    padding: 5px;
+    text-decoration: none;
+    background-color: #242F40;
+    border-color: transparent;
+    color: #FFFFFF;
+}
+.edit-btn{
+    height: 25px;
+    padding: 5px;
+    text-decoration: none;
+    background-color: #CCA43B;
+    border-color: transparent;
+    color: #242F40;
+}
+.delete-btn{
+    height: 25px;
+    padding: 5px;
+    text-decoration: none;
+    background-color: #cc513b;
+    border-color: transparent;
+    color: #242F40;
+}
+.create-question-btn{
+    padding: 20px;
+    margin: 10px;
+    background-color: #242F40;
+    color: #F2F2F2;
+}
+.save-question-btn{
+    padding: 20px;
+    margin: 10px;
+    background-color: #CCA43B;
+}
+
+.add-Btn{
+    background-color: #242F40;
+    color: white;
+    font-size: 16px;
+    padding: 6px;
+    border-radius: 15px;
+    border-color: transparent;
+}
+.close-btn{
+    background-color: #cc513b;
+    padding: 10px;
+    border-radius: 5px;
+    border-color: transparent;
+}
+
+.submit-btn{
+    background-color: #D9C590;
+    padding: 10px;
+    border-radius: 5px;
+    border-color: transparent;
+}
+
+
+
+
diff --git a/FullstackProsjekt/src/frontend/src/components/NewQuestionModel.vue b/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
similarity index 90%
rename from FullstackProsjekt/src/frontend/src/components/NewQuestionModel.vue
rename to FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
index 0c94841..f04f8fd 100644
--- a/FullstackProsjekt/src/frontend/src/components/NewQuestionModel.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
@@ -44,7 +44,7 @@ const props = defineProps({
 }
 
 .modal-container {
-	width: 300px;
+	width: 500px;
 	margin: auto;
 	padding: 20px 30px;
 	background-color: #fff;
@@ -53,9 +53,9 @@ const props = defineProps({
 	transition: all 0.3s ease;
 }
 
-.modal-header h3 {
+.modal-header h5 {
 	margin-top: 0;
-	color: rgba(4, 20, 30, 0.8);
+	color: #363636;
 }
 
 .modal-body {
@@ -67,14 +67,6 @@ const props = defineProps({
 }
 
 
-.modal-enter-from {
-	opacity: 0;
-}
-
-.modal-leave-to {
-	opacity: 0;
-}
-
 .modal-enter-from .modal-container,
 .modal-leave-to .modal-container {
 	-webkit-transform: scale(1.1);
diff --git a/FullstackProsjekt/src/frontend/src/components/sidebar/Sidebar.vue b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
similarity index 88%
rename from FullstackProsjekt/src/frontend/src/components/sidebar/Sidebar.vue
rename to FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
index 4952a22..a6a6af3 100644
--- a/FullstackProsjekt/src/frontend/src/components/sidebar/Sidebar.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
@@ -1,6 +1,6 @@
 <script>
-import {collapsed, toggleSideBar, sidebarWidth} from "@/components/sidebar/state.js";
-import SidebarLink from "@/components/sidebar/SidebarLink.vue";
+import {collapsed, toggleSideBar, sidebarWidth} from "@/components/shared/sidebar/state.js";
+import SidebarLink from "@/components/shared/sidebar/SidebarLink.vue";
 
 export default {
 	components: {SidebarLink},
@@ -30,7 +30,7 @@ export default {
 		<SidebarLink to="/login" icon="fas fa-image">Login</SidebarLink>
 
 		<span class="collapse-icon" :class="{'rotate-180': collapsed}" @click="toggleSideBar">
-			<button class="iconButton"> <img id="icon" src="../icons/sidebar-arrow.png"/> </button>
+			<button class="iconButton"> <img id="icon" src="../../icons/sidebar-arrow.png"/> </button>
 		</span>
 	</div>
 </template>
diff --git a/FullstackProsjekt/src/frontend/src/components/sidebar/SidebarLink.vue b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/SidebarLink.vue
similarity index 96%
rename from FullstackProsjekt/src/frontend/src/components/sidebar/SidebarLink.vue
rename to FullstackProsjekt/src/frontend/src/components/shared/sidebar/SidebarLink.vue
index 93a77cf..8555eca 100644
--- a/FullstackProsjekt/src/frontend/src/components/sidebar/SidebarLink.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/SidebarLink.vue
@@ -1,7 +1,7 @@
 <script>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { collapsed } from './state'
+import { collapsed } from './state.js'
 
 export default {
 	props: {
diff --git a/FullstackProsjekt/src/frontend/src/components/sidebar/state.js b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/state.js
similarity index 100%
rename from FullstackProsjekt/src/frontend/src/components/sidebar/state.js
rename to FullstackProsjekt/src/frontend/src/components/shared/sidebar/state.js
diff --git a/FullstackProsjekt/src/frontend/src/views/CreateQuizView.vue b/FullstackProsjekt/src/frontend/src/views/CreateQuizView.vue
index 782ab25..8853bfc 100644
--- a/FullstackProsjekt/src/frontend/src/views/CreateQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/CreateQuizView.vue
@@ -1,15 +1,71 @@
 <script setup>
-import NewQuestionModel from "@/components/NewQuestionModel.vue";
+import NewQuestionModel from "@/components/shared/NewQuestionModel.vue";
 import {ref} from "vue";
+import router from "@/router/index.js";
+
+const createdQuestion = ref(null);
+const newAnswers = ref([]);
+const showNewQuestionModal = ref(false);
+const selectedAnswer = ref(null);
+let answerId = 1;
 
-const showNewQuestionModal=ref(false)
 
 function createQuestion() {
 	showNewQuestionModal.value = true;
 }
-function destroyModal(){
+function destroyModal() {
 	showNewQuestionModal.value = false;
 }
+function addNewAnswers() {
+	const newAnswer = {
+		id: answerId++,
+		answer: '',
+		correct_answer: 0
+	}
+	newAnswers.value.push(newAnswer)
+}
+function handleRadioToggle(Id) {
+	selectedAnswer.value = Id
+	newAnswers.value.forEach(answer => {
+		if(answer.id === Id) {
+			answer.correct_answer = 1
+		} else {
+			answer.correct_answer = 0
+		}
+	})
+}
+
+function validateAnswers() {
+	for(const answer of newAnswers.value) {
+		if(answer.answer.trim()==='') {
+			return false
+		}
+	}
+	return true
+}
+function answerCount() {
+	if(newAnswers.length < 2) {
+		alert('Two answers required to submit')
+	} else if(newAnswers.length === 2) {
+		return true
+	}
+}
+
+function submitQuestion() {
+	if(!createdQuestion.value){
+		alert('Question cannot be empty');
+		return false
+	}
+	if(!validateAnswers()&& !answerCount()){
+		alert('Fill all inputs before submitting')
+		return false
+	}
+	//Supposed to send request to backend with a finnished Question with id and such
+	router.post('/questions',{
+		question:createdQuestion.value,
+		answers:newAnswers.value
+	})
+}
 
 </script>
 
@@ -29,7 +85,7 @@ function destroyModal(){
 					</thead>
 					<tbody>
 					<tr>
-						<th scope="row">1</th>
+						<th scope="row">{answer.id}</th>
 						<td>What is Vue?</td>
 						<td>
 							<button class="play-btn">View</button>
@@ -43,14 +99,53 @@ function destroyModal(){
 
 				<Teleport to="body">
 					<NewQuestionModel :show="showNewQuestionModal" @close="destroyModal">
+						<template #header>
+							<h5> Add New Question</h5>
+						</template>
+
+						<template #body>
+							<form>
+								<div class="mb-3">
+									<label for="question" class="form-label">Question</label> <br>
+									<input type="text" v-model="createdQuestion" class="form-control" id="questionInput">
+								</div>
+								<table class="table">
+									<thead>
+									<tr>
+										<th scope="col">#</th>
+										<th scope="col">Answer</th>
+										<th scope="col">Correct ?</th>
+									</tr>
+									</thead>
+									<tbody>
+									<tr v-for="(answer, index) in newAnswers">
+										<th scope="row">1</th>
+										<td>
+											<input type="text" v-model="answer.answer" id="questionInput">
+										</td>
+										<td>
+											<input :checked="answer.correct_answer === 1" class="form-check-input" :value="answer.id" @change="handleRadioToggle(answer.id)"  type="radio">
+										</td>
+									</tr>
+									</tbody>
+								</table>
+							</form>
+						</template>
 
+						<template #footer>
+							<button @click="addNewAnswers" class="add-Btn" v-if="newAnswers.length<4" >+</button>
+							<button @click="destroyModal" class="close-btn"> Close</button>
+							<button v-if="newAnswers.length>=2" @click="submitQuestion" class="submit-btn">Submit</button>
+						</template>
 					</NewQuestionModel>
 				</Teleport>
 
 			</div>
 
-			<button @click="createQuestion" class="create-question-btn"> Create Question </button> <br>
-			<button class="save-question-btn"> SAVE QUIZ </button>
+			<div>
+				<button @click="createQuestion" class="create-question-btn"> Create Question </button> <br>
+				<button class="save-question-btn"> SAVE QUIZ </button>
+			</div>
 		</div>
 	</body>
 
@@ -60,47 +155,10 @@ function destroyModal(){
 .createQuestion-page{
 	padding: 20px;
 }
-.question-table{
-	align-items: stretch;
-	width: 100%;
-	background-color: #b0b0b0;
-}
 
-.play-btn{
-	height: 25px;
-	padding: 5px;
-	text-decoration: none;
-	background-color: #242F40;
-	border-color: transparent;
-	color: #FFFFFF;
-}
-.edit-btn{
+input{
 	height: 25px;
-	padding: 5px;
-	text-decoration: none;
-	background-color: #CCA43B;
-	border-color: transparent;
-	color: #242F40;
-}
-.delete-btn{
-	height: 25px;
-	padding: 5px;
-	text-decoration: none;
-	background-color: #cc513b;
-	border-color: transparent;
-	color: #242F40;
-}
-.create-question-btn{
-	padding: 20px;
-	margin: 10px;
-	background-color: #242F40;
-	color: #F2F2F2;
-}
-.save-question-btn{
-	padding: 20px;
-	margin: 10px;
-	background-color: #CCA43B;
-
+	width: 100%;
 }
 
 </style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
index 73729a0..8d70907 100644
--- a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
@@ -8,7 +8,7 @@
 		<div class="overViewQuestion-page">
 		<h1>Your quizzes</h1>
 		<p> Select a quiz fo your creation to either play, edit or delete</p>
-			<div class="question-table">
+			<div class="table">
 				<table class="table">
 					<thead>
 					<tr>
@@ -50,34 +50,4 @@
 .overViewQuestion-page{
 	padding: 20px;
 }
-
-.question-table{
-	width: 450px;
-	padding: 10px;
-}
-
-.play-btn{
-	height: 25px;
-	padding: 5px;
-	text-decoration: none;
-	background-color: #242F40;
-	border-color: transparent;
-	color: #FFFFFF;
-}
-.edit-btn{
-	height: 25px;
-	padding: 5px;
-	text-decoration: none;
-	background-color: #CCA43B;
-	border-color: transparent;
-	color: #242F40;
-}
-.delete-btn{
-	height: 25px;
-	padding: 5px;
-	text-decoration: none;
-	background-color: #cc513b;
-	border-color: transparent;
-	color: #242F40;
-}
 </style>
\ No newline at end of file
-- 
GitLab


From f378b823f8dd291fcf365d59254b3b873301ce41 Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Mon, 1 Apr 2024 12:02:07 +0200
Subject: [PATCH 6/9] Create a simple go back routerlink in
 OverviewQuizView.vue and CreateQuizView.vue

---
 .../src/frontend/src/assets/main.css          | 40 +++++++++++--------
 .../src/frontend/src/router/index.js          |  2 +-
 .../{CreateQuizView.vue => EditQuizView.vue}  | 13 +++---
 .../frontend/src/views/OverviewQuizView.vue   |  1 +
 4 files changed, 34 insertions(+), 22 deletions(-)
 rename FullstackProsjekt/src/frontend/src/views/{CreateQuizView.vue => EditQuizView.vue} (92%)

diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index b480eb3..5a80e12 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -33,40 +33,48 @@ body {
     border-color: transparent;
     color: #242F40;
 }
-.create-question-btn{
-    padding: 20px;
-    margin: 10px;
-    background-color: #242F40;
-    color: #F2F2F2;
-}
-.save-question-btn{
-    padding: 20px;
-    margin: 10px;
-    background-color: #CCA43B;
-}
-
-.add-Btn{
+.add-Btn {
     background-color: #242F40;
     color: white;
     font-size: 16px;
-    padding: 6px;
-    border-radius: 15px;
+    padding: 10px;
+    border-radius: 20px;
     border-color: transparent;
+    margin-top: 10px;
 }
+.save-Btn{
+    background-color: #CCA43B;
+    font-size: 24px;
+    padding: 15px;
+    border-radius: 20px;
+    border-color: transparent;
+    margin-top: 10px;
+}
+
 .close-btn{
     background-color: #cc513b;
     padding: 10px;
     border-radius: 5px;
     border-color: transparent;
+    margin-left: 10px;
+
 }
 
 .submit-btn{
-    background-color: #D9C590;
+    background-color: #CCA43B;
+    font-size: 16px;
     padding: 10px;
     border-radius: 5px;
     border-color: transparent;
+    margin-left: 130px;
 }
 
 
 
 
+
+
+
+
+
+
diff --git a/FullstackProsjekt/src/frontend/src/router/index.js b/FullstackProsjekt/src/frontend/src/router/index.js
index 57ba835..dfd18b6 100644
--- a/FullstackProsjekt/src/frontend/src/router/index.js
+++ b/FullstackProsjekt/src/frontend/src/router/index.js
@@ -37,7 +37,7 @@ const router = createRouter({
     {
       path: '/createQuiz',
       name: 'create Quiz',
-      component: () => import('../views/CreateQuizView.vue')
+      component: () => import('../views/EditQuizView.vue')
     },
     {
       path: '/overviewQuiz',
diff --git a/FullstackProsjekt/src/frontend/src/views/CreateQuizView.vue b/FullstackProsjekt/src/frontend/src/views/EditQuizView.vue
similarity index 92%
rename from FullstackProsjekt/src/frontend/src/views/CreateQuizView.vue
rename to FullstackProsjekt/src/frontend/src/views/EditQuizView.vue
index 8853bfc..064b4fd 100644
--- a/FullstackProsjekt/src/frontend/src/views/CreateQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/EditQuizView.vue
@@ -56,7 +56,7 @@ function submitQuestion() {
 		alert('Question cannot be empty');
 		return false
 	}
-	if(!validateAnswers()&& !answerCount()){
+	if(!validateAnswers() && !answerCount()){
 		alert('Fill all inputs before submitting')
 		return false
 	}
@@ -73,6 +73,7 @@ function submitQuestion() {
 <template>
 	<body>
 		<div class="createQuestion-page">
+			<router-link to="/overviewQuiz"> <-  </router-link>
 			<h1>Create a question to your quiz</h1>
 			<div class="question-table">
 				<table class="table">
@@ -85,7 +86,7 @@ function submitQuestion() {
 					</thead>
 					<tbody>
 					<tr>
-						<th scope="row">{answer.id}</th>
+						<th scope="row">1</th>
 						<td>What is Vue?</td>
 						<td>
 							<button class="play-btn">View</button>
@@ -99,6 +100,7 @@ function submitQuestion() {
 
 				<Teleport to="body">
 					<NewQuestionModel :show="showNewQuestionModal" @close="destroyModal">
+
 						<template #header>
 							<h5> Add New Question</h5>
 						</template>
@@ -119,7 +121,7 @@ function submitQuestion() {
 									</thead>
 									<tbody>
 									<tr v-for="(answer, index) in newAnswers">
-										<th scope="row">1</th>
+										<th scope="row">{{answer.id}}</th>
 										<td>
 											<input type="text" v-model="answer.answer" id="questionInput">
 										</td>
@@ -137,14 +139,15 @@ function submitQuestion() {
 							<button @click="destroyModal" class="close-btn"> Close</button>
 							<button v-if="newAnswers.length>=2" @click="submitQuestion" class="submit-btn">Submit</button>
 						</template>
+
 					</NewQuestionModel>
 				</Teleport>
 
 			</div>
 
 			<div>
-				<button @click="createQuestion" class="create-question-btn"> Create Question </button> <br>
-				<button class="save-question-btn"> SAVE QUIZ </button>
+				<button @click="createQuestion" class="add-Btn"> Add Question </button> <br>
+				<button class="save-Btn"> SAVE QUIZ </button>
 			</div>
 		</div>
 	</body>
diff --git a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
index 8d70907..9ea7ef2 100644
--- a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
@@ -6,6 +6,7 @@
 <template>
 	<body>
 		<div class="overViewQuestion-page">
+			<router-link to="/dashboard"> <- </router-link>
 		<h1>Your quizzes</h1>
 		<p> Select a quiz fo your creation to either play, edit or delete</p>
 			<div class="table">
-- 
GitLab


From 6b48bc743e43d4c5292156ce99c3292118251002 Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Mon, 1 Apr 2024 12:15:40 +0200
Subject: [PATCH 7/9] Added category to quizzes menu

---
 .../src/frontend/src/router/index.js          |  5 ++
 .../frontend/src/views/OverviewQuizView.vue   | 32 +++++++++++--
 .../src/frontend/src/views/PlayQuizView.vue   | 47 +++++++++++++++++++
 3 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue

diff --git a/FullstackProsjekt/src/frontend/src/router/index.js b/FullstackProsjekt/src/frontend/src/router/index.js
index dfd18b6..41c86ae 100644
--- a/FullstackProsjekt/src/frontend/src/router/index.js
+++ b/FullstackProsjekt/src/frontend/src/router/index.js
@@ -44,6 +44,11 @@ const router = createRouter({
       name: 'overview Quiz',
       component: () => import('../views/OverviewQuizView.vue')
     },
+    {
+      path: '/play-quiz',
+      name: 'playQuiz',
+      component: () => import('../views/PlayQuizView.vue')
+    },
   ]
 })
 
diff --git a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
index 9ea7ef2..25c153e 100644
--- a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
@@ -16,6 +16,7 @@
 						<th scope="col">#</th>
 						<th scope="col">Quiz</th>
 						<th scope="col">Action</th>
+						<th scope="col">Category </th>
 					</tr>
 					</thead>
 					<tbody>
@@ -23,21 +24,46 @@
 						<th scope="row">1</th>
 						<td>Vue Quiz</td>
 						<td>
-							<router-link to="/playQuiz" class="play-btn">Play</router-link>
+							<router-link to="/play-quiz" class="play-btn">Play</router-link>
 							<router-link to="/createQuiz" class="edit-btn">Edit</router-link>
 							<button class="delete-btn"> Delete</button>
 						</td>
+						<th>
+							<div id="form-box">
+								<form>
+									<select id="language">
+										<option value="IT" selected="selected">IT</option>
+										<option value="Nature">Nature</option>
+										<option value="Chemistry">Chemistry</option>
+										<option value="Religion">Religion</option>
+										<option value="Other">Other</option>
+									</select>
+								</form>
+							</div>
+						</th>
 					</tr>
 					<tr>
 						<th scope="row">2</th>
 						<td>What is Java?</td>
 						<td>
-							<router-link to="/playQuiz" class="play-btn">Play</router-link>
+							<router-link to="/play-quiz" class="play-btn">Play</router-link>
 							<router-link to="/overviewQuiz" class="edit-btn">Edit</router-link>
 							<button class="delete-btn"> Delete</button>
 						</td>
+						<th>
+							<div id="form-box">
+								<form>
+									<select id="language">
+										<option value="IT" selected="selected">IT</option>
+										<option value="Nature">Nature</option>
+										<option value="Chemistry">Chemistry</option>
+										<option value="Religion">Religion</option>
+										<option value="Other">Other</option>
+									</select>
+								</form>
+							</div>
+						</th>
 					</tr>
-
 					</tbody>
 				</table>
 			</div>
diff --git a/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue b/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue
new file mode 100644
index 0000000..6a47474
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue
@@ -0,0 +1,47 @@
+<script >
+</script>
+
+
+<template>
+
+	<body>
+
+	<div class="quiz">
+
+		<div id="info">
+			<div id="score">Score: 0</div>
+			<div id="ques-left">Question:1/20</div>
+		</div>
+		<div id="ques-view">
+
+		</div>
+		<div class="question">
+			<h1>Question</h1>
+		</div>
+
+		<div class="choice">
+			<div class="options"><input type="radio" name="options" value="option1" id="opt0"><label for="opt0" id="lb0">Option1</label></div>
+			<div class="options"><input type="radio" name="options" value="option2" id="opt1"><label for="opt1" id="lb1">Option2</label></div>
+			<div class="options"><input type="radio" name="options" value="option3" checked="checked" id="opt2"><label for="opt2" id="lb2">Option3</label></div>
+			<div class="options"><input type="radio" name="options" value="option4" id="opt3"><label for="opt3" id="lb3">Option4</label></div>
+		</div>
+
+		<div class="ans-btn">
+			<button type="button" class="submit-answer">Submit Answer</button>
+			<a href="#display-final-score" type="button" class="view-results">View Results</a>
+		</div>
+
+	</div>
+
+	<div class="final-result">
+		<h1>The Quiz is Over</h1>
+		<div class="solved-ques-no">You Solved 10 questions of HTML</div>
+		<div class="right-wrong">3 Were Right and 4 were Wrong</div>
+		<div id="display-final-score">Your Final Score is: 35</div>
+		<div class="remark">Remark: Satisfactory, Keep trying.</div>
+		<button id="restart">Restart Quiz</button>
+	</div>
+
+	</body>
+
+</template>
-- 
GitLab


From 2ed0d409b813ed4753284883debdaafa66ed8647 Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Mon, 1 Apr 2024 12:27:06 +0200
Subject: [PATCH 8/9] Create basic layout for PlayQuizView.vue

---
 .../src/frontend/src/views/PlayQuizView.vue   | 166 +++++++++++++++++-
 1 file changed, 163 insertions(+), 3 deletions(-)

diff --git a/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue b/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue
index 6a47474..0a97f67 100644
--- a/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue
@@ -35,13 +35,173 @@
 
 	<div class="final-result">
 		<h1>The Quiz is Over</h1>
-		<div class="solved-ques-no">You Solved 10 questions of HTML</div>
-		<div class="right-wrong">3 Were Right and 4 were Wrong</div>
+		<div class="solved-ques-no">You Solved 10 questions of {Name of quiz here}</div>
+		<div class="right-wrong">3/4 were right</div>
 		<div id="display-final-score">Your Final Score is: 35</div>
-		<div class="remark">Remark: Satisfactory, Keep trying.</div>
+		<div class="remark">Remark: Satisfactory, Keep trying!</div>
 		<button id="restart">Restart Quiz</button>
 	</div>
 
 	</body>
 
 </template>
+
+<style>
+.quiz{
+	text-align: center;
+	margin-top: 20px;
+	height: 100vh;
+}
+
+#info{
+	height:25px;
+}
+
+#score{
+	width:50%;
+	float:left;
+	font-size: 25px;
+}
+
+#ques-left{
+	width:50%;
+	float:left;
+	font-size:25px;
+
+}
+
+#ques-view{
+	height: 35px;
+	margin-top: 10px;
+	padding: 2px;
+}
+.question{
+	font-family: 'Roboto Slab', sans-serif;
+	letter-spacing: .13em;
+}
+
+.choice{
+	padding: 3%;
+}
+
+.options{
+	display:block;
+	font-size: 25px;
+	margin-top: 30px;
+	text-align: left;
+}
+
+input[type=radio] {
+	border: 5px solid white;
+	width: 20px;
+	height: 1.3em;
+	float: left;
+}
+
+.ans-btn{
+	padding: 2%;
+}
+
+.submit-answer{
+	border: 2px solid #CCA43B;
+	padding: 15px;
+	border-radius: 20px;
+	font-family: monospace;
+	transition: background-color 0.3s,border 0.2s, color 0.2s;
+}
+
+.submit-answer:hover{
+
+	background-color: #CCA43B;
+	padding: 16px;
+	color: #fff;
+	cursor: pointer;
+	border-radius: 20px;
+}
+
+.view-results{
+	text-decoration: none;
+	color: black;
+	border: 2px solid #CCA43B;
+	padding: 15px;
+	border-radius: 20px;
+	font-family: monospace;
+	transition: background-color 0.3s,border 0.2s, color 0.2s;
+}
+
+.view-results:hover{
+	background-color: #CCA43B;
+	padding: 16px;
+	color: #fff;
+	cursor: pointer;
+	border-radius: 20px;
+}
+
+/*Final Results*/
+.final-result{
+	text-align: center;
+	padding: 10px;
+	font-size: 1.5em;
+	height: 100vh;
+}
+.solved-ques-no{
+	padding: 10px;
+}
+
+.right-wrong{
+	padding: 10px;
+}
+
+#display-final-score{
+	padding: 5%;
+}
+.remark{
+	padding: 5%
+}
+#restart{
+	background-color:#CCA43B;
+	margin-left: 30px;
+	border: 2px solid #CCA43B;
+	padding: 15px;
+	border-radius: 20px;
+	font-size: 80%;
+	transition: background-color 0.3s,border 0.2s, color 0.2s;
+}
+
+#restart:hover{
+	background-color: #CCA43B;
+	color:#fff;
+	cursor: pointer;
+	/*    width: 120px;*/
+	font-size: 90%;
+}
+
+
+@media only screen and (max-width: 1250px) {
+	.options{
+		margin-left: 8%
+	}
+}
+
+@media only screen and (max-width: 850px) {
+	.options{
+		margin-left: 4%;
+	}
+}
+
+@media only screen and (max-width: 650px) {
+	.options{
+		display: block;
+		margin-top: 3%;
+
+	}
+}
+
+@media only screen and (max-width: 550px) {
+	.options{
+		margin-top: 3%;
+
+	}
+
+}
+</style>
-- 
GitLab


From 628c0915fa43f5a124d02b703d9d80ccdac61425 Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Mon, 1 Apr 2024 12:32:09 +0200
Subject: [PATCH 9/9] Change font-family

---
 FullstackProsjekt/src/frontend/src/assets/main.css        | 2 +-
 FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue | 8 +++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index 5a80e12..18ef9a8 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -1,5 +1,5 @@
 body {
-    font-family: Arial, sans-serif;
+    font-family: monospace;
     margin: 0 0 0 27px;
     background-color: #F2F2F2;
 }
diff --git a/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue b/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue
index 0a97f67..2ec7c47 100644
--- a/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue
@@ -67,7 +67,6 @@
 	width:50%;
 	float:left;
 	font-size:25px;
-
 }
 
 #ques-view{
@@ -76,7 +75,6 @@
 	padding: 2px;
 }
 .question{
-	font-family: 'Roboto Slab', sans-serif;
 	letter-spacing: .13em;
 }
 
@@ -106,12 +104,12 @@ input[type=radio] {
 	border: 2px solid #CCA43B;
 	padding: 15px;
 	border-radius: 20px;
-	font-family: monospace;
 	transition: background-color 0.3s,border 0.2s, color 0.2s;
+	margin-right: 10px;
+	font-family: monospace;
 }
 
 .submit-answer:hover{
-
 	background-color: #CCA43B;
 	padding: 16px;
 	color: #fff;
@@ -125,10 +123,10 @@ input[type=radio] {
 	border: 2px solid #CCA43B;
 	padding: 15px;
 	border-radius: 20px;
-	font-family: monospace;
 	transition: background-color 0.3s,border 0.2s, color 0.2s;
 }
 
+
 .view-results:hover{
 	background-color: #CCA43B;
 	padding: 16px;
-- 
GitLab