Add solutions to survey

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

@@ -5,7 +5,7 @@
       <template v-else>ausblenden</template>
     </a>
     <transition name="fade">
-      <p class="solution__text fade" data-cy="solution-text" v-if="visible" v-html="value.text">
+      <p class="solution__text solution-text fade" data-cy="solution-text" v-if="visible" v-html="value.text">
       </p>
     </transition>
   </div>

client/src/pages/survey.vue

@@ -2,10 +2,8 @@
   <div class="survey-page">
     <h1 class="survey-page__title">{{title}}</h1>
     <survey :survey='survey'></survey>
-    <div>
+
-      Answers:
+    <solution :value="solution"></solution>
-      {{answers}}
-    </div>
     <div v-if="surveyComplete">
       <a class="button button--primary" @click="reopen">Übung bearbeiten</a>
     </div>
@@ -18,6 +16,7 @@
 
   import SURVEY_QUERY from '@/graphql/gql/surveyQuery.gql';
   import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
+  import Solution from '@/components/content-blocks/Solution';
 
   const Survey = SurveyVue.Survey;
 
@@ -25,6 +24,7 @@
     props: ['id'],
 
     components: {
+      Solution,
       Survey
     },
 
@@ -39,9 +39,25 @@
       surveyComplete() {
         return this.survey && this.survey.isCompleted
       },
+      solution() {
+        return {
+          text: this.answers.reduce((previous, answer) => {
+            if (!answer.answer) {
+              return previous
+            }
+            return `
+            ${previous}
+             <h2 class="solution-text__heading">${answer.title}</h2>
+             <p class="solution-text__answer">${answer.answer}</p>
+             `
+          }, '')
+        }
+      },
       answers() {
         return this.survey.currentPage && this.survey.currentPage.elements ? this.survey.currentPage.elements.reduce((prev, element) => {
-          if (!element || !element.elements) { return prev }
+          if (!element || !element.elements) {
+            return prev
+          }
           return [...prev, ...element.elements.reduce((pr, question) => {
             return [...pr, {title: question.title, answer: question.correctAnswer}];
           }, [])];

client/src/styles/_solutions.scss

@@ -0,0 +1,11 @@
+.solution-text {
+  &__heading {
+    @include heading-4;
+    color: $color-silver-dark;
+  }
+
+  &__answer {
+    @include regular-text;
+    margin-bottom: $medium-spacing;
+  }
+}

client/src/styles/main.scss

@@ -17,3 +17,4 @@
 @import "navigation";
 @import "survey";
 @import "visibility";
+@import "solutions";