<?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>Design a Monster!</title>
<form xmlns="http://www.w3.org/2001/vxml" id="speakNow">
   <block>
      Welcome to the design a monster workshop!
   </block>
	<field name="chooseGender">
		<grammar>
		<![CDATA[
			#JSGF V1.0;
			grammar chooseGender;
			<chooseGender> = Boy | Girl ;
		]]>
		</grammar>
		<prompt>
		Would you like to design a girl or a boy monster?
		</prompt>
		<catch event="help nomatch noinput">
		Please choose either boy or girl monster.
		</catch>
	</field>
	<field name="chooseFace">
		<grammar>
		<![CDATA[
			#JSGF V1.0;
			grammar face;
			<face> = Happy | Sad ;
		]]>
		</grammar>
		<prompt>
		Please tell me if your monster is happy or sad?
		</prompt>
		<catch event="help nomatch noinput">
		Please say either happy or sad.
		</catch>
	</field>
	<field name="monsterColor">
		<grammar>
		<![CDATA[
			#JSGF V1.0;
			grammar color;
			public <color> = Red | Pink | Purple | Blue | Green | Orange | Yellow; 
		]]>
		</grammar>
		<prompt>What color is your monster's fur?</prompt>
		<catch event="help nomatch noinput">
		Please choose any of the following colors: red, pink, purple, blue, green, orange or yellow.
		</catch>
	</field>
   <record name="chooseName">
   	<prompt>
   	What is the name of your monster?
   	</prompt>
		<catch event="help nomatch noinput">
		Please tell me the name of your monster.
		</catch>
   </record>
   <record name="monsterSound">
   	<prompt>
   	What sound does the monster make?
   	</prompt>
		<catch event="help nomatch noinput">
		Please made the sound of your monster.
		</catch>
   </record>
   <filled>
		<if cond="chooseGender == 'Girl'">
			<assign name="document.getElementById('girl').src" expr="'monster/girl.png'" />
		</if>
		<if cond="chooseFace == 'Happy'">
			<assign name="document.getElementById('face').src" expr="'monster/happy.png'" />
		<elseif cond="chooseFace == 'Sad'" />
			<assign name="document.getElementById('face').src" expr="'monster/sad.png'" />
		</if>
		<assign name="document.getElementById('instruction').style.display" expr="'none'" />
		<assign name="document.getElementById('monsterFactory').style.display" expr="'block'" />
		<assign name="document.getElementById('monsterFactory').style.backgroundColor" expr="monsterColor" />
      
		Congratulations! <audio expr="monsterSound" /> 
		I would like to introduce you to a <value expr="chooseFace" /> monster named <audio expr="chooseName" />
 		<audio expr="monsterSound" /> 
   </filled>
</form>
<style type="text/css">
body {background:#cdf;color:000;text-align:center;}
div#monsterFactory {width:242px;height:326px;margin:1em auto;border:5px double #000;background:#fff;}
div#monsterFactory img {display:block;}
div#monsterFactory {display:none;}
div#instruction {display:block;text-align:left;font-size:2em;}
</style>
</head>
<body ev:event="load" ev:handler="#speakNow">

<h1>Design a Monster!</h1>

<div id="instruction">
<ul>
	<li>Would you like to design a <strong>GIRL</strong> or a <strong>BOY</strong> monster?</li>
	<li>Please tell me if your monster is <strong>HAPPY</strong> or <strong>SAD</strong>?</li>
	<li>What <strong>COLOR</strong> is your monster's fur?</li>
	<li>What is the <strong>NAME</strong> of your monster?</li>
	<li>What <strong>SOUND</strong> does your monster make?</li>
</ul>
</div>

<div id="monsterFactory">
<img src="monster/monster.png" alt="Monster" />
<img src="" alt="" id="girl" style="margin-top:-326px;z-index:2;position:absolute;" />
<img src="" alt="" id="face" style="margin-top:-326px;z-index:3;position:absolute;" />
</div>


</body>
</html>