Creating experiment stimulus - unoccluding the content of the stimulus

[NilosmitaBanerjee1]

Hi,

I am a beginner in jsPsych and am trying to build an experimental task in which there will 3 boxes within which there will be a bar with varying values. The boxes should be occluded and when the participant hovers their mouse over the boxes with their mouse, the boxes should get un-occluded and the participant should be able to see the contents of the box (i.e., the bar) - I can see that the serial-reaction-time-mouse allows us to make a grid of boxes i.e., squares and we can use the mouse to click on each of the boxes but, I don't know how to get the boxes to do the occluding and un-occluding and how to make the bars visible upon un-occlusion.

Thank you for the help in advance!

Example of the code I have tried so far:

<script src = "/Users/akira/Desktop/jspsych/jspsych/jspsych.js"></script> <script src = "/Users/akira/Desktop/jspsych/jspsych/plugins/jspsych-html-keyboard-response.js"></script> <script src = "/Users/akira/Desktop/jsPsych/jspsych/plugins/jspsych-image-button-response.js"></script> <script src = "/Users/akira/Desktop/jsPsych/jspsych/plugins/jspsych-serial-reaction-time-mouse.js"></script> <script> var welcome_trial = { type: 'html-keyboard-response', stimulus: 'Welcome to my experiment' }

    var instructions_trial0 = {
        type: 'html-keyboard-response',
        stimulus: 'TASK INSTRUCTIONS'
    }
  
    var grid = [
    [1,1,1]
]
    var trial_1 = {
    type: 'serial-reaction-time-mouse',
    grid: grid,
    target: [0,0],
    target_color: '#006738',
    prompt: 'Loss',
    pre_target_duration: 2,
    fade_duration: 23
      }
    var trial_2 = {
    type: 'serial-reaction-time-mouse',
    grid: grid,
    target: [0,1],
    target_color: '#F78F1E',
    prompt: 'Probabilty',
    pre_target_duration: 2,
    fade_duration: 23
     }
    var trial_3 = {
    type: 'serial-reaction-time-mouse',
    grid: grid,
    target: [0,2],
    target_color: '#13B24B',
    prompt: 'Win',
    pre_target_duration: 2,
    fade_duration: 23
    }
    
    jsPsych.init({
       timeline: [welcome_trial, trial_1, trial_2, trial_3],
       on_finish: function(){
           jsPsych.data.displayData();
        }
    })
    

</script>