-
-
Notifications
You must be signed in to change notification settings - Fork 669
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.
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
survey plugin: apply style specifically to one "scale" #3334
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__item
with the modification, and then use this class via thecss_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 :)
The text was updated successfully, but these errors were encountered: