Add basic knowledge page

client/src/App.vue

@@ -16,7 +16,6 @@
 
     computed: {
       layout() {
-        console.log(this.$route.meta.layout);
         return (this.$route.meta.layout || 'default') + '-layout';
       }
     },

client/src/components/ContentBlock.vue

@@ -10,7 +10,7 @@
 
 <script>
   import TextBlock from '@/components/content-blocks/TextBlock.vue';
-  import ModalText from '@/components/content-blocks/ModalText.vue';
+  import BasicKnowledgeWidget from '@/components/content-blocks/BasicKnowledgeWidget.vue';
   import Task from '@/components/content-blocks/Task.vue';
   import ImageBlock from '@/components/content-blocks/ImageBlock.vue';
   import StudentEntry from '@/components/content-blocks/StudentEntry.vue';
@@ -20,7 +20,8 @@
 
     components: {
       'text_block': TextBlock,
-      'modal_text': ModalText,
+      // todo: rename in backend
+      'modal_text': BasicKnowledgeWidget,
       'student_entry': StudentEntry,
       'image_block': ImageBlock,
       Task

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

@@ -0,0 +1,26 @@
+<template>
+  <div class="basic-knowledge-widget">
+    <div class="basic-knowledge-widget__description" v-html="value.description"></div>
+    <router-link class="basic-knowledge-widget__button button" tag="button" to="/basic-knowledge">Basiswissen lesen</router-link>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['value']
+  }
+</script>
+
+<style scoped lang="scss">
+  .basic-knowledge-widget {
+    margin-bottom: 30px;
+
+    &__description {
+      margin-bottom: 25px;
+    }
+
+    &__button {
+
+    }
+  }
+</style>

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

@@ -1,18 +0,0 @@
-<template>
-  <div class="modal-text">
-    <div v-html="value.description"></div>
-    <a :href="value.url">{{value.url}}</a>
-  </div>
-</template>
-
-<script>
-  export default {
-    props: ['value']
-  }
-</script>
-
-<style scoped lang="scss">
-  .modal-text {
-    margin-bottom: 30px;
-  }
-</style>

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

@@ -3,7 +3,7 @@
     <p v-html="value.task_text"></p>
     <textarea class="student-entry__input" placeholder="Text schreiben"></textarea>
     <div class="student-entry__dropzone-dummy">Dokument hier hinziehen oder hier klicken</div>
-    <button class="student-entry__submit">Ergebnis teilen</button>
+    <button class="student-entry__submit button">Ergebnis teilen</button>
   </div>
 </template>
 
@@ -62,10 +62,6 @@
     }
 
     &__submit {
-      background: transparent;
-      border: 2px solid $color-brand;
-      padding: 5px 15px;
-      border-radius: 3px;
     }
   }
 </style>

client/src/layouts/SimpleLayout.vue

@@ -13,12 +13,19 @@
       display: -ms-grid;
       display: grid;
       padding: 20px;
+      grid-template-columns: 1fr 640px 1fr;
+
+      & > :nth-child(2){
+        grid-column: 2;
+      }
+
     }
   }
 
   .close-button {
     justify-self: end;
     cursor: pointer;
+    grid-column: 3;
 
     &__icon {
       width: 40px;

client/src/pages/article.vue

@@ -61,9 +61,6 @@
       display: grid;
     }
 
-    justify-self: center;
-    max-width: 640px;
-
     &__meta {
       border-bottom: 1px solid $color-lightgrey;
       align-self: end;

client/src/pages/basicknowledge.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="basic-knowledge">
+    <h1 class="basic-knowledge__title">Basiswissen: Fragetypen</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>
+</template>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .basic-knowledge {
+    &__title {
+      font-size: toRem(35px);
+      margin-bottom: 40px;
+    }
+
+    & /deep/ {
+      & h3 {
+        font-size: toRem(21px);
+        margin-bottom: 30px;
+      }
+      & h4 {
+        font-size: toRem(17px);
+        margin-bottom: 20px;
+      }
+      & h5 {
+        font-size: toRem(18px);
+        font-family: $serif-font-family;
+        margin-bottom: 15px;
+        font-weight: 800;
+      }
+      & p {
+        margin-bottom: 40px;
+      }
+    }
+  }
+</style>

client/src/router/index.js

@@ -7,6 +7,7 @@ import module from '@/pages/module'
 import rooms from '@/pages/rooms'
 import room from '@/pages/room'
 import article from '@/pages/article'
+import basicknowledge from '@/pages/basicknowledge'
 import p404 from '@/pages/p404'
 
 const routes = [
@@ -15,6 +16,7 @@ const routes = [
   {path: '/rooms', name: 'rooms', component: rooms},
   {path: '/room', name: 'room', component: room},
   {path: '/article', name: 'article', component: article, meta: {layout: 'simple'}},
+  {path: '/basic-knowledge', name: 'basic-knowledge', component: basicknowledge, meta: {layout: 'simple'}},
   {
     path: '/book',
     name: 'book',
@@ -31,6 +33,9 @@ export default new Router({
   routes,
   mode: 'history',
   scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    }
     return {x: 0, y: 0}
   }
 })

client/src/styles/_buttons.scss

@@ -0,0 +1,6 @@
+.button {
+  background: transparent;
+  border: 2px solid $color-brand;
+  padding: 5px 15px;
+  border-radius: 3px;
+}

client/src/styles/_typography.scss

@@ -18,6 +18,10 @@ p, a, li {
   font-weight: 300;
 }
 
+p {
+  line-height: 1.5;
+}
+
 a {
   font-size: toRem(18px);
 }

client/src/styles/main.scss

@@ -6,6 +6,7 @@
 @import "reset";
 @import "typography";
 @import "variables";
+@import "buttons";