Enquiries of disordered images display during tasks on cognition.run

[TomCheung19]

Hi all,

I would like to ask about stuffs about the display of the images in experiments on cognition.run.

It occurred that the images displayed out of order when I run the experiments on cognition.run. I intended to show the image horizontally, from left to right. However, it turns out to arrange vertically, from top to bottom. Meanwhile, the images display normally during the instruction block. But when it comes to the trial block, they display out of order. It is also confusing that the images display in the correct order when I run the experiment on Visual Studio.

It is my first time to use Cognition.run as the platform of the online research. I don't know how to deal with this situation and I really need the images to display horizontally, for the participates have to click the buttons. I would like to ask if someone could help me to make the images show in order.

Thank you so much!

Here are the codes and the screenshots of the experiment.

The trial code which add the images:

`for (var i = 0; i < n_trials; i++){

					var initial_choice={
 					type: 'two-initial-choice',
 					block_id: 'benevolent',
 					choices: ['选左边','选右边'],
 					prompt: "<p class='center-content'><b>选一个牌堆</b><BR>",
 					stimuli: [card_back_images[0],card_back_images[1]],
					timing_post_trial: 0,
					agent_image: "img/tycoon_small.png",
					screen_color: function(){
							document.documentElement.style.background = "White";
								}

 								};

				        var trial_outcome={
					type: 'feedback-benev-1',
					block_id: 'benevolent',
					choices: ['否','是'],
                                            prompt: "<p class='center-content'><b>您认为这个结果受到土豪的影响了吗？</b><BR>",
							stimuli: [card_back_images[0],card_back_images[1], outcome_blank],
							timing_post_trial: 500,
                                           agent_image: "img/tycoon_small.png",
                               feedback_image: [cards_small[Math.floor(Math.random() * 24)], cards_big[Math.floor(Math.random() * 24)]],

								timeline: [
									{latent_intervention: latent_b_array1[i]}
								],

							};`

Here are the codes of instructions:

type: 'instructions', pages: [ "<p class='center-content'> 欢迎来到狂野扑克！</p>" + "<p class='center-content'> 在这个游戏中，请您想象自己是一个职业的扑克牌手，您需要周游世界进行21点游戏。</p>", "<p class='center-content'> 如果您不熟悉21点游戏的规则，我们现在会向您介绍。</p>" + "<p class='center-content'> 21点是一种扑克游戏，您需要翻开扑克牌堆顶端的牌，使您手中的牌的点数之和不超过21点且尽量大。</p>" + "<p class='center-content'> 点数计算方式是，2至10牌，按其原点数计算，即2至10点；J、Q、K牌都算作10点，牌堆里没有A。</p>" + "<p class='center-content'> (如果您觉得这一规则和您之前了解的规则不同，请不必在意，我们对规则进行了简化，请按照这一规则进行游戏。)</p>", "<p class='center-content'> 为了简化游戏流程，在游戏过程中，您将一直与对手玩家进行单挑，您需要比对手手牌中的点数大，才能获胜。</p>" + "<p class='center-content'> 同时，您的对手手中始终拥有14点的牌，而您始终以7点的手牌开始游戏。</p>" + "<p class='center-content'> 您要做的是使自己手中牌的点数大于14点，且不超过21点。即您需要抽取大于等于8的牌，从而获胜。</p>" + "<p class='center-content'><img src='img/card_back10.png'></img><img src='img/cards/KS.png'></img><img src ='img/cards/4D.png'></img>", "<p class='center-content'> 在游戏过程中，您会在三个不同的赌场进行三轮牌局。每个新的赌场会给您提供两个不同的牌堆。</p>" + "<p class='center-content'> 请注意，在牌局中，每个牌堆能让你获胜的概率并不相同(这毕竟是赌局游戏，没有公平一说)。</p>" + "<p class='center-content'><img src='img/card_back4.png'></img><img src='img/card_back10.png'></img>" + "<p class='center-content'> 如，在此轮牌局中红色牌堆中点数小于8的牌较多，蓝色牌堆中点数大于等于8的牌较多，所以蓝色牌堆有更大概率能让您获胜。</p>"+ "<p class='center-content'> <b>请注意，在每个新的场景中，您都需要重新学习哪个牌堆能让您赢得更多。</b></p>", "<p class='center-content'> 您需要点击牌堆下方的按钮来选择您要翻开的牌堆。"+ "<p class='center-content'><img src='img/choose_example.png'></img>", "<p class='center-content'> 在您选择完牌堆后，您将看到翻开的牌，从而知道您是否赢得牌局。</p>"+ "<p class='center-content'><img src='img/cards/QH.png'></img><img src='img/cards/3C.png'></img>", "<p class='center-content'> 您的目标是赢下尽可能多的牌局。</p>"+ "<p class='center-content'> 当您<b>赢</b>下牌局时，即牌<b>大于等于8时</b>，你会<b>获得</b>0.1元的奖励报酬。</p>"+ "<p class='center-content'> 当您<b>输</b>掉牌局时，即牌<b>小于8时</b>，你会<b>失去</b>0.1元的奖励报酬。</p>"+ "<p class='center-content'> 我们会将你每个牌局的奖励报酬相加，并在游戏最后显示。</p>"+ "<p class='center-content'> 如果您最后奖励报酬是负数，别担心，我们不会让您倒贴钱。</p>"+ "<p class='center-content'><img src='img/money.jpg'></img>",

[jodeleeuw]

I think this is just a difference in CSS styles somehow, and in the cognition.run version your images are wrapping on to the next line. In your non-cognition.run version are you using the jspsych.css file? This is included by default in cognition.run.

[TomCheung19]

Yes, I am using the jspsych.css in the visual studio version. And I have uploaded the jspsych.css in the cognition.run. The disordered display happened when the jspsych.css file was uploaded. However, when I remove the uploaded jspsych.css in the cognition,run, the whole task become completely a mess. So I am not sure if the disordered display is because of the CSS styles.
By the way, I would like to ask how could I realize the
<linkhref="jspsych-5.0.3/css/jspsych.css" rel="stylesheet" type="text/css"></link>
code in the cognition.run. Maybe it is because of the external CSS file is not correctly loaded.
Thank you so much!

[jodeleeuw]

One possible source of the difference is that cognition.run is using versions 6.1+ of jsPsych, but based on this comment it sounds like you are using version 5.0.3. Have you tried updating your task to version 6.3.0?

[TomCheung19]

Well, it is strange that when I try to use the 6.3.0 of jsPsych to run the tasks locally, it does not even work. But when I run the tasks on cognition.run using the 6.3.0 of jsPsych, at least it worked well besides the disordered images. How could that be? I would like to ask how could I updating my task to version 6.3.0.
Thank you so much!
The console says below:

[TomCheung19]

I think maybe I have found the cause of the disordered images. The card back images represents the options in the tasks and how the options should display is defined in the jspsych-xab.js file. The codes are shown below.
`function showSecondStimulus() {

  // randomize whether the target is on the left or the right
  var images = [trial.a_path, trial.b_path];
  var target_left = (Math.floor(Math.random() * 2) === 0); // 50% chance target is on left.
  if (!target_left) {
    images = [trial.b_path, trial.a_path];
  }

  // show the options
  if (!trial.is_html) {
    display_element.append($('<img>', {
      "src": images[0],
      "class": 'jspsych-xab-stimulus left'
    }));
    display_element.append($('<img>', {
      "src": images[1],
      "class": 'jspsych-xab-stimulus right'
    }));
  } else {
    display_element.append($('<div>', {
      "class": 'jspsych-xab-stimulus left',
      html: images[0]
    }));
    display_element.append($('<div>', {
      "class": 'jspsych-xab-stimulus right',
      html: images[1]
    }));
  }`

And the card images such as Ks are shown as the feedbacks and the display of them are defined as below:
// display feedback if (side == 'left' && final_feedback == 1){ //win and left var stimulus_shown = 'win' display_element.append($('<img>', { "src": trial.feedback_image[1], "id": 'jspsych-sim-stim', //class: 'feedback-design' class: 'inner left_fb' //class: 'jspsych-xab-stimulus left' })); } else if (side == 'right' && final_feedback == 1) { //win and right var stimulus_shown = 'win' display_element.append($('<img>', { "src": trial.feedback_image[1], "id": 'jspsych-sim-stim', //class: 'feedback-design' class: 'inner right_fb' //class: 'jspsych-xab-stimulus right' })); } else if (side == 'left' && final_feedback == 0) { //loss and left var stimulus_shown = 'loss' display_element.append($('<img>', { "src": trial.feedback_image[0], "id": 'jspsych-sim-stim', //class: 'feedback-design' class: 'inner left_fb' //class: 'jspsych-xab-stimulus left' })); } else if (side == 'right' && final_feedback == 0) { //loss and right var stimulus_shown = 'loss' display_element.append($('<img>', { "src": trial.feedback_image[0], "id": 'jspsych-sim-stim', //class: 'feedback-design' class: 'inner right_fb' //class: 'jspsych-xab-stimulus right' })); }

I am wondering how could I set the image display orders from the beginning just in the plugin js files in the codes above not in the experiments codes. Maybe it can solve the problem.
Thank you so much!