diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index 1dfc827cd415c2e8dd5d4f92e865174378ff76fc..a667bee4adccf3d3b8b07e1d062a7c8f96135848 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -8,8 +8,10 @@
--field-placeholder: #b0b0b0;
--field-background: #E5E5E5;
--card-background: #d7d7d7;
+ --play-card-background: #f9f9f9;
+ --play-btn-hover: #e3e3e3;
- --text-light-color: #d7d7d7;
+ --text-light-color: #eaeaea;
--text-dark-color: #242F40;
--danger-color:#d2442b;
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/AnswerCard.vue b/FullstackProsjekt/src/frontend/src/components/shared/AnswerCard.vue
index 0a261c2c8c3b52a4a3c7b59328c4de31b43717ac..c936c44f2e6b2b8323adb286cc0656f6f3dab497 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/AnswerCard.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/AnswerCard.vue
@@ -1,7 +1,4 @@
<script>
-import { RouterLink, RouterView } from 'vue-router';
-import router from "@/router/index.js";
-import { useRouter } from 'vue-router';
export default {
props: {
answerId: {
@@ -36,19 +33,6 @@ export default {
</template>
<style>
-.overViewQuestion-page{
- padding: 50px;
-}
-
-.quiz-header{
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 10px;
-}
-.quiz-body{
- margin-bottom: 40px;
-}
.question-wrapper {
display: flex;
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
index 088ac1bec089b42c9795290ecccf1c3d2a529082..99730a1bcda213b25fddc48680a43129e1abace3 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
@@ -79,7 +79,6 @@ export default {
}
}
}
-
}
*/
@@ -340,9 +339,6 @@ export default {
justify-content: space-between;
}
-
-
-
.modal-header h5 {
margin-top: 0;
color: #363636;
@@ -356,7 +352,6 @@ export default {
float: right;
}
-
.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
-webkit-transform: scale(1.1);
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue b/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
index 8a7251883144b7d90b2309ce824feee2bcaabb46..745ea0d548cd22fd123dc5c4852c994958228ba5 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
@@ -89,32 +89,6 @@ export default {
</div>
</div>
</div>
- <!--
-
- <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>
@@ -145,9 +119,6 @@ export default {
justify-content: space-between;
}
-
-
-
.modal-header h5 {
margin-top: 0;
color: #363636;
@@ -161,7 +132,6 @@ export default {
float: right;
}
-
.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
-webkit-transform: scale(1.1);
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/PlayQuiz/DisplayQuestion.vue b/FullstackProsjekt/src/frontend/src/components/shared/PlayQuiz/DisplayQuestion.vue
index 4ccca83788fc593887d3decbc9a4fb049937ad5d..bbc0073b97d8fea117a82685b808dbb52292a957 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/PlayQuiz/DisplayQuestion.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/PlayQuiz/DisplayQuestion.vue
@@ -61,27 +61,11 @@ export default {
<ul v-if="question.options">
<li v-for="(option) in question.options" :key="option">
- <!--
- <input type="radio" :id="'option'" :value="option"
- :checked="option === selectedOption" @change="selectOption(option)">
- -->
<label :for="option">option label</label>
</li>
</ul>
- <!--
- <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>
@@ -203,7 +187,5 @@ input[type=radio] {
margin-top: 3%;
}
-
}
-
</style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/PlayQuiz/QuizResult.vue b/FullstackProsjekt/src/frontend/src/components/shared/PlayQuiz/QuizResult.vue
index 48ad0dbfa0f3544a14cfe643142368254454fdd1..e81c88eea91ce386c8b410ef05062de8c2372a3c 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/PlayQuiz/QuizResult.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/PlayQuiz/QuizResult.vue
@@ -16,7 +16,6 @@ export default {
</template>
<style scoped>
-
/*Final Results*/
.final-result{
text-align: center;
@@ -52,7 +51,6 @@ export default {
background-color: #CCA43B;
color:#fff;
cursor: pointer;
- /* width: 120px;*/
font-size: 90%;
}
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/QuestionCard.vue b/FullstackProsjekt/src/frontend/src/components/shared/QuestionCard.vue
index b984c95733ebbe7019c3f193c881819efd36c03e..e10b07206a261aa0690b5816bb18bb78cfb756ec 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/QuestionCard.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/QuestionCard.vue
@@ -1,7 +1,5 @@
<script>
-import { RouterLink, RouterView } from 'vue-router';
-import router from "@/router/index.js";
-import { useRouter } from 'vue-router';
+
import EditQuestionModel from "@/components/shared/EditQuestionModel.vue";
import {apiClient} from "@/api.js";
export default {
@@ -59,20 +57,6 @@ export default {
</template>
<style>
-.overViewQuestion-page{
- padding: 50px;
-}
-
-.quiz-header{
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 20px;
-}
-.quiz-body{
- margin-bottom: 40px;
-}
-
.question-wrapper {
display: flex;
width: 80%;
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/QuestionResponseModel.vue b/FullstackProsjekt/src/frontend/src/components/shared/QuestionResponseModel.vue
index ef3609d51889bd9aa32f84963a1f77993072148a..b006b5f4b0d0144426a79d82f96d6f9d257990e5 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/QuestionResponseModel.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/QuestionResponseModel.vue
@@ -38,7 +38,3 @@ export default {
}
};
</script>
-
-<style>
-/* Add your CSS styles here */
-</style>
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue
index 87ebaa67b027f27c6333a65d3c6399f88e41b372..e469d4553e8115ee7399aa91efa875992a2e7a4e 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue
@@ -204,5 +204,4 @@ input{
height: 25px;
width: 100%;
}
-
</style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue
index a412d3c3172b06092ec4c53b62d2158ea831966f..b8fe436e8b6c3e3d03418fa4334f1ccfa009fe72 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue
@@ -76,8 +76,6 @@ export default {
</template>
<style>
-
-
.quiz-header{
display: flex;
justify-content: space-between;
diff --git a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
index b383a4e48fc83b01fec84170ffa0a7e02b607043..6496ce88ce8f24b263c68b57210dd92ef49bb591 100644
--- a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
@@ -86,6 +86,7 @@ export default {
.go-back-icon{
margin-left: 1px;
}
+
.search-container {
flex-grow: 1;
}
@@ -99,13 +100,35 @@ export default {
display: block;
text-align: center;
}
+.quiz-list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+
+.quiz-col {
+ flex-basis: 30%;
+}
+
.quiz-col {
flex-basis: 31%;
- background: #d7d7d7;
+ background: var(--card-background);
border-radius: 10px;
margin-bottom: 5%;
padding: 20px;
box-sizing: border-box;
transition: 0.5s;
}
+.row{
+ margin-top: 5%;
+ display: flex;
+ justify-content: space-between;
+ margin-left: 5%;
+ margin-right: 5%;
+}
+
+.quiz-col:hover{
+ box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);
+}
+
</style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue b/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue
index f826ee1097d57fe534a88c52dfd57b422d5d11e8..b69d951a88c68cb668d8560cb8a0e3bb967d4ca0 100644
--- a/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue
@@ -137,6 +137,7 @@ export default {
<template>
+ <body>
<div class="quiz">
<div id="quiz-info">
<h1 id="title">Play quiz</h1>
@@ -158,229 +159,110 @@ export default {
<button v-if="!hasAnswered" @click="submitAnswer">Submit</button>
</div>
</div>
-
-<!--
- <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 {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>
- <button id="restart">Restart Quiz</button>
- </div>
</body>
--->
</template>
<style>
-
-.option {
- font-size: 13px;
- font-weight: bolder;
- width: 100px;
- height: 100px;
- border: 1px solid #ccc;
- margin: 5px;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
-}
-
-.option:hover {
- background-color: #f0f0f0;
-}
-
-.selected {
- background-color: #4285f4; /* Change to the color you want for selected option */
- color: #fff; /* Change text color for better visibility */
-}
-.quiz{
+.quiz {
text-align: center;
- margin-top: 20px;
- height: 100vh;
+ margin-top: 40px;
+ margin-left: 20vh;
+ margin-right: 20vh;
}
-#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{
- letter-spacing: .13em;
- padding: 3%;
- display: flex;
- justify-content: center;
- flex-direction: column;
+#current-q {
+ padding: 20px;
+ background-color: var(--play-card-background);
+ border-radius: 10px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
-.choice{
- padding: 3%;
+h1#title {
+ margin-bottom: 20px;
+ font-size: 18px;
+ color: var(--text-dark-color);
}
-.options{
- display:block;
- font-size: 25px;
- margin-top: 30px;
- text-align: left;
+.question {
+ font-size: 32px;
}
-input[type=radio] {
- border: 5px solid white;
- width: 20px;
- height: 1.3em;
- float: left;
+.options {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
}
-.ans-btn{
- padding: 2%;
-}
-
-.submit-answer{
- border: 2px solid #CCA43B;
- padding: 15px;
- border-radius: 20px;
- 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;
+.option {
+ font-size: 20px;
+ font-weight: bold;
+ width: 100%;
+ height: 60px;
+ border: 2px solid #ccc;
+ border-radius: 10px;
+ margin: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
cursor: pointer;
- border-radius: 20px;
+ transition: all 0.3s ease;
}
-.view-results{
- text-decoration: none;
- color: black;
- border: 2px solid #CCA43B;
- padding: 15px;
- border-radius: 20px;
- transition: background-color 0.3s,border 0.2s, color 0.2s;
+.option:hover {
+ background-color: var(--play-btn-hover);
}
-
-.view-results:hover{
- background-color: #CCA43B;
- padding: 16px;
- color: #fff;
- cursor: pointer;
- border-radius: 20px;
+.selected {
+ background-color: var(--safe-color);
+ color: var(--text-light-color);
}
-/*Final Results*/
-.final-result{
- text-align: center;
- padding: 10px;
- font-size: 1.5em;
- height: 100vh;
-}
-.solved-ques-no{
- padding: 10px;
-}
+.popup {
+ background-color: rgba(0, 0, 0, 0.8);
+ color: var(--text-light-color);
+ padding: 2vh 8vh;
+ border-radius: 5px;
+ position: fixed;
+ left: 52.5%;
+ bottom: 50%;
+ transform: translateX(-50%);
+ transition: 0.5s ease;
-.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;
+button {
+ background-color: var(--option-color);
+ color: var(--text-light-color);
+ font-size: 18px;
+ padding: 10px 20px;
+ margin-top: 5vh;
+ border: none;
+ border-radius: 5px;
cursor: pointer;
- /* width: 120px;*/
- font-size: 90%;
+ transition: background-color 0.3s ease;
}
-
-@media only screen and (max-width: 1250px) {
- .options{
- margin-left: 8%
- }
+button:hover {
+ background-color: var(--option-hover);
}
-@media only screen and (max-width: 850px) {
- .options{
- margin-left: 4%;
+@media (max-width: 700px){
+ .quiz{
+ margin-left: 2vh;
+ margin-right: 2vh;
}
-}
-
-@media only screen and (max-width: 650px) {
- .options{
- display: block;
- margin-top: 3%;
-
+ .popup{
+ padding: 1vh 4vh;
+ left: 57%;
+ font-size: 25px;
+ }
+ #current-q{
+ padding: 5px;
}
}
-
-@media only screen and (max-width: 550px) {
- .options{
- margin-top: 3%;
-
+@media (max-width: 1000px) {
+ .popup{
+ left: 54%;
}
-
}
</style>