Skip to content
Snippets Groups Projects
Commit 0091d7b3 authored by Kristiane Skogvang Kolshus's avatar Kristiane Skogvang Kolshus
Browse files

Merge branch 'frontend-editQuiz-requests' into 'questions_endpoint' 

Repair editQuiz functionality

See merge request !47
parents 098ebde2 2282dbe3
No related branches found
No related tags found
2 merge requests!50Questions endpoint,!47Repair editQuiz functionality
Pipeline #270065 passed
Stage: build
Stage: test
Stage: package
Show whitespace changes
Inline Side-by-side
Showing
with 111 additions and 32 deletions
FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
+ 4
− 3
View file @ 0091d7b3
......@@ -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;
......
FullstackProsjekt/src/frontend/src/components/shared/NewQuestionModel.vue
+ 22
− 19
View file @ 0091d7b3
......@@ -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>
......
FullstackProsjekt/src/frontend/src/components/shared/QuestionCard.vue
+ 5
− 1
View file @ 0091d7b3
......@@ -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>
......
FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue
+ 19
− 8
View file @ 0091d7b3
......@@ -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>
......
FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue
+ 1
− 1
View file @ 0091d7b3
......@@ -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}});
},
......
FullstackProsjekt/src/frontend/src/views/ProfileView.vue
+ 60
− 0
View file @ 0091d7b3
<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">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment