<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML+Voice 1.0/EN" "xhtml+voice.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
  <title>Example 5: Colorpicker</title>
  <style type="text/css">
     #colorSample {border: thick solid; background: #EEC; font-size: 1.27em; padding: 0.1em}
  </style>
  <form xmlns="http://www.w3.org/2001/vxml" id="sayHello">
    <block>Hello. Voice is installed.</block>
  </form>
  <form xmlns="http://www.w3.org/2001/vxml" id="chooseColor">
   <field name="favColor">
  	 <grammar><![CDATA[
        #JSGF V1.0;
        grammar color;
        public <color> = Red | Pink | Purple | Blue | Green | 
		Maroon | Orange | Black | Gray | Seagreen | yellow | aquamarine| gold | silver | magenta | salmonpink | 
		deepskyblue | darkblue | darkgoldenrod| brown; ]]>
      </grammar> 
  	  <prompt>What is your favourite color?</prompt>

	  <nomatch>I didn't quite catch that. </nomatch>
	</field>
	<filled> <!-- Give aural and visual feedback -->
	  I've been told your favorite color is <value expr="favColor"/>.
	  <assign name="document.getElementById('textbox').value" expr="'Color: '+ favColor"/>
      <assign name="document.getElementById('colorSample').style.color" expr="favColor"/>
	</filled>
  </form>
</head>

<body ev:event="load" ev:handler="#sayHello">
  <h1>What is your favorite color?</h1>
  <p id="colorSample">Is this the one? You can choose between the all these pretty colors: Red | Pink | Purple | Blue | Green | 
		Maroon | Orange | Black | Gray | Seagreen | yellow | aquamarine| gold | silver | magenta | salmonpink</p>
  <p><button ev:event="click" ev:handler="#chooseColor">Change color now</button> 
  <input ev:event="focus" ev:handler="#chooseColor" id="textbox"/>
  </p>

</body>
</html>