diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index f650802950753632d91263426017b3b42d4eaf5a..690e042f411a9b4cfbd1688318775d496251051d 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -4,7 +4,6 @@ body {
background-color: #F2F2F2;
}
-
input {
padding: 5px;
border-radius: 5px;
@@ -76,6 +75,14 @@ select{
color: #FFFFFF;
border-radius: 10px;
}
+.play-btn:hover {
+ background-color: #425575;
+ transition: 0.4s ;
+}
+.play-btn:active{
+ background-color: #425575;
+ transition: 0.2s ;
+}
.edit-btn{
padding: 10px;
text-decoration: none;
@@ -141,10 +148,12 @@ select{
padding: 10px;
border-radius: 5px;
border-color: transparent;
- min-width: 160px;
font-family: monospace;
transition: 0.4s;
cursor: pointer;
+ width: 120px;
+ height: 50px;
+
}
.submit-btn:hover{
background-color: #a67d0e;
diff --git a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
index d70d3633f46b6374cb7acda8ecc2f0519b080054..9b3049bff693381e4263264d5c20c345b1ee4889 100644
--- a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
+++ b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
@@ -44,7 +44,7 @@ export default {
<div class="space"> </div>
<section class="cta">
- <h1> Enroll For Our Various Online Quizzes Anywhere You Are </h1>
+ <h1> Enroll For Our Various Online Quizzes </h1>
<router-link to="/about" class="hero-btn"> About us</router-link>
</section>
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
index 858f0e0df6378637819feea987ef6fc479cc0c1a..7e6fcbe607a8ec77e3c01bed724d1ad9a0a5f336 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
@@ -42,11 +42,13 @@ export default {
<template>
<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">
<table class="table">
<thead>
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 8fce6a7e68d57cec5f44a82eeed1bf54e47431c6..e441809449f5f69551d1362a603e4e9ee6ff003b 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue
@@ -182,58 +182,6 @@ async function submitQuestion() {
</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">
<button @click="newQuestion" class="add-Btn"> Add Question </button>
<button @click="deleteQuiz" class="delete-btn"> DELETE QUIZ </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 a56765a8b59ef4d2ec94ebb3efebabbb345b259e..bb4ef37274d13e191ae7a5f9824cba62991f2eba 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue
@@ -68,9 +68,7 @@ export default {
</template>
<style>
-.overViewQuestion-page{
- padding: 50px;
-}
+
.quiz-header{
display: flex;
@@ -89,4 +87,8 @@ export default {
padding-left: 25px;
padding-right: 25px;
}
+
+.play-btn {
+ margin-right: 10px;
+}
</style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
index 7bdb31bc7d8a625f7e10fdab4966a5baf329f798..1c4aa56c4f7a14ed53071b6d88fd6dbc30518158 100644
--- a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
@@ -1,6 +1,59 @@
<script >
+ import { apiClient } from "@/api.js";
+ import router from "@/router/index.js";
+ import Svg from "@/assets/Svg.vue";
+ import { categoryEnums } from "@/data/categories.js";
+
+ export default {
+ components: { Svg },
+ props: {
+ quizId: {
+ type: Number,
+ 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 {
+ const response = await apiClient.get('/quiz/quiz/' + this.quizId);
+ this.quizTitle = JSON.parse(response.data.title);
+ this.quizCategory = JSON.parse(response.data.category);
+ this.quizDifficulty = JSON.parse(response.data.difficulty);
+} catch (error) {
+ // TODO: Proper error handling
+ console.error('Error retrieving quiz:', error);
+}
+},
+ getIcon(category) {
+ // Check if the category exists in the enum
+ if (categoryEnums.includes(category)) {
+ // Retrieve the icon name from the mapping
+ return categoryIcons[category] || categoryIcons.Default;
+} else {
+ // If category not found, return the default icon
+ return categoryIcons.Default;
+}
+},
+ playQuiz() {
+ router.push({ name: 'playQuiz', params: { quizId: this.quizId } });
+},
+},
+};
</script>
+
<template>
<body class="dashboard">
<div class="top-bar">
@@ -14,32 +67,19 @@
</div>
<div class="row">
- <div class="course-col">
- <h3>Quiz 1</h3>
- <p>Insert photo </p>
- </div>
- <div class="course-col">
- <h3>Quiz 2</h3>
- <p>Insert photo </p>
- </div>
- <div class="course-col">
- <h3>Quiz 3</h3>
- <p>Insert photo</p>
- </div>
- </div>
+ <div class="quiz-col">
+ <div class="quiz-header">
+ <h3>{{ quizTitle }} Fake quiz name</h3>
+ <Svg :name="quizCategory" />
- <div class="row">
- <div class="course-col">
- <h3>Quiz 4</h3>
- <p>Insert photo </p>
- </div>
- <div class="course-col">
- <h3>Quiz 5</h3>
- <p>Insert photo </p>
- </div>
- <div class="course-col">
- <h3>Quiz 6</h3>
- <p>Insert photo</p>
+ </div>
+ <div class="quiz-body">
+ <p>Difficulty level: {{ quizDifficulty }}</p>
+ <p>Category: {{ quizCategory }}</p>
+ </div>
+ <div class="quiz-footer">
+ <button @click="playQuiz" class="play-btn">Play</button>
+ </div>
</div>
</div>
@@ -73,6 +113,15 @@
text-align: center;
}
+.quiz-col{
+ flex-basis: 31%;
+ background: #d7d7d7;
+ border-radius: 10px;
+ margin-bottom: 5%;
+ padding: 20px;
+ box-sizing: border-box;
+ transition: 0.5s;}
+
.create-btn{
text-decoration: none;
color: #E5E5E5;
diff --git a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
index eecbdde03450d3a11091819c636115da45864eca..5e3935d81fbe65909856f6499db0321194e77c8d 100644
--- a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
@@ -46,6 +46,7 @@ export default {
if (formData) {
this.name = formData.name;
this.email = formData.email;
+ this.title = formData.title;
this.comment = formData.comment;
}
}
@@ -61,25 +62,26 @@ export default {
<h1>Feedback</h1>
<p>Is there anything you would like to tell us? Comment below!</p>
<div class="contactBox">
- <label>Name</label>
- <input type="text" required v-model="name" ref="nameInput"/> <br>
- <label>Email</label>
- <input type="email" required v-model="email" ref="emailInput"/>
+ <label>Name</label> <br>
+ <input class="feedback-input" type="text" required v-model="name" ref="nameInput"/> <br>
+ <label>Email</label> <br>
+ <input class="feedback-input" type="email" required v-model="email" ref="emailInput"/>
<br>
<br>
<br>
<br>
- <label>Title</label>
-
- <input type="text" required v-model="title" ref="title"/> <br>
- <textarea id="comment" required v-model="comment" placeholder="Tell us whats on your mind!" ref="commentInput"></textarea>
+ <label>Title</label> <br>
+ <input class="feedback-input" type="text" required v-model="title" ref="title"/> <br>
+ <textarea class="comment" required v-model="comment" placeholder="Tell us whats on your mind!" ref="commentInput"></textarea>
</div>
</div>
+
<div class="submit-section">
<input class="submit-btn" type="submit"/>
</div>
+
</form>
</div>
</body>
@@ -98,7 +100,6 @@ export default {
text-align: center;
color: #242F40;
border-color: transparent;
- padding: 20px;
border-radius: 15px;
align-items: center;
border-style: solid;
@@ -107,15 +108,16 @@ export default {
.contactBox {
padding: 30px;
}
+.feedback-input{
+ width: 50vh;
+}
-
-textarea {
- margin: 5px;
+.comment {
padding: 8px;
border-radius: 5px;
border: none;
- min-width: 400px;
- height: 100px;
+ width: 50vh;
+ height: 15vh;
background-color: #E5E5E5;
}
@@ -125,4 +127,11 @@ textarea {
align-items: center;
}
+ @media (max-width: 700px){
+ .feedback-input,
+ .comment {
+ width: 90%; /* Adjust the width to fit smaller screens */
+ }
+ }
+
</style>
diff --git a/FullstackProsjekt/src/frontend/src/views/LoginView.vue b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
index 0edf3e3a88afb91f466e22b8bf476fd12817705e..43e1568c30804ff3366bfc877ac7bbcb4054e72c 100644
--- a/FullstackProsjekt/src/frontend/src/views/LoginView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
@@ -22,6 +22,7 @@ export default {
username: this.username,
password: this.password
}).then(response => {
+ alert(this.username + " is now logged in!")
setToken(response.data.jwt); //TODO: check token name
});
} catch (error) {
@@ -95,6 +96,7 @@ export default {
.password-input {
position: relative;
display: inline-block;
+ min-width: 300px;
}
diff --git a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
index 3ce325dc7a6aaadb90dfa8cdf0b11ac17693f6ff..a72fd5f2902f6602a955d01a0672462a546f7a1b 100644
--- a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
@@ -79,8 +79,5 @@ export default {
justify-content: space-between;
}
-#quizCard {
- width: calc(50% - 10px);
-}
</style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/views/SignupView.vue b/FullstackProsjekt/src/frontend/src/views/SignupView.vue
index 6137c56644c4815531472b6206a3e9b77c51d88c..e5d314ded58cd9b2d042fbbb3a2c79f3b864beba 100644
--- a/FullstackProsjekt/src/frontend/src/views/SignupView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/SignupView.vue
@@ -73,9 +73,11 @@
</div>
</div>
+
<div class="submit-section">
<input class="submit-btn" type="submit"/>
</div>
+
</form>
</div>
</body>
@@ -84,7 +86,7 @@
<style>
.signupPage {
- padding-top: 85px;
+ padding-top: 10vh;
display: flex;
justify-content: center;
align-items: center;
@@ -96,33 +98,30 @@
border-radius: 15px;
align-items: center;
border-style: solid;
- margin: 20px;
}
.signupBox {
- padding: 40px;
- min-width: 400px;
+ padding: 20px;
}
.password-input {
position: relative;
display: inline-block;
+ min-width: 300px;
}
.showPasswordIcon {
position: absolute;
top: 50%;
- right: 5px; /* Adjust positioning as needed */
+ right: 0;
transform: translateY(-50%);
border: none;
background: none;
cursor: pointer;
}
-.submit-section {
- display: flex;
- justify-content: center;
- align-items: center;
+.submit-section{
+ margin-top: 5vh;
}
</style>