diff --git a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
index 7e6fcbe607a8ec77e3c01bed724d1ad9a0a5f336..058ab50a165732a2bb8a15779a240a65efe83181 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
@@ -1,10 +1,5 @@
<script>
-/*
-<script setup>
-const props = defineProps({
- show: Boolean
-})*/
-
+import {apiClient} from "@/api.js";
export default {
props: {
questionId: {
@@ -12,34 +7,125 @@ export default {
required: true
}
},
- mounted() {
- //APi req
- },
data() {
return {
+ quizId: null,
+ question: null,
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}
- ]
+ answers: [{ text: '', correct: false }],
+ correctAnswerIndex: null,
+ type: null,
+ score: null,
+ correctAnswer: null,
+ errorMsg: ''
}
},
-
+ beforeMount() {
+ this.getQuestion(this.questionId);
+ this.findCorrectAnswerIndex();
+ },
methods: {
+ getQuestion(questionId) {
+ console.log('Fetching question: ', questionId);
+ try {
+ apiClient.get('/questions/get/' + this.questionId).then(response => {
+ this.question = response.data;
+ this.quizId = response.data.quizId;
+ this.questionText = response.data.id;
+ this.answers = JSON.parse(response.data.options);
+ this.correctAnswer = response.data.answer;
+ this.type = response.data.type;
+ this.score = response.data.score;
+ });
+ } catch (error) {
+ this.errorMsg = 'Question not found';
+ }
+ },
+ 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),
+ score: this.score
+ })
+ } catch (error) {
+ this.errorMsg = 'Error submitting question';
+ }
+ },
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;
+ }
},
+ findCorrectAnswerIndex(){
+ if(!this.correctAnswerIndex) {
+ for(let i = 0; i < this.answers; i++) {
+ if(this.correctAnswer === this.answers[i]) {
+ this.correctAnswerIndex = i;
+ }
+ }
+ }
+ }
}
-};
+}
+
</script>
<template>
+ <div class="modal-overlay" @click="closeModal">
+ <div @click.stop class="modal-mask">
+ <div class="modal-container">
+ <form @submit.prevent="handleSubmit">
+ <div class="question-title">
+ <h3>Question:</h3>
+ <input v-model="questionText">
+
+ <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>
+ <!--
<div class="modal-overlay" @click="closeModal">
<div @click.stop class="modal-mask">
@@ -81,7 +167,7 @@ export default {
</div>
</div>
</div>
- </div>
+ </div>-->
<!--
<Transition name="modal">
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue b/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
index b502ac6b73757b77db8798c8b99c021dd75cb282..9ae9df8b0c04438f482d7b9c3723dee657eb11eb 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
@@ -30,11 +30,9 @@ export default {
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';
+ this.errorMsg = 'Error submitting question';
}
},
closeModal() {
@@ -66,10 +64,6 @@ export default {
<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>
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/QuestionCard.vue b/FullstackProsjekt/src/frontend/src/components/shared/QuestionCard.vue
index c5fe7d7972238ff17d2b6ef5240c3e19c42cef05..669e7d3d107565a945422222439bdce8556d2537 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/QuestionCard.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/QuestionCard.vue
@@ -3,6 +3,7 @@ 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 {
components: {EditQuestionModel},
props: {
@@ -23,7 +24,11 @@ export default {
},
methods: {
deleteQuestion() {
- //API req, delete question
+ try {
+ apiClient.post('/questions/delete/' + this.questionId, )
+ } catch (error) {
+ this.errorMsg = 'Error deleting question';
+ }
},
editQuestion() {
this.showEditQuestion = true;
@@ -31,7 +36,7 @@ export default {
},
hideEditQuestion() {
this.showEditQuestion = false;
- //TODO: update answers, +answer count
+ //TODO: update answer count
}
}
}
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 156d51f3bfd4982d0b3cb433dd6ac2b3bb83974a..5d9bd8c67a9539def66ac50848ffa74e67c094c8 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue
@@ -34,16 +34,20 @@ export default {
//TODO: make quiz object
};
},
- mounted() {
+ beforeMount() {
this.quizId = this.$route.params.quizId;
this.getQuiz(this.quizId);
},
+ mounted() {
+ //this.quizId = this.$route.params.quizId;
+ //this.getQuiz(this.quizId);
+ },
methods: {
getQuiz(quizId) {
console.log('Fetching data for quiz: ', quizId);
try {
- apiClient.get('/quiz/quiz/' + this.quizId).then(response => {
- console.log(response)
+ apiClient.get('/questions/allQuestionsToAQuiz/' + this.quizId).then(response => {
+ console.log(response);
this.quizTitle = JSON.parse(response.data.title);
this.questions = response.data.questions;
this.creatorId = JSON.parse(response.data.creatorId);
@@ -52,6 +56,7 @@ export default {
});
} catch (error) {
//TODO: proper error handling
+ console.log(error);
this.errorMsg = 'Error retrieving quizzes';
}
},
@@ -157,10 +162,10 @@ async function submitQuestion() {
<body>
<div class="newQuizDiv">
<router-link to="/overviewQuiz"> <- </router-link>
- <h1>Edit quiz {{quizId}}</h1>
+ <h1>Edit quiz: {{quizTitle}}</h1>
<div class="question-div">
- <QuestionCard v-for="question in questions" :question-id=question.id
- :key="question.id"/>
+ <QuestionCard id="questionCard" v-for="question in questions" :key="question.id" :question-id=question.id
+ />
</div>
<NewQuestionModel v-if="showNewQuestion" @close="hideNewQuestion" quiz-id="this.quizId"/>
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 bb4ef37274d13e191ae7a5f9824cba62991f2eba..6962bc07a7b58ecf20a1ce60e705e28b6bfc5908 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue
@@ -41,6 +41,7 @@ export default {
router.push({name: 'playQuiz', params: {quizId: this.quizId}});
},
editQuiz() {
+ console.log("edit quiz " + this.quizTitle);
//create new router-method to editQuiz, using quizId
router.push({name: 'editQuiz', params: {quizId: this.quizId}});
},
@@ -61,7 +62,7 @@ export default {
<p>{{ quizCategory }}</p>
</div>
<div class="quiz-footer">
- <button @click="playQuiz" class="play-btn">Play</button>
+ <!--<button @click="playQuiz" class="play-btn">Play</button>-->
<button @click="editQuiz" class="edit-btn">Edit</button>
</div>
</div>
diff --git a/FullstackProsjekt/src/frontend/src/views/LoginView.vue b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
index ee0a8cc05e0d4071dcb124abbafe4ffcc28d61eb..58971f1703ea4e835873536c823faef9cf2786d9 100644
--- a/FullstackProsjekt/src/frontend/src/views/LoginView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
@@ -61,7 +61,7 @@ export default {
</div> <br>
<label class="error-message">{{errorMsg}}</label><br>
- <p1> Don't have a account?</p1><router-link to="/signup" id="signUpLink">SIGNUP!</router-link>
+ <p> Don't have a account?</p><router-link to="/signup" id="signUpLink">SIGNUP!</router-link>
</div>
</div>
diff --git a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
index a72fd5f2902f6602a955d01a0672462a546f7a1b..2132700773a2c7f725693d6cf702e6a600d0738b 100644
--- a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
@@ -40,7 +40,6 @@ export default {
mounted() {
this.populateQuizzes(); // Call populateQuizzes directly
},
-
methods: {
async populateQuizzes() {
try {