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

Merge branch 'new-quiz-fixes' into 'main'

New quiz fixes

See merge request !29
parents 974f16f4 3b680747
No related branches found
No related tags found
1 merge request!29New quiz fixes
Pipeline #269272 passed
......@@ -18,8 +18,8 @@ const icon = defineAsyncComponent(()=>
<style>
.icon{
height: 20px;
width: 20px;
height: 25px;
width: 25px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
......
......@@ -9,7 +9,6 @@ input {
padding: 5px;
border-radius: 5px;
border: none;
min-width: 220px;
background-color: #E5E5E5;
margin-bottom: 10px;
font-family: monospace;
......@@ -23,10 +22,17 @@ label {
font-weight: bold;
}
select{
font-family: monospace;
}
.space{
margin: 90px;
}
/* Other */
.row{
margin-top: 5%;
display: flex;
......@@ -46,7 +52,13 @@ label {
.course-col:hover{
box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);
}
.go-back-section{
padding-top: 5vh;
padding-left: 5vh;
}
/* ERROR HANDLE */
.error-message{
color: #e53a1c;
padding: 10px;
......@@ -54,6 +66,8 @@ label {
margin-bottom: 20px;
}
/* BUTTONS */
.play-btn{
padding: 10px;
text-decoration: none;
......@@ -121,7 +135,6 @@ label {
margin-left: 10px;
cursor: pointer;
}
.submit-btn{
background-color: #CCA43B;
font-size: 20px;
......@@ -142,6 +155,9 @@ label {
color: white;
}
@media (max-width: 700px){
.row{
flex-direction: column;
......
<script>
import router from "@/router/index.js";
import {apiClient} from "@/api.js";
import {getIdByToken} from "@/tokenController.js";
import {categoryEnums} from "@/data/categories.js"
import {difficultyEnums} from "@/data/difficulties.js";
import Svg from "@/assets/Svg.vue";
//like editquiz, but w/o questions, redirect to edit when quiz is constructed
export default {
components: {Svg},
data() {
return {
showNewQuestion: false,
creatorId: null,
quiz: null,
quizId: null,
quizTitle: '',
category: '',
difficulty: '',
errorMsg: '',
selectedCategory: null,
categories: categoryEnums,
selectedDifficulty: null,
difficulties: difficultyEnums,
//TODO: make quiz object
};
},
mounted() {
this.getUser();
},
methods: {
async constructQuiz() {
try {
const post = {
title: this.quizTitle,
creatorId: this.creatorId,
category: this.selectedCategory,
difficulty: this.selectedDifficulty
}
await apiClient.post('quiz/create', post).then(response => {
this.quizId = JSON.parse(response.data.id);
router.push({name: 'editQuiz', params: {quizId: this.quizId}});
})
} catch(error){
this.errorMsg = 'Cannot construct quiz';
}
},
async getUser() {
this.creatorId = await getIdByToken();
}
},
}
</script>
<template>
<body>
<router-link to="/overviewQuiz" ><Svg name="go-back-icon" class="go-back-section"/></router-link>
<div class="new-quiz-page">
<form @submit.prevent="constructQuiz">
<div class="newQuizDiv">
<h1>New quiz</h1>
<div>
<h2>Title</h2>
<input type="text" required v-model="quizTitle" placeholder="Insert title here..."/> <br>
</div>
<div>
<h2>Category</h2>
<form>
<select v-model="selectedCategory">
<option v-for="category in categories" :key="category" :value="category">{{ category }}</option>
</select>
</form>
</div>
<div>
<h2>Difficulty</h2>
<form>
<select v-model="selectedDifficulty">
<option v-for="difficulty in difficulties" :key="difficulty" :value="difficulty">{{ difficulty}}</option>
</select>
</form>
</div>
<div class="space"/>
<div>
<button class="submit-btn">Submit</button>
</div>
</div>
</form>
</div>
</body>
</template>
<style>
.new-quiz-page {
margin: 5vh auto;
max-width: 400px;
padding: 0 20px;
}
input,
select {
width: 100%;
height: 40px;
margin-bottom: 10px;
background-color: #E5E5E5;
border: 1px solid transparent;
border-radius: 5px;
padding: 5px;
box-sizing: border-box;
}
select {
appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M7 10l5 5 5-5H7z"/></svg>');
background-repeat: no-repeat;
background-position-x: calc(100% - 8px);
background-position-y: 50%;
padding-right: 20px;
}
.submit-btn {
display: block;
margin: 0 auto;
}
</style>
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import EditQuizView from "@/views/EditQuizView.vue";
import EditQuizView from "@/components/shared/create-quiz/EditQuizView.vue";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
......@@ -35,16 +35,16 @@ const router = createRouter({
name: 'signup',
component: () => import('../views/SignupView.vue')
},
{
path: '/createQuiz',
name: 'create Quiz',
component: () => import('../views/NewQuizView.vue')
},
{
path: '/overviewQuiz',
name: 'overview Quiz',
component: () => import('../views/OverviewQuizView.vue')
},
{
path: '/create-quiz',
name: 'create Quiz',
component: () => import('../components/shared/create-quiz/CreateQuizView.vue')
},
{
path: '/play-quiz/:quizId',
name: 'playQuiz',
......
<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import router from "@/router/index.js";
import {apiClient} from "@/api.js";
import {getIdByToken} from "@/tokenController.js";
import {categoryEnums} from "@/data/categories.js"
import {difficultyEnums} from "@/data/difficulties.js";
//like editquiz, but w/o questions, redirect to edit when quiz is constructed
export default {
data() {
return {
showNewQuestion: false,
creatorId: null,
quiz: null,
quizId: null,
quizTitle: '',
category: '',
difficulty: '',
errorMsg: '',
selectedCategory: null,
categories: categoryEnums,
selectedDifficulty: null,
difficulties: difficultyEnums,
//TODO: make quiz object
};
},
mounted() {
this.getUser();
},
methods: {
async constructQuiz() {
try {
const post = {
title: this.quizTitle,
creatorId: this.creatorId,
category: this.selectedCategory,
difficulty: this.selectedDifficulty
}
await apiClient.post('quiz/create', post).then(response => {
this.quizId = JSON.parse(response.data.id);
router.push({name: 'editQuiz', params: {quizId: this.quizId}});
})
} catch(error){
this.errorMsg = 'Cannot construct quiz';
}
},
async getUser() {
this.creatorId = await 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 type="text" required v-model="quizTitle" placeholder="Insert title here..."/> <br>
</div>
<div>
<h2>Category</h2>
<form>
<select v-model="selectedCategory">
<option v-for="category in categories" :key="category" :value="category">{{ category }}</option>
</select>
</form>
</div>
<div>
<h2>Difficulty</h2>
<form>
<select v-model="selectedDifficulty">
<option v-for="difficulty in difficulties" :key="difficulty" :value="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>
<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>
.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;
}
.footer {
margin: 10vh;
display: flex;
justify-content: center;
align-items: center;
}
.delete-btn {
margin-right: 20px;
}
</style>
\ No newline at end of file
......@@ -8,7 +8,7 @@
<h1>Your quizzes</h1>
<p>Select a quiz for your creation to either play, edit or delete</p>
</div>
<router-link to="/createQuiz" class="add-Btn">New quiz</router-link>
<router-link to="/create-quiz" class="add-Btn">New quiz</router-link>
</div>
<div class="row">
......@@ -17,90 +17,14 @@
</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>
<script>
import QuizCard from "@/components/shared/QuizCard.vue";
import QuizCard from "@/components/shared/create-quiz/QuizCard.vue";
import {getIdByToken} from "@/tokenController.js";
import {apiClient} from "@/api.js";
import NewQuestionModel from "@/components/shared/NewQuestionModel.vue";
export default {
components: {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment