Display/hide text based on assigned condition

[adaniabutto]

Hi all,

I'm setting up an experiment where participants are randomly assigned to 1 of 4 conditions. I'm using jsPsych 6.3.0 as I'm building on someone else's code who used that version and I'm not experienced enough to rewrite all of it.

In my experiment instructions, participants are all shown the same text, but I want participants in two specific conditions to see additional text within the default paragraph.

I've tried the following, but it did not work:

Step 1:
In my main .HTML file, I inserted divs with the text I want to display/hide (index.html) like so:

<script src="scripts/user-plugins/coverstory.js"></script> <!-- refers to js code outlined in step 2 below-->

<!--There's lots of other HTML code before/after this, see repo for full code -->

<div class = "slide instructions-advisor">
<!-- The two lines of text below should ALWAYS display, regardless of condition -->
<h2>Important!</h2>
<p>Let's add another player to the game. This is your <strong>advisor, Alice.</strong></p>
<p>Alice cannot see the card that is face-up to you. <strong>She can only see the hidden card.</strong></p>
<img src = "images/advisor_silhouette.png" class = "silhouette" />
                
<!-- THESE NEXT TWO TEXT LINES ARE TO BE HIDDEN/DISPLAYED BASED ON CONDITION -->
<p class = "nocoverstory">Based on what's on the hidden card, she will suggest whether you should stay with your own card, or switch and take the hidden card.</p>

<p class = "coverstory">However, she will be given some <strong>extra information about your card</strong>. Based on this, Alice will suggest whether you should stay with your own card, or switch and take the hidden card.</p>

<button class = "continue-active">Continue</button> <!-- Continue button to get to the next page -->
</div>

Step 2:
Wrote the following js code that is meant to hide/show the relevant text if participant condition fits (the 4 conditions are defined elsewhere, in config.js):

jsPsych.plugins['coverstory'] = (function(){
    
    var plugin = {};
  
    plugin.trial = function(display_element, trial){
        var nocoverstory = display_element.find('.nocoverstory'); // this refers to the two text lines outlined above
        var coverstory = display_element.find('.coverstory'); // this refers to the two text lines outlined above
        var expcondition = exp.advisor_type == 'perfectcover' || 'normalcover' ? 1: 0; // This refers to 2 of the 4 conditions. 1 is with coverstory, 0 is without. For 1, I want the "coverstory" <p> lines to display, and for 0 the "nocoverstory" ones.

        coverstory.hide(); // hide both by default
        nocoverstory.hide(); // hide both by default

        display_element.html(coverstory) = function() { 
            if (expcondition = 1) {
                coverstory.show();
            }
        }  // display just one based on condition

        display_element.html(nocoverstory) = function() { 
            if (expcondition = 0) {
                nocoverstory.show();
            }
        }  // display just one based on condition
    
    }
  
    return plugin;
  
  })();

With this code, the text lines that I want to show/hide based on condition still always display, so my approach is not working. Can anybody tell me what I'm missing? Thanks so much!

In case more context is needed: I can't paste the whole experiment because there are a lot of files involved, but the repo is public and can be found here.

[ChristopheBossens]

I think you can actually do it much simpler. If you insert the following script after the body tag you can toggle visibility based on the advisor type (code below is just proof of concept so you still need to adapt it to toggle the correct elements. I also used an id tag on the element in stead of getting it by its class name. Let me know if this works!

<script>
        window.onload = function(){
            if(exp.advisor_type === 'normal'){
                document.getElementById("coverstory").style.display = "none";
            }
        }
  </script>

[adaniabutto]

You're my savior! Thanks so much! I adapted your code as follows, and now everything works as intended:

<div class = "coverstory">

   <p>Alice cannot see the card that is face-up to you. <strong>She can only see the hidden card.</strong></p>
   <p class = "nocoverstory"><span id ="coverstorynone">Based on what's on the hidden card, she will suggest whether you should stay with your own card, or switch and take the hidden card.</span></p>
   <p class = "coverstory"><span id ="coverstorywith">However, she will be given some <strong>extra information about your card</strong>. Based on this, Alice will suggest whether you should stay with your own card, or switch and take the hidden card.</span></p>

   <script>
      if(exp.advisor_type === 'normal' || exp.advisor_type === 'perfect'){
                            document.getElementById("coverstorywith").style.display = "none";
                        }
      else if(exp.advisor_type === 'normalcover' || exp.advisor_type === 'perfectcover'){
                            document.getElementById("coverstorynone").style.display = "none";
                        }
   </script> <!-- Script to display/hide advisor text based on condition -->

</div>

Although not really relevant anymore, I also noticed that the js script in the OP did not use the "or" operator properly. Instead of:
var expcondition = exp.advisor_type == 'perfectcover' || 'normalcover' ? 1: 0;

it should be

var expcondition = exp.advisor_type == 'perfectcover' || exp.advisor_type == 'normalcover' ? 1: 0;, of course.

However, even with this change, the OP solution doesn't work, maybe because I messed up some variable reference elsewhere or because it uses deprecated functions of some sort? If any future reader of this thread spots the mistake, let us know, it might still be helpful to other people running into the same problem :)