- {{ answerTypes[question.type].label }} + {{ questionTypeLabel }}
@@ -86,14 +86,62 @@ export default { }, computed: { + questionTypeLabel() { + const label = this.answerTypes[this.question.type].label + const labelLowest = + this.question.extraSettings?.optionsLabelLowest + ?? t('forms', 'Strongly disagree') + const labelHighest = + this.question.extraSettings?.optionsLabelHighest + ?? t('forms', 'Strongly agree') + const optionsLowest = + this.question.extraSettings?.optionsLowest?.toString() ?? '1' + const optionsHighest = + this.question.extraSettings?.optionsHighest?.toString() ?? '5' + + if (labelLowest === '' && labelHighest === '') { + return label + } + + const descriptionParts = [] + if (labelLowest !== '') { + descriptionParts.push(`${optionsLowest}: ${labelLowest}`) + } + if (labelHighest !== '') { + descriptionParts.push(`${optionsHighest}: ${labelHighest}`) + } + + const description = ` (${descriptionParts.join(', ')})` + return label + description + }, + // For countable questions like multiple choice and checkboxes questionOptions() { // Build list of question options - const questionOptionsStats = this.question.options.map((option) => ({ - ...option, - count: 0, - percentage: 0, - })) + let questionOptionsStats + if (this.question.type !== 'linearscale') { + questionOptionsStats = this.question.options.map((option) => ({ + ...option, + count: 0, + percentage: 0, + })) + } else { + questionOptionsStats = Array.from( + { + length: + (this.question.extraSettings?.optionsHighest ?? 5) + - (this.question.extraSettings?.optionsLowest ?? 1) + + 1, + }, + (_, i) => ({ + text: ( + i + (this.question.extraSettings?.optionsLowest ?? 1) + ).toString(), + count: 0, + percentage: 0, + }), + ) + } // Also record 'Other' if (this.question.extraSettings?.allowOtherAnswer) { @@ -144,18 +192,25 @@ export default { }) // Sort options by response count - questionOptionsStats.sort((object1, object2) => { - return object2.count - object1.count - }) + if (this.question.type !== 'linearscale') { + questionOptionsStats.sort((object1, object2) => { + return object2.count - object1.count + }) + } else { + // for linear scale questions move the "No response" element to the end + questionOptionsStats.push(questionOptionsStats.shift()) + } questionOptionsStats.forEach((questionOptionsStat) => { // Fill percentage values questionOptionsStat.percentage = Math.round( (100 * questionOptionsStat.count) / this.submissions.length, ) - // Mark all best results. First one is best for sure due to sorting - questionOptionsStat.best = - questionOptionsStat.count === questionOptionsStats[0].count + // Mark all best results + const maxCount = Math.max( + ...questionOptionsStats.map((option) => option.count), + ) + questionOptionsStat.best = questionOptionsStat.count === maxCount }) return questionOptionsStats diff --git a/src/models/AnswerTypes.js b/src/models/AnswerTypes.js index 34b94e44f..b34f00cf8 100644 --- a/src/models/AnswerTypes.js +++ b/src/models/AnswerTypes.js @@ -6,18 +6,20 @@ import QuestionDate from '../components/Questions/QuestionDate.vue' import QuestionDropdown from '../components/Questions/QuestionDropdown.vue' import QuestionFile from '../components/Questions/QuestionFile.vue' +import QuestionLinearScale from '../components/Questions/QuestionLinearScale.vue' import QuestionLong from '../components/Questions/QuestionLong.vue' import QuestionMultiple from '../components/Questions/QuestionMultiple.vue' import QuestionShort from '../components/Questions/QuestionShort.vue' -import IconCheckboxOutline from 'vue-material-design-icons/CheckboxOutline.vue' -import IconRadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue' import IconArrowDownDropCircleOutline from 'vue-material-design-icons/ArrowDownDropCircleOutline.vue' -import IconTextShort from 'vue-material-design-icons/TextShort.vue' -import IconTextLong from 'vue-material-design-icons/TextLong.vue' -import IconFile from 'vue-material-design-icons/File.vue' import IconCalendar from 'vue-material-design-icons/Calendar.vue' +import IconCheckboxOutline from 'vue-material-design-icons/CheckboxOutline.vue' import IconClockOutline from 'vue-material-design-icons/ClockOutline.vue' +import IconFile from 'vue-material-design-icons/File.vue' +import IconLinearScale from '../components/Icons/IconLinearScale.vue' +import IconRadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue' +import IconTextLong from 'vue-material-design-icons/TextLong.vue' +import IconTextShort from 'vue-material-design-icons/TextShort.vue' /** * @typedef {object} AnswerTypes @@ -29,6 +31,7 @@ import IconClockOutline from 'vue-material-design-icons/ClockOutline.vue' * @property {string} date Date Answer * @property {string} datetime Date and Time Answer * @property {string} time Time Answer + * @property {string} linearscale Linear Scale Answer */ export default { /** @@ -183,4 +186,14 @@ export default { storageFormat: 'HH:mm', momentFormat: 'LT', }, + + linearscale: { + component: QuestionLinearScale, + icon: IconLinearScale, + label: t('forms', 'Linear scale'), + predefined: true, + + titlePlaceholder: t('forms', 'Linear scale question title'), + warningInvalid: t('forms', 'This question needs a title!'), + }, } diff --git a/tests/Unit/Service/FormsServiceTest.php b/tests/Unit/Service/FormsServiceTest.php index b0ac64845..336c8a4e7 100644 --- a/tests/Unit/Service/FormsServiceTest.php +++ b/tests/Unit/Service/FormsServiceTest.php @@ -1411,7 +1411,36 @@ public function dataAreExtraSettingsValid() { ], 'questionType' => Constants::ANSWER_TYPE_DROPDOWN, 'expected' => false - ] + ], + 'valid-linearscale-settings' => [ + 'extraSettings' => [ + 'optionsLowest' => 0, + 'optionsHighest' => 5, + 'optionsLabelLowest' => 'disagree', + 'optionsLabelHighest' => 'agree' + ], + 'questionType' => Constants::ANSWER_TYPE_LINEARSCALE, + 'expected' => true + ], + 'invalid-linearscale-settings' => [ + 'extraSettings' => [ + 'optionsLowest' => 1, + 'optionsHighest' => 10, + 'optionsLabelLowest' => 'disagree', + 'optionsLabelHighest' => 'agree', + 'someInvalidOption' => true + ], + 'questionType' => Constants::ANSWER_TYPE_LINEARSCALE, + 'expected' => false + ], + 'outofrange-linearscale-settings' => [ + 'extraSettings' => [ + 'optionsLowest' => 3, + 'optionsHighest' => 11, + ], + 'questionType' => Constants::ANSWER_TYPE_LINEARSCALE, + 'expected' => false + ], ]; } diff --git a/tests/Unit/Service/SubmissionServiceTest.php b/tests/Unit/Service/SubmissionServiceTest.php index 1b8475277..82e7d3913 100644 --- a/tests/Unit/Service/SubmissionServiceTest.php +++ b/tests/Unit/Service/SubmissionServiceTest.php @@ -875,6 +875,18 @@ public function dataValidateSubmission() { // Expected Result 'Question "q1" can only have one answer.', ], + 'invalid-linearcale-question' => [ + // Questions + [ + ['id' => 1, 'type' => 'linearscale', 'text' => 'q1', 'isRequired' => false, 'extraSettings' => ['optionsLowest' => 0]] + ], + // Answers + [ + '1' => ['6'] + ], + // Expected Result + 'The answer for question "q1" must be an integer between 0 and 5.', + ], 'full-good-submission' => [ // Questions [ @@ -904,7 +916,8 @@ public function dataValidateSubmission() { ['id' => 11, 'type' => 'short', 'isRequired' => false, 'extraSettings' => ['validationType' => 'number']], ['id' => 12, 'type' => 'short', 'isRequired' => false, 'extraSettings' => ['validationType' => 'phone']], ['id' => 13, 'type' => 'short', 'isRequired' => false, 'extraSettings' => ['validationType' => 'regex', 'validationRegex' => '/[a-z]{3}[0-9]{3}/']], - ['id' => 16, 'type' => 'date', 'isRequired' => false, 'extraSettings' => [ + ['id' => 14, 'type' => 'linearscale', 'isRequired' => false, 'extraSettings' => ['optionsLowest' => 0]], + ['id' => 15, 'type' => 'date', 'isRequired' => false, 'extraSettings' => [ 'dateMin' => 1742860800, 'dateMax' => 1743033600] ], @@ -924,7 +937,8 @@ public function dataValidateSubmission() { '11' => ['100.45'], '12' => ['+49 711 25 24 28 90'], '13' => ['abc123'], - '16' => ['2025-03-26'] + '14' => ['3'], + '15' => ['2025-03-26'], ], // Expected Result null,