diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css index df898ba93e7f78efcdfeb35d13896b36b710ee34..ac47402ed38330b853ec19efc81bfb62ca14ba0a 100644 --- a/FullstackProsjekt/src/frontend/src/assets/main.css +++ b/FullstackProsjekt/src/frontend/src/assets/main.css @@ -11,7 +11,7 @@ input { border: none; min-width: 220px; background-color: #E5E5E5; - margin: 10px; + margin-bottom: 10px; font-family: monospace; } input::placeholder { @@ -72,13 +72,17 @@ label { cursor: pointer; } .delete-btn{ - padding: 8px; + padding: 10px; background-color: #cc513b; border-color: transparent; color: #242F40; border-radius: 10px; font-family: monospace; cursor: pointer; + text-decoration: none; +} +.delete-btn:hover{ + background-color: #d9563e; } .add-Btn { @@ -86,11 +90,10 @@ label { color: white; font-size: 16px; padding: 10px; - border-radius: 20px; + border-radius: 10px; border-color: transparent; - margin-top: 10px; cursor: pointer; - + text-decoration: none; } .add-Btn:hover{ cursor: pointer; @@ -122,16 +125,17 @@ label { .submit-btn{ background-color: #CCA43B; font-size: 20px; - padding: 20px; + padding: 10px; border-radius: 5px; border-color: transparent; min-width: 160px; font-family: monospace; - transition: 0.2s; + transition: 0.4s; cursor: pointer; } .submit-btn:hover{ background-color: #a67d0e; + color: white; } .submit-btn:active{ background-color: #2D333B; diff --git a/FullstackProsjekt/src/frontend/src/views/NewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/NewQuizView.vue index 6f60f8f45ff84da03c7dde5c7ad99f85173dcb4c..ae1180c2622618046ed1410fac8571e6fcdc6a3c 100644 --- a/FullstackProsjekt/src/frontend/src/views/NewQuizView.vue +++ b/FullstackProsjekt/src/frontend/src/views/NewQuizView.vue @@ -1,5 +1,4 @@ <script> -import NewQuestionModel from "@/components/shared/NewQuestionModel.vue"; import { ref, onMounted } from 'vue'; import { useRoute } from 'vue-router'; import router from "@/router/index.js"; @@ -52,148 +51,73 @@ export default { getUser() { this.creatorId = getIdByToken(); } - }, } </script> <template> <body> - <form @submit.prevent="constructQuiz"> - <div class="newQuizDiv"> - <router-link to="/overviewQuiz"> <- </router-link> - <h1>New quiz</h1> - <div> - <h2>Title</h2> - <input> - </div> - <div> - <h2>Category</h2> - <form> - <select v-model="selectedCategory"> - <option v-for="category in categories" :key="category.id" :value="category.id">{{category.category}}</option> - </select> - </form> - </div> - <div> - <h2>Difficulty</h2> - <form> - <select v-model="selectedDifficulty"> - <option v-for="difficulty in difficulties" :key="difficulty.id" :value="difficulty.id">{{difficulty.difficulty}}</option> - </select> - </form> - </div> - <!-- - <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"> - - <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">{{answer.id}}</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> - --> - <div class="footer"> - <router-link to="/overviewQuiz"> Cancel </router-link> - <div class="submit-section"> - <input id="submit" type="submit"/> - </div> - </div> - </div> - </form> + <div class="new-quiz-page"> + <form @submit.prevent="constructQuiz"> + <router-link to="/overviewQuiz"> <- </router-link> + <h1>New quiz</h1> + <div> + <h2>Title</h2> + <input> + </div> + <div> + <h2>Category</h2> + <form> + <select v-model="selectedCategory" > + <option v-for="category in categories" :key="category.id" :value="category">{{categories.category}}</option> + </select> + </form> + </div> + <div> + <h2>Difficulty</h2> + <form> + <select v-model="selectedDifficulty"> + <option v-for="difficulty in difficulties" :key="difficulty.id" :value="difficulty">{{difficulties.difficulty}}</option> + </select> + </form> + </div> + + <div class="footer"> + <router-link to="/overviewQuiz" class="delete-btn"> Cancel </router-link> + <button class="submit-btn" type="submit"> Submit</button> + </div> + </form> + </div> </body> </template> <style> -.newQuizDiv{ - padding: 20px; +.new-quiz-page{ + margin:20vh; } input{ height: 25px; width: 100%; } +select{ + min-width: 100%; + height: 25px; + background-color: #E5E5E5; + border-color: transparent; + border-radius: 5px; +} -.submit-section { - display: flex; - justify-content: center; - align-items: center; +.footer { + margin: 10vh; + display: flex; + justify-content: center; + align-items: center; } -#submit { - min-width: 150px; - min-height: 60px; - font-size: 24px; - border-radius: 6px; - background-color: #242F40; - color: white; - border: none; - cursor: pointer; - margin-top: 20px; +.delete-btn { + margin-right: 20px; } </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 015609bef2c36c39405adaa9859f847a7afc5a3c..317cac17951cfe076cfe7871f31ff639c0bf8afa 100644 --- a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue +++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue @@ -1,24 +1,96 @@ <template> <body> <div class="overViewQuestion-page"> + <div class="headerDiv"> <div> <router-link to="/dashboard"> <- </router-link> <h1>Your quizzes</h1> <p>Select a quiz for your creation to either play, edit or delete</p> </div> - <div> - <button class="add-Btn">Create Quiz</button> - <router-link to="/createQuiz"> New quiz </router-link> + <router-link to="/createQuiz" class="add-Btn">New quiz</router-link> </div> - </div> - <div class="row"> <div class="quiz-div"> <QuizCard id="quizCard" v-for= "quiz in quizList" :key="quiz.id" :quiz-id="quiz.id" /> </div> </div> + + <!-- + <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"> + + <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">{{answer.id}}</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> + + --> + </div> </body> </template> @@ -27,6 +99,8 @@ import QuizCard from "@/components/shared/QuizCard.vue"; import {getIdByToken} from "@/tokenController.js"; import {apiClient} from "@/api.js"; +import NewQuestionModel from "@/components/shared/NewQuestionModel.vue"; + export default { components: { @@ -73,7 +147,7 @@ export default { <style> .overViewQuestion-page{ - padding: 50px; + padding: 40px; } .quiz-div {