survey plugin: apply style specifically to one "scale" #3334
Assignees
Comments
|
Thanks for flagging this @DominiqueMakowski! 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]
}
]
}
}; |
|
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/[email protected]"></script>
<link
rel="stylesheet"
href="https://unpkg.com/@jspsych/[email protected]/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> |
|
kind bump |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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__itemwith the modification, and then use this class via thecss_classesoption of the plugin. But it seems like copying an existing class in CSS doesn't really exist... any workarounds? Thanks again!Tagging @becky-gilbert :)
The text was updated successfully, but these errors were encountered: