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

feat: vragen en antwoorden op leerobjecten

backend/src/controllers/questions.ts

@@ -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 });
 

backend/src/controllers/students.ts

@@ -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 });
 }

backend/src/data/questions/answer-repository.ts

@@ -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({

backend/src/data/questions/question-repository.ts

@@ -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({

backend/src/services/questions.ts

@@ -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);
+    let assignment;
-    const assignment = mapToAssignment(questionData.inGroup.assignment as AssignmentDTO, clazz!);
+
+    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({

backend/tests/test_assets/questions/answers.testdata.ts

@@ -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];
 }

backend/tests/test_assets/questions/questions.testdata.ts

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

backend/tests/test_assets/users/teachers.testdata.ts

@@ -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',
+        firstName: 'David',
-        lastName: 'Coolsaet',
+        lastName: 'Bowie',
     });
 
     return [teacher01, teacher02, teacher03, teacher04, testleerkracht1];

frontend/package.json

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

frontend/src/components/QandA.vue

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

frontend/src/components/QuestionNotification.vue

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

frontend/src/components/SingleQuestion.vue

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

frontend/src/controllers/answers.ts

@@ -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 });
     }
 }

frontend/src/controllers/questions.ts

@@ -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 });
     }
 }

frontend/src/i18n/locale/de.json

@@ -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."
 }

frontend/src/i18n/locale/en.json

@@ -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."
 }

frontend/src/i18n/locale/fr.json

@@ -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."
 }

frontend/src/i18n/locale/nl.json

@@ -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."
 }

frontend/src/views/learning-paths/LearningPathPage.vue

@@ -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 {
+    .assignment-indicator {
-        margin-top: 10px;
+        position: absolute;
-        margin-bottom: 10px;
+        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>

package-lock.json

@@ -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",
+            "version": "1.5.142",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.141.tgz",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.142.tgz",
-            "integrity": "sha512-qS+qH9oqVYc1ooubTiB9l904WVyM6qNYxtOEEGReoZXw3xlqeYdFr5GclNzbkAufWgwWLEPoDi3d9MoRwwIjGw==",
+            "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"