Toggling visibility based on radio button



I’m trying to toggle the visibility of certain bits of my questionnaire based on the answer to a radio-button question. I’m trying to model it on the sentential negation page, where the answer to the first question reveals different bits of text. I’ve followed what is done in the sentential negation library pretty closely to start, but selecting the relevant radio buttons doesn’t seem to do anything. Does anyone happen to know what I’m missing? I’ve included both the code I’m modelling off of and my own code here.

From the sentential negation library:

In matrixdef:

Radio-button question:

Radio neg-exp "neg exp" "" ""
. 0 "0" "" "zero" "set_negexp('0')"
. 1 "1" "" "simple" "set_negexp('1')"
. 2 "2" "" "bipartite" "set_negexp('2')"
. 3 "3" "" "tripartite" "set_negexp('3')"
. more "n" "" "more?!" "set_negexp('more')"

Example of a section that toggles off and on:

Label "<div id='zero-neg' class='neg_exp_switch' style='display:none'><p>Negation without an overt marker. In some south Dravidian languages [...] .</p>"
Label "</div>"

In matrix.js: (marking this as code made the formatting go bananas, so I’m leaving it plain)

function set_negexp(n)
var value = n;
var divs = document.getElementsByClassName(“neg_exp_switch”);
for(var i=0; i<divs.length;i++){
var d = divs[i]; = ‘none’;
var d;
switch (n){
case ‘0’:
var d = document.getElementById(‘zero-neg’);
case ‘1’:
var d = document.getElementById(‘uni-neg’);
case ‘2’:
var d = document.getElementById(‘bi-neg’);
case ‘3’:
var d = document.getElementById(‘tri-neg’);
case ‘more’:
var d = document.getElementById(‘x-neg’);
var d = null;
if (d != null)
{ =‘block’;

In my library (adnominal possession):

In matrixdef:

Radio button question:

Radio mark-loc "Location of marking" "<p> On which of the following do possessive-marking morphemes appear? </p>" ""
. possessor-marking "possessor-marking" "" "possessor" "set_locmark('0')"
. possessum-marking "possessum-marking" "" "possessum" "set_locmark('1')"
. both-marking "both-marking" "" "both" "set_locmark('2')"
. neither-marking "neither-marking" "" "neither" "set_locmark('3')"

Example of a section that (should) toggle off and on:

Label "<div id='possessum-marking' class='loc_mark_switch' style='display:none'><p>Possessor-marking se\ ction</p>"
Label "</div>"


In matrix.js:

function set_locmark(n)
var value = n;
var divs = document.getElementsByClassName(“loc_mark_switch”);
for(var i=0; i<divs.length;i++){
var d = divs[i]; = ‘none’;
var d;
switch (n){
case ‘0’:
var d = document.getElementById(‘possessor-marking’);
case ‘1’:
var d = document.getElementById(‘possessum-marking’);
case ‘2’:
var d = document.getElementById(‘both-marking’);
case ‘3’:
var d = document.getElementById(‘neither-marking’);
var d = null;
if (d != null)
{ =‘block’;


I don’t really know, but could the new paragraph be throwing the radio button code off somehow? What happens if you get rid of the paragraph here:


Is this all on the same subpage? Currently (unless something has changed very recently) the toggle only works for a question on an “earlier” (imprecision: it might be just set earlier, not sequence-earlier; I can’t look at it right now) subpage — it doesn’t work on the same subpage. I tried to do it and deferred it to post-completion. :slight_smile:




Thanks for clarifying, Chris! I’m not sure what you mean by an “earlier” subpage, since the radio-button question and the sections it affects all appear on what looks to me like the same page. But I’ll definitely take your word for it that this is a pain in the neck and try a work-around :slight_smile:


Oh, sorry … got myself a little confused. You’re not using the new-ish conditional stuff, just regular JavaScript display toggling, right? In that case, ignore what I said; something else is going on.

Where did you add your function; is it in the same chunk of JS as the set_negexp() definition? Are you sure it’s being called on the radio button change?


I just stuck it naively at the end of matrix.js – sounds like I need to move it to where set_negexp() is? Let me try that!


I am working on the same thing currently, for the Other Feature page.

Currently, I seem to be able to call the same sentential negation function from a different place, e.g.:

Radio has-form “form” “” “”
. addform “yes” “” “Add FORM feature” “set_negexp(‘2’)”

Label “<div id=‘bi-neg’ class=‘neg_exp_switch’ style=‘display:none’>
<p> Custom content, different from what is on the negation page.</p></div>”

And this is then successfully displayed on the page and the lower portion is toggled on click:

I defined a similar function in matrix.js, called it set_form_feature(), left pretty much everything else as is, even left a parameter n so that it for now looks exactly like the set_negexp(n) function. However if I change the call in matrixdef from set_negexp(‘2’) to set_form_feature(‘2’), then the toggle-on-click portion is no longer displayed…

The functions are exactly the same. So it must be that there is some intermediate layer in which the new function, set_form_feature(), is not included, and so in the end it does not get called. I cannot figure out where this is though.

I found one other mention of set_negexp(), in display_neg_form() function in matrix.js, and that is indeed mentioned in one place in, but adding set_form_feature() there did not have any effect:

HTML_prebody_sn = ‘’’<body onload=“animate(); focus_all_fields(); multi_init(); fill_hidden_errors();display_neg_form();scalenav();”>’’’


Perhaps this has to do with the fact that HTML_prebody_sn is sentential-negation specific:

        if section == 'sentential-negation':
            print HTML_prebody_sn
            print HTML_prebody

However, adding the name of my new function to HTML_prebody did not help. Well, not surprising, because I think what HTML_prebody does is actually just call all those functions, so it does not necessarily have anything to do with how to call them from matrixdef. Confused.


I still haven’t fixed this problem in my library – I’ve just found a way around it recently. I looked in the adjectives library (actually the adjectives section of the lexicon page) and it uses the javascript function to toggle visibility without requiring anything to be added to matrix.js:

Radio predcop "Adjective {i} predicative structure" "<p>Adjectives of this type behaving predicatively appear as the complement of a copula:<br>" "</p>"
. obl "Obligatorily" "" " obligatorily<br>"
. opt "Optionally" "" " optionally<br>" ", 'adj{i}_opt_note', 'on')"
. imp "Impossibly" "" " impossibly<br>"

Label "<p id='adj{i}_opt_note' style='display:none;'> NOTE: Specifying adjectives as optionally appearing as a copula complement will create a<br> new position class on the Morphology page with a \"co\ pula complement\" lexical rule and <br>\"stative predicate\" lexical rule to facilitate this functionality.<br></p>"


So, in my case, the issue was that the file matrix.js, which I was modifying, was actually cached by the browser. Once I opened it in another browser, my new function was finally called :). Before, it simply did not see the new function in matrix.js because it was using a cached version.

One way to deal with the caching is to add “?somevariablename=somenumber” to the place in where matrix.js is used:

HTML_posttitle = ‘’’<script type=“text/javascript” src=“web/matrix.js?cachebuster=100”>

And then change that number every time you change matrix.js.


Should we mark it as the solution? Would you say it actually is the solution (rather than the workaround)? But as for modifying matrix.js, try what I suggest above.


I think it’s a solution for the things I was trying to do – I wasn’t sure I could toggle multiple things on one radio button, but adding semicolons between javascript functions worked. Since it can do all that, this is a solution for my purposes. For editing matrix.js, I’ll follow your solution!


I’m using Elizabeth’s solution from the adjectives library to toggle additional choices. I find that after I select one choice and then select a different (conflicting) choice, the choices file will contain the first choice I made, not the second one. Has anyone run into this and know a work around? Maybe toggle_element doesn’t work well for this?


You sure you clicked “save”? I think "save_choices() is sometimes called implicitly, but if it is not, you should explicitly save, I think.


“Save & Stay” right? Yeah- I tried that.


In fact, even if I “Clear Form” and then “Save & Stay” the choices still show up in the choices file…


I’ve seen some oddities with stuff remaining in the form despite clearing, yes… I think it has to do with the fact that clear and save are being called implicitly in some places, and we don’t necessarily know where… E.g. it might save without you knowing but on the other hand when you click clear perhaps it won’t actually clear stuff that is related to some more complex things on the webpage (such as choices conditioned on other pages or on click).

In other words, my hunch is that using these more complex features requires also calling save/clear appropriately, but I am not sure how exactly. The relevant code would be in deffile somewhere.


I took a break from looking at this while I was out of town for Christmas and now I can’t replicate the problem. For now, If I choose a new radio that toggles a set of choices, make the choice selection and click “save & stay” before “choices file” the choices update properly. I know I didn’t do anything to fix this, so I’m not sure what’s going on, but it is resolved for now.


Actually, I can reproduce the bug when I added an iterator for the lexical entry, so it might have something to do with that.

Really the result of this bug is that extra stuff ends up in the choices file that shouldn’t, but in my case it probably wouldn’t break anything in customization, it would just result in a needlessly cluttered choices file. For example:


freemorph1_orth and freemorph1_pred are added if subordinator=free. When I select subordinator=pair I add the subordinators that correspond to the subordinator pair strategy (morphpair1_subordorth, morphpair1_subordpred, morphpair1_matrixorth, morphpair1_matrixpred).

I don’t think it’s desirable to have freemorph1_orth and freemorph1_pred in the choices file even if they will never be called because subordinator != free here. But maybe this should be cleaned up in not matrixdef. What do others think?


I think this should be handled in It is confusing to e.g. still have the FORM feature available in dropdowns even though “add finite-nonfinie form” was unchecked (that is what I often see, and it can indeed break things I think if the used does put a FORM constraint on something but does not check the box).

It seems like this is some combination of using dropdowns with conditioned choices in them and whatever functions in deffile are responsible for cleaning things up… I think we will figure this out eventually!

P.S.: This should be in its own thread, really…