/* Function: advance()
* For this function to work, you need to
* -- Include this script in the of your file.
* -- Define your body as:
* -- Specify the "hiddenUntilN" class for any elements you want hidden
* until time N, e.g., hiddenUntil2, hiddenUntil3, hiddenUntil4
* NOTE: The first elements to be unhidden will be those labeled
* hiddenUntil2.
* -- Specify the "graynUntilN" class for any elements you want to be
* grayed out (partially visible) until time N, at which point they
* are made fully visible..
* NOTE: The first elements to be made fully visible will be those
* labeled grayUntil2.
* -- Specify the "hiddenAfterN" class for any elements you want to
* be hidden after a certain count.
* -- Specify the "graynAfterN" class for any elements you want to
* be grayed out (made partially visible) after a certain count.
* -- You may also wish to have a testOutput division for testing,
* e.g., in the body of the page include
*
*
*/
var count = 1;
function advance()
{
/* Make appropriate elements invisible or grayed out. */
var className = "hiddenAfter" + count;
var elts = document.getElementsByClassName(className);
for ( var i = 0; i < elts.length; i++ )
{
elts[i].style.visibility = "hidden";
}
var className = "grayAfter" + count;
var elts = document.getElementsByClassName(className);
for ( var i = 0; i < elts.length; i++ )
{
elts[i].style.opacity = 0.3;
}
var className = "goneAfter" + count;
var elts = document.getElementsByClassName(className);
for ( var i = 0; i < elts.length; i++ )
{
elts[i].style.display = "none";
}
count++;
/* Show the count for testing purposes. */
if ( document.getElementById('testOutput') )
testOutput.innerHTML = "
" + count;
/* Make appropriate elements fully visible. */
var className = "hiddenUntil" + count;
var elts = document.getElementsByClassName(className);
for ( var i = 0; i < elts.length; i++ )
{
elts[i].style.visibility = "visible";
}
var className = "grayUntil" + count;
var elts = document.getElementsByClassName(className);
for ( var i = 0; i < elts.length; i++ )
{
elts[i].style.opacity = 1.0;
}
}
/* Function: foldUnfold(iconId, blockId)
* This function looks at whether the block specified by blockId is
* hidden or visible, and toggles both the button (down/up arrow) and
* the block (visible/hidden) appropriately.
*/
function foldUnfold(buttonId, blockId)
{
let button = document.getElementById(buttonId);
let block = document.getElementById(blockId);
if ( block.style.display == "none" )
{
/* Show */
button.value = "⇑";
button.innerHTML = "⇑";
block.style.display = "block";
}
else
{
/* Hide */
button.value = "⇓";
button.innerHTML = "⇓";
block.style.display = "none";
}
}