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