Merge branch 'frontend-createquiz-functionality' into 'main'

Frontend createquiz functionality

See merge request !41

FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue

 <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">

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>

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
     }
   }
 }

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"/>
 

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>

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>
 

FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue

@@ -40,7 +40,6 @@ export default {
   mounted() {
     this.populateQuizzes(); // Call populateQuizzes directly
   },
-
   methods: {
     async populateQuizzes() {
       try {