transcript image in quiz sumary

macao/assets/quiz.js

@@ -49,6 +49,8 @@ function toggleHelpComment(question, htmlElement) {
 
 let correctIndic;
 
+
+// The following allows to define complementary attributes in survey JSONS
 $(function () {
     correctIndic = {
         node: document.getElementById("correct-indic"),
@@ -80,7 +82,6 @@ $(function () {
         visibleIndex: 0,
     });
 
-    // Add compComment to the metadata
     Survey.JsonObject.metaData.addProperty("question", {
         name: "compComment",
         type: "text",
@@ -89,6 +90,15 @@ $(function () {
         visibleIndex: 0,
     });
 
+    Survey.JsonObject.metaData.addProperty("question", {
+        name: "transcript",
+        type: "text",
+        category: "general",
+        default: "",
+        visibleIndex: 0,
+    });
+
+
     // Load survey model from JSON
     const survey = new Survey.Model(jsonStatic);
     const questions = survey.getAllQuestions();
@@ -175,7 +185,6 @@ $(function () {
     });
 
     survey.onComplete.add(function (sender) {
-
     if (sender.isSurveySummaryVisible) {
         console.log("Survey summary is visible");
         const userData = sender.data;
@@ -187,26 +196,32 @@ $(function () {
             const userAnswer = userData[q.name];
             const correctAnswer = q.correctAnswer;
             const isCorrect = userAnswer === correctAnswer;
+
             html += `<li><b>${q.title}</b><br>
                 Your answer: ${userAnswer} <br>
                 Correct answer: ${correctAnswer} <br>
                 <span style="color:${isCorrect ? 'green' : 'red'};">
                     ${isCorrect ? "Correct" : "Incorrect"}
-                    </span>
-                  </li><br>`;
+                </span>`;
+
+            // Check if the transcript property exists and add an image if it does
+            if (q.transcript) {
+                html += `<br><img src="${q.transcript}" alt="Transcript Image" class="inlineImage">`;
+            }
+
+            html += `</li><br>`;
         });
 
         html += "</ul>";
         summaryDiv.innerHTML = html;
-
         // Append the summary after the survey container
         document.getElementById("surveyContainer").appendChild(summaryDiv);
-
     }
 });
 
 
 
+
     // Ugly tricks to avoid creating a new theme
     const customTheme = SurveyTheme.DefaultLightPanelless;
     const primColor = getComputedStyle(document.documentElement, null).getPropertyValue('--macao-primary-color');