From 0779f57fa2521bd2ad6478275c291a9cdfb8afb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michaela=20Br=C3=BCckner?= <brueckner@data-quest.de>
Date: Tue, 17 Feb 2026 09:49:14 +0100
Subject: re #6193

---
 .../assets/stylesheets/scss/questionnaire.scss     |  2 +-
 .../apps/questionnaires/QuestionnaireAnswer.vue    | 36 ++++----
 .../components/questionnaires/FreetextAnswer.vue   | 48 +++++++++--
 .../vue/components/questionnaires/LikertAnswer.vue | 44 ++++++++--
 .../questionnaires/QuestionnaireInfoView.vue       | 40 +++++++--
 .../vue/components/questionnaires/VoteAnswer.vue   | 98 ++++++++++++++++++++--
 6 files changed, 221 insertions(+), 47 deletions(-)

diff --git a/resources/assets/stylesheets/scss/questionnaire.scss b/resources/assets/stylesheets/scss/questionnaire.scss
index 019acc2..4426f41 100644
--- a/resources/assets/stylesheets/scss/questionnaire.scss
+++ b/resources/assets/stylesheets/scss/questionnaire.scss
@@ -304,7 +304,7 @@ $width: 270px;
     text-align: center;
     border-top: thin solid var(--content-color-40);
     color: var(--light-gray-color);
-    margin: 0 -10px;
+    margin: 0;
 }
 
 #qr_code {
diff --git a/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue b/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue
index 5345bb9..96548c1 100644
--- a/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue
+++ b/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue
@@ -2,7 +2,7 @@
     <form action="#"
           method="post"
           enctype="multipart/form-data"
-          class="questionnaire"
+          class="questionnaire default"
           @submit.prevent="submit()"
           :data-dialog="asDialog ? true : null"
           :data-secure="activateFormSecure"
@@ -11,18 +11,17 @@
         <div class="questionnaire_answer">
             <article v-for="question in questionnaireData.questions">
                 {{ question.questiontype }}
-                <QuestionnaireInfoView v-if="question.questiontype == 'Infromation'" />
+                <QuestionnaireInfoView v-if="question.questiontype == 'QuestionnaireInfo'" :question="question" />
                 <HeadlineView v-if="question.questiontype == 'Headline'" :question="question" />
                 <DividerView v-if="question.questiontype == 'Divider'" />
                 <BlankLineView v-if="question.questiontype == 'BlankLine'" />
                 <PagebreakView v-if="question.questiontype == 'Pagebreak'" />
 
-                <!-- TODO alle anderen Fragetypen rendern -->
                 <VoteAnswer v-if="question.questiontype == 'Vote'" :question="question"/>
                 <FreetextAnswer v-if="question.questiontype == 'Freetext'" :question="question"/>
                 <RangescaleAnswer v-if="question.questiontype == 'Rangescale'" :question="question"/>
-                <LikertAnswer v-if="question.questiontype == 'Likert'" :question="question"/>
-                <AutomatedDataAnswer v-if="question.questiontype == 'AutomatedData'" :question="question"/>
+                <LikertAnswer v-if="question.questiontype == 'LikertScale'" :question="question"/>
+                <AutomatedDataAnswer v-if="question.questiontype == 'QuestionnaireAutomatedData'" :question="question"/>
             </article>
 
         </div>
@@ -31,7 +30,6 @@
             <span v-if="questionnaireData.anonymous == 1 ">{{ $gettext('Die Teilnahme ist anonym.') }}</span>
             <span v-else>{{ $gettext('Die Teilnahme ist nicht anonym.') }}</span>
             <span v-if="questionnaireData.editanswers == 1 ">{{ $gettext('Sie können Ihre Antworten nachträglich ändern.') }}</span>
-            <!-- TODO funktioniert noch nicht mit Enddatum -->
             <span v-if="questionnaireData.stopdate">{{ $gettext('Sie können den Fragebogen beantworten bis zum %{date} um %{time} Uhr.', {date:getFormattedDate, time:getFormattedTime}) }}</span>
         </div>
 
@@ -39,8 +37,8 @@
 </template>
 
 <script setup>
-import {$gettext} from "../../../assets/javascripts/lib/gettext";
-import {computed} from "vue";
+import { $gettext } from "../../../assets/javascripts/lib/gettext";
+import { computed } from "vue";
 
 /* Import Design Element views */
 import QuestionnaireInfoView from '../../components/questionnaires/QuestionnaireInfoView.vue';
@@ -61,13 +59,23 @@ const props = defineProps({
 })
 
 const getFormattedDate = computed(() => {
-        return new Date(this.questionnaireData.stopdate * 1000).toLocaleDateString(document.documentElement.lang, { day: '2-digit', month: '2-digit', year: 'numeric' })
-    }
-)
+    if (!props.questionnaireData?.stopdate) return ''
+
+    return new Date(props.questionnaireData.stopdate * 1000)
+        .toLocaleDateString(document.documentElement.lang, {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        })
+})
 
 const getFormattedTime = computed(() => {
-    return new Date(this.questionnaireData.stopdate * 1000).toLocaleTimeString(document.documentElement.lang, {hour: '2-digit', minute: '2-digit'})
-    }
-)
+    if (!props.questionnaireData?.stopdate) return ''
 
+    return new Date(props.questionnaireData.stopdate * 1000)
+        .toLocaleTimeString(document.documentElement.lang, {
+            hour: '2-digit',
+            minute: '2-digit'
+        })
+})
 </script>
diff --git a/resources/vue/components/questionnaires/FreetextAnswer.vue b/resources/vue/components/questionnaires/FreetextAnswer.vue
index 7a6c8f5..904882f 100644
--- a/resources/vue/components/questionnaires/FreetextAnswer.vue
+++ b/resources/vue/components/questionnaires/FreetextAnswer.vue
@@ -1,16 +1,46 @@
 <template>
 
+    <div :class="{ mandatory: question.questiondata.mandatory == 1}">
+        <!-- TODO questionnaire/_answer_description_container as template? -->
+        <label>
+            <div class="description_container">
+                <div class="icon_container">
+                    <StudipIcon shape="guestbook"
+                                role="info"/>
+                </div>
+                <article class="description">
+                    <StudipIcon v-if="question.questiondata.mandatory == 1"
+                                shape="star"
+                                role="attention"/>
+                    <span v-if="question.questiondata.mandatory == 1">{{ $gettext('Pflichtantwort')}}</span>
+                    <div v-html="question.questiondata.description"></div>
+                </article>
+            </div>
+        </label>
+
+        <textarea name=""
+                    :required="question.questiondata.mandatory == 1"
+                  placeholder="Deine Antwort"
+        ></textarea>
+
+    </div>
+
+
 </template>
 
-<style scoped lang="scss">
 
-</style>
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import {$gettext} from "../../../assets/javascripts/lib/gettext";
+import StudipIcon from "../StudipIcon.vue";
+
+const props = defineProps({
+    question: {
+        type: Object,
+        required: true
+    }
+})
+
+
 
-<script>
-export default {
-    name: 'FreetextAnswer',
-    props: {
-        question: Array
-    },
-};
 </script>
diff --git a/resources/vue/components/questionnaires/LikertAnswer.vue b/resources/vue/components/questionnaires/LikertAnswer.vue
index b388a84..222b957 100644
--- a/resources/vue/components/questionnaires/LikertAnswer.vue
+++ b/resources/vue/components/questionnaires/LikertAnswer.vue
@@ -1,16 +1,42 @@
 <template>
 
+    <div :class="{ mandatory: question.questiondata.mandatory == 1}">
+        <!-- TODO questionnaire/_answer_description_container as template? -->
+        <label>
+            <div class="description_container">
+                <div class="icon_container">
+                    <StudipIcon shape="question-likert"
+                                role="info"/>
+                </div>
+                <article class="description">
+                    <StudipIcon v-if="question.questiondata.mandatory == 1"
+                                shape="star"
+                                role="attention"/>
+                    <span v-if="question.questiondata.mandatory == 1">{{ $gettext('Pflichtantwort')}}</span>
+                    <div v-html="question.questiondata.description"></div>
+                </article>
+            </div>
+        </label>
+
+
+    </div>
+
+
 </template>
 
-<style scoped lang="scss">
 
-</style>
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import {$gettext} from "../../../assets/javascripts/lib/gettext";
+import StudipIcon from "../StudipIcon.vue";
+
+const props = defineProps({
+    question: {
+        type: Object,
+        required: true
+    }
+})
+
+
 
-<script>
-export default {
-    name: 'LikertAnswer',
-    props: {
-        question: Array
-    },
-};
 </script>
diff --git a/resources/vue/components/questionnaires/QuestionnaireInfoView.vue b/resources/vue/components/questionnaires/QuestionnaireInfoView.vue
index 63cf316..c506710 100644
--- a/resources/vue/components/questionnaires/QuestionnaireInfoView.vue
+++ b/resources/vue/components/questionnaires/QuestionnaireInfoView.vue
@@ -1,11 +1,41 @@
-<script setup lang="ts">
+<template>
 
-</script>
 
-<template>
+    <div class="description_container">
+        <div class="icon_container">
+            <StudipIcon shape="info-circle"
+                        role="info"/>
+        </div>
+        <div class="description">
+
+            <iframe
+                    :src="question.questiondata.url">
+
+            </iframe>
+
+            <article v-html="question.questiondata.description">
+
+
+            </article>
+        </div>
+    </div>
+
 
 </template>
 
-<style scoped lang="scss">
 
-</style>
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import {$gettext} from "../../../assets/javascripts/lib/gettext";
+import StudipIcon from "../StudipIcon.vue";
+
+const props = defineProps({
+    question: {
+        type: Object,
+        required: true
+    }
+})
+
+
+
+</script>
diff --git a/resources/vue/components/questionnaires/VoteAnswer.vue b/resources/vue/components/questionnaires/VoteAnswer.vue
index cdd6ff1..7ee5cbd 100644
--- a/resources/vue/components/questionnaires/VoteAnswer.vue
+++ b/resources/vue/components/questionnaires/VoteAnswer.vue
@@ -10,25 +10,105 @@ $responseData = $response['answerdata'] ? $response['answerdata']->getArrayCopy(
 -->
 
 <template>
-    {{ $gettext('Ich bin eine Auswahlfrage') }}
-    {{ question.questiondata.options }}
 
+    <div :class="{ mandatory: question.questiondata.mandatory == 1}">
+        <!-- TODO questionnaire/_answer_description_container as template? -->
+        <div class="description_container">
+            <div class="icon_container">
+                <StudipIcon shape="vote"
+                            role="info"/>
+            </div>
+            <article class="description">
+                <StudipIcon v-if="question.questiondata.mandatory == 1"
+                            shape="star"
+                            role="attention"/>
+                <span v-if="question.questiondata.mandatory == 1">{{ $gettext('Pflichtantwort')}}</span>
+                <div v-html="question.questiondata.description"></div>
+            </article>
+        </div>
+        <!-- -->
+        <!-- hidden invalidation notice -->
 
+        <ul class="clean">
+
+            <li v-for="(answer, index) in shuffledOptions"
+                :key="index">
+                <label>
+                    <input
+                        :type="question.questiondata.multiplechoice == 1 ? 'checkbox' : 'radio'"
+                        :name="'question-' + question.id"
+                        :value="answer"
+                        v-model="userAnswer"
+                    />
+
+                    {{ answer }}
+                </label>
+
+            </li>
+
+        </ul>
+
+    </div>
+
+    <pre>{{ userAnswer }}</pre>
 
 </template>
 
 
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import {$gettext} from "../../../assets/javascripts/lib/gettext";
+import StudipIcon from "../StudipIcon.vue";
 
+const props = defineProps({
+    question: {
+        type: Object,
+        required: true
+    }
+})
 
+const shuffledOptions = ref([])
+const userAnswer = ref(null) // Radio
+// Für Checkbox später automatisch Array
 
-<script>
-export default {
-    name: 'VoteAnswer',
-    props: {
-        question: Array
-    },
-};
+function prepareAnswers() {
+    const options = [...props.question.questiondata.options]
 
+    if (props.question.questiondata.randomize == 1) {
+        for (let i = options.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1))
+            ;[options[i], options[j]] = [options[j], options[i]]
+        }
+    }
+
+    shuffledOptions.value = options
+}
+
+function initUserAnswer() {
+    if (props.question.questiondata.multiplechoice == 1) {
+        // Checkbox → Array
+        userAnswer.value = Array.isArray(props.question.responseData)
+            ? props.question.responseData
+            : []
+    } else {
+        // Radio → Einzelwert
+        userAnswer.value = props.question.responseData || null
+    }
+}
+
+onMounted(() => {
+    prepareAnswers()
+    initUserAnswer()
+})
+
+watch(
+    () => props.question,
+    () => {
+        prepareAnswers()
+        initUserAnswer()
+    },
+    { deep: true }
+)
 
 </script>
 
-- 
cgit v1.0