<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML+Voice 1.1/EN" "xhtml+voice.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vxml="http://www.w3.org/2001/vxml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xv="http://www.voicexml.org/2002/xhtml+voice">
<head>
<title>Color Picker</title>

<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">
	<prompt>What is your favorite color?</prompt>

	<grammar>
	<![CDATA[
		#JSGF V1.0;
		grammar color;
		public <color> = Red | Pink | Purple | Blue | Green | Orange | Yellow; 
	]]>
	</grammar> 
	
	<nomatch>I didn't quite catch that. </nomatch>
	</field>
	<filled>
	I've been told your favorite color is <value expr="favColor"/>.
	<assign name="document.getElementById('textbox').value" expr="'color: '+ favColor"/>
	<assign name="document.body.style.background" expr="favColor"/>
	</filled>
</form>

<style type="text/css">
	#colorSample {border: thick solid; background: #EEC; font-size: 1.27em; padding: 0.1em}
</style>
</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 | Orange | Yellow. </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>