diff --git a/backend/experiment/actions/styles.py b/backend/experiment/actions/styles.py index 22ae0a248..6ec75dc79 100644 --- a/backend/experiment/actions/styles.py +++ b/backend/experiment/actions/styles.py @@ -4,4 +4,5 @@ STYLE_PINK = 'pink' STYLE_BOOLEAN = 'boolean' STYLE_BOOLEAN_NEGATIVE_FIRST = 'boolean-negative-first' -STYLE_GRADIENT_7 = 'gradient-7' \ No newline at end of file +STYLE_GRADIENT_7 = 'gradient-7' +STYLE_TOONTJEHOGER = 'toontjehoger' diff --git a/backend/experiment/rules/toontjehoger_1_mozart.py b/backend/experiment/rules/toontjehoger_1_mozart.py index 1de71a4ad..eb1dea3d9 100644 --- a/backend/experiment/rules/toontjehoger_1_mozart.py +++ b/backend/experiment/rules/toontjehoger_1_mozart.py @@ -4,6 +4,7 @@ from experiment.actions import Trial, Explainer, Step, Score, Final, Info, HTML from experiment.actions.form import ButtonArrayQuestion, Form from experiment.actions.playback import Autoplay +from experiment.actions.styles import STYLE_TOONTJEHOGER from .base import Base from experiment.utils import non_breaking_spaces @@ -168,7 +169,8 @@ def get_image_trial(self, session, section_group, image_url, question, expected_ view='BUTTON_ARRAY', result_id=prepare_result( key, session, section=section, expected_response=expected_response), - submits=True + submits=True, + style=STYLE_TOONTJEHOGER ) form = Form([question]) diff --git a/backend/experiment/serializers.py b/backend/experiment/serializers.py index 4ec2a57d4..702972441 100644 --- a/backend/experiment/serializers.py +++ b/backend/experiment/serializers.py @@ -3,6 +3,7 @@ from django_markup.markup import formatter from experiment.actions.consent import Consent +from image.serializers import serialize_image from participant.models import Participant from session.models import Session from theme.serializers import serialize_theme @@ -69,7 +70,7 @@ def serialize_experiment(experiment_object: Experiment, participant: Participant 'started_session_count': get_started_session_count(experiment_object, participant), 'finished_session_count': get_finished_session_count(experiment_object, participant), 'description': experiment_object.description, - 'image': experiment_object.image.file.url if experiment_object.image else '', + 'image': serialize_image(experiment_object.image) if experiment_object.image else None, } diff --git a/backend/experiment/tests/test_views.py b/backend/experiment/tests/test_views.py index 68f40a1ff..ea7ecbd2b 100644 --- a/backend/experiment/tests/test_views.py +++ b/backend/experiment/tests/test_views.py @@ -189,7 +189,8 @@ def test_serialize_experiment(self): serialized_experiment['description'], 'This is a test experiment' ) self.assertEqual( - serialized_experiment['image'], '/upload/test-image.jpg' + serialized_experiment['image'], { + 'file': '/upload/test-image.jpg', 'href': '', 'alt': ''} ) self.assertEqual( serialized_experiment['finished_session_count'], 3 diff --git a/backend/image/serializers.py b/backend/image/serializers.py new file mode 100644 index 000000000..29292823a --- /dev/null +++ b/backend/image/serializers.py @@ -0,0 +1,13 @@ +from os.path import join + +from django.conf import settings + +from .models import Image + + +def serialize_image(image: Image) -> dict: + return { + 'file': join(settings.MEDIA_URL, str(image.file)), + 'href': image.href, + 'alt': image.alt, + } diff --git a/frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.test.tsx b/frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.test.tsx index d2e947002..af71a40c0 100644 --- a/frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.test.tsx +++ b/frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.test.tsx @@ -11,7 +11,7 @@ const getExperiment = (overrides = {}) => { slug: 'some_slug', name: 'Some Experiment', description: 'Some description', - image: '', + image: {}, started_session_count: 2, finished_session_count: 1, ...overrides @@ -62,11 +62,7 @@ describe('ExperimentCollectionDashboard', () => { ); await waitFor(() => { expect(screen.getByRole('menu')).toBeTruthy(); - const counters = screen.getAllByRole('status'); - expect(counters).toHaveLength(4); - expect(counters[0].innerHTML).toBe(experiment1.started_session_count.toString()); - expect(counters[1].innerHTML).toBe(experiment1.finished_session_count.toString()); - }) + }); }); it('shows a placeholder if an experiment has no image', async () => { diff --git a/frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.tsx b/frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.tsx index d6929e5f2..f0de8065e 100644 --- a/frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.tsx +++ b/frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.tsx @@ -5,6 +5,7 @@ import { API_ROOT } from "@/config"; import ExperimentCollection from "@/types/ExperimentCollection"; import AppBar from "@/components/AppBar/AppBar"; import Header from "@/components/Header/Header"; +import IExperiment from "@/types/Experiment"; interface ExperimentCollectionDashboardProps { @@ -34,17 +35,14 @@ export const ExperimentCollectionDashboard: React.FC )} {/* Experiments */} -
+
    - {dashboard.map((exp) => ( + {dashboard.map((exp: IExperiment) => (
  • - +

    {exp.name}

    -
    - {exp.started_session_count} - {exp.finished_session_count} -
    +

    {exp.description}

    • ))} diff --git a/frontend/src/scss/color-schemes.scss b/frontend/src/scss/color-schemes.scss index fe7719d67..0929242af 100644 --- a/frontend/src/scss/color-schemes.scss +++ b/frontend/src/scss/color-schemes.scss @@ -79,3 +79,47 @@ color: #0cc7f1; } } + +.toontjehoger { + li { + &:first-of-type img { + background-color: $yellow; + } + &:nth-of-type(2) img { + background-color: $red; + } + &:nth-of-type(3) img { + background-color: $teal; + } + &:nth-of-type(4) img { + background-color: $pink; + } + &:nth-of-type(5) img { + background-color: $blue; + } + &:last-of-type img { + background-color: $indigo; + } + } + + label { + &:first-of-type { + @include btn-style($blue); + } + &:nth-of-type(2) { + @include btn-style($yellow); + } + &:nth-of-type(3) { + @include btn-style($teal); + } + &:nth-of-type(4) { + @include btn-style($pink); + } + &:nth-of-type(5) { + @include btn-style($red); + } + &:last-of-type { + @include btn-style($indigo); + } + } +} diff --git a/frontend/src/types/Experiment.ts b/frontend/src/types/Experiment.ts index f06413375..cb5413a20 100644 --- a/frontend/src/types/Experiment.ts +++ b/frontend/src/types/Experiment.ts @@ -1,9 +1,11 @@ +import IImage from "@/types/Image"; + export default interface Experiment { id: number; name: string; slug: string; description: string; - image: string; + image?: IImage; started_session_count: number; finished_session_count: number; } \ No newline at end of file diff --git a/frontend/src/types/Image.ts b/frontend/src/types/Image.ts new file mode 100644 index 000000000..2c8630bf5 --- /dev/null +++ b/frontend/src/types/Image.ts @@ -0,0 +1,5 @@ +export default interface Image { + file: string; + href: string; + alt: string; +} \ No newline at end of file