Skip to content
Snippets Groups Projects
Commit 28ed14e6 authored by Madeleine Stenberg Jonassen's avatar Madeleine Stenberg Jonassen
Browse files

Merge branch 'quiz-ui' into 'main'

Quiz ui

See merge request !26
parents 04b5586f 976c4174
No related branches found
No related tags found
1 merge request!26Quiz ui
Pipeline #269021 passed
...@@ -11,7 +11,7 @@ input { ...@@ -11,7 +11,7 @@ input {
border: none; border: none;
min-width: 220px; min-width: 220px;
background-color: #E5E5E5; background-color: #E5E5E5;
margin: 10px; margin-bottom: 10px;
font-family: monospace; font-family: monospace;
} }
input::placeholder { input::placeholder {
...@@ -72,13 +72,17 @@ label { ...@@ -72,13 +72,17 @@ label {
cursor: pointer; cursor: pointer;
} }
.delete-btn{ .delete-btn{
padding: 8px; padding: 10px;
background-color: #cc513b; background-color: #cc513b;
border-color: transparent; border-color: transparent;
color: #242F40; color: #242F40;
border-radius: 10px; border-radius: 10px;
font-family: monospace; font-family: monospace;
cursor: pointer; cursor: pointer;
text-decoration: none;
}
.delete-btn:hover{
background-color: #d9563e;
} }
.add-Btn { .add-Btn {
...@@ -86,11 +90,10 @@ label { ...@@ -86,11 +90,10 @@ label {
color: white; color: white;
font-size: 16px; font-size: 16px;
padding: 10px; padding: 10px;
border-radius: 20px; border-radius: 10px;
border-color: transparent; border-color: transparent;
margin-top: 10px;
cursor: pointer; cursor: pointer;
text-decoration: none;
} }
.add-Btn:hover{ .add-Btn:hover{
cursor: pointer; cursor: pointer;
...@@ -122,16 +125,17 @@ label { ...@@ -122,16 +125,17 @@ label {
.submit-btn{ .submit-btn{
background-color: #CCA43B; background-color: #CCA43B;
font-size: 20px; font-size: 20px;
padding: 20px; padding: 10px;
border-radius: 5px; border-radius: 5px;
border-color: transparent; border-color: transparent;
min-width: 160px; min-width: 160px;
font-family: monospace; font-family: monospace;
transition: 0.2s; transition: 0.4s;
cursor: pointer; cursor: pointer;
} }
.submit-btn:hover{ .submit-btn:hover{
background-color: #a67d0e; background-color: #a67d0e;
color: white;
} }
.submit-btn:active{ .submit-btn:active{
background-color: #2D333B; background-color: #2D333B;
......
<script> <script>
import NewQuestionModel from "@/components/shared/NewQuestionModel.vue";
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import router from "@/router/index.js"; import router from "@/router/index.js";
...@@ -52,15 +51,14 @@ export default { ...@@ -52,15 +51,14 @@ export default {
getUser() { getUser() {
this.creatorId = getIdByToken(); this.creatorId = getIdByToken();
} }
}, },
} }
</script> </script>
<template> <template>
<body> <body>
<div class="new-quiz-page">
<form @submit.prevent="constructQuiz"> <form @submit.prevent="constructQuiz">
<div class="newQuizDiv">
<router-link to="/overviewQuiz"> <- </router-link> <router-link to="/overviewQuiz"> <- </router-link>
<h1>New quiz</h1> <h1>New quiz</h1>
<div> <div>
...@@ -71,7 +69,7 @@ export default { ...@@ -71,7 +69,7 @@ export default {
<h2>Category</h2> <h2>Category</h2>
<form> <form>
<select v-model="selectedCategory" > <select v-model="selectedCategory" >
<option v-for="category in categories" :key="category.id" :value="category.id">{{category.category}}</option> <option v-for="category in categories" :key="category.id" :value="category">{{categories.category}}</option>
</select> </select>
</form> </form>
</div> </div>
...@@ -79,121 +77,47 @@ export default { ...@@ -79,121 +77,47 @@ export default {
<h2>Difficulty</h2> <h2>Difficulty</h2>
<form> <form>
<select v-model="selectedDifficulty"> <select v-model="selectedDifficulty">
<option v-for="difficulty in difficulties" :key="difficulty.id" :value="difficulty.id">{{difficulty.difficulty}}</option> <option v-for="difficulty in difficulties" :key="difficulty.id" :value="difficulty">{{difficulties.difficulty}}</option>
</select> </select>
</form> </form>
</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 class="footer"> <div class="footer">
<router-link to="/overviewQuiz"> Cancel </router-link> <router-link to="/overviewQuiz" class="delete-btn"> Cancel </router-link>
<div class="submit-section"> <button class="submit-btn" type="submit"> Submit</button>
<input id="submit" type="submit"/>
</div>
</div>
</div> </div>
</form> </form>
</div>
</body> </body>
</template> </template>
<style> <style>
.newQuizDiv{ .new-quiz-page{
padding: 20px; margin:20vh;
} }
input{ input{
height: 25px; height: 25px;
width: 100%; width: 100%;
} }
select{
min-width: 100%;
height: 25px;
background-color: #E5E5E5;
border-color: transparent;
border-radius: 5px;
}
.submit-section { .footer {
margin: 10vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
#submit { .delete-btn {
min-width: 150px; margin-right: 20px;
min-height: 60px;
font-size: 24px;
border-radius: 6px;
background-color: #242F40;
color: white;
border: none;
cursor: pointer;
margin-top: 20px;
} }
</style> </style>
\ No newline at end of file
<template> <template>
<body> <body>
<div class="overViewQuestion-page"> <div class="overViewQuestion-page">
<div class="headerDiv"> <div class="headerDiv">
<div> <div>
<router-link to="/dashboard"> <- </router-link> <router-link to="/dashboard"> <- </router-link>
<h1>Your quizzes</h1> <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> </div>
<div> <router-link to="/createQuiz" class="add-Btn">New quiz</router-link>
<button class="add-Btn">Create Quiz</button>
<router-link to="/createQuiz"> New quiz </router-link>
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="quiz-div"> <div class="quiz-div">
<QuizCard id="quizCard" v-for= "quiz in quizList" :key="quiz.id" :quiz-id="quiz.id" /> <QuizCard id="quizCard" v-for= "quiz in quizList" :key="quiz.id" :quiz-id="quiz.id" />
</div> </div>
</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> </div>
</body> </body>
</template> </template>
...@@ -27,6 +99,8 @@ ...@@ -27,6 +99,8 @@
import QuizCard from "@/components/shared/QuizCard.vue"; import QuizCard from "@/components/shared/QuizCard.vue";
import {getIdByToken} from "@/tokenController.js"; import {getIdByToken} from "@/tokenController.js";
import {apiClient} from "@/api.js"; import {apiClient} from "@/api.js";
import NewQuestionModel from "@/components/shared/NewQuestionModel.vue";
export default { export default {
components: { components: {
...@@ -73,7 +147,7 @@ export default { ...@@ -73,7 +147,7 @@ export default {
<style> <style>
.overViewQuestion-page{ .overViewQuestion-page{
padding: 50px; padding: 40px;
} }
.quiz-div { .quiz-div {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment