How to insert an image in a trial

[valentinavellani]

Hi,
I would like to display an image in my trial as following:

 var sun = gorilla.stimuliURL('sun.PNG');
 var rain = gorilla.stimuliURL('rain.PNG');

var give_info = {
      type: 'html-keyboard-response',
      stimulus:  function() {
                  accuracy=Math.floor(Math.random() * (80 -20 + 1) ) + 20;   
                  val_change_n=Math.floor(Math.random() * (1 - 0 + 1) ) + 0;
                    if (val_change_n==0){ 
                        portfolio_value=portfolio_value+change,
                        val_change="RAINY";
                    } else if (val_change_n==1){ 
                        portfolio_value=portfolio_value-change,
                        val_change="SUNNY";} 
                    return '<span style="font-size:36px; ">There is </span>'+ '<span style="font-size:36px; ">'+accuracy+'</span>'+'<span style="font-size:36px; ">% change that tomorrow it will be </span>'+ '<span style="font-size:36px; ">'+val_change+'</span>'
            },
      choices: jsPsych.NO_KEYS,
      trial_duration: 5000,
      prompt:  function() {
          if (val_change_n==0){ 
              
                       return rain
                    } else if (val_change_n==1){ 
                       return sun}
          }}
 timeline.push(give_info);

However instead of showing the image I see " /task/210019/5/asset/rain.PNG"
Thank you very much in advance for your help.
Best
Valentina

[becky-gilbert]

Hi Valentina! The prompt parameter needs to be an HTML string, whereas you're giving it the file path without any other HTML. To get the image to appear, you'll need to put the image file path inside of an img tag.

prompt​:  ​function​(​)​ ​{​
  if​ ​(​val_change_n​==​0​)​{​ 
    return​ ​'<img src="'+rain​+'">';
  }​ ​else​ ​if​ ​(​val_change_n​==​1​)​{​ 
   ​return​ ​'<img src="''sun+'">';
  }​
}  

[valentinavellani]

thank you very much Becky!!