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

@@ -15,22 +15,22 @@
 </template>
 
 <script>
-  import * as SurveyVue from 'survey-vue';
-  import {css} from '@/survey.config';
+import * as SurveyVue from 'survey-vue';
+import {css} from '@/survey.config';
 
-  import SURVEY_QUERY from '@/graphql/gql/surveyQuery.gql';
-  import MODULE_QUERY from '@/graphql/gql/moduleByIdQuery.gql';
-  import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
-  import Solution from '@/components/content-blocks/Solution';
+import SURVEY_QUERY from '@/graphql/gql/surveyQuery.gql';
+import MODULE_QUERY from '@/graphql/gql/moduleByIdQuery.gql';
+import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
+import Solution from '@/components/content-blocks/Solution';
 
-  import {extractSurveySolutions} from '@/helpers/survey-solutions';
-  import {isTeacher} from '@/helpers/is-teacher';
+import {extractSurveySolutions} from '@/helpers/survey-solutions';
+import {isTeacher} from '@/helpers/is-teacher';
 
-  import {meQuery} from '@/graphql/queries';
+import {meQuery} from '@/graphql/queries';
 
-  const Survey = SurveyVue.Survey;
+const Survey = SurveyVue.Survey;
 
-  export default {
+export default {
   props: ['id'],
 
   components: {
@@ -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>
+             `;
+          }
         }, '')
       };
     },
@@ -185,14 +195,14 @@
     },
     me: meQuery
   }
-  };
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import "@/styles/_variables.scss";
+@import "@/styles/_mixins.scss";
 
-  .survey-page {
+.survey-page {
   max-width: 800px;
   display: grid;
   grid-template-rows: auto 1fr;
@@ -206,5 +216,5 @@
     @include meta-title;
     margin: 0;
   }
-  }
+}
 </style>

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;
+  }
 }