Add navigation by basic knowledge slug

client/src/graphql/gql/basicKnowledgeQuery.gql

@@ -0,0 +1,9 @@
+query BasicKnowledgeQuery($slug: String!){
+  basicKnowledge(slug: $slug) {
+    id
+    title
+    slug
+    type
+    contents
+  }
+}

client/src/pages/basicknowledge.vue

@@ -1,94 +1,38 @@
 <template>
   <div class="basic-knowledge">
-    <h1 class="basic-knowledge__title">Basiswissen: Fragetypen</h1>
+    <h1 class="basic-knowledge__title">{{basicKnowledge.title}}</h1>
 
-    <h3>Offene und geschlossene Fragen</h3>
-
-    <p>
-      Es wird zwischen offenen Fragen und geschlossenen Fragen unterschieden:
-    </p>
-
-    <h4>Offene Fragen</h4>
-
-    <p>
-      Offene Fragen beginnen mit einem W-Fragewort (wann, was, wie, welche usw.). Die befragte Person entscheidet, was
-      sie antwortet und ob die Antwort knapp oder ausführlich ausfällt. <br>
-      Beispiel: Wann sind Sie zum letzten Mal mit dem Zug gefahren?
-    </p>
-
-    <h4>Geschlossene Fragen</h4>
-
-    <h5>
-      Entscheidungsfrage
-    </h5>
-
-    <p>
-      Die befragte Person antwortet mit Ja oder Nein.<br>
-      Beispiel: Fahren Sie mit dem Auto zur Arbeit?
-    </p>
-
-    <h5>
-      Alternativfrage
-    </h5>
-
-    <p>
-      Zwei (oder mehr) Antwortmöglichkeiten sind vorhanden (entweder … oder). <br>
-      Beispiel: Fahren Sie lieber mit dem Auto oder mit öffentlichen Verkehrsmitteln zur Arbeit?
-    </p>
-
-    <h3>
-      Weitere Fragetypen
-    </h3>
-
-    <p>
-      Auf eine Frage kann eine Anschlussfrage folgen, oder es können verschiedene Fragen miteinander kombiniert werden:
-    </p>
-
-    <h4>
-      Anschlussfrage
-    </h4>
-
-    <p>
-      Der Interviewer bezieht sich auf eine Antwort, die die Befragte gegeben hat, und stellt dazu eine weitere Frage.
-      Diese kann als offene oder geschlossene Frage formuliert sein. Beispiel: Warum fahren Sie denn lieber mit dem
-      Auto?
-    </p>
-
-    <h4>
-      Mehrfachfrage
-    </h4>
-
-    <p>
-      Die Interviewerin kombiniert zwei oder mehrere Fragen. Auch diese können als offene oder geschlossene Fragen
-      formuliert sein. Beispiel: Sind Sie letzte Woche mit dem Zug zur Arbeit gefahren, und wenn ja: wie oft?
-    </p>
-    <p>
-      Manche Fragen versuchen, die befragte Person zu beeinflussen oder bestimmte Gedanken oderGefühle in ihr
-      auszulösen:
-    </p>
-
-    <h4>
-      Suggestivfrage (suggerieren = einreden, vorschlagen)
-    </h4>
-
-    <p>
-      Die Interviewerin macht dem Befragten deutlich, welche Antwort sie erwartet. Der Befragte soll auf diese Weise
-      beeinflusst werden, sodass er den Ideen und Bewertungen der Interviewerin zustimmt. Beispiel: Sie denken doch
-      sicher auch, dass das Angebot öffentlicher Verkehrsmittel unzureichend ist?
-    </p>
-
-    <h4>
-      Rhetorische Frage (Rhetorik = Redekunst)
-    </h4>
-
-    <p>
-      Der Zuhörer soll durch die Frage neugierig gemacht werden. Sie dient nicht dazu, Informationen zu gewinnen.
-      Beispiel: Haben Sie etwas dagegen, dass ich Ihnen als Dank einen Kinogutschein überreiche?
-    </p>
+    <div v-for="(content, index) in basicKnowledge.contents"
+         v-html="content.value.text"
+         :key="index"
+    ></div>
 
   </div>
 </template>
 
+<script>
+  import BASIC_KNOWLEDGE_QUERY from '@/graphql/gql/basicKnowledgeQuery.gql';
+
+  export default {
+    apollo: {
+      basicKnowledge() {
+        return {
+          query: BASIC_KNOWLEDGE_QUERY,
+          variables: {
+            slug: this.$route.params.slug
+          }
+        }
+      }
+    },
+
+    data() {
+      return {
+        basicKnowledge: {}
+      }
+    }
+  }
+</script>
+
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
   @import "@/styles/_functions.scss";
@@ -117,6 +61,16 @@
       & p {
         margin-bottom: 40px;
       }
+      & ul {
+        padding-left: 25px;
+      }
+      & p + ul {
+        margin-top: -30px;
+      }
+      & li {
+        list-style: disc;
+        line-height: 1.5;
+      }
     }
   }
 </style>

client/src/router/index.js

@@ -43,7 +43,7 @@ const routes = [
   {path: '/edit-room/:id', name: 'edit-room', component: editRoom, props: true},
   {path: '/room/:slug', name: 'room', component: room, props: true},
   {path: '/article/:slug', name: 'article', component: article, meta: {layout: 'simple'}},
-  {path: '/basic-knowledge', name: 'basic-knowledge', component: basicknowledge, meta: {layout: 'simple'}},
+  {path: '/basic-knowledge/:slug', name: 'basic-knowledge', component: basicknowledge, meta: {layout: 'simple'}},
   {path: '/submission/:id', name: 'submission', component: submission, meta: {layout: 'simple'}},
   {
     path: '/book',