From cc86d7432ad7834a548caa6da8b229f322360dec Mon Sep 17 00:00:00 2001 From: Drikus Roor Date: Tue, 19 Dec 2023 21:10:23 +0100 Subject: [PATCH 1/4] story: Update Trial story to have feedback form with button range and likert range --- frontend/src/stories/Trial.stories.js | 55 ++++++++++++++++++--------- 1 file changed, 36 insertions(+), 19 deletions(-) diff --git a/frontend/src/stories/Trial.stories.js b/frontend/src/stories/Trial.stories.js index c9ebe99b8..417adb5bb 100644 --- a/frontend/src/stories/Trial.stories.js +++ b/frontend/src/stories/Trial.stories.js @@ -46,26 +46,43 @@ export const Default = { ], }, feedback_form: { - form: [{ - key: "msi_14_never_complimented", - view: "TEXT_RANGE", - value: "", - question: "Ik heb nog nooit complimenten gekregen voor mijn talenten als muzikant.", - explainer: "In hoeverre ben je het hiermee eens of oneens?", - result_id: 18, - style: "neutral", - scoring_rule: "LIKERT", - scale_steps: 7, - choices: { - "1": "Helemaal mee oneens", - "2": "Zeer mee oneens", - "3": "Mee oneens", - "4": "Niet mee eens of oneens", - "5": "Mee eens", - "6": "Zeer mee eens", - "7": "Helemaal mee eens" + form: [ + { + "key": "know_song", + "view": "BUTTON_ARRAY", + "explainer": "", + "question": "1. Do you know this song?", + "result_id": 17242, + "is_skippable": false, + "submits": false, + "style": "boolean", + "choices": { + "yes": "fa-check", + "unsure": "fa-question", + "no": "fa-xmark" + }, + "min_values": 1 + }, + { + "key": "like_song", + "view": "ICON_RANGE", + "explainer": "", + "question": "2. How much do you like this song?", + "result_id": 17241, + "is_skippable": false, + "submits": false, + "style": "gradient-7", + "choices": { + "1": "fa-face-grin-hearts", + "2": "fa-face-grin", + "3": "fa-face-smile", + "4": "fa-face-meh", + "5": "fa-face-frown", + "6": "fa-face-frown-open", + "7": "fa-face-angry" + } } - }], + ], submit_label: "Submit", skip_label: "Skip", is_skippable: true, From c6de5bffea6979b5cf631a176304db887a294d46 Mon Sep 17 00:00:00 2001 From: Drikus Roor Date: Tue, 19 Dec 2023 21:10:34 +0100 Subject: [PATCH 2/4] feat: Add checked state to ToggleButton component --- frontend/src/components/Question/_ButtonArray.js | 11 +++++++---- frontend/src/scss/elements.scss | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/Question/_ButtonArray.js b/frontend/src/components/Question/_ButtonArray.js index 61e5e9659..4edc77454 100644 --- a/frontend/src/components/Question/_ButtonArray.js +++ b/frontend/src/components/Question/_ButtonArray.js @@ -4,7 +4,7 @@ import classNames from "classnames"; import { renderLabel } from "../../util/label"; // ButtonArray is a question view for selecting a single option from a list of buttons -const ButtonArray = ({ question, disabled, onChange }) => { +const ButtonArray = ({ question, disabled, onChange, value }) => { const buttonPress = (value) => { if (disabled) { @@ -15,7 +15,6 @@ const ButtonArray = ({ question, disabled, onChange }) => { } } - return (
@@ -29,6 +28,7 @@ const ButtonArray = ({ question, disabled, onChange }) => { key={question.key + index} onChange={buttonPress} disabled={disabled} + checked={value === val} /> ))}
@@ -36,11 +36,12 @@ const ButtonArray = ({ question, disabled, onChange }) => { ) } -const ToggleButton = ({ label, value, index, name, disabled, onChange }) => { +const ToggleButton = ({ label, value, index, name, disabled, onChange, checked }) => { const disabledClasses = disabled ? 'disabled' : ''; + const checkedClasses = checked ? 'checked' : ''; return (