Format matrix solutions in a more readable way

client/src/components/school-class/ClassSelectionWidget.vue

@@ -50,7 +50,7 @@
   import CurrentClass from '@/components/school-class/CurrentClass';
   import AddIcon from '@/components/icons/AddIcon';
 
-  import updateSelectedClassMixin from '@/mixins/updateSelectedClass';
+  import updateSelectedClassMixin from '@/mixins/update-selected-class';
   import sidebarMixin from '@/mixins/sidebar';
   import meMixin from '@/mixins/me';
 

client/src/helpers/survey-solutions.js

@@ -11,11 +11,9 @@ const extractAnswerFromQuestion = (previous, question) => {
       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');
+    answer = keys.map(key => `${key}: ${correctAnswer[key]}`); // return an array, it gets converted to a string further up
   }
-  return [...previous, {title: question.title, answer}];
+  return [...previous, {title: question.title, answer, type: question.getType()}];
 };
 
 export const extractSurveySolutions = (prev, element) => {

client/src/pages/oldClasses.vue

@@ -18,7 +18,7 @@
 <script>
   import OLD_CLASSES_QUERY from '@/graphql/gql/oldClasses.gql';
 
-  import updateSelectedClassMixin from '@/mixins/updateSelectedClass';
+  import updateSelectedClassMixin from '@/mixins/update-selected-class';
 
   export default {
     mixins: [updateSelectedClassMixin],

client/src/pages/survey.vue

@@ -58,17 +58,27 @@
       return (module.solutionsEnabled || isTeacher) && !this.survey.isCompleted;
     },
     solution() {
+      // todo: should this be done inside of Solution.vue?
       return {
         text: this.answers.reduce((previous, answer) => {
           if (!answer.answer) {
             return previous;
           }
-            const answerText = answer.answer.replace(/\n/g, '<br>'); // replace all newlines with line breaks
+          if (answer.type === 'matrix') {
+            // wrap all the answers inside li tags and convert to a single string
+            const answerText = answer.answer.map(a => `<li class="solution-text__list-item">${a}</li>`).join('');
             return `
             ${previous}
             <h2 class="solution-text__heading">${answer.title}</h2>
-             <p class="solution-text__answer">${answerText}</p>
+            <ul class="solution-text__answer solution-text__list">${answerText}</ul>
             `;
+          } else {
+            return `
+            ${previous}
+             <h2 class="solution-text__heading">${answer.title}</h2>
+             <p class="solution-text__answer">${answer.answer}</p>
+             `;
+          }
         }, '')
       };
     },

client/src/styles/_solutions.scss

@@ -8,4 +8,14 @@
     @include regular-text;
     margin-bottom: $medium-spacing;
   }
+
+  &__list {
+    list-style: disc;
+    padding-left: $medium-spacing;
+  }
+
+  &__list-item {
+    @include inline-title;
+    margin-bottom: $medium-spacing;
+  }
 }