survey plugin: apply style specifically to one "scale"

DominiqueMakowski commented 1 week ago

The SurveyJS team demonstrated how to modify css to modify scale items (the color of the background for Likert scale items).

Adding the CSS to the preamble indeed works, but the problem is that it modifies all the scales of the experiment. Is there a way to apply styling specifically to one variable?

My intuition would have been to create a new CSS class with the above properties that "inherits" from (copies) .sd-rating__item with the modification, and then use this class via the css_classes option of the plugin. But it seems like copying an existing class in CSS doesn't really exist... any workarounds? Thanks again!

Tagging @becky-gilbert :)

becky-gilbert commented 1 week ago

Thanks for flagging this @DominiqueMakowski! Just so I have an example to work with, would I be able to reproduce the problem with the trial below, by trying to edit the scale item background color for one of the rating questions below and not the other?

const trial = {
  type: jsPsychSurvey,
  survey_json: {
    elements: [
      {
        type: 'rating',
        name: 'modified',
        title: 'These scale items should have a different background color.',
        displayMode: 'buttons',
        rateValues: [1,2,3,4,5]
      }, 
      {
        type: 'rating',
        name: 'unmodified',
        title: 'These scale items should have the default CSS.',
        displayMode: 'buttons',
        rateValues: [1,2,3,4,5]
      }
    ]
  }
};

DominiqueMakowski commented 1 week ago

Here's a reproducible html example with 2 screens, one ideally being colored and not the other:

<!DOCTYPE html>
<html>
    <head>
        <!-- Title shown in tab -->
        <title>Minimal Example</title>

        <!-- Load JsPsych -->
        <script src="https://unpkg.com/jspsych"></script>
        <link href="https://unpkg.com/jspsych/css/jspsych.css" rel="stylesheet" type="text/css" />

        <!-- Survey  -->
        <script src="https://unpkg.com/@jspsych/plugin-survey@1.0.1"></script>
        <link
            rel="stylesheet"
            href="https://unpkg.com/@jspsych/plugin-survey@1.0.1/css/survey.css"
        />
    </head>

    <style>
        .sd-rating__item:nth-child(-n + 3) {
            background-color: red;
        }
        .sd-rating__item:nth-last-child(-n + 3) {
            background-color: greenyellow;
        }
    </style>

    <body></body>

    <script>
        // Initialize experiment =================================================
        var timeline = []

        var jsPsych = initJsPsych({
            on_finish: function () {
                jsPsych.data.displayData("json") // Display data in browser
            },
        })

        // Timeline -------------------------------------------------------------------
        var colored_scale = {
            type: jsPsychSurvey,
            survey_json: {
                showQuestionNumbers: false,
                pages: [
                    {
                        elements: [
                            {
                                type: "rating",
                                title: "Question 1 (colored)",
                                isRequired: false,
                                rateMin: 0,
                                rateMax: 4,
                            },
                        ],
                    },
                ],
            },
        }
        timeline.push(colored_scale)

        var noncolored_scale = {
            type: jsPsychSurvey,
            survey_json: {
                showQuestionNumbers: false,
                pages: [
                    {
                        elements: [
                            {
                                type: "rating",
                                title: "Question 2 (non colored)",
                                isRequired: false,
                                rateMin: 0,
                                rateMax: 4,
                            },
                        ],
                    },
                ],
            },
        }
        timeline.push(noncolored_scale)

        //  Run the timeline =====================================================
        jsPsych.run(timeline)
    </script>
</html>

jspsych / jsPsych

survey plugin: apply style specifically to one "scale" #3334