Display Video and Likert Scale side by side

[halukoguz]

Dear all,
I am currently programming a congruency-incongruency task in which the participant sees a video and then is supposed to rate the video on certain scales.
My advisor wanted me to let jsPsych display the video and the scale side by side on one page.

Is there a way to do this?

I would appreciate every kind of advice, thank you!

Best,
Haluk

[nikbpetrov]

Sure! The simplest way is to use html-slider-response and in your stimulus display the video (control any additional behaviour with the on_load function). For multiple sliders, you could consider one of the survey plugins. Don't forget to preload your videos, see #1993

[halukoguz]

Hey,

thank you for your help. I used the survey plugin (which has so many customization options, nice) but encountered another problem: The prompts for the likert-type f.ex. seem not to be HTML strings and I wanted to ask you if there is a way to edit them because I want to display them next to the video.

Thank you again! Your comment really helped me!

[nikbpetrov]

How about customizing them in the on_load function. Feel free to inspect the DOM in your browser and modify the trial's appearance as you need. You can even overwrite some of the default classes, should you wish, using the css_classses universal plugin parameter. Upon a quick inspection of this demo I can see that each Likert scale is a ul list and the li elements represent the invidial options - simply target them with JS in on_load and modify as much as your heart desires.

[halukoguz]

Thank you for your quick response,

I must admit, that programming (especially JS) is rather new to me and I am quite lost. Isn't there an easy way?

My code so far:
`

<title>Experiment pt.2</title> <script src="jspsych/dist/jspsych.js"></script> <script src="jspsych/dist/plugin-html-keyboard-response.js"></script> <script src="jspsych/dist/plugin-html-button-response.js"></script> <script src="jspsych/dist/plugin-video-keyboard-response.js"></script> <script src="jspsych/dist/plugin-initialize-microphone.js"></script> <script src="jspsych/dist/plugin-html-audio-response.js"></script> <script src="jspsych/dist/plugin-survey-likert.js"></script> <script src="jspsych/dist/plugin-survey-html-form.js"></script> <script src="jspsych/dist/plugin-survey.js"></script> <script src="jspsych/dist/plugin-preload.js"></script> <script src="jspsych/dist/plugin-survey-multi-choice.js"></script> <script src="jspsych/dist/plugin-instructions.js"></script> <script src="jspsych/dist/plugin-fullscreen.js"></script> <script src="jatos.js"></script> <style> .fixation {font-size: 90px; font-weight: bold; color: gray;}

</style>

<script>

/* initialize jsPsych */

var jsPsych = initJsPsych({
//on_finish: () => jatos.endStudy(jsPsych.data.get().json())
on_finish: function() {

//jatos gives a ResultID to each study run. This identifier will be saved in the logfiles and will become part of all the file names, including the audios
subjectID = jatos.studyResultId;
jsPsych.data.addProperties({
subject: subjectID,
});

				jatos.setStudySessionData(subjectID);
				var resultDataStr = jsPsych.data.get().csv();
        		jatos.submitResultData(resultDataStr, jatos.startNextComponent);
				var promise2 = jatos.uploadResultFile(resultDataStr, "Id_" + window.subjectID +"_video_rating"+".csv");

},
show_progress_bar: true,
auto_update_progress_bar: false,
message_progress_bar: ''
});

/* create timeline */
var timeline = [];
  


/* define welcome message trial */
var instr = {
  type: jsPsychInstructions,
  pages: [
      "In the following experiment you will see videos of different materials.",
      "Your task will be watching these videos and consequently rating these videos on different scales.",
      "The experiment will start after you click on 'next'"
  ],
  show_clickable_nav: true
};
timeline.push(instr);

var enter_fullscreen = {
type: jsPsychFullscreen,
fullscreen_mode: true
};
timeline.push(enter_fullscreen)

// du musst das so programmieren wie anne
// var vid = [
// {video: "vid/sample_video.mp4", block:"experiment", object:"test", cond:"cong"}
//
// ]
//

var n_trials = 4;

var video_rating = {
timeline:[
{
type: jsPsychSurvey,
pages:
[
[
{
type: 'html',
prompt: jsPsych.timelineVariable("video"),
name: jsPsych.timelineVariable("stim")
},
{
type: 'likert',
prompt: 'rough-smooth',
likert_scale_min_label: 'rough',
likert_scale_max_label: 'smooth',
name:"rough-smooth",
likert_scale_values: [
{value: -2},
{value: -1},
{value: 0},
{value: 1},
{value: 2}
]},
{
type: 'likert',
prompt: 'natural-synthetic',
likert_scale_min_label: 'natural',
likert_scale_max_label: 'synthetic',
name:"natural-synthetic",
likert_scale_values: [
{value: -2},
{value: -1},
{value: 0},
{value: 1},
{value: 2}
]
},
{
type: 'likert',
prompt: 'moist-dry',
likert_scale_min_label: 'moist',
likert_scale_max_label: 'dry',
name:"moist-dry",
likert_scale_values: [
{value: -2},
{value: -1},
{value: 0},
{value: 1},
{value: 2}
]
},
{
type: 'likert',
prompt: 'hot-cold',
likert_scale_min_label: 'hot',
likert_scale_max_label: 'cold',
name: "hot-cold",
likert_scale_values: [
{value: -2},
{value: -1},
{value: 0},
{value: 1},
{value: 2}
]
},
{
type: 'likert',
prompt: 'hard-soft',
likert_scale_min_label: 'hard',
likert_scale_max_label: 'soft',
name: "hard-soft",
likert_scale_values: [
{value: -2},
{value: -1},
{value: 0},
{value: 1},
{value: 2}
]
},
{
type: 'likert',
prompt: 'granular-whole',
likert_scale_min_label: 'granular',
likert_scale_max_label: 'whole',
name: "granular-whole",
likert_scale_values: [
{value: -2},
{value: -1},
{value: 0},
{value: 1},
{value: 2}
]
},
{
type: 'likert',
prompt: 'fluffy-flattened',
likert_scale_min_label: 'fluffy',
likert_scale_max_label: 'flattened',
name: "fluffy-flattened",
likert_scale_values: [
{value: -2},
{value: -1},
{value: 0},
{value: 1},
{value: 2}
]
},
{
type: 'likert',
prompt: 'flexible-inflexible',
likert_scale_min_label: 'flexible',
likert_scale_max_label: 'inflexible',
name: "flexible-inflexible",
likert_scale_values: [
{value: -2},
{value: -1},
{value: 0},
{value: 1},
{value: 2}
]
},
{
type: 'likert',
prompt: 'durable-flimsy',
likert_scale_min_label: 'durable',
likert_scale_max_label: 'flimsy',
name: "durable-flimsy",
likert_scale_values: [
{value: -2},
{value: -1},
{value: 0},
{value: 1},
{value: 2}
]
},
{
type: 'likert',
prompt: 'cheap-expensiveness',
likert_scale_min_label: 'cheap',
likert_scale_max_label: 'expensive',
name: "cheap-expensive",
likert_scale_values: [
{value: -2},
{value: -1},
{value: 0},
{value: 1},
{value: 2}
]
},
]],
data: {
'cond': jsPsych.timelineVariable('cond'),
'stim': jsPsych.timelineVariable('stim')
}
},

        {
                type: jsPsychHtmlKeyboardResponse,
                stimulus: '<div style="font-size:60px;">+</div>',
                choices: "NO_KEYS",
                trial_duration: 500,
             data: {
                task:"fixation",
             }
        }],

// MAN MUSS DEN STIMULUS IN EIN ARRAY ALSO ECKIGE KLAMMERN PACKEN

        timeline_variables: [
            {video: "<video controls width='800' height='800' autoplay><source src='vid/cong/fur_cong1.mp4'></video>", cond: "cong", stim:"fur"},
             {video: "<video controls width='800' height='800' autoplay><source src='vid/cong/paper_cong1.mp4'></video>", cond: "cong", stim:"paper"},
             {video: "<video controls width='800' height='800' autoplay><source src='vid/cong/sugar_cong1.mp4'></video>", cond: "cong", stim:"sugar"},
             {video: "<video controls width='800' height='800' autoplay><source src='vid/cong/water_cong1.mp4'></video>", cond: "cong", stim:"water"},
             {video: "<video controls width='800' height='800' autoplay><source src='vid/cong/screws_cong1.mp4'></video>", cond: "cong", stim:"screws"},
        ],
        randomize_order: true

};

timeline.push(video_rating)

var preload = {
type: jsPsychPreload,
video: video_pre
}

var video_pre = ["vid/cong/fur_cong1.mp4","vid/cong/sugar_cong1.mp4","vid/cong/water_cong1.mp4","vid/cong/screws_cong1.mp4","vid/cong/paper_cong1.mp4" ]

timeline.push(preload);

/* start the experiment */

jatos.onLoad(() => {
jsPsych.run(timeline);
});
</script>

`

[nikbpetrov]

This is a strange plugin, indeed, and I am not sure what your end goal is. Still, here's a quick demo for you to get you started. Feel free to adjust. This is just one way to approach the styling of the content but the central point here is to get comfortable using your browser's developer tools, as well as JavaScript/CSS selectors to modify the content as you wish.

Note that because of some weirdness the on_load behaviour needs to be done with a timeout - perhaps something weird with the survey plugin itself (note that this one is still under development)

<!DOCTYPE html>
<html>
<head>
	<script src="dist/jspsych.js"></script>
	<script src="dist/plugin-survey.js"></script>
	<script src="dist/plugin-html-keyboard-response.js"></script>
	<link rel="stylesheet" href="survey.css">
	<link rel="stylesheet" href="../dist/jspsych.css">
</head>
<style>
.fixation {
	font-size: 90px; 
	font-weight: bold; 
	color: gray;
}
</style>
<body>
</body>
<script>

var jsPsych = initJsPsych({
	on_finish: function() {
		jsPsych.data.displayData();
	}
});

let my_likert_scale_values = [{value: -2}, {value: -1}, {value: 0}, {value: 1}, {value: 2}]

let video_survey_trial = {
	type: jsPsychSurvey,
	pages: [[
		{type: 'html', prompt: jsPsych.timelineVariable("video"), name: jsPsych.timelineVariable("stim")},
		{type: 'likert', prompt: 'rough-smooth', likert_scale_min_label: 'rough', likert_scale_max_label: 'smooth', name:"rough-smooth", likert_scale_values: my_likert_scale_values},
		{type: 'likert', prompt: 'natural-synthetic', likert_scale_min_label: 'natural', likert_scale_max_label: 'synthetic', name:"natural-synthetic", likert_scale_values: my_likert_scale_values},
		{type: 'likert', prompt: 'moist-dry', likert_scale_min_label: 'moist', likert_scale_max_label: 'dry', name:"moist-dry", likert_scale_values: my_likert_scale_values},
		{type: 'likert', prompt: 'hot-cold', likert_scale_min_label: 'hot', likert_scale_max_label: 'cold', name: "hot-cold", likert_scale_values: my_likert_scale_values},
		{type: 'likert', prompt: 'hard-soft', likert_scale_min_label: 'hard', likert_scale_max_label: 'soft', name: "hard-soft", likert_scale_values: my_likert_scale_values}, 
		{type: 'likert', prompt: 'granular-whole', likert_scale_min_label: 'granular', likert_scale_max_label: 'whole', name: "granular-whole", likert_scale_values: my_likert_scale_values}, 
		{type: 'likert', prompt: 'fluffy-flattened', likert_scale_min_label: 'fluffy', likert_scale_max_label: 'flattened', name: "fluffy-flattened", likert_scale_values: my_likert_scale_values}, 
		{type: 'likert', prompt: 'flexible-inflexible', likert_scale_min_label: 'flexible', likert_scale_max_label: 'inflexible', name: "flexible-inflexible", likert_scale_values: my_likert_scale_values}, 
		{type: 'likert', prompt: 'durable-flimsy', likert_scale_min_label: 'durable', likert_scale_max_label: 'flimsy', name: "durable-flimsy", likert_scale_values: my_likert_scale_values}, 
		{type: 'likert', prompt: 'cheap-expensiveness', likert_scale_min_label: 'cheap', likert_scale_max_label: 'expensive', name: "cheap-expensive", likert_scale_values: my_likert_scale_values}
	]],
	data: {
		'cond': jsPsych.timelineVariable('cond'),
		'stim': jsPsych.timelineVariable('stim')
	},
	on_load: function() {
		setTimeout(function() {
			let page_sv_rows = document.getElementsByClassName('sv_row')
			page_sv_rows[0].style.width = "50%"
			page_sv_rows[0].style.float = "left"
			page_sv_rows[0].style.position = "absolute"
			for (let element_ind=1; element_ind<page_sv_rows.length; element_ind++) {
				page_sv_rows[element_ind].style.width = "50%"
				page_sv_rows[element_ind].style.float = "right"
			}

			document.getElementById('sv-nav-complete').parentElement.style.width = "50%"
			document.getElementById('sv-nav-complete').parentElement.style.float = "left"

			document.getElementsByClassName('sv_complete_btn')[0].style.left = "50%"
			document.getElementsByClassName('sv_complete_btn')[0].style.position = "absolute"
			document.getElementsByClassName('sv_complete_btn')[0].style.transform = "translate(-50%)"
		}, 1)
		
	}
}

let fixation_cross = {
	type: jsPsychHtmlKeyboardResponse,
	stimulus: '<div style="font-size:60px;">+</div>',
	choices: "NO_KEYS",
	trial_duration: 500,
	data: {task:"fixation"}
}


let timeline = []

let video_rating_timeline_object = {
	timeline: [video_survey_trial, fixation_cross],
	timeline_variables: [{video: "vid/cong/fur_cong1.mp4", cond: "cong", stim:"fur"},
						{video: "vid/cong/paper_cong1.mp4", cond: "cong", stim:"paper"},
						{video: "vid/cong/sugar_cong1.mp4", cond: "cong", stim:"sugar"},
						{video: "vid/cong/water_cong1.mp4", cond: "cong", stim:"water"},
						{video: "vid/cong/screws_cong1.mp4", cond: "cong", stim:"screws"}],
	randomize_order: true
}
timeline.push(video_rating_timeline_object)



jsPsych.run(timeline);

</script>
</html>

Also, pleas make sure you format your code - it really helps at the end of the day.