tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

Merge pull request #220 from SELab-2/feat/leerpad-vragen

Browse source 
feat: vragen en antwoorden op leerobjecten
This commit is contained in:
Timo De Meyst 2025-04-24 21:57:42 +02:00 • committed by GitHub
commit 8faaf089e5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 540 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/src/controllers/questions.ts
View file

@ -31,7 +31,7 @@ export function getQuestionId(learningObjectIdentifier: LearningObjectIdentifier
export async function getAllQuestionsHandler(req: Request, res: Response): Promise<void> {
const hruid = req.params.hruid;
const version = req.params.version;
const language = req.query.lang as string;
const language = (req.query.lang ? req.query.lang : FALLBACK_LANG) as string;
const full = req.query.full === 'true';
requireFields({ hruid });

2
backend/src/controllers/students.ts
View file

@ -73,7 +73,7 @@ export async function getStudentAssignmentsHandler(req: Request, res: Response):
const username = req.params.username;
requireFields({ username });
const assignments = getStudentAssignments(username, full);
const assignments = await getStudentAssignments(username, full);
res.json({ assignments });
}

6
backend/src/data/questions/answer-repository.ts
View file

@ -12,7 +12,11 @@ export class AnswerRepository extends DwengoEntityRepository<Answer> {
content: answer.content,
timestamp: new Date(),
});
return this.insert(answerEntity);
await this.insert(answerEntity);
answerEntity.toQuestion = answer.toQuestion;
answerEntity.author = answer.author;
answerEntity.content = answer.content;
return answerEntity;
}
public async findAllAnswersToQuestion(question: Question): Promise<Answer[]> {
return this.findAll({

2
backend/src/data/questions/question-repository.ts
View file

@ -24,7 +24,7 @@ export class QuestionRepository extends DwengoEntityRepository<Question> {
questionEntity.author = question.author;
questionEntity.inGroup = question.inGroup;
questionEntity.content = question.content;
return this.insert(questionEntity);
return await this.insert(questionEntity);
}
public async findAllQuestionsAboutLearningObject(loId: LearningObjectIdentifier): Promise<Question[]> {
return this.findAll({

13
backend/src/services/questions.ts
View file

@ -12,6 +12,7 @@ import { AssignmentDTO } from '@dwengo-1/common/interfaces/assignment';
import { fetchStudent } from './students.js';
import { NotFoundException } from '../exceptions/not-found-exception.js';
import { FALLBACK_VERSION_NUM } from '../config.js';
import { fetchAssignment } from './assignments.js';
export async function getQuestionsAboutLearningObjectInAssignment(
loId: LearningObjectIdentifier,
@ -86,8 +87,16 @@ export async function createQuestion(loId: LearningObjectIdentifier, questionDat
const author = await fetchStudent(questionData.author!);
const content = questionData.content;
const clazz = await getClassRepository().findById((questionData.inGroup.assignment as AssignmentDTO).within);
const assignment = mapToAssignment(questionData.inGroup.assignment as AssignmentDTO, clazz!);
let assignment;
if (typeof questionData.inGroup.assignment === 'number' && typeof questionData.inGroup.class === 'string') {
assignment = await fetchAssignment(questionData.inGroup.class, questionData.inGroup.assignment);
} else {
// TODO check if necessary and no conflicts to delete this if
const clazz = await getClassRepository().findById((questionData.inGroup.assignment as AssignmentDTO).within);
assignment = mapToAssignment(questionData.inGroup.assignment as AssignmentDTO, clazz!);
}
const inGroup = await getGroupRepository().findByAssignmentAndGroupNumber(assignment, questionData.inGroup.groupNumber);
const question = await questionRepository.createQuestion({

20
backend/tests/test_assets/questions/answers.testdata.ts
View file

@ -2,6 +2,8 @@ import { EntityManager } from '@mikro-orm/core';
import { Answer } from '../../../src/entities/questions/answer.entity';
import { Teacher } from '../../../src/entities/users/teacher.entity';
import { Question } from '../../../src/entities/questions/question.entity';
import { getTestleerkracht1 } from '../users/teachers.testdata';
import { getQuestion07 } from './questions.testdata';
export function makeTestAnswers(em: EntityManager, teachers: Teacher[], questions: Question[]): Answer[] {
const answer01 = em.create(Answer, {
@ -28,5 +30,21 @@ export function makeTestAnswers(em: EntityManager, teachers: Teacher[], question
content: 'answer3',
});
return [answer01, answer02, answer03];
const answer04 = em.create(Answer, {
author: getTestleerkracht1(),
toQuestion: getQuestion07(),
sequenceNumber: 1,
timestamp: new Date(),
content: 'this is a test answer',
});
const answer05 = em.create(Answer, {
author: getTestleerkracht1(),
toQuestion: getQuestion07(),
sequenceNumber: 2,
timestamp: new Date(),
content: 'this is a test answer',
});
return [answer01, answer02, answer03, answer04, answer05];
}

40
backend/tests/test_assets/questions/questions.testdata.ts
View file

@ -3,6 +3,9 @@ import { Question } from '../../../src/entities/questions/question.entity';
import { Language } from '@dwengo-1/common/util/language';
import { Student } from '../../../src/entities/users/student.entity';
import { Group } from '../../../src/entities/assignments/group.entity';
import { getTestleerling1 } from '../users/students.testdata';
import { testLearningObjectMultipleChoice } from '../content/learning-objects.testdata';
import { getGroup1ConditionalLearningPath } from '../assignments/groups.testdata';
export function makeTestQuestions(em: EntityManager, students: Student[], groups: Group[]): Question[] {
const question01 = em.create(Question, {
@ -66,10 +69,43 @@ export function makeTestQuestions(em: EntityManager, students: Student[], groups
learningObjectHruid: 'id05',
sequenceNumber: 4,
author: students[2],
inGroup: groups[3], // Group #4 for Assignment #2 in class 'id02'
inGroup: groups[5], // Group #4 for Assignment #2 in class 'id02'
timestamp: new Date(),
content: 'question',
});
return [question01, question02, question03, question04, question05, question06];
question07 = em.create(Question, {
learningObjectLanguage: Language.English,
learningObjectVersion: 1,
learningObjectHruid: testLearningObjectMultipleChoice.hruid,
sequenceNumber: 1,
author: getTestleerling1(),
inGroup: getGroup1ConditionalLearningPath(),
timestamp: new Date(),
content: 'this is a test question',
});
question08 = em.create(Question, {
learningObjectLanguage: Language.English,
learningObjectVersion: 1,
learningObjectHruid: testLearningObjectMultipleChoice.hruid,
sequenceNumber: 2,
author: getTestleerling1(),
inGroup: getGroup1ConditionalLearningPath(),
timestamp: new Date(),
content: 'this is a second test question',
});
return [question01, question02, question03, question04, question05, question06, question07, question08];
}
let question08: Question;
let question07: Question;
export function getQuestion07(): Question {
return question07;
}
export function getQuestion08(): Question {
return question08;
}

4
backend/tests/test_assets/users/teachers.testdata.ts
View file

@ -30,8 +30,8 @@ export function makeTestTeachers(em: EntityManager): Teacher[] {
// Makes sure when logged in as testleerkracht1, there exists a corresponding user
testleerkracht1 = em.create(Teacher, {
username: 'testleerkracht1',
firstName: 'Kris',
lastName: 'Coolsaet',
firstName: 'David',
lastName: 'Bowie',
});
return [teacher01, teacher02, teacher03, teacher04, testleerkracht1];

1
frontend/package.json
View file

@ -22,6 +22,7 @@
"@vueuse/core": "^13.1.0",
"axios": "^1.8.2",
"oidc-client-ts": "^3.1.0",
"rollup": "^4.40.0",
"uuid": "^11.1.0",
"vue": "^3.5.13",
"vue-i18n": "^11.1.2",

20
frontend/src/components/QandA.vue Normal file
View file

@ -0,0 +1,20 @@
<script setup lang="ts">
import type { QuestionDTO } from "@dwengo-1/common/interfaces/question";
import SingleQuestion from "./SingleQuestion.vue";
defineProps<{
questions: QuestionDTO[];
}>();
</script>
<template>
<div class="space-y-4">
<div
v-for="question in questions"
:key="(question.sequenceNumber, question.content)"
class="border rounded-2xl p-4 shadow-sm bg-white"
>
<SingleQuestion :question="question"></SingleQuestion>
</div>
</div>
</template>
<style scoped></style>

28
frontend/src/components/QuestionNotification.vue Normal file
View file

@ -0,0 +1,28 @@
<script setup lang="ts">
import type { LearningObject } from "@/data-objects/learning-objects/learning-object";
import { useQuestionsQuery } from "@/queries/questions";
import type { LearningObjectIdentifierDTO } from "@dwengo-1/common/interfaces/learning-content";
import { computed } from "vue";
const props = defineProps<{
node: LearningObject;
}>();
const loid = {
hruid: props.node.key,
version: props.node.version,
language: props.node.language,
} as LearningObjectIdentifierDTO;
const { data } = useQuestionsQuery(loid);
const hasQuestions = computed(() => (data.value?.questions.length ?? 0) > 0);
</script>
<template v-if="!isLoading & !error">
<v-icon
v-if="hasQuestions"
icon="mdi-help-circle-outline"
color="red"
size="small"
/>
</template>
<style scoped></style>

188
frontend/src/components/SingleQuestion.vue Normal file
View file

@ -0,0 +1,188 @@
<script setup lang="ts">
import { useAnswersQuery, useCreateAnswerMutation } from "@/queries/answers";
import type { QuestionDTO, QuestionId } from "@dwengo-1/common/interfaces/question";
import { computed, ref } from "vue";
import UsingQueryResult from "./UsingQueryResult.vue";
import type { AnswersResponse } from "@/controllers/answers";
import type { AnswerData, AnswerDTO } from "@dwengo-1/common/interfaces/answer";
import authService from "@/services/auth/auth-service";
const props = defineProps<{
question: QuestionDTO;
}>();
const expanded = ref(false);
function toggle(): void {
expanded.value = !expanded.value;
}
function formatDate(timestamp: string | Date): string {
return new Date(timestamp).toLocaleString();
}
const answersQuery = useAnswersQuery(
computed(
() =>
({
learningObjectIdentifier: props.question.learningObjectIdentifier,
sequenceNumber: props.question.sequenceNumber,
}) as QuestionId,
),
);
const questionId: QuestionId = {
learningObjectIdentifier: props.question.learningObjectIdentifier,
sequenceNumber: props.question.sequenceNumber as number,
};
const createAnswerMutation = useCreateAnswerMutation(questionId);
const answer = ref("");
function submitAnswer(): void {
const answerData: AnswerData = {
author: authService.authState.user?.profile.preferred_username as string,
content: answer.value,
};
if (answer.value !== "") {
createAnswerMutation.mutate(answerData, {
onSuccess: async () => {
answer.value = "";
await answersQuery.refetch();
},
});
}
}
</script>
<template>
<div class="space-y-4">
<div
class="flex justify-between items-center mb-2"
style="
margin-right: 5px;
margin-left: 5px;
font-weight: bold;
display: flex;
flex-direction: row;
justify-content: space-between;
"
>
<span class="font-semibold text-lg text-gray-800">{{
question.author.firstName + " " + question.author.lastName
}}</span>
<span class="text-sm text-gray-500">{{ formatDate(question.timestamp) }}</span>
</div>
<div
class="text-gray-700 mb-3"
style="margin-left: 10px"
>
{{ question.content }}
</div>
<div
v-if="authService.authState.activeRole === 'teacher'"
class="answer-input-container"
>
<input
v-model="answer"
type="text"
placeholder="answer: ..."
class="answer-input"
/>
<button
@click="submitAnswer"
class="submit-button"
>
▶
</button>
</div>
<using-query-result
:query-result="answersQuery"
v-slot="answersResponse: { data: AnswersResponse }"
>
<button
v-if="answersResponse.data.answers && answersResponse.data.answers.length > 0"
@click="toggle()"
class="text-blue-600 hover:underline text-sm"
>
{{ expanded ? "Hide Answers" : "Show Answers" }}
</button>
<div
v-if="expanded"
class="mt-3 pl-4 border-l-2 border-blue-200 space-y-2"
>
<div
v-for="(answer, answerIndex) in answersResponse.data.answers as AnswerDTO[]"
:key="answerIndex"
class="text-gray-600"
>
<div
class="flex justify-between items-center mb-2"
style="
margin-right: 5px;
margin-left: 5px;
font-weight: bold;
display: flex;
flex-direction: row;
justify-content: space-between;
"
>
<span class="font-semibold text-lg text-gray-800">{{ answer.author.username }}</span>
<span class="text-sm text-gray-500">{{ formatDate(answer.timestamp) }}</span>
</div>
<div
class="text-gray-700 mb-3"
style="margin-left: 10px"
>
{{ answer.content }}
</div>
</div>
</div>
</using-query-result>
</div>
</template>
<style scoped>
.answer-input {
flex-grow: 1;
outline: none;
border: none;
background: transparent;
color: #374151; /* gray-700 */
font-size: 0.875rem; /* smaller font size */
}
.answer-input::placeholder {
color: #9ca3af; /* gray-400 */
}
.submit-button {
margin-left: 0.25rem;
padding: 0.25rem;
background-color: #f3f4f6; /* gray-100 */
border-radius: 9999px;
transition: background-color 0.2s;
border: none;
cursor: pointer;
}
.submit-button:hover {
background-color: #e5e7eb; /* gray-200 */
}
.submit-icon {
width: 0.75rem;
height: 0.75rem;
color: #4b5563; /* gray-600 */
}
.answer-input-container {
display: flex;
align-items: center;
border: 1px solid #d1d5db; /* gray-300 */
border-radius: 9999px;
padding: 0.5rem 1rem;
max-width: 28rem;
width: 100%;
}
</style>

18
frontend/src/controllers/answers.ts
View file

@ -1,6 +1,7 @@
import type { AnswerData, AnswerDTO, AnswerId } from "@dwengo-1/common/interfaces/answer";
import { BaseController } from "@/controllers/base-controller.ts";
import type { QuestionId } from "@dwengo-1/common/interfaces/question";
import type { LearningObjectIdentifierDTO } from "@dwengo-1/common/interfaces/learning-content";
export interface AnswersResponse {
answers: AnswerDTO[] | AnswerId[];
@ -11,29 +12,34 @@ export interface AnswerResponse {
}
export class AnswerController extends BaseController {
loId: LearningObjectIdentifierDTO;
sequenceNumber: number;
constructor(questionId: QuestionId) {
super(
`learningObject/${questionId.learningObjectIdentifier.hruid}/:${questionId.learningObjectIdentifier.version}/questions/${questionId.sequenceNumber}/answers`,
);
this.loId = questionId.learningObjectIdentifier;
this.sequenceNumber = questionId.sequenceNumber;
super(`learningObject/${loId.hruid}/:${loId.version}/questions/${this.sequenceNumber}/answers`);
}
async getAll(full = true): Promise<AnswersResponse> {
return this.get<AnswersResponse>("/", { lang: this.loId.lang, full });
return this.get<AnswersResponse>("/", { lang: this.loId.language, full });
}
async getBy(seq: number): Promise<AnswerResponse> {
return this.get<AnswerResponse>(`/${seq}`, { lang: this.loId.lang });
return this.get<AnswerResponse>(`/${seq}`, { lang: this.loId.language });
}
async create(answerData: AnswerData): Promise<AnswerResponse> {
return this.post<AnswerResponse>("/", answerData, { lang: this.loId.lang });
return this.post<AnswerResponse>("/", answerData, { lang: this.loId.language });
}
async remove(seq: number): Promise<AnswerResponse> {
return this.delete<AnswerResponse>(`/${seq}`, { lang: this.loId.lang });
return this.delete<AnswerResponse>(`/${seq}`, { lang: this.loId.language });
}
async update(seq: number, answerData: AnswerData): Promise<AnswerResponse> {
return this.put<AnswerResponse>(`/${seq}`, answerData, { lang: this.loId.lang });
return this.put<AnswerResponse>(`/${seq}`, answerData, { lang: this.loId.language });
}
}

14
frontend/src/controllers/questions.ts
View file

@ -11,28 +11,30 @@ export interface QuestionResponse {
}
export class QuestionController extends BaseController {
loId: LearningObjectIdentifierDTO;
constructor(loId: LearningObjectIdentifierDTO) {
this.loId = loId;
super(`learningObject/${loId.hruid}/:${loId.version}/questions`);
this.loId = loId;
}
async getAll(full = true): Promise<QuestionsResponse> {
return this.get<QuestionsResponse>("/", { lang: this.loId.lang, full });
return this.get<QuestionsResponse>("/", { lang: this.loId.language, full });
}
async getBy(sequenceNumber: number): Promise<QuestionResponse> {
return this.get<QuestionResponse>(`/${sequenceNumber}`, { lang: this.loId.lang });
return this.get<QuestionResponse>(`/${sequenceNumber}`, { lang: this.loId.language });
}
async create(questionData: QuestionData): Promise<QuestionResponse> {
return this.post<QuestionResponse>("/", questionData, { lang: this.loId.lang });
return this.post<QuestionResponse>("/", questionData, { lang: this.loId.language });
}
async remove(sequenceNumber: number): Promise<QuestionResponse> {
return this.delete<QuestionResponse>(`/${sequenceNumber}`, { lang: this.loId.lang });
return this.delete<QuestionResponse>(`/${sequenceNumber}`, { lang: this.loId.language });
}
async update(sequenceNumber: number, questionData: QuestionData): Promise<QuestionResponse> {
return this.put<QuestionResponse>(`/${sequenceNumber}`, questionData, { lang: this.loId.lang });
return this.put<QuestionResponse>(`/${sequenceNumber}`, questionData, { lang: this.loId.language });
}
}

1
frontend/src/i18n/locale/de.json
View file

@ -119,6 +119,7 @@
"enterUsername": "Geben Sie den Benutzernamen der Lehrkraft ein, die Sie einladen möchten",
"username": "Nutzername",
"invite": "einladen",
"assignmentIndicator": "AUFGABE",
"searchAllLearningPathsTitle": "Alle Lernpfade durchsuchen",
"searchAllLearningPathsDescription": "Nicht gefunden, was Sie gesucht haben? Klicken Sie hier, um unsere gesamte Lernpfad-Datenbank zu durchsuchen."
}

1
frontend/src/i18n/locale/en.json
View file

@ -119,6 +119,7 @@
"enterUsername": "enter the username of the teacher you would like to invite",
"username": "username",
"invite": "invite",
"assignmentIndicator": "ASSIGNMENT",
"searchAllLearningPathsTitle": "Search all learning paths",
"searchAllLearningPathsDescription": "You didn't find what you were looking for? Click here to search our whole database of available learning paths."
}

1
frontend/src/i18n/locale/fr.json
View file

@ -119,6 +119,7 @@
"enterUsername": "entrez le nom d'utilisateur de l'enseignant que vous souhaitez inviter",
"username": "Nom d'utilisateur",
"invite": "inviter",
"assignmentIndicator": "DEVOIR",
"searchAllLearningPathsTitle": "Rechercher tous les parcours d'apprentissage",
"searchAllLearningPathsDescription": "Vous n'avez pas trouvé ce que vous cherchiez ? Cliquez ici pour rechercher dans toute notre base de données de parcours d'apprentissage disponibles."
}

1
frontend/src/i18n/locale/nl.json
View file

@ -119,6 +119,7 @@
"enterUsername": "vul de gebruikersnaam van de leerkracht die je wilt uitnodigen in",
"username": "gebruikersnaam",
"invite": "uitnodigen",
"assignmentIndicator": "OPDRACHT",
"searchAllLearningPathsTitle": "Alle leerpaden doorzoeken",
"searchAllLearningPathsDescription": "Niet gevonden waar je naar op zoek was? Klik hier om onze volledige databank van beschikbare leerpaden te doorzoeken."
}

181
frontend/src/views/learning-paths/LearningPathPage.vue
View file

@ -13,6 +13,15 @@
import authService from "@/services/auth/auth-service.ts";
import { LearningPathNode } from "@/data-objects/learning-paths/learning-path-node.ts";
import LearningPathGroupSelector from "@/views/learning-paths/LearningPathGroupSelector.vue";
import { useCreateQuestionMutation, useQuestionsQuery } from "@/queries/questions";
import type { QuestionsResponse } from "@/controllers/questions";
import type { LearningObjectIdentifierDTO } from "@dwengo-1/common/interfaces/learning-content";
import QandA from "@/components/QandA.vue";
import type { QuestionData, QuestionDTO } from "@dwengo-1/common/interfaces/question";
import { useStudentAssignmentsQuery, useStudentGroupsQuery } from "@/queries/students";
import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
import QuestionNotification from "@/components/QuestionNotification.vue";
const router = useRouter();
const route = useRoute();
@ -68,6 +77,17 @@
return currentIndex < nodesList.value?.length ? nodesList.value?.[currentIndex - 1] : undefined;
});
const getQuestionsQuery = useQuestionsQuery(
computed(
() =>
({
language: currentNode.value?.language,
hruid: currentNode.value?.learningobjectHruid,
version: currentNode.value?.version,
}) as LearningObjectIdentifierDTO,
),
);
const navigationDrawerShown = ref(true);
function isLearningObjectCompleted(learningObject: LearningObject): boolean {
@ -125,6 +145,51 @@
},
});
}
const studentAssignmentsQueryResult = useStudentAssignmentsQuery(
authService.authState.user?.profile.preferred_username,
);
const pathIsAssignment = computed(() => {
const assignments = (studentAssignmentsQueryResult.data.value?.assignments as AssignmentDTO[]) || [];
return assignments.some(
(assignment) => assignment.learningPath === props.hruid && assignment.language === props.language,
);
});
const loID: LearningObjectIdentifierDTO = {
hruid: props.learningObjectHruid as string,
language: props.language,
};
const createQuestionMutation = useCreateQuestionMutation(loID);
const groupsQueryResult = useStudentGroupsQuery(authService.authState.user?.profile.preferred_username);
const questionInput = ref("");
function submitQuestion(): void {
const assignments = studentAssignmentsQueryResult.data.value?.assignments as AssignmentDTO[];
const assignment = assignments.find(
(assignment) => assignment.learningPath === props.hruid && assignment.language === props.language,
);
const groups = groupsQueryResult.data.value?.groups as GroupDTO[];
const group = groups?.find((group) => group.assignment === assignment?.id) as GroupDTO;
const questionData: QuestionData = {
author: authService.authState.user?.profile.preferred_username,
content: questionInput.value,
inGroup: group, //TODO: POST response zegt dat dit null is???
};
if (questionInput.value !== "") {
createQuestionMutation.mutate(questionData, {
onSuccess: async () => {
questionInput.value = ""; // Clear the input field after submission
await getQuestionsQuery.refetch(); // Reload the questions
},
onError: (_) => {
// TODO Handle error
// - console.error(e);
},
});
}
}
</script>
<template>
@ -202,7 +267,17 @@
:icon="ICONS[getNavItemState(node)]"
></v-icon>
</template>
<template v-slot:append> {{ node.estimatedTime }}' </template>
<template v-slot:append>
<QuestionNotification :node="node"></QuestionNotification>
<div>
{{
node.estimatedTime!.toLocaleString("en-US", {
minimumIntegerDigits: 2,
useGrouping: false,
})
}}'
</div>
</template>
</v-list-item>
</template>
</using-query-result>
@ -217,6 +292,14 @@
>
</template>
</v-list-item>
<v-list-item>
<div
v-if="authService.authState.activeRole === 'student' && pathIsAssignment"
class="assignment-indicator"
>
{{ t("assignmentIndicator") }}
</div>
</v-list-item>
</div>
</v-navigation-drawer>
<div class="control-bar-above-content">
@ -239,6 +322,25 @@
v-if="currentNode"
></learning-object-view>
</div>
<div
v-if="authService.authState.activeRole === 'student' && pathIsAssignment"
class="question-box"
>
<div class="input-wrapper">
<input
type="text"
placeholder="question : ..."
class="question-input"
v-model="questionInput"
/>
<button
@click="submitQuestion"
class="send-button"
>
▶
</button>
</div>
</div>
<div class="navigation-buttons-container">
<v-btn
prepend-icon="mdi-chevron-left"
@ -257,6 +359,12 @@
{{ t("next") }}
</v-btn>
</div>
<using-query-result
:query-result="getQuestionsQuery"
v-slot="questionsResponse: { data: QuestionsResponse }"
>
<QandA :questions="(questionsResponse.data.questions as QuestionDTO[]) ?? []" />
</using-query-result>
</using-query-result>
</template>
@ -284,8 +392,73 @@
display: flex;
justify-content: space-between;
}
.button-in-nav {
margin-top: 10px;
margin-bottom: 10px;
.assignment-indicator {
position: absolute;
bottom: 10px;
left: 10px;
padding: 4px 12px;
border: 2px solid #f8bcbc;
border-radius: 20px;
color: #f36c6c;
background-color: rgba(248, 188, 188, 0.1);
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
z-index: 2; /* Less than modals/popups */
}
.question-box {
width: 100%;
max-width: 400px;
margin: 20px auto;
font-family: sans-serif;
}
.input-wrapper {
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 999px;
padding: 8px 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.question-input {
flex: 1;
border: none;
outline: none;
font-size: 14px;
background-color: transparent;
}
.question-input::placeholder {
color: #999;
}
.send-button {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
color: #555;
transition: color 0.2s ease;
}
.send-button:hover {
color: #000;
}
.discussion-link {
margin-top: 8px;
font-size: 13px;
color: #444;
}
.discussion-link a {
color: #3b82f6; /* blue */
text-decoration: none;
}
.discussion-link a:hover {
text-decoration: underline;
}
</style>

90
package-lock.json generated
View file

@ -107,6 +107,7 @@
"@vueuse/core": "^13.1.0",
"axios": "^1.8.2",
"oidc-client-ts": "^3.1.0",
"rollup": "^4.40.0",
"uuid": "^11.1.0",
"vue": "^3.5.13",
"vue-i18n": "^11.1.2",
@ -2320,13 +2321,11 @@
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"peer": true
]
},
"node_modules/@rollup/rollup-android-arm64": {
"version": "4.40.0",
@ -2335,13 +2334,11 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"peer": true
]
},
"node_modules/@rollup/rollup-darwin-arm64": {
"version": "4.40.0",
@ -2350,13 +2347,11 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"peer": true
]
},
"node_modules/@rollup/rollup-darwin-x64": {
"version": "4.40.0",
@ -2365,13 +2360,11 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"peer": true
]
},
"node_modules/@rollup/rollup-freebsd-arm64": {
"version": "4.40.0",
@ -2380,13 +2373,11 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
],
"peer": true
]
},
"node_modules/@rollup/rollup-freebsd-x64": {
"version": "4.40.0",
@ -2395,13 +2386,11 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
],
"peer": true
]
},
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
"version": "4.40.0",
@ -2410,13 +2399,11 @@
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"peer": true
]
},
"node_modules/@rollup/rollup-linux-arm-musleabihf": {
"version": "4.40.0",
@ -2425,13 +2412,11 @@
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"peer": true
]
},
"node_modules/@rollup/rollup-linux-arm64-gnu": {
"version": "4.40.0",
@ -2440,13 +2425,11 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"peer": true
]
},
"node_modules/@rollup/rollup-linux-arm64-musl": {
"version": "4.40.0",
@ -2455,13 +2438,11 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"peer": true
]
},
"node_modules/@rollup/rollup-linux-loongarch64-gnu": {
"version": "4.40.0",
@ -2470,13 +2451,11 @@
"cpu": [
"loong64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"peer": true
]
},
"node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
"version": "4.40.0",
@ -2485,13 +2464,11 @@
"cpu": [
"ppc64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"peer": true
]
},
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
"version": "4.40.0",
@ -2500,13 +2477,11 @@
"cpu": [
"riscv64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"peer": true
]
},
"node_modules/@rollup/rollup-linux-riscv64-musl": {
"version": "4.40.0",
@ -2515,13 +2490,11 @@
"cpu": [
"riscv64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"peer": true
]
},
"node_modules/@rollup/rollup-linux-s390x-gnu": {
"version": "4.40.0",
@ -2530,13 +2503,11 @@
"cpu": [
"s390x"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"peer": true
]
},
"node_modules/@rollup/rollup-linux-x64-gnu": {
"version": "4.40.0",
@ -2545,13 +2516,11 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"peer": true
]
},
"node_modules/@rollup/rollup-linux-x64-musl": {
"version": "4.40.0",
@ -2560,13 +2529,11 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"peer": true
]
},
"node_modules/@rollup/rollup-win32-arm64-msvc": {
"version": "4.40.0",
@ -2575,13 +2542,11 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"peer": true
]
},
"node_modules/@rollup/rollup-win32-ia32-msvc": {
"version": "4.40.0",
@ -2590,13 +2555,11 @@
"cpu": [
"ia32"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"peer": true
]
},
"node_modules/@rollup/rollup-win32-x64-msvc": {
"version": "4.40.0",
@ -2605,13 +2568,11 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"peer": true
]
},
"node_modules/@scarf/scarf": {
"version": "1.4.0",
@ -2824,7 +2785,6 @@
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/express": {
@ -6427,9 +6387,9 @@
"license": "MIT"
},
"node_modules/electron-to-chromium": {
"version": "1.5.141",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.141.tgz",
"integrity": "sha512-qS+qH9oqVYc1ooubTiB9l904WVyM6qNYxtOEEGReoZXw3xlqeYdFr5GclNzbkAufWgwWLEPoDi3d9MoRwwIjGw==",
"version": "1.5.142",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.142.tgz",
"integrity": "sha512-Ah2HgkTu/9RhTDNThBtzu2Wirdy4DC9b0sMT1pUhbkZQ5U/iwmE+PHZX1MpjD5IkJCc2wSghgGG/B04szAx07w==",
"dev": true,
"license": "ISC"
},
@ -7854,7 +7814,6 @@
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"optional": true,
@ -13619,7 +13578,6 @@
"version": "4.40.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.0.tgz",
"integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/estree": "1.0.7"