Einheitliche Dimensionen für Blöcke

Closes #2020

Merge request studip/studip!1739

28 files changed, 892 insertions, 706 deletions

diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index eb3a9ea..ad73372 100644
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -2987,25 +2987,6 @@ b e f o r e  a f t e r  b l o c k
 b e f o r e  a f t e r  b l o c k  e n d
 * * * * * * * * * * * * * * * * * * * */
 
-/* * * * * * * * * *
-c h a r t  b l o c k
-* * * * * * * * * */
-
-.cw-block-chart {
-    .cw-block-chart-item-remove {
-        float: right;
-        margin-right: 5px;
-        cursor: pointer;
-        img {
-            vertical-align: text-top;
-        }
-    }
-}
-
-/* * * * * * * * * * * * * *
-c h a r t  b l o c k  e n d
-* * * * * * * * * * * * * */
-
 /* * * * * * * * *
 c o d e  b l o c k
 * * * * * * * * */
@@ -3240,119 +3221,119 @@ c a n v a s  b l o c k
     }
 
     .cw-canvasblock-toolbar {
-        border: solid thin $content-color-40;
+        border: solid thin var(--content-color-40);
         border-bottom: none;
-    }
 
-    .cw-canvasblock-buttonset {
-        display: inline-block;
-        padding: 5px;
-        margin-right: 0.5em;
-    }
-
-    .cw-canvasblock-tool-selected-text {
-        cursor: text;
-    }
-
-    button {
-        cursor: pointer;
-        user-select: none;
-        border: solid thin $content-color-40;
-        height: 32px;
-        width: 32px;
-        background-color: white;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: 24px 24px;
-
-        &.cw-canvasblock-color {
-            $colors: (
-                white: #ffffff,
-                blue: #3498db,
-                green: #2ecc71,
-                purple: #9b59b6,
-                red: #e74c3c,
-                yellow: #fed330,
-                orange: #f39c12,
-                grey: #95a5a6,
-                darkgrey: #34495e,
-                black: #000000,
-            );
-
-            @each $name, $color in $colors {
-                &.#{"" + $name} {
-                    background-color: $color;
+        .cw-canvasblock-buttonset {
+            display: inline-block;
+            padding: 5px;
+            margin-right: 0.5em;
+    
+            button {
+                cursor: pointer;
+                user-select: none;
+                border: solid thin var(--content-color-40);
+                height: 32px;
+                width: 32px;
+                background-color: var(--white);
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: 24px 24px;
+        
+                &.cw-canvasblock-color {
+                    $colors: (
+                        white: #ffffff,
+                        blue: #3498db,
+                        green: #2ecc71,
+                        purple: #9b59b6,
+                        red: #e74c3c,
+                        yellow: #fed330,
+                        orange: #f39c12,
+                        grey: #95a5a6,
+                        darkgrey: #34495e,
+                        black: #000000,
+                    );
+        
+                    @each $name, $color in $colors {
+                        &.#{"" + $name} {
+                            background-color: $color;
+                        }
+                    }
+        
+                    &.selected-color {
+                        border: solid 2px var(--black);
+                    }
+                }
+        
+                &.cw-canvasblock-reset {
+                    @include background-icon(refresh, clickable, 24);
+                }
+        
+                &.cw-canvasblock-size {
+                    @include background-icon(stop, clickable);
+        
+                    &.cw-canvasblock-size-small {
+                        background-size: 8px 7px;
+                    }
+                    &.cw-canvasblock-size-normal {
+                        background-size: 16px 14px;
+                    }
+                    &.cw-canvasblock-size-large {
+                        background-size: 22px 20px;
+                    }
+                    &.cw-canvasblock-size-huge {
+                        background-size: 26px 24px;
+                    }
+                    &.selected-size {
+                        border: solid 2px var(--black);
+                    }
+                }
+        
+                &.cw-canvasblock-tool {
+                    &.cw-canvasblock-tool-pen {
+                        @include background-icon(comment, clickable);
+                    }
+        
+                    &.cw-canvasblock-tool-text {
+                        vertical-align: top;
+                        font-size: 22px;
+                        color: var(--base-color);
+                        font-weight: 600;
+                    }
+        
+                    &.selected-tool {
+                        border: solid 2px var(--black);
+                    }
+                }
+        
+                &.cw-canvasblock-undo {
+                    @include background-icon(arr_2left, clickable, 24);
+                }
+        
+                &.cw-canvasblock-download {
+                    @include background-icon(download, clickable, 24);
+                }
+                &.cw-canvasblock-store {
+                    @include background-icon(upload, clickable, 24);
+                }
+                &.cw-canvasblock-show-all {
+                    @include background-icon(group2, clickable, 24);
+                    &.selected-view {
+                        border: solid 2px var(--black);
+                    }
+                }
+                &.cw-canvasblock-show-own {
+                    @include background-icon(person, clickable, 24);
+                    &.selected-view {
+                        border: solid 2px var(--black);
+                    }
                 }
             }
-
-            &.selected-color {
-                border: solid 2px $black;
-            }
-        }
-
-        &.cw-canvasblock-reset {
-            @include background-icon(refresh, clickable, 24);
-        }
-
-        &.cw-canvasblock-size {
-            @include background-icon(stop, clickable);
-
-            &.cw-canvasblock-size-small {
-                background-size: 8px 7px;
-            }
-            &.cw-canvasblock-size-normal {
-                background-size: 16px 14px;
-            }
-            &.cw-canvasblock-size-large {
-                background-size: 22px 20px;
-            }
-            &.cw-canvasblock-size-huge {
-                background-size: 26px 24px;
-            }
-            &.selected-size {
-                border: solid 2px $black;
-            }
-        }
-
-        &.cw-canvasblock-tool {
-            &.cw-canvasblock-tool-pen {
-                @include background-icon(comment, clickable);
-            }
-
-            &.cw-canvasblock-tool-text {
-                vertical-align: top;
-                font-size: 22px;
-                color: $base-color;
-                font-weight: 600;
-            }
-
-            &.selected-tool {
-                border: solid 2px $black;
-            }
-        }
-
-        &.cw-canvasblock-undo {
-            @include background-icon(arr_2left, clickable, 24);
         }
+    }
 
-        &.cw-canvasblock-download {
-            @include background-icon(download, clickable, 24);
-        }
-        &.cw-canvasblock-store {
-            @include background-icon(upload, clickable, 24);
-        }
-        &.cw-canvasblock-show-all {
-            @include background-icon(group2, clickable, 24);
-            &.selected-view {
-                border: solid 2px $black;
-            }
-        }
-        &.cw-canvasblock-show-own {
-            @include background-icon(person, clickable, 24);
-            &.selected-view {
-                border: solid 2px $black;
-            }
-        }
+    .cw-canvasblock-tool-selected-text {
+        cursor: text;
     }
 }
 /* * * * * * * * * * * * * * *
diff --git a/resources/assets/stylesheets/scss/select.scss b/resources/assets/stylesheets/scss/select.scss
index f7a4441..ff30ef5 100644
--- a/resources/assets/stylesheets/scss/select.scss
+++ b/resources/assets/stylesheets/scss/select.scss
@@ -1,5 +1,6 @@
 .studip-v-select, .studip-v-select-detachted-ul {
     max-width: 48em;
+    margin-top: 0.5ex;
 
     .vs__option-with-icon{
         padding-left: 8px;
@@ -8,19 +9,23 @@
     .vs__option-color {
         border: solid thin $content-color-40;
         padding-left: 20px;
-        height: 20px;
+        height: 16px;
         margin-right: 4px;
     }
 
     .vs__dropdown-toggle {
-        border: solid thin $content-color-40;
-        border-radius: 0;
+        max-height: 32px;
+        padding: 0 0 5px;
     }
 
     .vs__dropdown-menu, &.vs__dropdown-menu {
         border-radius: 0;
     }
 
+    .vs__actions {
+        align-items: end;
+    }
+
     &.studip-v-select-drop-up {
         border-bottom: solid thin $content-color-40;
         border-top: none;
@@ -36,3 +41,8 @@
         z-index: 3002;
     }
 }
+
+form.default .studip-v-select .vs__selected {
+    padding: 0;
+    margin: 2px 2px 0;
+}
\ No newline at end of file
diff --git a/resources/vue/components/courseware/CoursewareAudioBlock.vue b/resources/vue/components/courseware/CoursewareAudioBlock.vue
index 77e3166..afa164f 100644
--- a/resources/vue/components/courseware/CoursewareAudioBlock.vue
+++ b/resources/vue/components/courseware/CoursewareAudioBlock.vue
@@ -43,7 +43,7 @@
                     </div>
                 </div>
                 <div v-if="emptyAudio" class="cw-audio-empty">
-                    <p><translate>Es ist keine Audio-Datei verfügbar</translate></p>
+                    <p>{{ $gettext('Es ist keine Audio-Datei verfügbar') }}</p>
                 </div>
                 <div v-show="currentSource === 'studip_folder'" class="cw-audio-playlist-wrapper" :class="[!showRecorder && emptyAudio ? 'empty' : '']">
                     <ul v-show="hasPlaylist" class="cw-audio-playlist" :class="[showRecorder ? 'with-recorder' : '']">
@@ -71,45 +71,45 @@
                             :title="enableRecorderTitle"
                             @click="enableRecorder"
                         >
-                            <translate>Aufnahme aktivieren</translate>
+                            {{ $gettext('Aufnahme aktivieren') }}
                         </button>
                         <button
                             v-show="userRecorderEnabled && !isRecording && !newRecording"
                             class="button"
                             @click="startRecording"
                         >
-                            <translate>Aufnahme starten</translate>
+                            {{ $gettext('Aufnahme starten') }}
                         </button>
                         <button
                             v-show="newRecording && !isRecording"
                             class="button"
                             @click="startRecording"
                         >
-                            <translate>Aufnahme wiederholen</translate>
+                            {{ $gettext('Aufnahme wiederholen') }}
                         </button>
                         <button 
                             v-show="isRecording"
                             class="button"
                             @click="stopRecording"
                         >
-                            <translate>Aufnahme beenden</translate>
+                            {{ $gettext('Aufnahme beenden') }}
                         </button>
                         <button 
                             v-show="newRecording && !isRecording"
                             class="button"
                             @click="resetRecorder"
                         >
-                            <translate>Aufnahme löschen</translate>
+                            {{ $gettext('Aufnahme löschen') }}
                         </button>
                         <button 
                             v-show="newRecording && !isRecording"
                             class="button"
                             @click="storeRecording"
                         >
-                            <translate>Aufnahme speichern</translate>
+                            {{ $gettext('Aufnahme speichern') }}
                         </button>
                         <span v-show="isRecording">
-                            <translate>Aufnahme läuft</translate>: {{seconds2time(timer)}}
+                            {{ $gettext('Aufnahme läuft') }}: {{seconds2time(timer)}}
                         </span>
                     </div>
                 </div>
@@ -117,23 +117,23 @@
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
                     <label>
-                        <translate>Überschrift</translate>
+                        {{ $gettext('Überschrift') }}
                         <input type="text" v-model="currentTitle" />
                     </label>
                     <label>
-                        <translate>Quelle</translate>
+                        {{ $gettext('Quelle') }}
                         <select v-model="currentSource">
-                            <option value="studip_file"><translate>Dateibereich Datei</translate></option>
-                            <option value="studip_folder"><translate>Dateibereich Ordner</translate></option>
-                            <option value="web"><translate>Web-Adresse</translate></option>
+                            <option value="studip_file">{{ $gettext('Dateibereich Datei') }}</option>
+                            <option value="studip_folder">{{ $gettext('Dateibereich Ordner') }}</option>
+                            <option value="web">{{ $gettext('Web-Adresse') }}</option>
                         </select>
                     </label>
                     <label v-show="currentSource === 'web'">
-                        <translate>URL</translate>
+                        {{ $gettext('URL') }}
                         <input type="text" v-model="currentWebUrl" />
                     </label>
                     <label v-show="currentSource === 'studip_file'">
-                        <translate>Datei</translate>
+                        {{ $gettext('Datei') }}
                         <courseware-file-chooser
                             v-model="currentFileId"
                             :isAudio="true"
@@ -141,24 +141,24 @@
                         />
                     </label>
                     <label v-show="currentSource === 'studip_folder'">
-                        <translate>Ordner</translate>
+                        {{ $gettext('Ordner') }}
                         <courseware-folder-chooser v-model="currentFolderId" allowUserFolders />
                     </label>
                     <label v-show="currentSource === 'studip_folder'">
-                        <translate>Audio Aufnahmen zulassen</translate>
+                        {{ $gettext('Audio Aufnahmen zulassen') }}
                         <span
                             class="tooltip tooltip-icon"
                             :data-tooltip="$gettext('Um Aufnahmen zu ermöglichen, muss ein Ordner ausgewählt werden.')"
                         ></span>
                         <select v-model="currentRecorderEnabled" :disabled="!folderSelected">
-                            <option :value="true"><translate>Ja</translate></option>
-                            <option :value="false"><translate>Nein</translate></option>
+                            <option :value="true">{{ $gettext('Ja') }}</option>
+                            <option :value="false">{{ $gettext('Nein') }}</option>
                         </select>
                     </label>
                 </form>
             </template>
             <template #info>
-                <p><translate>Informationen zum Audio-Block</translate></p>
+                <p>{{ $gettext('Informationen zum Audio-Block') }}</p>
             </template>
         </courseware-default-block>
     </div>
diff --git a/resources/vue/components/courseware/CoursewareBeforeAfterBlock.vue b/resources/vue/components/courseware/CoursewareBeforeAfterBlock.vue
index f714f25..2770387 100644
--- a/resources/vue/components/courseware/CoursewareBeforeAfterBlock.vue
+++ b/resources/vue/components/courseware/CoursewareBeforeAfterBlock.vue
@@ -11,68 +11,94 @@
         >
             <template #content>
                 <TwentyTwenty v-if="!isEmpty" :before="currentBeforeUrl" :after="currentAfterUrl" />
+                <courseware-companion-box
+                    v-if="isEmpty && editMode"
+                    :msgCompanion="$gettext('Bitte wählen Sie ein Vorher- und ein Nachher-Bild aus.')"
+                    mood="pointing"
+                />
             </template>
             <template v-if="canEdit" #edit>
-                <form class="default" @submit.prevent="">
-                    <label>
-                        <translate>Quelle vorher</translate>
-                        <select v-model="currentBeforeSource">
-                            <option value="studip"><translate>Dateibereich</translate></option>
-                            <option value="web"><translate>Web-Adresse</translate></option>
-                        </select>
-                    </label>
-                    <label v-if="currentBeforeSource === 'web'">
-                        <translate>URL</translate>:
-                        <input type="text" v-model="currentBeforeWebUrl" />
-                    </label>
-                    <label v-if="currentBeforeSource === 'studip'">
-                        <translate>Datei</translate>
-                        <courseware-file-chooser
-                            v-model="currentBeforeFileId"
-                            :isImage="true"
-                            @selectFile="updateCurrentBeforeFile"
-                        />
-                    </label>
-                    <label>
-                        <translate>Quelle nachher</translate>
-                        <select v-model="currentAfterSource">
-                            <option value="studip"><translate>Dateibereich</translate></option>
-                            <option value="web"><translate>Web-Adresse</translate></option>
-                        </select>
-                    </label>
-                    <label v-if="currentAfterSource === 'web'">
-                        <translate>URL</translate>
-                        <input type="text" v-model="currentAfterWebUrl" />
-                    </label>
-                    <label v-if="currentAfterSource === 'studip'">
-                        <translate>Datei</translate>
-                        <courseware-file-chooser
-                            v-model="currentAfterFileId"
-                            :isImage="true"
-                            @selectFile="updateCurrentAfterFile"
-                        />
-                    </label>
-                </form>
+                <courseware-tabs>
+                    <courseware-tab
+                        :index="0"
+                        :name="$gettext('Vorher')"
+                        :selected="true"
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label>
+                                {{ $gettext('Quelle') }}
+                                <select v-model="currentBeforeSource">
+                                    <option value="studip">{{ $gettext('Dateibereich') }}</option>
+                                    <option value="web">{{ $gettext('Web-Adresse') }}</option>
+                                </select>
+                            </label>
+                            <label v-if="currentBeforeSource === 'web'">
+                                {{ $gettext('URL') }}
+                                <input type="text" v-model="currentBeforeWebUrl" />
+                            </label>
+                            <label v-if="currentBeforeSource === 'studip'">
+                                {{ $gettext('Bilddatei') }}
+                                <courseware-file-chooser
+                                    v-model="currentBeforeFileId"
+                                    :isImage="true"
+                                    @selectFile="updateCurrentBeforeFile"
+                                />
+                            </label>
+                        </form>
+                    </courseware-tab>
+                    <courseware-tab
+                        :index="1"
+                        :name="$gettext('Nachher')"
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label>
+                                {{ $gettext('Quelle') }}
+                                <select v-model="currentAfterSource">
+                                    <option value="studip">{{ $gettext('Dateibereich') }}</option>
+                                    <option value="web">{{ $gettext('Web-Adresse') }}</option>
+                                </select>
+                            </label>
+                            <label v-if="currentAfterSource === 'web'">
+                                {{ $gettext('URL') }}
+                                <input type="text" v-model="currentAfterWebUrl" />
+                            </label>
+                            <label v-if="currentAfterSource === 'studip'">
+                                {{ $gettext('Bilddatei') }}
+                                <courseware-file-chooser
+                                    v-model="currentAfterFileId"
+                                    :isImage="true"
+                                    @selectFile="updateCurrentAfterFile"
+                                />
+                            </label>
+                        </form>
+                    </courseware-tab>
+                </courseware-tabs>
             </template>
-            <template #info><translate>Informationen zum Bildvergleich-Block</translate></template>
+            <template #info>{{ $gettext('Informationen zum Bildvergleich-Block') }}</template>
         </courseware-default-block>
     </div>
 </template>
 
 <script>
+import CoursewareCompanionBox from './CoursewareCompanionBox.vue';
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
 import CoursewareFileChooser from './CoursewareFileChooser.vue';
+import CoursewareTabs from './CoursewareTabs.vue';
+import CoursewareTab from './CoursewareTab.vue';
 import { blockMixin } from './block-mixin.js';
 import TwentyTwenty from 'vue-twentytwenty';
 import 'vue-twentytwenty/dist/vue-twentytwenty.css';
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 
 export default {
     name: 'courseware-before-after-block',
     mixins: [blockMixin],
     components: {
+        CoursewareCompanionBox,
         CoursewareDefaultBlock,
         CoursewareFileChooser,
+        CoursewareTabs,
+        CoursewareTab,
         TwentyTwenty,
     },
     props: {
@@ -95,6 +121,9 @@ export default {
         };
     },
     computed: {
+        ...mapGetters({
+            viewMode: 'viewMode'
+        }),
         beforeSource() {
             return this.block?.attributes?.payload?.before_source;
         },
@@ -114,7 +143,7 @@ export default {
             return this.block?.attributes?.payload?.after_web_url;
         },
         currentBeforeUrl() {
-            if (this.currentBeforeSource === 'studip'&& this.currentBeforeFile?.meta) {
+            if (this.currentBeforeSource === 'studip' && this.currentBeforeFile?.meta) {
                 return this.currentBeforeFile.meta['download-url'];
             } else if (this.currentBeforeSource === 'web') {
                 return this.currentBeforeWebUrl;
@@ -123,7 +152,7 @@ export default {
             }
         },
         currentAfterUrl() {
-            if (this.currentAfterSource === 'studip'&& this.currentAfterFile?.meta) {
+            if (this.currentAfterSource === 'studip' && this.currentAfterFile?.meta) {
                 return this.currentAfterFile.meta['download-url'];
             } else if (this.currentAfterSource === 'web') {
                 return this.currentAfterWebUrl;
@@ -131,6 +160,12 @@ export default {
                 return '';
             }
         },
+        isEmpty() {
+            return this.currentBeforeUrl === '' || this.currentAfterUrl === '';
+        },
+        editMode() {
+            return this.viewMode === 'edit';
+        }
     },
     mounted() {
         this.loadFileRefs(this.block.id).then((response) => {
diff --git a/resources/vue/components/courseware/CoursewareBiographyAchievementsBlock.vue b/resources/vue/components/courseware/CoursewareBiographyAchievementsBlock.vue
index a5e4955..b59b85a 100644
--- a/resources/vue/components/courseware/CoursewareBiographyAchievementsBlock.vue
+++ b/resources/vue/components/courseware/CoursewareBiographyAchievementsBlock.vue
@@ -16,21 +16,21 @@
                     </div>
                     <div class="cw-block-biography-details">
                         <h3>
-                            <translate>Titel</translate>: {{currentData.title}}
+                            {{ $gettext('Titel') }}: {{currentData.title}}
                         </h3>
                         <h4>
-                            <span v-show="currentData.type !== 'membership'"><translate>Datum</translate>:</span>
-                            <span v-show="currentData.type === 'membership'"><translate>Startdatum</translate>:</span>
+                            <span v-show="currentData.type !== 'membership'">{{ $gettext('Datum') }}:</span>
+                            <span v-show="currentData.type === 'membership'">{{ $gettext('Startdatum') }}:</span>
                             {{ getReadableDate(currentData.date) }}
                         </h4>
                         <h4 v-show="hasEndDate">
-                            <translate>Enddatum</translate>: {{ getReadableDate(currentData.end_date)}}
+                            {{ $gettext('Enddatum') }}: {{ getReadableDate(currentData.end_date)}}
                         </h4>
                         <h4 v-show="hasParticipation">
-                            <translate>Beteiligung</translate>: <span v-html="currentData.role"></span>
+                            {{ $gettext('Beteiligung') }}: <span v-html="currentData.role"></span>
                         </h4>
                         <div>
-                            <h4><translate>Beschreibung</translate>:</h4>
+                            <h4>{{ $gettext('Beschreibung') }}:</h4>
                             <p v-html="currentData.description"></p>
                         </div>
                     </div>
@@ -39,40 +39,40 @@
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
                     <label>
-                        <translate>Type</translate>
+                        {{ $gettext('Type') }}
                         <select v-model="currentData.type">
-                            <option value="certificate"><translate>Zertifikat</translate></option>
-                            <option value="accreditation"><translate>Akkreditierung</translate></option>
-                            <option value="award"><translate>Auszeichnung</translate></option>
-                            <option value="book"><translate>Buch</translate></option>
-                            <option value="publication"><translate>Veröffentlichung</translate></option>
-                            <option value="membership"><translate>Mitgliedschaft</translate></option>
+                            <option value="certificate">{{ $gettext('Zertifikat') }}</option>
+                            <option value="accreditation">{{ $gettext('Akkreditierung') }}</option>
+                            <option value="award">{{ $gettext('Auszeichnung') }}</option>
+                            <option value="book">{{ $gettext('Buch') }}</option>
+                            <option value="publication">{{ $gettext('Veröffentlichung') }}</option>
+                            <option value="membership">{{ $gettext('Mitgliedschaft') }}</option>
                         </select>
                     </label>
                     <label>
-                        <translate>Titel</translate>
+                        {{ $gettext('Titel') }}
                         <input type="text" v-model="currentData.title">
                     </label>
                     <label>
-                        <span v-show="!hasEndDate"><translate>Datum</translate></span>
-                        <span v-show="hasEndDate"><translate>Startdatum</translate></span>
+                        <template v-if="!hasEndDate">{{ $gettext('Datum') }}</template>
+                        <template v-else>{{ $gettext('Startdatum') }}</template>
                         <input type="date" v-model="currentData.date" />
                     </label>
                     <label v-show="hasEndDate">
-                        <translate>Enddatum</translate>
+                        {{ $gettext('Enddatum') }}
                         <input type="date" v-model="currentData.end_date" />
                     </label>
                     <label v-show="hasParticipation">
-                        <translate>Beteiligung</translate>
+                        {{ $gettext('Beteiligung') }}
                         <input type="text" v-model="currentData.role">
                     </label>
                     <div class="label-text">
-                        <translate>Beschreibung</translate>
+                        {{ $gettext('Beschreibung') }}
                     </div>
                     <studip-wysiwyg v-model="currentData.description"></studip-wysiwyg>
                 </form>
             </template>
-            <template #info><translate>Informationen zum Erfolge-Block</translate></template>
+            <template #info>{{ $gettext('Informationen zum Erfolge-Block') }}</template>
         </courseware-default-block>
     </div>
 </template>
diff --git a/resources/vue/components/courseware/CoursewareBiographyCareerBlock.vue b/resources/vue/components/courseware/CoursewareBiographyCareerBlock.vue
index fb20809..6fd8550 100644
--- a/resources/vue/components/courseware/CoursewareBiographyCareerBlock.vue
+++ b/resources/vue/components/courseware/CoursewareBiographyCareerBlock.vue
@@ -28,13 +28,13 @@
                             <article>
                                 <header>{{ getItemTypeName(item.type) }}</header>
                                 <div v-if="item.type === 'school'">
-                                    <p><translate>Bezeichnung der Qualifikation</translate>: {{ item.qualification }}</p>
-                                    <p><translate>Hauptfächer / Schwerpunkt</translate>: {{ item.focus }}</p>
-                                    <p><translate>berufliche Fähigkeiten</translate>: {{ item.skills }}</p>
+                                    <p>{{ $gettext('Bezeichnung der Qualifikation') }}: {{ item.qualification }}</p>
+                                    <p>{{ $gettext('Hauptfächer / Schwerpunkt') }}: {{ item.focus }}</p>
+                                    <p>{{ $gettext('berufliche Fähigkeiten') }}: {{ item.skills }}</p>
                                 </div>
                                 <div v-if="item.type === 'experience'">
-                                    <p><translate>Name des Arbeitgebers</translate>: {{ item.employer }}</p>
-                                    <p><translate>Beruf / Funktion</translate>: {{ item.job }}</p>
+                                    <p>{{ $gettext('Name des Arbeitgebers') }}: {{ item.employer }}</p>
+                                    <p>{{ $gettext('Beruf / Funktion') }}: {{ item.job }}</p>
                                 </div>
                             </article>
                         </div>
@@ -44,15 +44,15 @@
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
                     <label>
-                        <translate>Zeitliche Sortierung</translate>
+                        {{ $gettext('Zeitliche Sortierung') }}
                         <select v-model="currentSort">
-                            <option value="none"><translate>Keine</translate></option>
-                            <option value="asc"><translate>Aufsteigend</translate></option>
-                            <option value="desc"><translate>Absteigend</translate></option>
+                            <option value="none">{{ $gettext('Keine') }}</option>
+                            <option value="asc">{{ $gettext('Aufsteigend') }}</option>
+                            <option value="desc">{{ $gettext('Absteigend') }}</option>
                         </select>
                     </label>
                 </form>
-                <button class="button add" @click="addItem"><translate>Ereignis hinzufügen</translate></button>
+                <button class="button add" @click="addItem">{{ $gettext('Ereignis hinzufügen') }}</button>
                 <courseware-tabs
                     v-if="currentItems.length > 0"
                     :setSelected="setItemTab"
@@ -67,59 +67,59 @@
                         canBeEmpty
                     >
                         <form class="default" @submit.prevent="">
-                            <label>
-                                <translate>Startdatum</translate>
+                            <label class="col-1">
+                                {{ $gettext('Startdatum') }}
                                 <input type="date" v-model="item.date" required />
                             </label>
-                            <label>
-                                <translate>Enddatum</translate>
+                            <label class="col-1">
+                                {{ $gettext('Enddatum') }}
                                 <input type="date" v-model="item.enddate" />
                             </label>
                             <label>
-                                <translate>Art</translate>
+                                {{ $gettext('Art') }}
                                 <select v-model="item.type">
-                                    <option value="school"><translate>Schul- und Berufsbildung</translate></option>
-                                    <option value="experience"><translate>Berufserfahrung</translate></option>
+                                    <option value="school">{{ $gettext('Schul- und Berufsbildung') }}</option>
+                                    <option value="experience">{{ $gettext('Berufserfahrung') }}</option>
                                 </select>
                             </label>
                             <div v-show="item.type === 'school'">
                                 <label>
-                                    <translate>Bezeichnung der Qualifikation</translate>
+                                    {{ $gettext('Bezeichnung der Qualifikation') }}
                                     <input type="text" v-model="item.qualification" />
                                 </label>
                                 <label>
-                                    <translate>Hauptfächer / Schwerpunkt</translate>
+                                    {{ $gettext('Hauptfächer / Schwerpunkt') }}
                                     <input type="text" v-model="item.focus" />
                                 </label>
                                 <label>
-                                    <translate>berufliche Fähigkeiten</translate>
+                                    {{ $gettext('berufliche Fähigkeiten') }}
                                     <input type="text" v-model="item.skills" />
                                 </label>
                             </div>
                             <div v-show="item.type === 'experience'">
                                 <label>
-                                    <translate>Name des Arbeitgebers</translate>
+                                    {{ $gettext('Name des Arbeitgebers') }}
                                     <input type="text" v-model="item.employer" />
                                 </label>
                                 <label>
-                                    <translate>Beruf / Funktion</translate>
+                                    {{ $gettext('Beruf / Funktion') }}
                                     <input type="text" v-model="item.job" />
                                 </label>
                             </div>
                             <label>
-                                <translate>Beschreibung</translate>
+                                {{ $gettext('Beschreibung') }}
                                 <textarea v-model="item.description" />
                             </label>
                             <label v-if="currentItems.length > 1">
                                 <button class="button trash" @click="removeItem(index)">
-                                    <translate>Ereignis entfernen</translate>
+                                    {{ $gettext('Ereignis entfernen') }}
                                 </button>
                             </label>
                         </form>
                     </courseware-tab>
                 </courseware-tabs>
             </template>
-            <template #info><translate>Informationen zum Karriere-Block</translate></template>
+            <template #info>{{ $gettext('Informationen zum Karriere-Block') }}</template>
         </courseware-default-block>
     </div>
 </template>
diff --git a/resources/vue/components/courseware/CoursewareBiographyGoalsBlock.vue b/resources/vue/components/courseware/CoursewareBiographyGoalsBlock.vue
index ab21b7a..8e35279 100644
--- a/resources/vue/components/courseware/CoursewareBiographyGoalsBlock.vue
+++ b/resources/vue/components/courseware/CoursewareBiographyGoalsBlock.vue
@@ -21,21 +21,21 @@
             <template v-if="canEdit" #edit>
                 <form class="default">
                     <label for="type">
-                        <span><translate>Ziel</translate></span>
+                        {{ $gettext('Ziel') }}
                         <select name="type" class="type" v-model="currentData.type">
-                            <option value="personal"><translate>Persönliches Ziel</translate></option>
-                            <option value="school"><translate>Schulisches Ziel</translate></option>
-                            <option value="academic"><translate>Akademisches Ziel</translate></option>
-                            <option value="professional"><translate>Berufliches Ziel</translate></option>
+                            <option value="personal">{{ $gettext('Persönliches Ziel') }}</option>
+                            <option value="school">{{ $gettext('Schulisches Ziel') }}</option>
+                            <option value="academic">{{ $gettext('Akademisches Ziel') }}</option>
+                            <option value="professional">{{ $gettext('Berufliches Ziel') }}</option>
                         </select>
                     </label>
                     <div class="label-text">
-                        <translate>Beschreibung</translate>
+                       {{ $gettext('>Beschreibung') }}
                     </div>
                     <studip-wysiwyg v-model="currentData.description"></studip-wysiwyg>
                 </form>
             </template>
-            <template #info><translate>Informationen zum Ziele-Block</translate></template>
+            <template #info>{{ $gettext('Informationen zum Ziele-Block') }}</template>
         </courseware-default-block>
     </div>
 </template>
diff --git a/resources/vue/components/courseware/CoursewareBiographyPersonalInformationBlock.vue b/resources/vue/components/courseware/CoursewareBiographyPersonalInformationBlock.vue
index 14ba1be..28e5ffc 100644
--- a/resources/vue/components/courseware/CoursewareBiographyPersonalInformationBlock.vue
+++ b/resources/vue/components/courseware/CoursewareBiographyPersonalInformationBlock.vue
@@ -15,16 +15,16 @@
                         <h2>{{currentData.name}}</h2>
                     </div>
                     <div class="cw-block-biography-details cw-block-biography-personal-information-details">
-                        <span><translate>Geburtsort</translate>:</span>
+                        <span>{{ $gettext('Geburtsort') }}:</span>
                         <span>{{currentData.birthplace}}</span>
 
-                        <span><translate>Geburtsdatum</translate>:</span>
+                        <span>{{ $gettext('Geburtsdatum') }}:</span>
                         <span>{{ getReadableDate(currentData.birthday) }}</span>
 
-                        <span><translate>Geschlecht</translate>:</span>
+                        <span>{{ $gettext('Geschlecht') }}:</span>
                         <span>{{displayGenderText(currentData.gender)}}</span>
 
-                        <span><translate>Familienstand</translate>:</span>
+                        <span>{{ $gettext('Familienstand') }}:</span>
                         <span>{{ displayStatusText(currentData.status) }}</span>
                     </div>
                 </div>
@@ -32,20 +32,20 @@
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
                     <label>
-                        <translate>Name</translate>
+                        {{ $gettext('Name') }}
                         <input type="text" v-model="currentData.name">
                     </label>
                     <label>
-                        <translate>Geburtsort</translate>
+                        {{ $gettext('Geburtsort') }}
                         <input type="text" v-model="currentData.birthplace">
                     </label>
                     <label>
-                        <translate>Geburtsdatum</translate>
+                        {{ $gettext('Geburtsdatum') }}
                         <input type="date" v-model="currentData.birthday" />
                     </label>
                     <label>
-                        <translate>Geschlecht</translate>
-                            <select v-model="currentData.gender">
+                        {{ $gettext('Geschlecht') }}
+                        <select v-model="currentData.gender">
                             <option value="none">{{ displayGenderText('none') }}</option>
                             <option value="male">{{ displayGenderText('male') }}</option>
                             <option value="female">{{ displayGenderText('female') }}</option>
@@ -53,20 +53,20 @@
                         </select>
                     </label>
                     <label>
-                        <translate>Familienstand</translate>
-                            <select v-model="currentData.status">
-                                <option value="none">{{ displayStatusText('none') }}</option>
-                                <option value="single">{{ displayStatusText('single') }}</option>
-                                <option value="married">{{ displayStatusText('married') }}</option>
-                                <option value="widowed">{{ displayStatusText('widowed') }}</option>
-                                <option value="divorced">{{ displayStatusText('divorced') }}</option>
-                                <option value="registered-civil-partnership">{{ displayStatusText('registered-civil-partnership') }}</option>
-                                <option value="annulled-civil-partnership">{{ displayStatusText('annulled-civil-partnership') }}</option>
-                            </select>
+                        {{ $gettext('Familienstand') }}
+                        <select v-model="currentData.status">
+                            <option value="none">{{ displayStatusText('none') }}</option>
+                            <option value="single">{{ displayStatusText('single') }}</option>
+                            <option value="married">{{ displayStatusText('married') }}</option>
+                            <option value="widowed">{{ displayStatusText('widowed') }}</option>
+                            <option value="divorced">{{ displayStatusText('divorced') }}</option>
+                            <option value="registered-civil-partnership">{{ displayStatusText('registered-civil-partnership') }}</option>
+                            <option value="annulled-civil-partnership">{{ displayStatusText('annulled-civil-partnership') }}</option>
+                        </select>
                     </label>
                 </form>
             </template>
-            <template #info><translate>Informationen zum Persönlichen-Informationen-Block</translate></template>
+            <template #info>{{ $gettext('Informationen zum Persönlichen-Informationen-Block') }}</template>
         </courseware-default-block>
     </div>
 </template>
diff --git a/resources/vue/components/courseware/CoursewareBlockEdit.vue b/resources/vue/components/courseware/CoursewareBlockEdit.vue
index a218ab5..e78008b 100644
--- a/resources/vue/components/courseware/CoursewareBlockEdit.vue
+++ b/resources/vue/components/courseware/CoursewareBlockEdit.vue
@@ -1,13 +1,13 @@
 <template>
     <section class="cw-block-edit">
-        <header><translate>Bearbeiten</translate></header>
+        <header>{{ $gettext('Bearbeiten') }}</header>
         <div class="cw-block-features-content">
             <div @click="deactivateToolbar(); exitHandler = true;">
                 <slot name="edit" />
             </div>
             <div class="cw-button-box">
-                <button class="button accept" @click="$emit('store'); exitHandler = false;"><translate>Speichern</translate></button>
-                <button class="button cancel" @click="$emit('close'); exitHandler = false;"><translate>Abbrechen</translate></button>
+                <button class="button accept" @click="$emit('store'); exitHandler = false;">{{ $gettext('Speichern') }}</button>
+                <button class="button cancel" @click="$emit('close'); exitHandler = false;">{{ $gettext('Abbrechen') }}</button>
             </div>
         </div>
     </section>
diff --git a/resources/vue/components/courseware/CoursewareBlockFeedback.vue b/resources/vue/components/courseware/CoursewareBlockFeedback.vue
index 443745e..88ac2d7 100644
--- a/resources/vue/components/courseware/CoursewareBlockFeedback.vue
+++ b/resources/vue/components/courseware/CoursewareBlockFeedback.vue
@@ -19,7 +19,7 @@
             />
             <div v-if="userIsTeacher" class="cw-block-feedback-create">
                 <textarea v-model="feedbackText" :placeholder="placeHolder" spellcheck="true"></textarea>
-                <button class="button" @click="postFeedback"><translate>Senden</translate></button>
+                <button class="button" @click="postFeedback">{{ $gettext('Senden') }}</button>
             </div>
         </div>
     </section>
diff --git a/resources/vue/components/courseware/CoursewareBlockInfo.vue b/resources/vue/components/courseware/CoursewareBlockInfo.vue
index 5ef6e97..17a7165 100644
--- a/resources/vue/components/courseware/CoursewareBlockInfo.vue
+++ b/resources/vue/components/courseware/CoursewareBlockInfo.vue
@@ -1,30 +1,30 @@
 <template>
     <section class="cw-block-info">
-        <header><translate>Informationen</translate></header>
+        <header>{{ $gettext('Informationen') }}</header>
         <div class="cw-block-features-content cw-block-info-content">
             <table class="cw-block-info-table">
                 <tr>
-                    <td><translate>Blockbeschreibung</translate></td>
+                    <td>{{ $gettext('Blockbeschreibung') }}</td>
                     <td><slot name="info" /></td>
                 </tr>
                 <tr>
-                    <td><translate>Block wurde erstellt von</translate></td>
+                    <td>{{ $gettext('Block wurde erstellt von') }}</td>
                     <td>{{ owner }}</td>
                 </tr>
                 <tr>
-                    <td><translate>Block wurde erstellt am</translate>:</td>
+                    <td>{{ $gettext('Block wurde erstellt am') }}:</td>
                     <td><iso-date :date="block.attributes.mkdate" /></td>
                 </tr>
                 <tr>
-                    <td><translate>Zuletzt bearbeitet von</translate>:</td>
+                    <td>{{ $gettext('Zuletzt bearbeitet von') }}:</td>
                     <td>{{ editor }}</td>
                 </tr>
                 <tr>
-                    <td><translate>Zuletzt bearbeitet am</translate>:</td>
+                    <td>{{ $gettext('Zuletzt bearbeitet am') }}:</td>
                     <td><iso-date :date="block.attributes.chdate" /></td>
                 </tr>
             </table>
-            <button class="button" @click="$emit('close')"><translate>Schließen</translate></button>
+            <button class="button" @click="$emit('close')">{{ $gettext('Schließen') }}</button>
         </div>
     </section>
 </template>
diff --git a/resources/vue/components/courseware/CoursewareCanvasBlock.vue b/resources/vue/components/courseware/CoursewareCanvasBlock.vue
index e1ea7e8..e725798 100644
--- a/resources/vue/components/courseware/CoursewareCanvasBlock.vue
+++ b/resources/vue/components/courseware/CoursewareCanvasBlock.vue
@@ -99,47 +99,62 @@
                 />
                 <div class="cw-canvasblock-hints">
                     <div v-show="write" class="messagebox messagebox_info cw-canvasblock-text-info">
-                        <translate>Texteingabe mit Enter-Taste bestätigen</translate>
+                        {{ $gettext('Texteingabe mit Enter-Taste bestätigen') }}
                     </div>
                 </div>
             </template>
             <template v-if="canEdit" #edit>
-                <form class="default" @submit.prevent="">
-                    <label>
-                        <translate>Überschrift</translate>
-                        <input type="text" v-model="currentTitle" />
-                    </label>
-                    <label>
-                        <translate>Hintergrundbild</translate>
-                        <select v-model="currentImage">
-                            <option value="true"><translate>Ja</translate></option>
-                            <option value="false"><translate>Nein</translate></option>
-                        </select>
-                    </label>
-                    <label v-if="currentImage === 'true'">
-                        <translate>Bilddatei</translate>
-                        <courseware-file-chooser
-                            v-model="currentFileId"
-                            :isImage="true"
-                            @selectFile="updateCurrentFile"
-                        />
-                    </label>
-                    <label>
-                        <translate>Speicherort</translate>
-                        <courseware-folder-chooser v-model="currentUploadFolderId" :unchoose="true"/>
-                    </label>
-                    <label>
-                        <translate>Werte anderer Nutzer anzeigen</translate>
-                        <select v-model="currentShowUserData">
-                            <option value="off"><translate>deaktiviert</translate></option>
-                            <option value="teacher"><translate>nur für Lehrende</translate></option>
-                            <option value="all"><translate>für alle</translate></option>
-                        </select>
-                    </label>
-                </form>
+                <courseware-tabs>
+                    <courseware-tab
+                        :index="0"
+                        :name="$gettext('Grunddaten')"
+                        :selected="true"
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label>
+                                {{ $gettext('Überschrift') }}
+                                <input type="text" v-model="currentTitle" />
+                            </label>
+                            <label>
+                                {{ $gettext('Hintergrundbild') }}
+                                <select v-model="currentImage">
+                                    <option value="true">{{ $gettext('Ja') }}</option>
+                                    <option value="false">{{ $gettext('Nein') }}</option>
+                                </select>
+                            </label>
+                            <label v-if="currentImage === 'true'">
+                                {{ $gettext('Bilddatei') }}
+                                <courseware-file-chooser
+                                    v-model="currentFileId"
+                                    :isImage="true"
+                                    @selectFile="updateCurrentFile"
+                                />
+                            </label>
+                        </form>
+                    </courseware-tab>
+                    <courseware-tab
+                        :index="1"
+                        :name="$gettext('Einstellungen')"
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label>
+                                {{ $gettext('Speicherort') }}
+                                <courseware-folder-chooser v-model="currentUploadFolderId" :unchoose="true"/>
+                            </label>
+                            <label>
+                                {{ $gettext('Werte anderer Nutzer anzeigen') }}
+                                <select v-model="currentShowUserData">
+                                    <option value="off">{{ $gettext('deaktiviert') }}</option>
+                                    <option value="teacher">{{ $gettext('nur für Lehrende') }}</option>
+                                    <option value="all">{{ $gettext('für alle') }}</option>
+                                </select>
+                            </label>
+                        </form>
+                    </courseware-tab>
+                </courseware-tabs>
             </template>
             <template #info>
-                <p><translate>Informationen zum Leinwand-Block</translate></p>
+                <p>{{ $gettext('Informationen zum Leinwand-Block') }}</p>
             </template>
         </courseware-default-block>
     </div>
@@ -149,6 +164,8 @@
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
 import CoursewareFileChooser from './CoursewareFileChooser.vue';
 import CoursewareFolderChooser from './CoursewareFolderChooser.vue';
+import CoursewareTabs from './CoursewareTabs.vue';
+import CoursewareTab from './CoursewareTab.vue';
 import { blockMixin } from './block-mixin.js';
 import { mapActions, mapGetters } from 'vuex';
 
@@ -159,6 +176,8 @@ export default {
         CoursewareDefaultBlock,
         CoursewareFileChooser,
         CoursewareFolderChooser,
+        CoursewareTabs,
+        CoursewareTab,
     },
     props: {
         block: Object,
diff --git a/resources/vue/components/courseware/CoursewareChartBlock.vue b/resources/vue/components/courseware/CoursewareChartBlock.vue
index 96726bf..4d1c6dd 100644
--- a/resources/vue/components/courseware/CoursewareChartBlock.vue
+++ b/resources/vue/components/courseware/CoursewareChartBlock.vue
@@ -14,70 +14,91 @@
             </template>
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
-                    <label>
-                        <translate>Beschriftung</translate>
+                    <label class="col-3">
+                        {{ $gettext('Beschriftung') }}
                         <input type="text" v-model="currentLabel" @focusout="buildChart" />
                     </label>
-                    <label>
-                        <translate>Typ</translate>
-                        <select v-model="currentType">
-                            <option value="bar"><translate>Säulendiagramm</translate></option>
-                            <option value="horizontalBar"><translate>Balkendiagramm</translate></option>
-                            <option value="pie"><translate>Kreisdiagramm</translate></option>
-                            <option value="doughnut"><translate>Ringdiagramm</translate></option>
-                            <option value="polarArea"><translate>Polardiagramm</translate></option>
-                            <option value="line"><translate>Liniendiagramm</translate></option>
-                        </select>
+                    <label class="col-3">
+                        {{ $gettext('Typ') }}
+                        <studip-select
+                            v-model="currentType"
+                            :options="chartTypes"
+                            :reduce="chartTypes => chartTypes.value"
+                            :clearable="false"
+                            @option:selected="buildChart"
+                        >
+                            <template #open-indicator="selectAttributes">
+                                <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span>
+                            </template>
+                            <template #selected-option="{name}">
+                                <span>{{name}}</span>
+                            </template>
+                            <template #option="{name}">
+                                <span>{{name}}</span>
+                            </template>
+                        </studip-select>
                     </label>
-                    <fieldset v-for="(item, index) in currentContent" :key="index">
-                        <legend>
-                            <translate>Datensatz</translate> {{ index + 1 }}
-                            <span
-                                v-if="!onlyRecord"
-                                class="cw-block-chart-item-remove"
-                                :title="textRecordRemove"
-                                @click="removeItem(index)">
-                                <studip-icon shape="trash" />
-                            </span>
-                        </legend>
-                        <label>
-                            <translate>Wert</translate>
-                            <input type="number" v-model="item.value" @change="buildChart" />
-                        </label>
-                        <label>
-                            <translate>Bezeichnung</translate>
-                            <input type="text" v-model="item.label" @focusout="buildChart" />
-                        </label>
-                        <label>
-                            <translate>Farbe</translate>
-                            <studip-select
-                                :options="colors"
-                                :reduce="colors => colors.value"
-                                label="rgb"
-                                :clearable="false"
-                                v-model="item.color"
-                                @option:selected="buildChart"
-                            >
-                                <template #open-indicator="selectAttributes">
-                                    <span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10"/></span>
-                                </template>
-                                <template #no-options>
-                                    <translate>Es steht keine Auswahl zur Verfügung.</translate>
-                                </template>
-                                <template #selected-option="{name, rgb}">
-                                    <span class="vs__option-color" :style="{'background-color': 'rgb(' + rgb + ')'}"></span><span>{{name}}</span>
-                                </template>
-                                <template #option="{name, rgb}">
-                                    <span class="vs__option-color" :style="{'background-color': 'rgb(' + rgb + ')'}"></span><span>{{name}}</span>
-                                </template>
-                            </studip-select>
-                        </label>
-                    </fieldset>
                 </form>
-                <button class="button add" @click="addItem"><translate>Datensatz hinzufügen</translate></button>
+                <button class="button add" @click="addItem">{{ $gettext('Datensatz hinzufügen') }}</button>
+                <courseware-tabs
+                    v-if="currentContent.length > 0"
+                    :setSelected="setItemTab"
+                    @selectTab="setItemTab = (parseInt($event.name.replace($gettext('Datensatz') +  ' ', ''), 10) - 1)"
+                >
+                    <courseware-tab
+                        v-for="(item, index) in currentContent"
+                        :key="index"
+                        :index="index"
+                        :name="$gettext('Datensatz') +  ' ' + (index + 1).toString()"
+                        :selected="index === 0"
+                        canBeEmpty
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label class="col-1">
+                                {{ $gettext('Wert') }}
+                                <input type="number" v-model="item.value" @change="buildChart" />
+                            </label>
+                            <label class="col-2">
+                                {{ $gettext('Farbe') }}
+                                <studip-select
+                                    :options="colors"
+                                    :reduce="colors => colors.value"
+                                    label="rgb"
+                                    :clearable="false"
+                                    v-model="item.color"
+                                    @option:selected="buildChart"
+                                >
+                                    <template #open-indicator="selectAttributes">
+                                        <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span>
+                                    </template>
+                                    <template #no-options>
+                                        {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
+                                    </template>
+                                    <template #selected-option="{name, rgb}">
+                                        <span class="vs__option-color" :style="{'background-color': 'rgb(' + rgb + ')'}"></span><span>{{name}}</span>
+                                    </template>
+                                    <template #option="{name, rgb}">
+                                        <span class="vs__option-color" :style="{'background-color': 'rgb(' + rgb + ')'}"></span><span>{{name}}</span>
+                                    </template>
+                                </studip-select>
+                            </label>
+                            <label class="col-3">
+                                {{ $gettext('Bezeichnung') }}
+                                <input type="text" v-model="item.label" @focusout="buildChart" />
+                            </label>
+                            <button
+                                v-if="currentContent.length > 1"
+                                class="button trash"
+                                @click="removeItem(index)"
+                            >
+                                {{ $gettext('Datensatz entfernen') }}
+                            </button>
+                        </form>
+                    </courseware-tab>
+                </courseware-tabs>                
             </template>
             <template #info>
-                <p><translate>Informationen zum Diagramm-Block</translate></p>
+                <p>{{ $gettext('Informationen zum Diagramm-Block') }}</p>
             </template>
         </courseware-default-block>
     </div>
@@ -85,16 +106,21 @@
 
 <script>
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
+import CoursewareTabs from './CoursewareTabs.vue';
+import CoursewareTab from './CoursewareTab.vue';
+import StudipIcon from '../StudipIcon.vue';
 import { blockMixin } from './block-mixin.js';
 import Chart from 'chart.js';
 import { mapActions } from 'vuex';
-import StudipIcon from '../StudipIcon.vue';
+
 
 export default {
     name: 'courseware-chart-block',
     mixins: [blockMixin],
     components: {
         CoursewareDefaultBlock,
+        CoursewareTabs,
+        CoursewareTab,
         StudipIcon,
     },
     props: {
@@ -120,7 +146,16 @@ export default {
                 { name:this.$gettext('Hellgrau'), value: 'lightgrey', rgb: '149, 165, 166' },
                 { name:this.$gettext('Schwarz'), value: 'black', rgb: '0, 0, 0' },
             ],
+            chartTypes: [
+                { name: this.$gettext('Säulendiagramm'), value: 'bar'},
+                { name: this.$gettext('Balkendiagramm'), value: 'horizontalBar'},
+                { name: this.$gettext('Kreisdiagramm'), value: 'pie'},
+                { name: this.$gettext('Ringdiagramm'), value: 'doughnut'},
+                { name: this.$gettext('Polardiagramm'), value: 'polarArea'},
+                { name: this.$gettext('Liniendiagramm'), value: 'line'},
+            ],
             textRecordRemove: this.$gettext('Datensatz entfernen'),
+            setItemTab: 0,
         };
     },
     computed: {
@@ -148,6 +183,7 @@ export default {
             this.currentContent = this.content;
             this.currentLabel = this.label;
             this.currentType = this.type;
+            this.setItemTab = 0;
         },
         storeBlock() {
             let attributes = {};
@@ -165,6 +201,7 @@ export default {
 
         addItem() {
             this.currentContent.push({ value: '0', label: '', color: 'blue' });
+            this.$nextTick(() => { this.setItemTab = this.currentContent.length - 1; });
         },
 
         removeItem(recordIndex) {
@@ -172,6 +209,7 @@ export default {
                 return !(index === recordIndex);
             });
             this.buildChart();
+            this.$nextTick(() => { this.setItemTab = 0; });
         },
 
         buildChart() {
diff --git a/resources/vue/components/courseware/CoursewareCodeBlock.vue b/resources/vue/components/courseware/CoursewareCodeBlock.vue
index db38373..3ed8d22 100644
--- a/resources/vue/components/courseware/CoursewareCodeBlock.vue
+++ b/resources/vue/components/courseware/CoursewareCodeBlock.vue
@@ -18,17 +18,17 @@
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
                     <label>
-                        <translate>Sprache</translate>
+                        {{ $gettext('Sprache') }}
                         <input type="text" v-model="currentLang" />
                     </label>
                     <label>
-                        <translate>Quelltext</translate>
+                        {{ $gettext('Quelltext') }}
                         <textarea v-model="currentContent"></textarea>
                     </label>
                 </form>
             </template>
             <template #info>
-                <p><translate>Informationen zum Quelltext-Block</translate></p>
+                <p>{{ $gettext('Informationen zum Quelltext-Block') }}</p>
             </template>
         </courseware-default-block>
     </div>
diff --git a/resources/vue/components/courseware/CoursewareConfirmBlock.vue b/resources/vue/components/courseware/CoursewareConfirmBlock.vue
index 2a3f9b5..d3d04dd 100644
--- a/resources/vue/components/courseware/CoursewareConfirmBlock.vue
+++ b/resources/vue/components/courseware/CoursewareConfirmBlock.vue
@@ -12,7 +12,7 @@
         >
             <template #content>
                 <div class="cw-block-title">
-                    <translate>Bestätigung</translate>
+                    {{ $gettext('Bestätigung') }}
                 </div>
                 <div class="cw-block-confirm-content">
                     <div class="cw-block-confirm-checkbox">
@@ -27,12 +27,12 @@
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
                     <label>
-                        <translate>Text</translate>
+                        {{ $gettext('Text') }}
                         <input type="text" v-model="currentText" />
                     </label>
                 </form>
             </template>
-            <template #info><translate>Informationen zum Bestätigungs-Block</translate></template>
+            <template #info>{{ $gettext('Informationen zum Bestätigungs-Block') }}</template>
         </courseware-default-block>
     </div>
 </template>
diff --git a/resources/vue/components/courseware/CoursewareDateBlock.vue b/resources/vue/components/courseware/CoursewareDateBlock.vue
index 21623f7..1361b60 100644
--- a/resources/vue/components/courseware/CoursewareDateBlock.vue
+++ b/resources/vue/components/courseware/CoursewareDateBlock.vue
@@ -14,37 +14,37 @@
                     <div class="cw-date-countdown-digit" data-countdown="days">
                         <div class="cw-date-countdown-number">{{ countdownDays }}</div>
                         <div v-show="countdownDays === '01'" class="cw-date-countdown-label-sg">
-                            <translate>Tag</translate>
+                            {{ $gettext('Tag') }}
                         </div>
                         <div v-show="countdownDays !== '01'" class="cw-date-countdown-label-pl">
-                            <translate>Tage</translate>
+                            {{ $gettext('Tage') }}
                         </div>
                     </div>
                     <div class="cw-date-countdown-digit" data-countdown="hours">
                         <div class="cw-date-countdown-number">{{ countdownHours }}</div>
                         <div v-show="countdownHours === '01'" class="cw-date-countdown-label-sg">
-                            <translate>Stunde</translate>
+                            {{ $gettext('Stunde') }}
                         </div>
                         <div v-show="countdownHours !== '01'" class="cw-date-countdown-label-pl">
-                            <translate>Stunden</translate>
+                            {{ $gettext('Stunden') }}
                         </div>
                     </div>
                     <div class="cw-date-countdown-digit" data-countdown="minutes">
                         <div class="cw-date-countdown-number">{{ countdownMinutes }}</div>
                         <div v-show="countdownMinutes === '01'" class="cw-date-countdown-label-sg">
-                            <translate>Minute</translate>
+                            {{ $gettext('Minute') }}
                         </div>
                         <div v-show="countdownMinutes !== '01'" class="cw-date-countdown-label-pl">
-                            <translate>Minuten</translate>
+                            {{ $gettext('Minuten') }}
                         </div>
                     </div>
                     <div class="cw-date-countdown-digit" data-countdown="seconds">
                         <div class="cw-date-countdown-number">{{ countdownSeconds }}</div>
                         <div v-show="countdownSeconds === '01'" class="cw-date-countdown-label-sg">
-                            <translate>Sekunde</translate>
+                            {{ $gettext('Sekunde') }}
                         </div>
                         <div v-show="countdownSeconds !== '01'" class="cw-date-countdown-label-pl">
-                            <translate>Sekunden</translate>
+                            {{ $gettext('Sekunden') }}
                         </div>
                     </div>
                 </div>
@@ -61,23 +61,23 @@
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
                     <label>
-                        <translate>Datum</translate>
+                        {{ $gettext('Datum') }}
                         <input type="date" v-model="currentDate" @change="computeTimestamp" />
                     </label>
                     <label>
-                        <translate>Uhrzeit</translate>
+                        {{ $gettext('Uhrzeit') }}
                         <input type="time" v-model="currentTime" @change="computeTimestamp" />
                     </label>
                     <label>
-                        <translate>Layout</translate>
+                        {{ $gettext('Layout') }}
                         <select v-model="currentStyle">
-                            <option value="countdown"><translate>Countdown</translate></option>
-                            <option value="date"><translate>Datum</translate></option>
+                            <option value="countdown">{{ $gettext('Countdown') }}</option>
+                            <option value="date">{{ $gettext('Datum') }}</option>
                         </select>
                     </label>
                 </form>
             </template>
-            <template #info><translate>Informationen zum Termin-Block</translate></template>
+            <template #info>{{ $gettext('Informationen zum Termin-Block') }}</template>
         </courseware-default-block>
     </div>
 </template>
diff --git a/resources/vue/components/courseware/CoursewareDialogCardsBlock.vue b/resources/vue/components/courseware/CoursewareDialogCardsBlock.vue
index 9c14597..4df490b 100644
--- a/resources/vue/components/courseware/CoursewareDialogCardsBlock.vue
+++ b/resources/vue/components/courseware/CoursewareDialogCardsBlock.vue
@@ -56,7 +56,7 @@
                 </div>
             </template>
             <template v-if="canEdit" #edit>
-                <button class="button add" @click="addCard"><translate>Karte hinzufügen</translate></button>
+                <button class="button add" @click="addCard">{{ $gettext('Karte hinzufügen') }}</button>
                 <courseware-tabs
                     v-if="currentCards.length > 0"
                     :setSelected="setCardTab"
@@ -72,7 +72,7 @@
                     >
                         <form class="default" @submit.prevent="">
                             <label>
-                                <translate>Bild Vorderseite</translate>:
+                                {{ $gettext('Bild Vorderseite') }}:
                                 <courseware-file-chooser
                                     v-model="card.front_file_id"
                                     :isImage="true"
@@ -81,11 +81,11 @@
                                 />
                             </label>
                             <label>
-                                <translate>Text Vorderseite</translate>:
+                                {{ $gettext('Text Vorderseite') }}:
                                 <input type="text" v-model="card.front_text" />
                             </label>
                             <label>
-                                <translate>Bild Rückseite</translate>:
+                                {{ $gettext('Bild Rückseite') }}:
                                 <courseware-file-chooser
                                     v-model="card.back_file_id"
                                     :isImage="true"
@@ -94,12 +94,12 @@
                                 />
                             </label>
                             <label>
-                                <translate>Text Rückseite</translate>:
+                                {{ $gettext('Text Rückseite') }}:
                                 <input type="text" v-model="card.back_text" />
                             </label>
                             <label v-if="!onlyCard">
                                 <button class="button trash" @click="removeCard(index)">
-                                    <translate>Karte entfernen</translate>
+                                    {{ $gettext('Karte entfernen') }}
                                 </button>
                             </label>
                         </form>
@@ -107,7 +107,7 @@
                 </courseware-tabs>
             </template>
             <template #info>
-                <p><translate>Informationen zum Lernkarten-Block</translate></p>
+                <p>{{ $gettext('Informationen zum Lernkarten-Block') }}</p>
             </template>
         </courseware-default-block>
     </div>
diff --git a/resources/vue/components/courseware/CoursewareDownloadBlock.vue b/resources/vue/components/courseware/CoursewareDownloadBlock.vue
index 403de4b..e642e79 100644
--- a/resources/vue/components/courseware/CoursewareDownloadBlock.vue
+++ b/resources/vue/components/courseware/CoursewareDownloadBlock.vue
@@ -35,41 +35,63 @@
                 </div>
                 <div v-else class="cw-block-download-content">
                     <div class="cw-block-download-file-item-not-available">
-                            <span class="cw-block-file-info cw-block-file-icon-none">
-                                <translate>Datei ist nicht verfügbar</translate>
-                            </span>
+                        <span class="cw-block-file-info cw-block-file-icon-none">
+                            {{ $gettext('Datei ist nicht verfügbar') }}
+                        </span>
                     </div>
                 </div>
             </template>
             <template v-if="canEdit" #edit>
-                <form class="default" @submit.prevent="">
-                    <label>
-                        <translate>Überschrift</translate>
-                        <input type="text" v-model="currentTitle" />
-                    </label>
-                    <label>
-                        <translate>Datei</translate>
-                        <courseware-file-chooser v-model="currentFileId" @selectFile="updateCurrentFile" />
-                    </label>
-                    <label>
-                        <translate>Infobox vor Download</translate>
-                        <input type="text" v-model="currentInfo" />
-                    </label>
-                    <label>
-                        <translate>Infobox nach Download</translate>
-                        <input type="text" v-model="currentSuccess" />
-                    </label>
-                    <label>
-                        <translate>Fortschritt erst beim Herunterladen</translate>
-                        <select v-model="currentGrade">
-                            <option value="false"><translate>Nein</translate></option>
-                            <option value="true"><translate>Ja</translate></option>
-                        </select>
-                    </label>
-                </form>
+                <courseware-tabs>
+                    <courseware-tab
+                        :index="0"
+                        :name="$gettext('Datei')"
+                        :selected="true"
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label>
+                                {{ $gettext('Überschrift') }}
+                                <input type="text" v-model="currentTitle" />
+                            </label>
+                            <label>
+                                {{ $gettext('Datei') }}
+                                <courseware-file-chooser v-model="currentFileId" @selectFile="updateCurrentFile" />
+                            </label>
+                        </form>
+                    </courseware-tab>
+                    <courseware-tab
+                        :index="1"
+                        :name="$gettext('Infobox')"
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label>
+                                {{ $gettext('Infobox vor Download') }}
+                                <input type="text" v-model="currentInfo" />
+                            </label>
+                            <label>
+                                {{ $gettext('Infobox nach Download') }}
+                                <input type="text" v-model="currentSuccess" />
+                            </label>
+                        </form>
+                    </courseware-tab>
+                    <courseware-tab
+                        :index="2"
+                        :name="$gettext('Fortschritt')"
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label>
+                                {{ $gettext('Fortschritt erst beim Herunterladen') }}
+                                <select v-model="currentGrade">
+                                    <option value="false">{{ $gettext('Nein') }}</option>
+                                    <option value="true">{{ $gettext('Ja') }}</option>
+                                </select>
+                            </label>
+                        </form>
+                    </courseware-tab>
+                </courseware-tabs>
             </template>
             <template #info>
-                <p><translate>Informationen zum Download-Block</translate></p>
+                <p>{{ $gettext('Informationen zum Download-Block') }}</p>
             </template>
         </courseware-default-block>
     </div>
@@ -78,6 +100,8 @@
 <script>
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
 import CoursewareFileChooser from './CoursewareFileChooser.vue';
+import CoursewareTabs from './CoursewareTabs.vue';
+import CoursewareTab from './CoursewareTab.vue';
 import { blockMixin } from './block-mixin.js';
 import { mapActions, mapGetters } from 'vuex';
 
@@ -87,6 +111,8 @@ export default {
     components: {
         CoursewareDefaultBlock,
         CoursewareFileChooser,
+        CoursewareTabs,
+        CoursewareTab,
     },
     props: {
         block: Object,
diff --git a/resources/vue/components/courseware/CoursewareEmbedBlock.vue b/resources/vue/components/courseware/CoursewareEmbedBlock.vue
index 8ee8808..59457ce 100644
--- a/resources/vue/components/courseware/CoursewareEmbedBlock.vue
+++ b/resources/vue/components/courseware/CoursewareEmbedBlock.vue
@@ -11,7 +11,7 @@
         >
             <template #content>
                 <div v-if="currentTitle !== ''" class="cw-block-title">{{ currentTitle }}</div>
-                <div v-if="oembedData !== null">
+                <template v-if="oembedData">
                     <div
                         v-if="oembedData.type === 'rich' || oembedData.type === 'video'"
                         v-html="oembedData.html"
@@ -26,37 +26,37 @@
                     <div v-if="oembedData.type === 'link' && oembedData.provider_name === 'DeviantArt'">
                         <img :src="oembedData.fullsize_url" />
                     </div>
-                </div>
-                <div class="cw-block-embed-info" v-if="oembedData !== null">
-                    <span class="cw-block-embed-title">{{ oembedData.title }}</span>
-                    <span class="cw-block-embed-author-name">
-                        <translate>erstellt von</translate>
-                        <a :href="oembedData.author_url" target="_blank">{{ oembedData.author_name }}</a></span
-                    >
-                    <span class="cw-block-embed-source">
-                        <translate>veröffentlicht auf</translate>
-                        <a :href="oembedData.provider_url" target="_blank">{{ oembedData.provider_name }}</a></span
-                    >
-                </div>
+                    <div class="cw-block-embed-info">
+                        <span class="cw-block-embed-title">{{ oembedData.title }}</span>
+                        <span class="cw-block-embed-author-name">
+                            {{ $gettext('erstellt von') }}
+                            <a :href="oembedData.author_url" target="_blank">{{ oembedData.author_name }}</a></span
+                        >
+                        <span class="cw-block-embed-source">
+                            {{ $gettext('veröffentlicht auf') }}
+                            <a :href="oembedData.provider_url" target="_blank">{{ oembedData.provider_name }}</a></span
+                        >
+                    </div>
+                </template>
             </template>
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
                     <label>
-                        <translate>Überschrift</translate>
+                        {{ $gettext('Überschrift') }}
                         <input type="text" v-model="currentTitle" />
                     </label>
                     <label>
-                        <translate>Quelle</translate>
+                        {{ $gettext('Quelle') }}
                         <select v-model="currentSource">
                             <option v-for="(value, key) in endPoints" :key="key" :value="key">{{ key }}</option>
                         </select>
                     </label>
                     <label>
-                        <translate>URL</translate>
+                        {{ $gettext('URL') }}
                         <input type="text" v-model="currentUrl" />
                     </label>
-                    <label v-if="currentSource === 'youtube'">
-                        <translate>Startpunkt wählen</translate>
+                    <label v-if="currentSource === 'youtube'" class="col-1">
+                        {{ $gettext('Startpunkt') }}
                         <input
                             type="time"
                             v-model="currentStartTime"
@@ -66,8 +66,8 @@
                             @change="updateTime"
                         />
                     </label>
-                    <label v-if="currentSource === 'youtube'">
-                        <translate>Endpunkt wählen</translate>
+                    <label v-if="currentSource === 'youtube'" class="col-1">
+                        {{ $gettext('Endpunkt') }}
                         <input
                             type="time"
                             v-model="currentEndTime"
@@ -80,7 +80,7 @@
                 </form>
             </template>
             <template #info>
-                <p><translate>Informationen zum Embed-Block</translate></p>
+                <p>{{ $gettext('Informationen zum Embed-Block') }}</p>
             </template>
         </courseware-default-block>
     </div>
@@ -181,14 +181,14 @@ export default {
             this.currentStartTime = this.startTime;
             this.currentEndTime = this.endTime;
             this.oembedData = this.oembed;
-            if (this.oembedData !== null) {
+            if (this.oembedData) {
                 this.updateTime();
                 this.calcContentHeight();
             }
         },
         recalculateContentHeight(data){
             if (this.$parent._uid === data.uid) {
-                if (this.oembedData !== null) {
+                if (this.oembedData) {
                     this.calcContentHeight();
                 }
             }
diff --git a/resources/vue/components/courseware/CoursewareIframeBlock.vue b/resources/vue/components/courseware/CoursewareIframeBlock.vue
index 57c5c09..e1aa21e 100644
--- a/resources/vue/components/courseware/CoursewareIframeBlock.vue
+++ b/resources/vue/components/courseware/CoursewareIframeBlock.vue
@@ -22,82 +22,104 @@
                 <div v-if="currentCcInfo" class="cw-block-iframe-cc-data">
                     <span class="cw-block-iframe-cc" :class="['cw-block-iframe-cc-' + currentCcInfo]"></span>
                     <div class="cw-block-iframe-cc-infos">
-                        <p v-if="currentCcWork !== ''"><translate>Werk</translate> {{ currentCcWork }}</p>
-                        <p v-if="currentCcAuthor !== ''"><translate>Autor</translate> {{ currentCcAuthor }}</p>
-                        <p v-if="currentCcBase !== ''"><translate>Lizenz der Plattform</translate> {{ currentCcBase }}</p>
+                        <p v-if="currentCcWork">{{ $gettext('Werk') }}: {{ currentCcWork }}</p>
+                        <p v-if="currentCcAuthor">{{ $gettext('Autor') }}: {{ currentCcAuthor }}</p>
+                        <p v-if="currentCcBase">{{ $gettext('Lizenz der Plattform') }}: {{ currentCcBase }}</p>
                     </div>
                 </div>
                 <div v-show="!currentUrl.includes('http')" :style="{ height: currentHeight + 'px' }"></div>
             </template>
             <template v-if="canEdit" #edit>
-                <form class="default" @submit.prevent="">
-                    <label>
-                        <translate>Titel</translate>
-                        <input type="text" v-model="currentTitle" />
-                    </label>
-                    <label>
-                        <translate>URL</translate>
-                        <input type="text" v-model="currentUrl" @change="setProtocol" />
-                    </label>
-                    <label>
-                        <translate>Höhe</translate>
-                        <input type="number" v-model="currentHeight" min="0" />
-                    </label>
-                    <label>
-                        <translate>Nutzerspezifische ID übergeben</translate>
-                        <select v-model="currentSubmitUserId">
-                            <option value="false"><translate>Nein</translate></option>
-                            <option value="true"><translate>Ja</translate></option>
-                        </select>
-                    </label>
+                <courseware-tabs>
+                    <courseware-tab
+                        :index="0"
+                        :name="$gettext('Grunddaten')"
+                        :selected="true"
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label>
+                                {{ $gettext('Titel') }}
+                                <input type="text" v-model="currentTitle" />
+                            </label>
+                            <label>
+                                {{ $gettext('URL') }}
+                                <input type="text" v-model="currentUrl" @change="setProtocol" />
+                            </label>
+                            <label>
+                                {{ $gettext('Höhe') }}
+                                <input type="number" v-model="currentHeight" min="0" />
+                            </label>
+                        </form>
+                    </courseware-tab>
+                    <courseware-tab
+                        :index="1"
+                        :name="$gettext('Nutzerspezifische ID')"
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label>
+                                {{ $gettext('Nutzerspezifische ID übergeben') }}
+                                <select v-model="currentSubmitUserId">
+                                    <option value="false">{{ $gettext('Nein') }}</option>
+                                    <option value="true">{{ $gettext('Ja') }}</option>
+                                </select>
+                            </label>
 
-                    <label v-if="currentSubmitUserId === 'true'">
-                        <translate>Name des Übergabeparameters</translate>
-                        <input type="text" v-model="currentSubmitParam" />
-                    </label>
-                    <label v-if="currentSubmitUserId === 'true'">
-                        <translate>Zufallszeichen für Verschlüsselung (Salt)</translate>
-                        <input type="text" v-model="currentSalt" />
-                    </label>
-                    <label>
-                        <translate>Creative Commons Angaben</translate>
-                        <select v-model="currentCcInfo">
-                            <option value="false"><translate>Keine</translate></option>
-                            <option value="by">(by) <translate>Namensnennung</translate></option>
-                            <option value="by-sa">
-                                (by-sa) <translate>Namensnennung & Weitergabe unter gleichen Bedingungen</translate>
-                            </option>
-                            <option value="by-nc">
-                                (by-nc) <translate>Namensnennung & Nicht kommerziell</translate>
-                            </option>
-                            <option value="by-nd">
-                                (by-nd) <translate>Namensnennung & Keine Bearbeitung</translate>
-                            </option>
-                            <option value="by-nc-nd">
-                                (by-nc-nd) <translate>Namensnennung & Nicht kommerziell & Keine Bearbeitung</translate>
-                            </option>
-                            <option value="by-nc-sa">
-                                (by-nc-sa)
-                                <translate>Namensnennung & Nicht kommerziell & Weitergabe unter gleichen Bedingungen</translate>
-                            </option>
-                        </select>
-                    </label>
-                    <label v-if="currentCcInfo !== 'false'">
-                        CC <translate>Werk</translate>
-                        <input type="text" v-model="currentCcWork" />
-                    </label>
-                    <label v-if="currentCcInfo !== 'false'">
-                        CC <translate>Author</translate>
-                        <input type="text" v-model="currentCcAuthor" />
-                    </label>
-                    <label v-if="currentCcInfo !== 'false'">
-                        CC <translate>Lizenz der Plattform</translate>
-                        <input type="text" v-model="currentCcBase" />
-                    </label>
-                </form>
+                            <label v-if="currentSubmitUserId === 'true'">
+                                {{ $gettext('Name des Übergabeparameters') }}
+                                <input type="text" v-model="currentSubmitParam" />
+                            </label>
+                            <label v-if="currentSubmitUserId === 'true'">
+                                {{ $gettext('Zufallszeichen für Verschlüsselung (Salt)') }}
+                                <input type="text" v-model="currentSalt" />
+                            </label>
+                        </form>
+                    </courseware-tab>
+                    <courseware-tab
+                        :index="2"
+                        :name="$gettext('Creative Commons')"
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label>
+                                {{ $gettext('Creative Commons Lizenz') }}
+                                <select v-model="currentCcInfo">
+                                    <option value="false">{{ $gettext('Keine') }}</option>
+                                    <option value="by">(by) {{ $gettext('Namensnennung') }}</option>
+                                    <option value="by-sa">
+                                        (by-sa) {{ $gettext('Namensnennung & Weitergabe unter gleichen Bedingungen') }}
+                                    </option>
+                                    <option value="by-nc">
+                                        (by-nc) {{ $gettext('Namensnennung & Nicht kommerziell') }}
+                                    </option>
+                                    <option value="by-nd">
+                                        (by-nd) {{ $gettext('Namensnennung & Keine Bearbeitung') }}
+                                    </option>
+                                    <option value="by-nc-nd">
+                                        (by-nc-nd) {{ $gettext('Namensnennung & Nicht kommerziell & Keine Bearbeitung') }}
+                                    </option>
+                                    <option value="by-nc-sa">
+                                        (by-nc-sa)
+                                        {{ $gettext('Namensnennung & Nicht kommerziell & Weitergabe unter gleichen Bedingungen') }}
+                                    </option>
+                                </select>
+                            </label>
+                            <label v-if="currentCcInfo !== 'false'">
+                                CC {{ $gettext('Werk') }}
+                                <input type="text" v-model="currentCcWork" />
+                            </label>
+                            <label v-if="currentCcInfo !== 'false'">
+                                CC {{ $gettext('Author') }}
+                                <input type="text" v-model="currentCcAuthor" />
+                            </label>
+                            <label v-if="currentCcInfo !== 'false'">
+                                CC {{ $gettext('Lizenz der Plattform') }}
+                                <input type="text" v-model="currentCcBase" />
+                            </label>
+                        </form>
+                    </courseware-tab>
+                </courseware-tabs>
             </template>
             <template #info>
-                <p><translate>Informationen zum IFrame-Block</translate></p>
+                <p>{{ $gettext('Informationen zum IFrame-Block') }}</p>
             </template>
         </courseware-default-block>
     </div>
@@ -105,6 +127,8 @@
 
 <script>
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
+import CoursewareTabs from './CoursewareTabs.vue';
+import CoursewareTab from './CoursewareTab.vue';
 import { blockMixin } from './block-mixin.js';
 import { mapActions, mapGetters } from 'vuex';
 import md5 from 'md5';
@@ -114,6 +138,8 @@ export default {
     mixins: [blockMixin],
     components: {
         CoursewareDefaultBlock,
+        CoursewareTabs,
+        CoursewareTab,
     },
     props: {
         block: Object,
diff --git a/resources/vue/components/courseware/CoursewareImageMapBlock.vue b/resources/vue/components/courseware/CoursewareImageMapBlock.vue
index a3dd875..cfcd8f7 100644
--- a/resources/vue/components/courseware/CoursewareImageMapBlock.vue
+++ b/resources/vue/components/courseware/CoursewareImageMapBlock.vue
@@ -71,7 +71,7 @@
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
                     <label>
-                        <translate>Bilddatei</translate>
+                        {{ $gettext('Bilddatei') }}
                         <courseware-file-chooser
                             v-model="currentFileId"
                             :isImage="true"
@@ -79,9 +79,9 @@
                         />
                     </label>
                     <label>
-                        <a class="button add" @click="addShape('arc')"><translate>Kreis hinzufügen</translate></a>
-                        <a class="button add" @click="addShape('ellipse')"><translate>Oval hinzufügen</translate></a>
-                        <a class="button add" @click="addShape('rect')"><translate>Rechteck hinzufügen</translate></a>
+                        <a class="button add" @click="addShape('arc')">{{ $gettext('Kreis hinzufügen') }}</a>
+                        <a class="button add" @click="addShape('ellipse')">{{ $gettext('Oval hinzufügen') }}</a>
+                        <a class="button add" @click="addShape('rect')">{{ $gettext('Rechteck hinzufügen') }}</a>
                     </label>
                     <courseware-tabs v-if="currentShapes.length > 0">
                         <courseware-tab
@@ -92,8 +92,8 @@
                             :icon="shape.title === '' ? 'link-extern' : ''"
                             :selected="index === 0"
                         >
-                            <label>
-                                <translate>Farbe</translate>
+                            <label class="col-2">
+                                {{ $gettext('Farbe') }}
                                 <studip-select
                                     :options="colors"
                                     label="name"
@@ -106,7 +106,7 @@
                                         <span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10"/></span>
                                     </template>
                                     <template #no-options>
-                                        <translate>Es steht keine Auswahl zur Verfügung.</translate>
+                                        {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
                                     </template>
                                     <template #selected-option="{name, rgba}">
                                         <span class="vs__option-color" :style="{'background-color': rgba}"></span><span>{{name}}</span>
@@ -116,38 +116,8 @@
                                     </template>
                                 </studip-select>
                             </label>
-                            <label v-if="shape.type === 'arc'" class="cw-block-image-map-dimensions">
-                                X: <input type="number" v-model="shape.data.centerX" @change="drawScreen" /> Y:
-                                <input type="number" v-model="shape.data.centerY" @change="drawScreen" />
-                                <translate>Radius</translate>
-                                <input type="number" v-model="shape.data.radius" @change="drawScreen" />
-                            </label>
-                            <label v-if="shape.type === 'rect'" class="cw-block-image-map-dimensions">
-                                X: <input type="number" v-model="shape.data.X" @change="drawScreen" /> Y:
-                                <input type="number" v-model="shape.data.Y" @change="drawScreen" />
-                                <translate>Höhe</translate>
-                                <input type="number" v-model="shape.data.height" @change="drawScreen" />
-                                <translate>Breite</translate>
-                                <input type="number" v-model="shape.data.width" @change="drawScreen" />
-                            </label>
-                            <label v-if="shape.type === 'ellipse'" class="cw-block-image-map-dimensions">
-                                X: <input type="number" v-model="shape.data.X" @change="drawScreen" /> Y:
-                                <input type="number" v-model="shape.data.Y" @change="drawScreen" />
-                                <translate>Radius</translate> X:
-                                <input type="number" v-model="shape.data.radiusX" @change="drawScreen" />
-                                <translate>Radius</translate> Y:
-                                <input type="number" v-model="shape.data.radiusY" @change="drawScreen" />
-                            </label>
-                            <label>
-                                <translate>Bezeichnung</translate>
-                                <input type="text" v-model="shape.title" />
-                            </label>
-                            <label>
-                                <translate>Beschriftung</translate>
-                                <input type="text" v-model="shape.data.text" @change="drawScreen" />
-                            </label>
-                            <label>
-                                <translate>Textfarbe</translate>
+                            <label class="col-2">
+                                {{ $gettext('Textfarbe') }}
                                 <studip-select
                                     :options="colors"
                                     label="name"
@@ -160,7 +130,7 @@
                                         <span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10"/></span>
                                     </template>
                                     <template #no-options>
-                                        <translate>Es steht keine Auswahl zur Verfügung.</translate>
+                                        {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
                                     </template>
                                     <template #selected-option="{name, rgba}">
                                         <span class="vs__option-color" :style="{'background-color': rgba}"></span><span>{{name}}</span>
@@ -170,23 +140,83 @@
                                     </template>
                                 </studip-select>
                             </label>
-                            <label>
-                                <translate>Art des Links</translate>
+                            <br>
+                            <template v-if="shape.type === 'arc'">
+                                <label class="col-1">
+                                    X
+                                    <input type="number" v-model="shape.data.centerX" @change="drawScreen" />
+                                </label>
+                                <label class="col-1">
+                                    Y
+                                    <input type="number" v-model="shape.data.centerY" @change="drawScreen" />
+                                </label>
+                                <label class="col-1">
+                                    {{ $gettext('Radius') }}
+                                    <input type="number" v-model="shape.data.radius" @change="drawScreen" />
+                                </label>
+                            </template>
+                            <template v-if="shape.type === 'rect'">
+                                <label class="col-1">
+                                    X
+                                    <input type="number" v-model="shape.data.X" @change="drawScreen" />
+                                </label>
+                                <label class="col-1">
+                                    Y
+                                    <input type="number" v-model="shape.data.Y" @change="drawScreen" />
+                                </label>
+                                <label class="col-1">
+                                    {{ $gettext('Höhe') }}
+                                    <input type="number" v-model="shape.data.height" @change="drawScreen" />
+                                </label>
+                                <label class="col-1">
+                                    {{ $gettext('Breite') }}
+                                    <input type="number" v-model="shape.data.width" @change="drawScreen" />
+                                </label>
+                            </template>
+                            <template v-if="shape.type === 'ellipse'">
+                                <label class="col-1">
+                                    X
+                                    <input type="number" v-model="shape.data.X" @change="drawScreen" />
+                                </label>
+                                <label class="col-1">
+                                    Y
+                                    <input type="number" v-model="shape.data.Y" @change="drawScreen" />
+                                </label>
+                                <label class="col-1">
+                                    {{ $gettext('Radius') }} X
+                                    <input type="number" v-model="shape.data.radiusX" @change="drawScreen" />
+                                </label>
+                                <label class="col-1">
+                                    {{ $gettext('Radius') }} Y
+                                    <input type="number" v-model="shape.data.radiusY" @change="drawScreen" />
+                                </label>
+                            </template>
+                            <label class="col-4">
+                                {{ $gettext('Bezeichnung') }}
+                                <input type="text" v-model="shape.title" />
+                            </label>
+                            <label class="col-4">
+                                {{ $gettext('Beschriftung') }}
+                                <input type="text" v-model="shape.data.text" @change="drawScreen" />
+                            </label>
+                            <br>
+                            <label class="col-2">
+                                {{ $gettext('Art des Links') }}
                                 <select v-model="shape.link_type">
-                                    <option value="internal"><translate>Interner Link</translate></option>
-                                    <option value="external"><translate>Externer Link</translate></option>
+                                    <option value="internal">{{ $gettext('Interner Link') }}</option>
+                                    <option value="external">{{ $gettext('Externer Link') }}</option>
                                 </select>
                             </label>
-                            <label v-if="shape.link_type === 'internal'">
-                                <translate>Ziel des Links</translate>
+                            <label v-if="shape.link_type === 'internal'" class="col-2">
+                                {{ $gettext('Ziel des Links') }}
                                 <select v-model="shape.target_internal" @change="drawScreen">
                                     <option v-for="(el, index) in courseware" :key="index" :value="el.id">
                                         {{ el.attributes.title }}
                                     </option>
                                 </select>
                             </label>
-                            <label v-if="shape.link_type === 'external'">
-                                <translate>Ziel des Links</translate>
+                            <label v-if="shape.link_type === 'external'" class="col-2">
+                                {{ $gettext('Ziel des Links') }}
                                 <input
                                     type="text"
                                     placeholder="https://www.studip.de"
@@ -199,7 +229,7 @@
                             </label>
                             <label>
                                 <a class="button cancel" @click="removeShape(index)"
-                                    ><translate>Form entfernen</translate></a
+                                    >{{ $gettext('Form entfernen') }}</a
                                 >
                             </label>
                         </courseware-tab>
@@ -207,7 +237,7 @@
                 </form>
             </template>
             <template #info>
-                <p><translate>Informationen zum Verweissensitive-Grafik-Block</translate></p>
+                <p>{{ $gettext('Informationen zum Verweissensitive-Grafik-Block') }}</p>
             </template>
         </courseware-default-block>
     </div>
diff --git a/resources/vue/components/courseware/CoursewareKeyPointBlock.vue b/resources/vue/components/courseware/CoursewareKeyPointBlock.vue
index b495431..687ea0b 100644
--- a/resources/vue/components/courseware/CoursewareKeyPointBlock.vue
+++ b/resources/vue/components/courseware/CoursewareKeyPointBlock.vue
@@ -17,8 +17,8 @@
             </template>
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
-                    <label for="cw-keypoint-content">
-                        <translate>Merksatz</translate>
+                    <label class="col-4">
+                        {{ $gettext('Merksatz') }}
                         <input
                             type="text"
                             name="cw-keypoint-content"
@@ -27,9 +27,9 @@
                             spellcheck="true"
                         />
                     </label>
-
-                    <label for="cw-keypoint-color">
-                        <translate>Farbe</translate>
+                    <br>
+                    <label class="col-2">
+                        {{ $gettext('Farbe') }}
                         <studip-select
                             :options="colors"
                             label="icon"
@@ -41,7 +41,7 @@
                                 <span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10"/></span>
                             </template>
                             <template #no-options>
-                                <translate>Es steht keine Auswahl zur Verfügung.</translate>
+                                {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
                             </template>
                             <template #selected-option="{name, hex}">
                                 <span class="vs__option-color" :style="{'background-color': hex}"></span><span>{{name}}</span>
@@ -51,15 +51,14 @@
                             </template>
                         </studip-select>
                     </label>
-
-                    <label for="cw-keypoint-icons">
-                        <translate>Icon</translate>
+                    <label class="col-2">
+                        {{ $gettext('Icon') }}
                         <studip-select :options="icons" :clearable="false" v-model="currentIcon">
                             <template #open-indicator="selectAttributes">
                                 <span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10"/></span>
                             </template>
                             <template #no-options>
-                                <translate>Es steht keine Auswahl zur Verfügung.</translate>
+                                {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
                             </template>
                             <template #selected-option="option">
                                 <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
@@ -72,7 +71,7 @@
                 </form>
             </template>
             <template #info>
-                <p><translate>Informationen zum Merksatz-Block</translate></p>
+                <p>{{ $gettext('Informationen zum Merksatz-Block') }}</p>
             </template>
         </courseware-default-block>
     </div>
diff --git a/resources/vue/components/courseware/CoursewareLinkBlock.vue b/resources/vue/components/courseware/CoursewareLinkBlock.vue
index 9d65163..f2c8cf9 100644
--- a/resources/vue/components/courseware/CoursewareLinkBlock.vue
+++ b/resources/vue/components/courseware/CoursewareLinkBlock.vue
@@ -30,22 +30,22 @@
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
                     <label>
-                        <translate>Titel</translate>
+                        {{ $gettext('Titel') }}
                         <input type="text" v-model="currentTitle" />
                     </label>
                     <label>
-                        <translate>Art des Links</translate>
+                        {{ $gettext('Art des Links') }}
                         <select v-model="currentType">
-                            <option value="external"><translate>Extern</translate></option>
-                            <option value="internal"><translate>Intern</translate></option>
+                            <option value="external">{{ $gettext('Extern') }}</option>
+                            <option value="internal">{{ $gettext('Intern') }}</option>
                         </select>
                     </label>
                     <label v-show="currentType === 'external'">
-                        <translate>URL</translate>
+                        {{ $gettext('URL') }}
                         <input type="text" v-model="currentUrl" @change="fixUrl" />
                     </label>
                     <label v-show="currentType === 'internal'">
-                        <translate>Seite</translate>
+                        {{ $gettext('Seite') }}
                         <select v-model="currentTarget">
                             <option v-for="(el, index) in courseware" :key="index" :value="el.id">
                                 {{ el.attributes.title }}
@@ -55,7 +55,7 @@
                 </form>
             </template>
             <template #info>
-                <p><translate>Informationen zum Link-Block</translate></p>
+                <p>{{ $gettext('Informationen zum Link-Block') }}</p>
             </template>
         </courseware-default-block>
     </div>
diff --git a/resources/vue/components/courseware/CoursewareTableOfContentsBlock.vue b/resources/vue/components/courseware/CoursewareTableOfContentsBlock.vue
index c55399b..e495323 100644
--- a/resources/vue/components/courseware/CoursewareTableOfContentsBlock.vue
+++ b/resources/vue/components/courseware/CoursewareTableOfContentsBlock.vue
@@ -77,20 +77,20 @@
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
                     <label>
-                        <translate>Überschrift</translate>
+                        {{ $gettext('Überschrift') }}
                         <input type="text" v-model="currentTitle" />
                     </label>
                     <label>
-                        <translate>Layout</translate>
+                        {{ $gettext('Layout') }}
                         <select v-model="currentStyle">
-                            <option value="list"><translate>Liste</translate></option>
-                            <option value="list-details"><translate>Liste mit Beschreibung</translate></option>
-                            <option value="tiles"><translate>Kacheln</translate></option>
+                            <option value="list">{{ $gettext('Liste') }}</option>
+                            <option value="list-details">{{ $gettext('Liste mit Beschreibung') }}</option>
+                            <option value="tiles">{{ $gettext('Kacheln') }}</option>
                         </select>
                     </label>
                 </form>
             </template>
-            <template #info><translate>Informationen zum Inhaltsverzeichnis-Block</translate></template>
+            <template #info>{{ $gettext('Informationen zum Inhaltsverzeichnis-Block') }}</template>
         </courseware-default-block>
     </div>
 </template>
diff --git a/resources/vue/components/courseware/CoursewareTextBlock.vue b/resources/vue/components/courseware/CoursewareTextBlock.vue
index 5a6f871..7367cf8 100644
--- a/resources/vue/components/courseware/CoursewareTextBlock.vue
+++ b/resources/vue/components/courseware/CoursewareTextBlock.vue
@@ -16,7 +16,7 @@
             <template v-if="canEdit" #edit>
                 <ckeditor :editor="editor" v-model="currentText" :config="editorConfig" @ready="onReady"></ckeditor>
             </template>
-            <template #info><translate>Informationen zum Text-Block</translate></template>
+            <template #info>{{ $gettext('Informationen zum Text-Block') }}</template>
         </courseware-default-block>
     </div>
 </template>
diff --git a/resources/vue/components/courseware/CoursewareTimelineBlock.vue b/resources/vue/components/courseware/CoursewareTimelineBlock.vue
index 31a678c..1cc5d4d 100644
--- a/resources/vue/components/courseware/CoursewareTimelineBlock.vue
+++ b/resources/vue/components/courseware/CoursewareTimelineBlock.vue
@@ -35,27 +35,26 @@
             </template>
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
-                    <label>
-                        <translate>Zeitliche Sortierung</translate>
+                    <label class="col-2">
+                        {{ $gettext('Zeitliche Sortierung') }}
                         <select v-model="currentSort">
-                            <option value="none"><translate>Keine</translate></option>
-                            <option value="asc"><translate>Aufsteigend</translate></option>
-                            <option value="desc"><translate>Absteigend</translate></option>
+                            <option value="none">{{ $gettext('Keine') }}</option>
+                            <option value="asc">{{ $gettext('Aufsteigend') }}</option>
+                            <option value="desc">{{ $gettext('Absteigend') }}</option>
                         </select>
                     </label>
-
-                    <label>
-                        <translate>Zeitangabe</translate>
+                    <label class="col-2">
+                        {{ $gettext('Zeitangabe') }}
                         <select v-model="currentDateFormat">
-                            <option value="year"><translate>Jahr</translate></option>
-                            <option value="date"><translate>Datum</translate></option>
-                            <option value="time"><translate>Zeit</translate></option>
-                            <option value="datetime"><translate>Datum und Zeit</translate></option>
-                            <option value="none"><translate>Keine</translate></option>
+                            <option value="year">{{ $gettext('Jahr') }}</option>
+                            <option value="date">{{ $gettext('Datum') }}</option>
+                            <option value="time">{{ $gettext('Zeit') }}</option>
+                            <option value="datetime">{{ $gettext('Datum und Zeit') }}</option>
+                            <option value="none">{{ $gettext('Keine') }}</option>
                         </select>
                     </label>
                 </form>
-                <button class="button add" @click="addItem"><translate>Ereignis hinzufügen</translate></button>
+                <button class="button add" @click="addItem">{{ $gettext('Ereignis hinzufügen') }}</button>
                 <courseware-tabs
                     v-if="currentItems.length > 0"
                     :setSelected="setItemTab"
@@ -70,16 +69,18 @@
                         canBeEmpty
                     >
                         <form class="default" @submit.prevent="">
-                            <label>
-                                <translate>Titel</translate>
+                            <label class="col-4">
+                                {{ $gettext('Titel') }}
                                 <input type="text" v-model="item.title" />
                             </label>
-                            <label>
-                                <translate>Beschreibung</translate>
+                            <label class="col-4">
+                            
+                                {{ $gettext('Beschreibung') }}
                                 <textarea v-model="item.description" />
                             </label>
-                            <label>
-                                <translate>Farbe</translate>
+                            <br>
+                            <label class="col-2">
+                                {{ $gettext('Farbe') }}
                                 <studip-select
                                     :options="colors"
                                     label="icon"
@@ -91,7 +92,7 @@
                                         <span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10"/></span>
                                     </template>
                                     <template #no-options>
-                                        <translate>Es steht keine Auswahl zur Verfügung.</translate>
+                                        {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
                                     </template>
                                     <template #selected-option="{name, hex}">
                                         <span class="vs__option-color" :style="{'background-color': hex}"></span><span>{{name}}</span>
@@ -101,14 +102,14 @@
                                     </template>
                                 </studip-select>
                             </label>
-                            <label>
-                                <translate>Icon</translate>
+                            <label class="col-2">
+                                {{ $gettext('Icon') }}
                                 <studip-select :options="icons" :clearable="false" v-model="item.icon">
                                     <template #open-indicator="selectAttributes">
                                         <span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10"/></span>
                                     </template>
                                     <template #no-options>
-                                        <translate>Es steht keine Auswahl zur Verfügung.</translate>
+                                        {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
                                     </template>
                                     <template #selected-option="option">
                                         <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
@@ -118,24 +119,25 @@
                                     </template>
                                 </studip-select>
                             </label>
-                            <label>
-                                <translate>Datum</translate>
+                            <br>
+                            <label class="col-1">
+                                {{ $gettext('Datum') }}
                                 <input type="date" v-model="item.date" required/>
                             </label>
-                            <label>
-                                <translate>Zeit</translate>
+                            <label class="col-1">
+                                {{ $gettext('Zeit') }}
                                 <input type="time" v-model="item.time" />
                             </label>
                             <label v-if="currentItems.length > 1">
                                 <button class="button trash" @click="removeItem(index)">
-                                    <translate>Ereignis entfernen</translate>
+                                    {{ $gettext('Ereignis entfernen') }}
                                 </button>
                             </label>
                         </form>
                     </courseware-tab>
                 </courseware-tabs>
             </template>
-            <template #info><translate>Informationen zum Zeitstrahl-Block</translate></template>
+            <template #info>{{ $gettext('Informationen zum Zeitstrahl-Block') }}</template>
         </courseware-default-block>
     </div>
 </template>
diff --git a/resources/vue/components/courseware/CoursewareTypewriterBlock.vue b/resources/vue/components/courseware/CoursewareTypewriterBlock.vue
index 14c7072..234f2aa 100644
--- a/resources/vue/components/courseware/CoursewareTypewriterBlock.vue
+++ b/resources/vue/components/courseware/CoursewareTypewriterBlock.vue
@@ -22,45 +22,45 @@
                 </div>
             </template>
             <template v-if="canEdit" #edit>
-                <label class="cw-typewriter-content-label">
-                    <translate>Text</translate>
-                    <textarea v-model="currentText" name="cw-typewriter-content" class="cw-typewriter-content"></textarea>
-                </label>
-
-                <label class="cw-typewriter-speed-label">
-                    <translate>Geschwindigkeit</translate>
-                    <select v-model="currentSpeed" class="cw-typewriter-speed" name="cw-typewriter-speed" @change="restartTyping">
-                        <option value="0"><translate>Langsam</translate></option>
-                        <option value="1"><translate>Normal</translate></option>
-                        <option value="2"><translate>Schnell</translate></option>
-                        <option value="3"><translate>Sehr schnell</translate></option>
-                    </select>
-                </label>
-
-                <label class="cw-typewriter-font-label">
-                    <translate>Schriftart</translate>
-                    <select v-model="currentFont" class="cw-typewriter-font" name="cw-typewriter-font">
-                        <option value="font-default"><translate>Standard</translate></option>
-                        <option value="font-typewriter">Lucida Sans Typewriter</option>
-                        <option value="font-trebuchet">Trebuchet MS</option>
-                        <option value="font-tahoma">Tahoma</option>
-                        <option value="font-georgia">Georgia</option>
-                        <option value="font-narrow">Arial Narrow</option>
-                    </select>
-                </label>
-
-                <label class="cw-typewriter-size-label">
-                    <translate>Schriftgröße</translate>
-                    <select v-model="currentSize" class="cw-typewriter-size" name="cw-typewriter-size">
-                        <option value="size-default">100%</option>
-                        <option value="size-tall">125%</option>
-                        <option value="size-grande">150%</option>
-                        <option value="size-huge">200%</option>
-                    </select>
-                </label>
+                <form class="default" @submit.prevent="">
+                    <label class="col-4">
+                        {{ $gettext('Text') }}
+                        <textarea v-model="currentText" />
+                    </label>
+                    <br>
+                    <label class="col-1">
+                        {{ $gettext('Geschwindigkeit') }}
+                        <select v-model="currentSpeed" @change="restartTyping">
+                            <option value="0">{{ $gettext('Langsam') }}</option>
+                            <option value="1">{{ $gettext('Normal') }}</option>
+                            <option value="2">{{ $gettext('Schnell') }}</option>
+                            <option value="3">{{ $gettext('Sehr schnell') }}</option>
+                        </select>
+                    </label>
+                    <label class="col-1">
+                        {{ $gettext('Schriftart') }}
+                        <select v-model="currentFont">
+                            <option value="font-default">{{ $gettext('Standard') }}</option>
+                            <option value="font-typewriter">Lucida Sans Typewriter</option>
+                            <option value="font-trebuchet">Trebuchet MS</option>
+                            <option value="font-tahoma">Tahoma</option>
+                            <option value="font-georgia">Georgia</option>
+                            <option value="font-narrow">Arial Narrow</option>
+                        </select>
+                    </label>
+                    <label class="col-1">
+                        {{ $gettext('Schriftgröße') }}
+                        <select v-model="currentSize">
+                            <option value="size-default">100%</option>
+                            <option value="size-tall">125%</option>
+                            <option value="size-grande">150%</option>
+                            <option value="size-huge">200%</option>
+                        </select>
+                    </label>
+                </form>
             </template>
             <template #info>
-                <p><translate>Informationen zum Schreibmaschinen-Block</translate></p>
+                <p>{{ $gettext('Informationen zum Schreibmaschinen-Block') }}</p>
             </template>
         </courseware-default-block>
     </div>
diff --git a/resources/vue/components/courseware/CoursewareVideoBlock.vue b/resources/vue/components/courseware/CoursewareVideoBlock.vue
index 40f7e96..66c3cf2 100644
--- a/resources/vue/components/courseware/CoursewareVideoBlock.vue
+++ b/resources/vue/components/courseware/CoursewareVideoBlock.vue
@@ -21,54 +21,70 @@
                 />
             </template>
             <template v-if="canEdit" #edit>
-                <form class="default" @submit.prevent="">
-                    <label>
-                        <translate>Überschrift</translate>
-                        <input type="text" v-model="currentTitle" />
-                    </label>
-                    <label>
-                        <translate>Quelle</translate>
-                        <select v-model="currentSource">
-                            <option value="studip"><translate>Dateibereich</translate></option>
-                            <option value="web"><translate>Web-Adresse</translate></option>
-                        </select>
-                    </label>
-                    <label v-show="currentSource === 'web'">
-                        <translate>URL</translate>
-                        <input type="text" v-model="currentWebUrl" />
-                    </label>
-                    <label v-show="currentSource === 'studip'">
-                        <translate>Datei</translate>
-                        <courseware-file-chooser
-                            v-model="currentFileId"
-                            :isVideo="true"
-                            @selectFile="updateCurrentFile"
-                        />
-                    </label>
-                    <label>
-                        <translate>Seitenverhältnis</translate>
-                        <select v-model="currentAspect">
-                            <option value="169">16:9</option>
-                            <option value="43">4:3</option>
-                        </select>
-                    </label>
-                    <label>
-                        <translate>Video startet automatisch</translate>
-                        <select v-model="currentAutoplay">
-                            <option value="disabled"><translate>Nein</translate></option>
-                            <option value="enabled"><translate>Ja</translate></option>
-                        </select>
-                    </label>
-                    <label>
-                        <translate>Contextmenü</translate>
-                        <select v-model="currentContextMenu">
-                            <option value="enabled"><translate>Erlauben</translate></option>
-                            <option value="disabled"><translate>Verhindern</translate></option>
-                        </select>
-                    </label>
-                </form>
+                <courseware-tabs>
+                    <courseware-tab
+                        :index="0"
+                        :name="$gettext('Grunddaten')"
+                        :selected="true"
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label>
+                                {{ $gettext('Überschrift') }}
+                                <input type="text" v-model="currentTitle" />
+                            </label>
+                            <label>
+                                {{ $gettext('Quelle') }}
+                                <select v-model="currentSource">
+                                    <option value="studip">{{ $gettext('Dateibereich') }}</option>
+                                    <option value="web">{{ $gettext('Web-Adresse') }}</option>
+                                </select>
+                            </label>
+                            <label v-show="currentSource === 'web'">
+                                {{ $gettext('URL') }}
+                                <input type="text" v-model="currentWebUrl" />
+                            </label>
+                            <label v-show="currentSource === 'studip'">
+                                {{ $gettext('Datei') }}
+                                <courseware-file-chooser
+                                    v-model="currentFileId"
+                                    :isVideo="true"
+                                    @selectFile="updateCurrentFile"
+                                />
+                            </label>
+
+                        </form>
+                    </courseware-tab>
+                    <courseware-tab
+                        :index="1"
+                        :name="$gettext('Video Einstellungen')"
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label>
+                                {{ $gettext('Seitenverhältnis') }}
+                                <select v-model="currentAspect">
+                                    <option value="169">16:9</option>
+                                    <option value="43">4:3</option>
+                                </select>
+                            </label>
+                            <label>
+                                {{ $gettext('Video startet automatisch') }}
+                                <select v-model="currentAutoplay">
+                                    <option value="disabled">{{ $gettext('Nein') }}</option>
+                                    <option value="enabled">{{ $gettext('Ja') }}</option>
+                                </select>
+                            </label>
+                            <label>
+                                {{ $gettext('Contextmenü') }}
+                                <select v-model="currentContextMenu">
+                                    <option value="enabled">{{ $gettext('Erlauben') }}</option>
+                                    <option value="disabled">{{ $gettext('Verhindern') }}</option>
+                                </select>
+                            </label>
+                        </form>
+                    </courseware-tab>
+                </courseware-tabs>
             </template>
-            <template #info><translate>Informationen zum Video-Block</translate></template>
+            <template #info>{{ $gettext('Informationen zum Video-Block') }}</template>
         </courseware-default-block>
     </div>
 </template>
@@ -76,6 +92,8 @@
 <script>
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
 import CoursewareFileChooser from './CoursewareFileChooser.vue';
+import CoursewareTabs from './CoursewareTabs.vue';
+import CoursewareTab from './CoursewareTab.vue';
 import { blockMixin } from './block-mixin.js';
 import { mapActions, mapGetters } from 'vuex';
 
@@ -85,6 +103,8 @@ export default {
     components: {
         CoursewareDefaultBlock,
         CoursewareFileChooser,
+        CoursewareTabs,
+        CoursewareTab,
     },
     props: {
         block: Object,