feat(backend): Rendering van meerkeuzevragen en open vragen (essay) toegevoegd + getest

backend/src/services/learning-objects/processing/audio/audio-processor.ts

@@ -1,5 +1,7 @@
 /**
  * Based on https://github.com/dwengovzw/Learning-Object-Repository/blob/main/app/processors/audio/audio_processor.js
+ *
+ * WARNING: The support for audio learning objects is currently still experimental.
  */
 
 import DOMPurify from 'isomorphic-dompurify';

backend/src/services/learning-objects/processing/extern/extern-processor.ts

@@ -1,5 +1,7 @@
 /**
  * Based on https://github.com/dwengovzw/Learning-Object-Repository/blob/main/app/processors/extern/extern_processor.js
+ *
+ * WARNING: The support for external content is currently still experimental.
  */
 
 import DOMPurify from 'isomorphic-dompurify';

backend/src/services/learning-objects/processing/gift/gift-processor.ts

@@ -36,18 +36,22 @@ class GiftProcessor extends StringProcessor {
     override renderFn(giftString: string) {
         const quizQuestions: GIFTQuestion[] = parse(giftString);
 
-        let html = "<div class='gift'>";
+        let html = "<div class='learning-object-gift'>\n";
+        let i = 1;
         for (let question of quizQuestions) {
-            html += this.renderQuestion(question);
+            html += `    <div class='gift-question' id='gift-q${i}'>\n`;
+            html += "        " + this.renderQuestion(question, i).replaceAll(/\n(.+)/g, "\n        $1"); // replace for indentation.
+            html += `    </div>\n`;
+            i++;
         }
-        html += "</div>"
+        html += "</div>\n"
 
         return DOMPurify.sanitize(html);
     }
 
-    private renderQuestion<T extends GIFTQuestion>(question: T): string {
+    private renderQuestion<T extends GIFTQuestion>(question: T, questionNumber: number): string {
         const renderer = this.renderers[question.type] as GIFTQuestionRenderer<T>;
-        return renderer.render(question);
+        return renderer.render(question, questionNumber);
     }
 }
 

backend/src/services/learning-objects/processing/gift/question-renderers/category-question-renderer.ts

@@ -3,7 +3,7 @@ import {Category} from "gift-pegjs";
 import {ProcessingError} from "../../processing-error";
 
 export class CategoryQuestionRenderer extends GIFTQuestionRenderer<Category> {
-    render(question: Category): string {
+    render(question: Category, questionNumber: number): string {
         throw new ProcessingError("The question type 'Category' is not supported yet!");
     }
 }

backend/src/services/learning-objects/processing/gift/question-renderers/description-question-renderer.ts

@@ -3,7 +3,7 @@ import {Description} from "gift-pegjs";
 import {ProcessingError} from "../../processing-error";
 
 export class DescriptionQuestionRenderer extends GIFTQuestionRenderer<Description> {
-    render(question: Description): string {
+    render(question: Description, questionNumber: number): string {
         throw new ProcessingError("The question type 'Description' is not supported yet!");
     }
 }

backend/src/services/learning-objects/processing/gift/question-renderers/essay-question-renderer.ts

@@ -2,7 +2,15 @@ import {GIFTQuestionRenderer} from "./gift-question-renderer";
 import {Essay} from "gift-pegjs";
 
 export class EssayQuestionRenderer extends GIFTQuestionRenderer<Essay> {
-    render(question: Essay): string {
-        return "";
+    render(question: Essay, questionNumber: number): string {
+        let renderedHtml = "";
+        if (question.title) {
+            renderedHtml += `<h2 class='gift-title' id='gift-q${questionNumber}-title'>${question.title}</h2>\n`;
+        }
+        if (question.stem) {
+            renderedHtml += `<p class='gift-stem' id='gift-q${questionNumber}-stem'>${question.stem.text}</p>\n`;
+        }
+        renderedHtml += `<textarea class='gift-essay-answer' id='gift-q${questionNumber}-answer'></textarea>\n`;
+        return renderedHtml;
     }
 }

backend/src/services/learning-objects/processing/gift/question-renderers/gift-question-renderer.ts

@@ -7,7 +7,8 @@ export abstract class GIFTQuestionRenderer<T extends GIFTQuestion> {
     /**
      * Render the given question to HTML.
      * @param question The question.
+     * @param questionNumber The index number of the question.
      * @returns The question rendered as HTML.
      */
-    abstract render(question: T): string;
+    abstract render(question: T, questionNumber: number): string;
 }

backend/src/services/learning-objects/processing/gift/question-renderers/matching-question-renderer.ts

@@ -3,7 +3,7 @@ import {Matching} from "gift-pegjs";
 import {ProcessingError} from "../../processing-error";
 
 export class MatchingQuestionRenderer extends GIFTQuestionRenderer<Matching> {
-    render(question: Matching): string {
+    render(question: Matching, questionNumber: number): string {
         throw new ProcessingError("The question type 'Matching' is not supported yet!");
     }
 }

backend/src/services/learning-objects/processing/gift/question-renderers/multiple-choice-question-renderer.ts

@@ -2,7 +2,22 @@ import {GIFTQuestionRenderer} from "./gift-question-renderer";
 import {MultipleChoice} from "gift-pegjs";
 
 export class MultipleChoiceQuestionRenderer extends GIFTQuestionRenderer<MultipleChoice> {
-    render(question: MultipleChoice): string {
-        return "";
+    render(question: MultipleChoice, questionNumber: number): string {
+        let renderedHtml = "";
+        if (question.title) {
+            renderedHtml += `<h2 class='gift-title' id='gift-q${questionNumber}-title'>${question.title}</h2>\n`;
+        }
+        if (question.stem) {
+            renderedHtml += `<p class='gift-stem' id='gift-q${questionNumber}-stem'>${question.stem.text}</p>\n`;
+        }
+        let i = 0;
+        for (let choice of question.choices) {
+            renderedHtml += `<div class="gift-choice-div">\n`;
+            renderedHtml += `    <input type='radio' id='gift-q${questionNumber}-choice-${i}' name='gift-q${questionNumber}-choices' value="${i}"/>\n`;
+            renderedHtml += `    <label for='gift-q${questionNumber}-choice-${i}'>${choice.text}</label>\n`;
+            renderedHtml += `</div>\n`;
+            i++;
+        }
+        return renderedHtml;
     }
 }

backend/src/services/learning-objects/processing/gift/question-renderers/numerical-question-renderer.ts

@@ -3,7 +3,7 @@ import {Numerical} from "gift-pegjs";
 import {ProcessingError} from "../../processing-error";
 
 export class NumericalQuestionRenderer extends GIFTQuestionRenderer<Numerical> {
-    render(question: Numerical): string {
+    render(question: Numerical, questionNumber: number): string {
         throw new ProcessingError("The question type 'Numerical' is not supported yet!");
     }
 }

backend/src/services/learning-objects/processing/gift/question-renderers/short-question-renderer.ts

@@ -3,7 +3,7 @@ import {ShortAnswer} from "gift-pegjs";
 import {ProcessingError} from "../../processing-error";
 
 export class ShortQuestionRenderer extends GIFTQuestionRenderer<ShortAnswer> {
-    render(question: ShortAnswer): string {
+    render(question: ShortAnswer, questionNumber: number): string {
         throw new ProcessingError("The question type 'ShortAnswer' is not supported yet!");
     }
 }

backend/src/services/learning-objects/processing/gift/question-renderers/true-false-question-renderer.ts

@@ -3,7 +3,7 @@ import {TrueFalse} from "gift-pegjs";
 import {ProcessingError} from "../../processing-error";
 
 export class TrueFalseQuestionRenderer extends GIFTQuestionRenderer<TrueFalse> {
-    render(question: TrueFalse): string {
+    render(question: TrueFalse, questionNumber: number): string {
         throw new ProcessingError("The question type 'TrueFalse' is not supported yet!");
     }
 }

backend/src/services/learning-objects/processing/pdf/pdf-processor.ts

@@ -1,5 +1,7 @@
 /**
  * Based on https://github.com/dwengovzw/Learning-Object-Repository/blob/main/app/processors/pdf/pdf_processor.js
+ *
+ * WARNING: The support for PDF learning objects is currently still experimental.
  */
 
 import DOMPurify from 'isomorphic-dompurify';