From a11ec96358081fa59f1f6be564d26308dfed3f44 Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Wed, 3 Apr 2024 11:57:03 +0200
Subject: [PATCH] Created more intuitive buttons leading up to the
OverviewQuizView.vue
---
.../src/frontend/src/assets/main.css | 10 ++-
.../frontend/src/components/TheWelcome.vue | 2 +-
.../src/frontend/src/views/DashboardView.vue | 2 +-
.../frontend/src/views/OverviewQuizView.vue | 70 +++++++++++++------
4 files changed, 60 insertions(+), 24 deletions(-)
diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index 9ea0767..375a8e1 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -16,7 +16,7 @@ body {
}
.course-col{
flex-basis: 31%;
- background: #E5E5E5;
+ background: #d7d7d7;
border-radius: 10px;
margin-bottom: 5%;
padding: 20px;
@@ -61,6 +61,14 @@ body {
border-color: transparent;
margin-top: 10px;
}
+.add-Btn:hover{
+ cursor: pointer;
+ background-color: #2f3d54;
+}
+.add-Btn:active{
+ background-color: #425575;
+ transition: 0.2s ;
+}
.save-Btn{
background-color: #CCA43B;
font-size: 24px;
diff --git a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
index 2c91553..70df9dc 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="/overviewQuiz" class="hero-btn">CREATE QUIZ </router-link>
+ <router-link to="/dashboard" class="hero-btn">LOOK AT QUIZZES</router-link>
</div>
</section>
diff --git a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
index 4370746..7bdb31b 100644
--- a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
@@ -9,7 +9,7 @@
<input class="searchBox" placeholder="Search for category...">
</div> <br>
<div class="create-container">
- <router-link to="/overviewQuiz" class="create-btn">CREATE QUIZ</router-link>
+ <router-link to="/overviewQuiz" class="create-btn">YOUR QUIZES</router-link>
</div>
</div>
diff --git a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
index 55233a7..3a402f3 100644
--- a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
@@ -1,35 +1,24 @@
-<script>
-
-import {defineComponent} from "vue";
-import Svg from "@/assets/Svg.vue";
-
-export default defineComponent({
- components: {Svg}
-})
-</script>
-
-
<template>
<body>
- <div class="overViewQuestion-page">
- <router-link to="/dashboard"> <- </router-link>
+ <div class="overViewQuestion-page">
+ <router-link to="/dashboard"> <- </router-link>
<h1>Your quizzes</h1>
- <p> Select a quiz for your creation to either play, edit or delete</p>
+ <p>Select a quiz for your creation to either play, edit or delete</p>
<div class="row">
<div class="course-col">
<div class="quiz-header">
- <h3>Quiz 1</h3>
- <Svg name="computer-category"/>
+ <h3>Quiz 1</h3>
+ <Svg :name="selectedIcon" />
</div>
<div class="quiz-body">
- <p> Info about quiz...</p>
+ <p>Info about quiz...</p>
<p>Category:</p>
<div id="form-box">
<form>
- <select id="quiz-category">
+ <select id="quiz-category-1" @change="changeCategory">
<option value="Animal">Animals</option>
<option value="Athletic">Athletic/Sport</option>
<option value="Computer" selected="selected">Computer Science</option>
@@ -47,16 +36,55 @@ export default defineComponent({
<div class="quiz-footer">
<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>
+ <button class="delete-btn">Delete</button>
</div>
</div>
- </div>
+
+ <div>
+ <button class="add-Btn">Create Quiz</button>
+ </div>
</div>
+ </div>
</body>
-
</template>
+<script>
+import { defineComponent } from "vue";
+import Svg from "@/assets/Svg.vue";
+
+export default defineComponent({
+ components: { Svg },
+ data() {
+ return {
+ selectedCategory: 'Computer',
+ categoryIcons: {
+ 'Animal': 'animal-category',
+ 'Athletic': 'athletic-category',
+ 'Computer': 'computer-category',
+ 'Drama': 'drama-category',
+ 'Music': 'music-category',
+ 'Religion': 'religion-category',
+ 'Science': 'science-category',
+ 'Society': 'society-category',
+ 'Other': 'other-category'
+ }
+ };
+ },
+ computed: {
+ selectedIcon() {
+ return this.categoryIcons[this.selectedCategory];
+ }
+ },
+ methods: {
+ changeCategory(event) {
+ this.selectedCategory = event.target.value;
+ }
+ }
+});
+</script>
+
+
<style>
.overViewQuestion-page{
padding: 50px;
--
GitLab