Force correct order and newlines for matrix solutions

client/src/components/content-blocks/Solution.vue

@@ -13,6 +13,7 @@
       <p
         class="solution__text solution-text fade"
         data-cy="solution-text"
+
         v-if="visible"
         v-html="value.text"/>
     </transition>

client/src/helpers/survey-solutions.js

@@ -1,5 +1,21 @@
 const extractAnswerFromQuestion = (previous, question) => {
-  return [...previous, {title: question.title, answer: question.correctAnswer}];
+  let answer = question.correctAnswer;
+  if (question.getType() === 'matrix') {
+    const correctAnswer = question.correctAnswer;
+    const questionRows = question.getRows();
+    const keys = questionRows.map(question => {
+      const text = question.value;
+      if (/[,.!?]/.test(text.slice(-1))) {
+        return text.slice(0, -1);
+      }
+      return text;
+    }); // get the keys as they appear in the question, without punctuation at the end
+
+    const answers = keys.map(key => `${key}: ${correctAnswer[key]}`);
+
+    answer = answers.join('\n');
+  }
+  return [...previous, {title: question.title, answer}];
 };
 
 export const extractSurveySolutions = (prev, element) => {

client/src/pages/survey.vue

@@ -63,18 +63,7 @@
             if (!answer.answer) {
               return previous;
             }
-            let answerText;
+            const answerText = answer.answer.replace(/\n/g, '<br>'); // replace all newlines with line breaks
-            if (typeof answer.answer === 'object') {
-              // this means the answer comes from a matrix, where the keys are the labels and the values are the respective answers
-              let answerObject = answer.answer;
-              let keysAndValues = [];
-              for (let prop of Object.keys(answerObject)) {
-                  keysAndValues.push(`${prop}: ${answerObject[prop]}`);
-              }
-              answerText = keysAndValues.join(', ');
-            } else {
-              answerText = answer.answer;
-            }
             return `
             ${previous}
              <h2 class="solution-text__heading">${answer.title}</h2>