Enhance exercise generation for family conversations and feelings & affection

- Updated multiple choice exercises to include randomized wrong options for improved engagement and challenge.
- Added new exercise types for reading aloud and speaking from memory, enhancing interactive learning experiences.
- Improved gap fill exercises with clearer instructions and multiple variants for better user understanding.
- Enhanced the vocabulary service to support new exercise types, ensuring robust answer checking and feedback mechanisms.
- Updated localization files to include new instructions and messages related to the new exercise types.

frontend/src/views/social/VocabCourseView.vue

@@ -40,11 +40,11 @@
                 <span v-if="getLessonProgress(lesson.id)?.completed" class="badge completed">
                   {{ $t('socialnetwork.vocab.courses.completed') }}
                 </span>
-                <span v-if="getLessonProgress(lesson.id)?.score" class="score">
+                <span v-else-if="getLessonProgress(lesson.id)?.score" class="score">
                   {{ $t('socialnetwork.vocab.courses.score') }}: {{ getLessonProgress(lesson.id).score }}%
                 </span>
-                <span v-else-if="!getLessonProgress(lesson.id)" class="status-new">
-                  Nicht begonnen
+                <span v-else class="status-new">
+                  {{ $t('socialnetwork.vocab.courses.notStarted') }}
                 </span>
               </td>
               <td class="lesson-actions">
@@ -296,7 +296,7 @@ export default {
 
 .lessons-table td {
   padding: 15px;
-  vertical-align: top;
+  vertical-align: middle;
 }
 
 .lesson-number {
@@ -328,6 +328,8 @@ export default {
   flex-direction: column;
   gap: 5px;
   align-items: flex-start;
+  justify-content: center;
+  min-height: 60px;
 }
 
 .badge.completed {
@@ -356,37 +358,42 @@ export default {
   gap: 8px;
   flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-start;
 }
 
 .btn-start {
   padding: 8px 16px;
-  background: #007bff;
-  color: white;
-  border: none;
+  background: #F9A22C;
+  color: #000000;
+  border: 1px solid #F9A22C;
   border-radius: 4px;
   cursor: pointer;
   font-size: 0.9em;
   font-weight: 500;
-  transition: background-color 0.2s ease;
+  transition: background 0.05s;
 }
 
 .btn-start:hover {
-  background: #0056b3;
+  background: #fdf1db;
+  color: #7E471B;
+  border: 1px solid #7E471B;
 }
 
 .btn-edit {
   padding: 6px 12px;
-  background: #ffc107;
-  color: #333;
-  border: none;
+  background: #F9A22C;
+  color: #000000;
+  border: 1px solid #F9A22C;
   border-radius: 4px;
   cursor: pointer;
   font-size: 0.85em;
-  transition: background-color 0.2s ease;
+  transition: background 0.05s;
 }
 
 .btn-edit:hover {
-  background: #e0a800;
+  background: #fdf1db;
+  color: #7E471B;
+  border: 1px solid #7E471B;
 }
 
 .btn-delete {