diff --git a/FullstackProsjekt/src/frontend/src/JSONparser.js b/FullstackProsjekt/src/frontend/src/JSONparser.js
new file mode 100644
index 0000000000000000000000000000000000000000..039e5630076b14103dbbaff20ce21d9e2dcd02bc
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/JSONparser.js
@@ -0,0 +1,22 @@
+//methods for constructing Quiz and Question-objects. Maybe instead do this in api service?
+
+//JSON to quiz-object(s)
+//JSON to question-object(s)
+
+//quiz-object to JSON
+//question-object to JSON
+
+//quiz questions: gets questionIds, send this to questionCards?
+
+//Later: splitting into packages
+
+/**
+QuizDTO:
+Integer id;
+String title;
+List<Integer> questionIds;
+Integer creatorId;
+QuizCategory category;
+QuizDifficulty difficulty;
+*/
+
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
index a1b8c1815f3559843f705214bc55f4f80ed3f0af..858f0e0df6378637819feea987ef6fc479cc0c1a 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
@@ -4,27 +4,36 @@
const props = defineProps({
show: Boolean
})*/
-import AnswerCard from "@/components/shared/AnswerCard.vue";
+
export default {
- components: {AnswerCard},
+ props: {
+ questionId: {
+ type: Number,
+ required: true
+ }
+ },
+ mounted() {
+ //APi req
+ },
data() {
return {
questionText: '',
+ correctIndex: 0,
answers: [
{answerId: 0, answer: 'first answer', correct: true},
{answerId: 1, answer: 'second answer', correct: false},
- {answerId: 2, answer: 'third answer', correct: false},
- ],
- correctIndex: 0
+ {answerId: 2, answer: 'third answer', correct: false}
+ ]
}
},
+
methods: {
closeModal() {
this.$emit('close');
},
newAnswer() {
//default: not correct!
- }
+ },
}
};
@@ -35,12 +44,30 @@ export default {
<div @click.stop class="modal-mask">
<div class="modal-container">
<div class="question-title">
- <h3>Question:</h3>
+ <h3>Question: </h3>
<input v-model="questionText" placeholder="Type your question here">
</div>
<div class="modal-body">
- <AnswerCard answer-id="answerCard" v-for="answer in answers"
- :key="answer.id" :answerId="answer.id" :answer="answer.answer" :correct="answer.correct"/>
+ <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 in answers">
+ <th scope="row">{{answer.answer}}</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>
</div>
<div class="modal-footer">
default footer
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue b/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
index a1b8c1815f3559843f705214bc55f4f80ed3f0af..b502ac6b73757b77db8798c8b99c021dd75cb282 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
@@ -1,29 +1,52 @@
<script>
-/*
-<script setup>
-const props = defineProps({
- show: Boolean
-})*/
-import AnswerCard from "@/components/shared/AnswerCard.vue";
+import {apiClient} from "@/api.js";
export default {
- components: {AnswerCard},
+ props: {
+ quizId: {
+ type: Number,
+ required: true
+ }
+ },
data() {
return {
questionText: '',
- answers: [
- {answerId: 0, answer: 'first answer', correct: true},
- {answerId: 1, answer: 'second answer', correct: false},
- {answerId: 2, answer: 'third answer', correct: false},
- ],
- correctIndex: 0
+ answers: [{ text: '', correct: false }],
+ correctAnswerIndex: 0,
+ type: 'MC',
+ score: 0,
+ correctAnswer: null,
+ errorMsg: ''
}
},
methods: {
+ //TODO: error prevention/handling
+ async handleSubmit() {
+ try {
+ this.findCorrectAnswer();
+ await apiClient.post('/questions', {
+ quizId: this.quizId,
+ questionText: this.questionText,
+ type: this.type,
+ answer: this.correctAnswer,
+ options: this.answers.map(answer => answer.text), //just the strings!
+ score: this.score
+ //add questionId to questions in editQuiz!
+
+ })
+ } catch (error) {
+ this.errorMsg = 'Error signing up';
+ }
+ },
closeModal() {
this.$emit('close');
},
newAnswer() {
- //default: not correct!
+ this.answers.push({ text: '', correct: false });
+ },
+ findCorrectAnswer(){
+ if (this.correctAnswerIndex !== null && this.answers[this.correctAnswerIndex]) {
+ this.correctAnswer = this.answers[this.correctAnswerIndex].text;
+ }
}
}
@@ -34,22 +57,42 @@ export default {
<div class="modal-overlay" @click="closeModal">
<div @click.stop class="modal-mask">
<div class="modal-container">
- <div class="question-title">
- <h3>Question:</h3>
- <input v-model="questionText" placeholder="Type your question here">
- </div>
- <div class="modal-body">
- <AnswerCard answer-id="answerCard" v-for="answer in answers"
- :key="answer.id" :answerId="answer.id" :answer="answer.answer" :correct="answer.correct"/>
- </div>
- <div class="modal-footer">
- default footer
- <button
- class="modal-default-button"
- @click="$emit('close')">
- OK
- </button>
- </div>
+ <form @submit.prevent="handleSubmit">
+ <div class="question-title">
+ <h3>Question:</h3>
+ <input v-model="questionText" placeholder="Type your question here">
+
+ <label>Score:</label>
+ <input type="number" id="scoreInput" v-model="score">
+ </div>
+ <div class="modal-body">
+ <!--
+ <AnswerCard answer-id="answerCard" v-for="answer in answers"
+ :key="answer.id" :answerId="answer.id" :answer="answer.answer" :correct="answer.correct"/>
+ -->
+ <table class="table">
+ <thead>
+ <tr>
+ <th scope="col">Answer</th>
+ <th scope="col">Correct ?</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(answer, index) in answers">
+ <td><input type="text" v-model="answer.text"></td>
+ <td>
+ <input type="radio" :id="'correctAnswer_' + index" :value="index" v-model="correctAnswerIndex">
+ <label :for="'correctAnswer_' + index">Correct</label>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="modal-footer">
+ <button class="edit-btn" @click="newAnswer">Add answer</button>
+ <button class="modal-default-button" @click="$emit('close')">SUBMIT</button>
+ </div>
+ </form>
</div>
</div>
</div>
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/QuestionCard.vue b/FullstackProsjekt/src/frontend/src/components/shared/QuestionCard.vue
index db2843087b1e462722b543deb791c7a36f19b56c..c5fe7d7972238ff17d2b6ef5240c3e19c42cef05 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/QuestionCard.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/QuestionCard.vue
@@ -2,33 +2,36 @@
import { RouterLink, RouterView } from 'vue-router';
import router from "@/router/index.js";
import { useRouter } from 'vue-router';
+import EditQuestionModel from "@/components/shared/EditQuestionModel.vue";
export default {
+ components: {EditQuestionModel},
props: {
questionId: {
type: Number,
required: true,
- },
- questionNum: {
- type: Number,
- required: false,
- },
- question: {
- type: String,
- required: false,
- },
+ }
+ },
+ mounted() {
+ //API req, get question from id
+ },
+ data() {
+ return {
+ showEditQuestion: false,
+ questionNum: 0,
+ question: 'question text'
+ }
},
methods: {
- //link to pages, play quiz, edit, delete, with quizId
- viewQuestion() {
- //create new router-method to playQuiz, using quizId
- //router.push({name: 'playQuiz', params: {questionId: this.questionId}});
+ deleteQuestion() {
+ //API req, delete question
},
editQuestion() {
- //create new router-method to editQuiz, using quizId
- //this.$router.push({name: 'editQuiz', params: {questionId: this.questionId}});
+ this.showEditQuestion = true;
+ console.log(this.showEditQuestion);
},
- deleteQuestion() {
-
+ hideEditQuestion() {
+ this.showEditQuestion = false;
+ //TODO: update answers, +answer count
}
}
}
@@ -36,13 +39,13 @@ export default {
<template>
<div class="question-wrapper">
- <h4>{{questionNum}}</h4>
+ <h4>{{questionId}}</h4>
<h3>{{question}}</h3>
<div class="quiz-footer">
- <button @click="viewQuestion" class="play-btn">Play</button>
<button @click="editQuestion" class="edit-btn">Edit</button>
- <button @click="deleteQuestion" class="delete-btn">Edit</button>
+ <button @click="deleteQuestion" class="delete-btn">Delete</button>
</div>
+ <EditQuestionModel :question-id=questionId v-if="this.showEditQuestion" @close="hideEditQuestion"/>
</div>
</template>
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/QuizCard.vue b/FullstackProsjekt/src/frontend/src/components/shared/QuizCard.vue
index b5d068944eefb5b60c4efede339c155299dbf79c..a56765a8b59ef4d2ec94ebb3efebabbb345b259e 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/QuizCard.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/QuizCard.vue
@@ -1,23 +1,40 @@
<script>
-import { RouterLink, RouterView } from 'vue-router';
import router from "@/router/index.js";
-import { useRouter } from 'vue-router';
+import {apiClient} from "@/api.js";
+
export default {
props: {
quizId: {
type: Number,
required: true,
- },
- quizName: {
- type: String,
- required: true,
- },
- quizDescription: {
- type: String,
- required: true,
}
},
+ data() {
+ return {
+ quizTitle: null,
+ quizDifficulty: null,
+ quizCategory: null
+ }
+
+ },
+ mounted() {
+ this.getQuiz();
+ },
methods: {
+ async getQuiz() {
+ console.log('Fetching data for quiz: ', this.quizId);
+
+ try {
+ await apiClient.get('/quiz/quiz/' + this.quizId).then(response => {
+ this.quizTitle = JSON.parse(response.data.title);
+ this.category = JSON.parse(response.data.category);
+ this.difficulty = JSON.parse(response.data.difficulty);
+ });
+ } catch (error) {
+ //TODO: proper error handling
+ this.errorMsg = 'Error retrieving quizzes';
+ }
+ },
//link to pages, play quiz, edit, delete, with quizId
playQuiz() {
//create new router-method to playQuiz, using quizId
@@ -25,7 +42,7 @@ export default {
},
editQuiz() {
//create new router-method to editQuiz, using quizId
- this.$router.push({name: 'editQuiz', params: {quizId: this.quizId}});
+ router.push({name: 'editQuiz', params: {quizId: this.quizId}});
},
}
}
@@ -34,13 +51,14 @@ export default {
<template>
<div class="course-col">
<div class="quiz-header">
- <h3>{{ quizName }}</h3>
+ <h3>{{ quizTitle }}</h3>
<!--
<Svg :name="selectedIcon" />
-->
</div>
<div class="quiz-body">
- <p>{{ quizDescription }}</p>
+ <p>{{ quizDifficulty }}</p>
+ <p>{{ quizCategory }}</p>
</div>
<div class="quiz-footer">
<button @click="playQuiz" class="play-btn">Play</button>
diff --git a/FullstackProsjekt/src/frontend/src/data/categories.js b/FullstackProsjekt/src/frontend/src/data/categories.js
new file mode 100644
index 0000000000000000000000000000000000000000..8e1a6835c7bea6e1cd7e0cf3f0ad7e44933877cb
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/data/categories.js
@@ -0,0 +1,19 @@
+export const categoryEnums = [
+ 'BUSINESS',
+ 'ART',
+ 'COMPUTER_SCIENCE',
+ 'CULTURE_AND_TRADITIONS',
+ 'FINANCE',
+ 'GENERAL_KNOWLEDGE',
+ 'GEOGRAPHY',
+ 'HISTORY',
+ 'LANGUAGES',
+ 'LAW',
+ 'MATH',
+ 'MUSIC',
+ 'SCIENCE',
+ 'SEASONAL',
+ 'SOCIAL_EMOTIONAL_LEARNING',
+ 'SOCIAL_STUDIES',
+ 'TRIVIA'
+];
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/data/difficulties.js b/FullstackProsjekt/src/frontend/src/data/difficulties.js
new file mode 100644
index 0000000000000000000000000000000000000000..46d943b58df83180890d6e40d74eb4cd9d7db08f
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/data/difficulties.js
@@ -0,0 +1,5 @@
+export const difficultyEnums = [
+ 'EASY',
+ 'MEDIUM',
+ 'HARD'
+]
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/models/question.js b/FullstackProsjekt/src/frontend/src/models/question.js
new file mode 100644
index 0000000000000000000000000000000000000000..52082dd3e95489adfb7957492e516335d23e5a9e
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/models/question.js
@@ -0,0 +1,11 @@
+export default class Question {
+ constructor(questionId, quizId, score, questionText, answers) {
+ this.questionId = questionId;
+ this.quizId = quizId;
+ this.score = score;
+ this.questionText = questionText;
+ this.answers = answers;
+ }
+}
+
+//method for parsing JSON to question-objects, and opposite? Perhaps better to delegate to a JSON parsing class
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/models/quiz.js b/FullstackProsjekt/src/frontend/src/models/quiz.js
new file mode 100644
index 0000000000000000000000000000000000000000..8099a99587f29816a631ee5be2a5c52586cb9ce7
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/models/quiz.js
@@ -0,0 +1,24 @@
+export default class Quiz {
+ constructor(quizId, title, creatorId, questions, category, difficulty) {
+ this.quizId = quizId;
+ this.title = title;
+ this.creatorId = creatorId;
+ this.questions = questions;
+ this.category = category;
+ this.difficulty = difficulty;
+ }
+
+
+
+
+}
+
+/**
+ QuizDTO:
+ Integer id;
+ String title;
+ List<Integer> questionIds;
+ Integer creatorId;
+ QuizCategory category;
+ QuizDifficulty difficulty;
+ */
diff --git a/FullstackProsjekt/src/frontend/src/router/index.js b/FullstackProsjekt/src/frontend/src/router/index.js
index 037e5958e53bf73f0177fa1e7369cf4c6e3a6cdb..80e8d9264e8eb9d8ada713d1c92e830d4e1fdf76 100644
--- a/FullstackProsjekt/src/frontend/src/router/index.js
+++ b/FullstackProsjekt/src/frontend/src/router/index.js
@@ -38,7 +38,7 @@ const router = createRouter({
{
path: '/createQuiz',
name: 'create Quiz',
- component: () => import('../views/EditQuizView.vue')
+ component: () => import('../views/NewQuizView.vue')
},
{
path: '/overviewQuiz',
diff --git a/FullstackProsjekt/src/frontend/src/tokenController.js b/FullstackProsjekt/src/frontend/src/tokenController.js
index ba0bae29a0087bfc1fa3ae7dd0b89d22d21c49d7..fcbdc07fb7d8cf05c56b9070b5339691c7b2819e 100644
--- a/FullstackProsjekt/src/frontend/src/tokenController.js
+++ b/FullstackProsjekt/src/frontend/src/tokenController.js
@@ -13,7 +13,6 @@ export const removeToken = () => {
}
export const getIdByToken= () => {
- //const token = getToken();
- //return apiClient.get('/user/getId');
- return 'UserName';
+ //TODO: set up encryption and getID
+ return apiClient.get('/user/getId/' + getToken());
}
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/views/EditQuizView.vue b/FullstackProsjekt/src/frontend/src/views/EditQuizView.vue
index 24dc987d2e4d0f8cbe200fe2732a8a8edde75c60..0d3e9164a69cecf8d2cfe0ed4006bd559215240c 100644
--- a/FullstackProsjekt/src/frontend/src/views/EditQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/EditQuizView.vue
@@ -18,18 +18,16 @@ let answerId = 1;
const quizName = ref('');
const errorMsg = ''; //TODO: display error to user*/
+//send list of question-ids?
export default {
components: {NewQuestionModel, QuestionCard},
data() {
return {
showNewQuestion: false,
+ creatorId: null,
quizId: null,
quizTitle: '',
- questions: [
- {id: 0, num: 1, text:'first question'},
- {id: 1, num: 2, text:'second question'},
- {id: 2, num: 3, text:'third question'}
- ],
+ questions: [], //question list is just a list of q-ids!!
category: '',
difficulty: '',
errorMsg: ''
@@ -43,18 +41,18 @@ export default {
methods: {
getQuiz(quizId) {
console.log('Fetching data for quiz: ', quizId);
- /*
try {
apiClient.get('/quiz/quiz/' + this.quizId).then(response => {
this.quizTitle = JSON.parse(response.data.title);
+ this.questions = JSON.parse(JSON.stringify(response.data.questions));
+ this.creatorId = JSON.parse(response.data.creatorId);
this.category = JSON.parse(response.data.category);
this.difficulty = JSON.parse(response.data.difficulty);
- this.questions = JSON.parse(JSON.stringify(response.data.questions));
});
} catch (error) {
//TODO: proper error handling
this.errorMsg = 'Error retrieving quizzes';
- }*/
+ }
},
newQuestion() {
this.showNewQuestion = true;
@@ -62,7 +60,10 @@ export default {
},
hideNewQuestion() {
this.showNewQuestion = false;
- //TODO: update answers, +answer count
+ //TODO: questions answers, +question count
+ },
+ deleteQuiz() {
+ //API req, quizId
}
},
};
@@ -153,15 +154,14 @@ async function submitQuestion() {
<template>
<body>
- <div class="createQuestion-page">
+ <div class="newQuizDiv">
<router-link to="/overviewQuiz"> <- </router-link>
<h1>Edit quiz {{quizId}}</h1>
- <p>Add questions</p>
<div class="question-div">
- <QuestionCard question-id="questionCard" v-for="question in questions"
- :key="question.id" :question-num="question.num" :question="question.text"/>
+ <QuestionCard v-for="question in questions" :question-id=question.id
+ :key="question.id"/>
</div>
- <NewQuestionModel v-if="showNewQuestion" @close="hideNewQuestion"/>
+ <NewQuestionModel v-if="showNewQuestion" @close="hideNewQuestion" quiz-id="this.quizId"/>
<!--
<div class="question-table">
<table class="table">
@@ -235,8 +235,9 @@ async function submitQuestion() {
</Teleport>
</div>
-->
- <div>
- <button @click="newQuestion" class="add-Btn"> Add Question </button> <br>
+ <div class="footer">
+ <button @click="newQuestion" class="add-Btn"> Add Question </button>
+ <button class="delete-btn"> DELETE QUIZ </button>
<button class="save-Btn"> SAVE QUIZ </button>
</div>
</div>
@@ -245,7 +246,7 @@ async function submitQuestion() {
</template>
<style>
-.createQuestion-page{
+.newQuizDiv{
padding: 20px;
}
diff --git a/FullstackProsjekt/src/frontend/src/views/NewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/NewQuizView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6f60f8f45ff84da03c7dde5c7ad99f85173dcb4c
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/views/NewQuizView.vue
@@ -0,0 +1,199 @@
+<script>
+import NewQuestionModel from "@/components/shared/NewQuestionModel.vue";
+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: '',
+ questions: [],
+ category: '',
+ difficulty: '',
+ errorMsg: '',
+ selectedCategory: null,
+ categories: categoryEnums,
+ selectedDifficulty: null,
+ difficulties: difficultyEnums,
+ //TODO: make quiz object
+ };
+ },
+ mounted() {
+ this.getUser();
+ },
+ methods: {
+ async constructQuiz() {
+ try {
+ await apiClient.post('quiz/create', {
+ title: this.quizTitle,
+ questionIds: this.questions,
+ creatorId: this.creatorId,
+ category: this.selectedCategory,
+ difficulty: this.selectedDifficulty
+ }).then(response => {
+ this.quizId = JSON.parse(response.data.id);
+ router.push({name: 'editQuiz', params: {quizId: this.quizId}});
+ })
+ } catch(error){
+ this.errorMsg = 'Cannot construct quiz';
+ }
+ },
+ 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>
+ </body>
+
+</template>
+
+<style>
+.newQuizDiv{
+ padding: 20px;
+}
+
+input{
+ height: 25px;
+ width: 100%;
+}
+
+.submit-section {
+ 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;
+}
+
+</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 898401846602a5c13a31b51f112cfa0c4ae3df4c..015609bef2c36c39405adaa9859f847a7afc5a3c 100644
--- a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
@@ -9,13 +9,14 @@
</div>
<div>
<button class="add-Btn">Create Quiz</button>
+ <router-link to="/createQuiz"> New quiz </router-link>
</div>
</div>
<div class="row">
<div class="quiz-div">
- <QuizCard id="quizCard" v-for= "quiz in quizList" :key="quiz.id" :quizDescription="quiz.description" :quizName="quiz.name" :quiz-id="quiz.id" />
+ <QuizCard id="quizCard" v-for= "quiz in quizList" :key="quiz.id" :quiz-id="quiz.id" />
</div>
</div>
</div>
@@ -25,6 +26,7 @@
<script>
import QuizCard from "@/components/shared/QuizCard.vue";
import {getIdByToken} from "@/tokenController.js";
+import {apiClient} from "@/api.js";
export default {
components: {
@@ -32,19 +34,17 @@ export default {
},
data() {
return {
- userName: '',
+ userId: null,
quizNo: 0,
- quizList: [
- { name: 'Quiz 1', description: 'Description of Quiz 1', id: 1 },
- { name: 'Quiz 2', description: 'Description of Quiz 2', id: 2 },
- { name: 'Quiz 3', description: 'Description of Quiz 3', id: 3 },
- { name: 'Quiz 4', description: 'Description of Quiz 4', id: 3 },
- { name: 'Quiz 5', description: 'Description of Quiz 5', id: 3 }
- ], //TODO: replace with request-method when ready, using quiz-objects
+ quizList: [],
};
},
- methods: {
- /*
+ mounted() {
+ this.setUserId();
+ this.populateQuizzes();
+ },
+ methods: {
+
async populateQuizzes() {
try {
await apiClient.get('/quiz/creator/' + this.userId).then(response => {
@@ -56,15 +56,12 @@ export default {
//TODO: proper error handling
this.errorMsg = 'Error retrieving quizzes';
}
- },*/
+ },/*
populateQuizzes() {
this.quizNo = this.quizList.length;
- },
- newQuiz() {
- //link to new quiz page
- },
+ },*/
setUserId() {
- this.userName = getIdByToken();
+ this.userId = getIdByToken();
}
},
created() {