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

feat(frontend): Vue can now interact with the chosen answers for questions.

Browse source
This commit is contained in:
Gerald Schmittinger 2025-04-16 13:02:13 +02:00
parent 6d452c7f72
commit 63d1ed8bd2
6 changed files with 99 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/views/learning-paths/gift-adapters/essay-question-adapter.ts Normal file
View file

@ -0,0 +1,13 @@
export const essayQuestionAdapter: GiftAdapter = {
questionType: "Essay",
installListener(questionElement: Element, answerUpdateCallback: (newAnswer: string | number | object) => void): void {
const textArea = questionElement.querySelector('textarea')!;
textArea.addEventListener('input', () => answerUpdateCallback(textArea.value));
},
setAnswer(questionElement: Element, answer: string | number | object): void {
const textArea = questionElement.querySelector('textarea')!;
textArea.value = String(answer);
}
}

5
frontend/src/views/learning-paths/gift-adapters/gift-adapter.d.ts vendored Normal file
View file

@ -0,0 +1,5 @@
interface GiftAdapter {
questionType: string;
installListener(questionElement: Element, answerUpdateCallback: (newAnswer: string | number | object) => void): void;
setAnswer(questionElement: Element, answer: string | number | object): void;
}

8
frontend/src/views/learning-paths/gift-adapters/gift-adapters.ts Normal file
View file

@ -0,0 +1,8 @@
import {multipleChoiceQuestionAdapter} from "@/views/learning-paths/gift-adapters/multiple-choice-question-adapter.ts";
import {essayQuestionAdapter} from "@/views/learning-paths/gift-adapters/essay-question-adapter.ts";
export const giftAdapters = [multipleChoiceQuestionAdapter, essayQuestionAdapter];
export function getGiftAdapterForType(questionType: string): GiftAdapter | undefined {
return giftAdapters.find(it => it.questionType === questionType);
}

26
frontend/src/views/learning-paths/gift-adapters/multiple-choice-question-adapter.ts Normal file
View file

@ -0,0 +1,26 @@
export const multipleChoiceQuestionAdapter: GiftAdapter = {
questionType: "MC",
installListener(questionElement: Element, answerUpdateCallback: (newAnswer: string | number | object) => void): void {
questionElement.querySelectorAll('input[type=radio]').forEach(element => {
const input = element as HTMLInputElement;
input.addEventListener('change', () => {
answerUpdateCallback(parseInt(input.value));
});
// Optional: initialize value if already selected
if (input.checked) {
answerUpdateCallback(parseInt(input.value));
}
});
},
setAnswer(questionElement: Element, answer: string | number | object): void {
questionElement.querySelectorAll('input[type=radio]').forEach(element => {
const input = element as HTMLInputElement;
console.log(`input: ${input.value}, answer: ${answer}`);
input.checked = String(answer) === String(input.value);
console.log(input.checked);
});
}
}