Gösta H. Lovgren
December 11th, 2007, 10:52 PM
The single most pressing need for AAC at this point is a dynamic Choice page to demo what AAC is all about. This looks like it might work for what is needed.
Shawn posted this sample code on the PB Forum:
<!--
By Shawn Andersen.
-->
<html>
<head>
<script type="text/javascript">
// this is my database if you will
var B="<select id='fruit'>";
B+="<option value='apples'>apples</option>";
B+="<option value='oranges'>oranges</option>";
B+="<option value='peaches'>peaches</option>";
B+="</select>";
var C="<select id='colors'>";
C+="<option value='red'>red</option>";
C+="<option value='blue'>blue</option>";
C+"<option value='orange'>orange</option>";
C+="</select>";
var D="<select id='shapes'>";
D+="<option value='square'>square</option>";
D+="<option value='circle'>circle</option>";
D+"<option value='triangle'>triangle</option>";
D+="</select>";
var E="<select id='towns'>";
E+="<option value='New York'>New York</option>";
E+="<option value='Chicago'>Chicago</option>";
E+="<option value='Los Angeles'>Los Angeles</option>";
E+="</select>";
// function that decides what the next select will be
function nextSelect(){
var a=document.getElementById('selectA').value;
var v="";
// switch is javascripts "select case"
switch (a){
case "fruit":
v=B;
break;
case "colors":
v=C;
break;
case "shapes":
v=D;
break;
case "towns":
v=E;
break;
}
document.getElementById('nSelect').innerHTML=v;
}
</script>
</head>
<body>
Select A:<br>
<select onChange="nextSelect()" id="selectA">
<option value="fruit">fruit
<option value="colors">colors
<option value="shapes">shapes
<option value="towns">towns
</select>
<p>
Next select depending on the value of select A:<br>
<div id="nSelect"></div>
</body>
</html>
but it only shows: Select A:
fruitcolorsshapestowns
Next select depending on the value of select A:
No other choices (B, C, D)
Shawn posted this sample code on the PB Forum:
<!--
By Shawn Andersen.
-->
<html>
<head>
<script type="text/javascript">
// this is my database if you will
var B="<select id='fruit'>";
B+="<option value='apples'>apples</option>";
B+="<option value='oranges'>oranges</option>";
B+="<option value='peaches'>peaches</option>";
B+="</select>";
var C="<select id='colors'>";
C+="<option value='red'>red</option>";
C+="<option value='blue'>blue</option>";
C+"<option value='orange'>orange</option>";
C+="</select>";
var D="<select id='shapes'>";
D+="<option value='square'>square</option>";
D+="<option value='circle'>circle</option>";
D+"<option value='triangle'>triangle</option>";
D+="</select>";
var E="<select id='towns'>";
E+="<option value='New York'>New York</option>";
E+="<option value='Chicago'>Chicago</option>";
E+="<option value='Los Angeles'>Los Angeles</option>";
E+="</select>";
// function that decides what the next select will be
function nextSelect(){
var a=document.getElementById('selectA').value;
var v="";
// switch is javascripts "select case"
switch (a){
case "fruit":
v=B;
break;
case "colors":
v=C;
break;
case "shapes":
v=D;
break;
case "towns":
v=E;
break;
}
document.getElementById('nSelect').innerHTML=v;
}
</script>
</head>
<body>
Select A:<br>
<select onChange="nextSelect()" id="selectA">
<option value="fruit">fruit
<option value="colors">colors
<option value="shapes">shapes
<option value="towns">towns
</select>
<p>
Next select depending on the value of select A:<br>
<div id="nSelect"></div>
</body>
</html>
but it only shows: Select A:
fruitcolorsshapestowns
Next select depending on the value of select A:
No other choices (B, C, D)