diff --git a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
index c376a1631b1ee5d3c1f03c7928772b4edcebc3df..268da91fe0b5a76ae94c8642f480496856104c53 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
@@ -21,6 +21,7 @@ export default {
}
},
beforeMount() {
+ //console.log("before mount:" + this.questionId);
this.getQuestion(this.questionId);
this.findCorrectAnswerIndex();
},
@@ -28,11 +29,11 @@ export default {
getQuestion(questionId) {
console.log('Fetching question: ', questionId);
try {
- apiClient.get('/questions/get/' + this.questionId).then(response => {
+ apiClient.get('/questions/get/' + 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.questionText = response.data.questionText;
+ this.answers = response.data.options;
this.correctAnswer = response.data.answer;
this.type = response.data.type;
this.score = response.data.score;
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue b/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
index 9ae9df8b0c04438f482d7b9c3723dee657eb11eb..78a89c890953b7b0e2454df095d6f29cb52089a5 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
@@ -10,7 +10,7 @@ export default {
data() {
return {
questionText: '',
- answers: [{ text: '', correct: false }],
+ answers: [],
correctAnswerIndex: 0,
type: 'MC',
score: 0,
@@ -22,37 +22,39 @@ export default {
//TODO: error prevention/handling
async handleSubmit() {
try {
- this.findCorrectAnswer();
- await apiClient.post('/questions', {
- quizId: this.quizId,
+ //this.findCorrectAnswer();
+ //console.log(this.correctAnswer);
+ await apiClient.post('/questions/save', {
questionText: this.questionText,
type: this.type,
answer: this.correctAnswer,
- options: this.answers.map(answer => answer.text), //just the strings!
- score: this.score
+ //options: this.answers.map(answer => answer.text),
+ options: this.answers,
+ score: this.score,
+ quizId: Number(this.quizId),
})
+ this.$emit('close');
} catch (error) {
+ console.log("error: " + error);
this.errorMsg = 'Error submitting question';
}
- },
- closeModal() {
- this.$emit('close');
+ //this.$emit('close');
},
newAnswer() {
- this.answers.push({ text: '', correct: false });
+ this.answers.push({ text: ''});
},
- findCorrectAnswer(){
- if (this.correctAnswerIndex !== null && this.answers[this.correctAnswerIndex]) {
- this.correctAnswer = this.answers[this.correctAnswerIndex].text;
- }
+ selectOption(option) {
+ this.correctAnswer = option;
+ console.log(this.correctAnswer);
}
+
}
};
</script>
<template>
- <div class="modal-overlay" @click="closeModal">
+ <div class="modal-overlay" >
<div @click.stop class="modal-mask">
<div class="modal-container">
<form @submit.prevent="handleSubmit">
@@ -68,15 +70,15 @@ export default {
<thead>
<tr>
<th scope="col">Answer</th>
- <th scope="col">Correct ?</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>
+ <input type="radio" :id="index" :value="answer" v-model="correctAnswerIndex"
+ :checked="answer === correctAnswer" @change="selectOption(answer)">
</td>
</tr>
</tbody>
@@ -84,9 +86,10 @@ export default {
</div>
<div class="modal-footer">
<button class="edit-btn" @click="newAnswer">Add answer</button>
- <button class="modal-default-button" @click="$emit('close')">SUBMIT</button>
+ <button class="modal-default-button" type="submit">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 669e7d3d107565a945422222439bdce8556d2537..8b368357077d1d6bf2727cb68e3ba1c4a183f58f 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/QuestionCard.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/QuestionCard.vue
@@ -10,6 +10,10 @@ export default {
questionId: {
type: Number,
required: true,
+ },
+ questionText: {
+ type: String,
+ required: true,
}
},
mounted() {
@@ -45,7 +49,7 @@ export default {
<template>
<div class="question-wrapper">
<h4>{{questionId}}</h4>
- <h3>{{question}}</h3>
+ <h3>{{questionText}}</h3>
<div class="quiz-footer">
<button @click="editQuestion" class="edit-btn">Edit</button>
<button @click="deleteQuestion" class="delete-btn">Delete</button>
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 118468ef06224742a5c4e865960cee8ef3d666ed..be6eb9a88a44af8cab80c3e5e668c0c5aacc5cdb 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue
@@ -36,6 +36,7 @@ export default {
},
beforeMount() {
this.quizId = this.$route.params.quizId;
+ console.log(this.quizId);
this.getQuiz(this.quizId);
},
mounted() {
@@ -43,20 +44,29 @@ export default {
//this.getQuiz(this.quizId);
},
methods: {
- getQuiz(quizId) {
+ async getQuiz(quizId) {
console.log('Fetching data for quiz: ', quizId);
try {
- apiClient.get('/quiz/quiz/' + this.quizId).then(response => {
+ await apiClient.get('/quiz/quiz/' + quizId).then(response => {
console.log(response);
this.quizTitle = response.data.title;
- this.questions = response.data.questions;
- this.creatorId = JSON.parse(response.data.creatorId);
+ //this.questions = response.data.questions;
+ this.creatorId = response.data.creatorId;
this.category = response.data.category;
this.difficulty = response.data.difficulty;
});
+ //console.log("fetching questions");
+ //get questions separately
+ await apiClient.get('/questions/allQuestionsToAQuiz/' + quizId).then(response => {
+ //console.log("fetched questions");
+ //console.log(response.data);
+
+ this.questions = response.data;
+ console.log(this.questions[1]);
+ });
} catch (error) {
//TODO: proper error handling
- console.log(error);
+ console.log("Edit quiz error: " + error);
this.errorMsg = 'Error retrieving quizzes';
}
},
@@ -164,10 +174,11 @@ async function submitQuestion() {
<router-link to="/overviewQuiz"> <- </router-link>
<h1>Edit quiz: {{quizTitle}}</h1>
<div class="question-div">
- <QuestionCard id="questionCard" v-for="question in questions" :key="question.id" :question-id=question.id
- />
+
+ <QuestionCard id="questionCard" v-for="question in questions" :key="question.id"
+ :question-id=question.id :question-text=question.questionText />
</div>
- <NewQuestionModel v-if="showNewQuestion" @close="hideNewQuestion" quiz-id="this.quizId"/>
+ <NewQuestionModel v-if="showNewQuestion" @close="hideNewQuestion" :quiz-id="quizId"/>
<div class="footer">
<button @click="newQuestion" class="add-Btn"> Add Question </button>
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 6962bc07a7b58ecf20a1ce60e705e28b6bfc5908..a4735c2d7ee40459c17ef617204861815d5c3b3c 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue
@@ -41,7 +41,7 @@ export default {
router.push({name: 'playQuiz', params: {quizId: this.quizId}});
},
editQuiz() {
- console.log("edit quiz " + this.quizTitle);
+ console.log("edit quiz " + this.quizTitle + ", quizId: " + this.quizId);
//create new router-method to editQuiz, using quizId
router.push({name: 'editQuiz', params: {quizId: this.quizId}});
},
diff --git a/FullstackProsjekt/src/frontend/src/views/ProfileView.vue b/FullstackProsjekt/src/frontend/src/views/ProfileView.vue
index 63d772bbb72c9f85f19ae76708a8137447501d83..f40f30a9f3c31834e2d4fcb6a8da8b1a68a45bcc 100644
--- a/FullstackProsjekt/src/frontend/src/views/ProfileView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/ProfileView.vue
@@ -1,3 +1,63 @@
+
+
+<script>
+import Svg from "@/assets/Svg.vue";
+import Modal from "@/components/shared/modal/Modal.vue"
+import {ref} from 'vue'
+import {getIdByToken} from "@/tokenController.js";
+import {apiClient} from "@/api.js";
+
+
+export default {
+ components: {Modal, Svg},
+ data() {
+ return {
+ userId: null,
+ quizList:[],
+ showModal: ref(false),
+ isLoggedIn: true,
+ user: {
+ username: '',
+ }
+ };
+ },
+ mounted() {
+ this.user.username = localStorage.getItem('username');
+ this.populateQuizzes();
+ },
+ computed: {
+ quizAttempts() {
+ // Mock data for quiz attempts (replace with actual data)
+ return [
+ { id: 1, quizTitle: 'Math Quiz', score: '80%', date: '2024-04-05' },
+ { id: 2, quizTitle: 'Science Quiz', score: '90%', date: '2024-04-04' }
+ ];
+ }
+ },
+ methods:{
+ logout(){
+ this.isLoggedIn = false;
+ this.$router.push('/login');
+ },
+ closeModal(){
+ this.showModal=false;
+ },
+ async populateQuizzes() {
+ try {
+ await this.setUserId();
+ const response = await apiClient.get('/quiz/creator/' + this.userId);
+ this.quizList = response.data;
+ } catch (error) {
+ console.error('Error retrieving quizzes:', error);
+ }
+ },
+ async setUserId() {
+ this.userId = await getIdByToken();
+ }
+ }
+};
+</script>
+
<template>
<body>
<div class="profile">