Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Improve documentation and enhance Trial story UX #1450

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Docs: Improve documentation and enhance Trial story UX #1450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5332cb2
docs: Add docstrings for style constants in styles.py (although they …
drikusroor Dec 27, 2024
ce4b855
story: Fix initial display of Trial story (it would only show after a…
drikusroor Dec 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 27 additions & 8 deletions backend/experiment/actions/styles.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,27 @@
STYLE_NEUTRAL = 'neutral'
STYLE_NEUTRAL_INVERTED = 'neutral-inverted'
STYLE_BLUE = 'blue'
STYLE_PINK = 'pink'
STYLE_BOOLEAN = 'boolean'
STYLE_BOOLEAN_NEGATIVE_FIRST = 'boolean-negative-first'
STYLE_GRADIENT_7 = 'gradient-7'
STYLE_TOONTJEHOGER = 'toontjehoger'
"""Style constants for frontend components (primarily button arrays) in experiments."""

"""Default button style with several bright colors (yellow, blue, green)."""
STYLE_NEUTRAL = "neutral"

"""Inverted version of the neutral style (green, yellow, blue)."""
STYLE_NEUTRAL_INVERTED = "neutral-inverted"

# TODO: Are these styles still used and if not, should they be removed?
"""Button style with blue color scheme."""
STYLE_BLUE = "blue"

# TODO: Are these styles still used and if not, should they be removed?
"""Button style with pink color scheme."""
STYLE_PINK = "pink"

"""Boolean style buttons with several bright colors (green, yellow, red)."""
STYLE_BOOLEAN = "boolean"

"""Boolean style with negative option first (red, yellow, green)."""
STYLE_BOOLEAN_NEGATIVE_FIRST = "boolean-negative-first"

"""Seven-step gradient style for Likert scales (from purple to blue in 7 steps)."""
STYLE_GRADIENT_7 = "gradient-7"

"""Custom style for Toontjehoger experiment (yellow, red, teal, pink, blue, indigo)."""
STYLE_TOONTJEHOGER = "toontjehoger"
234 changes: 167 additions & 67 deletions frontend/src/stories/Trial.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,83 +8,88 @@ export default {
},
};

const getDefaultFeedbackForm = (overrides = {}) => ({
form: [{
key: "know_song",
view: "BUTTON_ARRAY",
explainer: "",
question: "1. Do you know this song?",
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?",
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,
is_profile: true,
...overrides,
});

const getDefaultPlayback = (overrides = {}) => ({
play_method: "NOAUDIO",
view: "BUTTON",
instruction: "This is the instruction",
preload_message: "This is the preload message",
play_config: {
autoplay: true,
controls: true,
loop: true,
muted: true,
playback_rate: 1,
preload: "auto",
},
sections: [
{
start: 0,
end: 10,
text: "This is the first section",
},
{
start: 10,
end: 20,
text: "This is the second section",
},
],
...overrides,
});

const getDefaultArgs = (overrides = {}) => ({
html: {
body: "<p>This is <u>the</u> <b>HTML</b> <i>body</i></p>",
},
config: {
style: "AUTOPLAY",
style: "PRELOAD",
auto_advance: true,
response_time: 1000,
continue_label: "Continue",
show_continue_button: true,
},
playback: {
view: "BUTTON",
instruction: "This is the instruction",
preload_message: "This is the preload message",
play_config: {
autoplay: true,
controls: true,
loop: true,
muted: true,
playback_rate: 1,
preload: "auto",
},
sections: [
{
start: 0,
end: 10,
text: "This is the first section",
},
{
start: 10,
end: 20,
text: "This is the second section",
},
],
},
feedback_form: {
form: [
{
key: "know_song",
view: "BUTTON_ARRAY",
explainer: "",
question: "1. Do you know this song?",
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?",
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,
is_profile: true,
},
playback: getDefaultPlayback(),
feedback_form: getDefaultFeedbackForm(),
onNext: () => { },
onResult: () => { },
...overrides,
Expand Down Expand Up @@ -136,6 +141,47 @@ export const NeutralColorScheme = {
continue_label: "Continue",
show_continue_button: true,
},
feedback_form: {
form: [
{
key: "know_song",
view: "BUTTON_ARRAY",
explainer: "",
question: "1. Do you know this song?",
is_skippable: false,
submits: false,
style: "neutral",
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?",
is_skippable: false,
submits: false,
style: "neutral",
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,
is_profile: true,
},
}),
decorators: [getDecorator,],
};
Expand All @@ -149,6 +195,47 @@ export const NeutralInvertedColorScheme = {
continue_label: "Continue",
show_continue_button: true,
},
feedback_form: {
form: [
{
key: "know_song",
view: "BUTTON_ARRAY",
explainer: "",
question: "1. Do you know this song?",
is_skippable: false,
submits: false,
style: "neutral-inverted",
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?",
is_skippable: false,
submits: false,
style: "neutral-inverted",
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,
is_profile: true,
},
}),
decorators: [getDecorator,],
};
Expand Down Expand Up @@ -217,3 +304,16 @@ export const ToontjeHoger4Absolute = {
}),
decorators: [getDecorator,],
}

export const Gradient7ColorScheme = {
args: getDefaultArgs({
config: {
style: "gradient-7",
auto_advance: true,
response_time: 1000,
continue_label: "Continue",
show_continue_button: true,
},
}),
decorators: [getDecorator,],
};
Loading