Toggling doesn't persist after saving


#1

I’ve been using the toggle_element() function defined in matrix.js pretty extensively in my questionnaire to hide or display some elements. The problem is that when I “save and stay” or go away from the page, while the choices I’ve entered persist, the sections that were toggled to visible are now invisible. The user has to re-click the options that trigger toggling to get them to show up again. This could be due to an issue in how I’m calling toggle_element(), or it could be part of how `toggle_element() is defined. I’m working on this, but I have no javascript experience, so I wanted to ask generally if anyone can see as solution to this that I don’t see. Here’s a link to my sandbox where you can see the behavior I’m talking about: http://matrix.ling.washington.edu/ekayen/matrix.cgi?subpage=adnom-poss

Here’s the definition of toggle_element() in matrix.js, follwed by an example of where I call it:

function toggle_element(id, how, switchOn) {
  how = how || "toggle"; // set default to "toggle"                      
  switchOn = switchOn || null; // set default to null                    
  switchActive = true; // Ignore switch unless switchOn activates        
  // Get element to toggle                                               
  element = document.getElementById(id);
  if (switchOn) {
    switchActive = false; // If switchOn, do nothing by default          
    // Check to see if the node is a standard node                       
    if (element != null && element.nodeType == 1) {
      // This switch currently only works with select tags               
      if (this.tagName.toLowerCase() == "select") {
        // If switchOn matches selected element, then do the toggling    
        if (switchOn.indexOf(this.options[this.selectedIndex].value) > -\
1) {
          switchActive = true;
        }
      }
    }
  }
  // If element found and switch active, do the toggling                 
  if (element != null && switchActive) {
    if (how == "toggle") {
      element.style.display = (element.style.display != 'block') ? 'bloc\
k' : 'none';
    }
    else if (how == "on") {
      element.style.display = 'block';
    }
    else if (how == "off") {
      element.style.display = 'none';
    }
  }
}

An example of where I call toggle_element():

Radio type "Possessive Pronoun Type" "<p>Are these possessor pronouns affixes? Or are they separate words or clitics? </p>" ""
  . affix "affix" "" "affixes<br>" "toggle_element.call(this, 'pron-non-affix{i}', 'off');toggle_element.call(this, 'pron-affix{i}', 'on');"
  . non-affix "non-affix" "" "separate words or clitics<br>" "toggle_element.call(this, 'pron-non-affix{i}', 'on');toggle_element.call(this, 'pron-affix{i}', 'off');"

  Label "<div id='pron-affix{i}' style='display:none'>"

    Radio agr "Pronominal agreement" "<p>Do these affixes agree with the possessum in person, number, or gender?</p>" ""
    . agree "agree" "" "yes<br>"
    . non-agree "non-agree" "" "no<br>"

  Label "</div>"

#2

There’s no way to do this directly, AFAIK. The Javascript code is just toggling visibility, not interacting with the choices. I ran into this myself, and just decided in the short term to make sure my customization code doesn’t do anything with choices values that don’t matter given other current choices. It might be possible to have the JS force a value when it switches to a hidden state, but I don’t remember seeing an easy way to do that, either.

(This issue is what led to my comments on the other thread about the interaction model.)