Skip to content
Snippets Groups Projects
Commit ae952938 authored by Maddy's avatar Maddy
Browse files

Add new layout to DashboardView.vue quizzes

parent 06d37d02
No related branches found
No related tags found
1 merge request!31Display for user
Pipeline #269323 passed
Stage: build
Stage: test
Stage: package
Show whitespace changes
Inline Side-by-side
FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
+ 1
− 1
View file @ ae952938
......@@ -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>
......
FullstackProsjekt/src/frontend/src/views/DashboardView.vue
+ 74
− 25
View file @ ae952938
<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 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 class="course-col">
<h3>Quiz 6</h3>
<p>Insert photo</p>
</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;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment