<?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">

<!--
****************** Copyright Notice *************************


(C) COPYRIGHT International Business Machines Corp. 2003

This program may be used, executed, copied, modified and
distributed without royalty for the purpose of developing,
using, marketing, or distributing.
*************************************************************
-->

	<head>
		<title>Multimodal Pizza Order Form</title>

		<script type="text/javascript">
				function displayPizzaOrder()
				{
					var order = "Your pizza order is: " + document.getElementById('pizzaQuantity').value;
					var totToppings = countToppings();
					var numToppings = totToppings;

					if (document.getElementById('sizeSmall').checked)
						order += " small";
					else if (document.getElementById('sizeMedium').checked)
						order += " medium";
					else if (document.getElementById('sizeLarge').checked)
						order += " large";

					if (document.getElementById('pizzaQuantity').value > 1)
						order += " pizzas";
					else
						order += " pizza";

					if (numToppings > 0) {
						order += " with";
						if (document.getElementById('toppingsExtraCheese').checked) {
								order += " extra cheese";
								numToppings--;
								order += appendComma( totToppings, numToppings );
						}
						if (document.getElementById('vegetableOlives').checked) {
								order += " olives";
								numToppings--;
								order += appendComma( totToppings, numToppings );
						}
						if (document.getElementById('vegetableMushrooms').checked) {
								order += " mushrooms";
								numToppings--;
								order += appendComma( totToppings, numToppings );
						}
						if (document.getElementById('vegetableOnions').checked) {
								order += " onions";
								numToppings--;
								order += appendComma( totToppings, numToppings );
						}
						if (document.getElementById('vegetablePeppers').checked) {
								order += " peppers";
								numToppings--;
								order += appendComma( totToppings, numToppings );
						}
						if (document.getElementById('meatBacon').checked) {
								order += " bacon";
								numToppings--;
								order += appendComma( totToppings, numToppings );
						}
						if (document.getElementById('meatChicken').checked) {
								order += " chicken";
								numToppings--;
								order += appendComma( totToppings, numToppings );
						}
						if (document.getElementById('meatHam').checked) {
								order += " ham";
								numToppings--;
								order += appendComma( totToppings, numToppings );
						}
						if (document.getElementById('meatMeatball').checked) {
								order += " meatball";
								numToppings--;
								order += appendComma( totToppings, numToppings );
						}
						if (document.getElementById('meatSausage').checked) {
								order += " sausage";
								numToppings--;
								order += appendComma( totToppings, numToppings );
						}
						if (document.getElementById('meatPepperoni').checked) {
								order += " pepperoni";
								numToppings--;
								order += appendComma( totToppings, numToppings );
						}
					}
					order += ".";
					alert( order );
				}

				function countToppings()
				{
					var numToppings = 0;

					if (document.getElementById('toppingsExtraCheese').checked)
						numToppings++;
					if (document.getElementById('vegetableOlives').checked)
						numToppings++;
					if (document.getElementById('vegetableMushrooms').checked)
						numToppings++;
					if (document.getElementById('vegetableOnions').checked)
						numToppings++;
					if (document.getElementById('vegetablePeppers').checked)
						numToppings++;
					if (document.getElementById('meatBacon').checked)
						numToppings++;
					if (document.getElementById('meatChicken').checked)
						numToppings++;
					if (document.getElementById('meatHam').checked)
						numToppings++;
					if (document.getElementById('meatMeatball').checked)
						numToppings++;
					if (document.getElementById('meatSausage').checked)
						numToppings++;
					if (document.getElementById('meatPepperoni').checked)
						numToppings++;

					return numToppings;
				}

				function appendComma( toppingsTotal, toppingsCount )
				{
					var commaStr = "";
					if (toppingsCount > 1) {
						commaStr = ",";
					} else if (toppingsCount > 0) {
						if (toppingsTotal > 2)
								commaStr = ",";
						commaStr = " and";
					}
					return commaStr;
				}
		</script>
		<vxml:form id="pizza_order_form">
			<vxml:var name="confirmPizzaOrder" expr="false"/>
			<vxml:var name="changePizzaOrder" expr="false"/>
			<vxml:var name="confirmPizzaBlock" expr="false"/>

			<vxml:grammar>
				<![CDATA[
					#JSGF V1.0;
					grammar pizzaorder;
					public <pizzaorder> = [I would like][I'd like][give me] <quantity> {$.voice_field_quantity = $quantity;}
									(   [<size> {$.voice_field_size = $size;}]
											| [pizza] [pizzas]
									| [with] [<cheese> {$.voice_field_cheese = $cheese;}]
										| [with] [<vegetables> {$.voice_field_vegetables = $vegetables;}]
										| [with] [<meats> {$.voice_field_meats = $meats;}] ) * ;
					<size>       = small | medium | large ;
					<quantity>   = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 ;
					<cheese>     = extra cheese {$ =true} ;
					<vegetables> = <NULL> { $= new Array; } (<vegetable> [and] { $.push($vegetable) } )+;
					<vegetable>  = olives | mushrooms | onions | peppers ;
					<meats>  = <NULL> { $= new Array; } ( <meat> [and] { $.push($meat) } )+;
					<meat>   = bacon | chicken | ham | meatball | sausage | pepperoni ;
				]]>
			</vxml:grammar>

			<vxml:block>
				Welcome to the multimodal pizza order form.
			</vxml:block>
			<vxml:initial cond="voice_field_quantity == undefined &amp;&amp;
									voice_field_size == undefined &amp;&amp;
									voice_field_cheese == undefined &amp;&amp;
									voice_field_vegetables == undefined &amp;&amp;
									voice_field_meats == undefined">
				<vxml:prompt>
					Please place your order.
				</vxml:prompt>
				<vxml:catch event="nomatch noinput help">
					For example, say: I would like 2 large pizzas with pepperoni, sausage, mushrooms and extra cheese.
				</vxml:catch>
			</vxml:initial>

			<vxml:field name="voice_field_quantity" xv:id="voice_quantity" modal="true">
				<vxml:grammar>
					<![CDATA[
							#JSGF V1.0;
							grammar pizza_quantity;
							public <quantity> = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 ;
					]]>
				</vxml:grammar>
				<vxml:prompt>
					How many pizzas would you like?
				</vxml:prompt>
				<vxml:catch event="help nomatch noinput">
					Say a number between one and twenty.
				</vxml:catch>
			</vxml:field>

			<vxml:field name="voice_field_size" xv:id="voice_size" modal="true">
				<vxml:grammar>
					<![CDATA[
							#JSGF V1.0;
							grammar pizza_size;
							public <size> = small | medium | large ;
					]]>
				</vxml:grammar>
				<vxml:prompt>
					What size would you like?
				</vxml:prompt>
				<vxml:catch event="help nomatch noinput">
					Say small, medium, or large.
				</vxml:catch>
			</vxml:field>

			<vxml:field name="voice_field_cheese" xv:id="voice_cheese" modal="true">
				<vxml:grammar>
					<![CDATA[
							#JSGF V1.0;
							grammar pizza_extra;
							public <extra> = yes {$=true} | no {$=false};
					]]>
				</vxml:grammar>
				<vxml:prompt>
					Would you like extra cheese?
				</vxml:prompt>
				<vxml:catch event="help nomatch noinput">
					Say yes or no.
				</vxml:catch>
			</vxml:field>

			<vxml:field name="voice_field_vegetables" xv:id="voice_vegetables" modal="true">
				<vxml:grammar>
					<![CDATA[
							#JSGF V1.0;
							grammar vegitable_toppings;
							<veggies> = none | olives | mushrooms | onions | peppers;
							public <toppings> = <NULL> { $= new Array; }
								( <veggies> [and] { $.push($veggies) } )+;
					]]>
				</vxml:grammar>
				<vxml:prompt>
					What vegetable toppings would you like?
				</vxml:prompt>
				<vxml:catch event="help nomatch noinput">
					For example, say mushrooms and peppers.
				</vxml:catch>
			</vxml:field>

			<vxml:field name="voice_field_meats" xv:id="voice_meats" modal="true">
				<vxml:grammar>
					<![CDATA[
							#JSGF V1.0;
							grammar meat_toppings;
							<meats> = none | bacon | chicken | ham | meatball | sausage | pepperoni;
							public <toppings> = <NULL> { $= new Array; }
								( <meats> [and] { $.push($meats) } )+;
					]]>
				</vxml:grammar>
				<vxml:prompt>
					What meat toppings would you like?
				</vxml:prompt>
				<vxml:catch event="help nomatch noinput">
					For example, say sausage and pepperoni.
				</vxml:catch>
			</vxml:field>

			<vxml:filled mode="all" namelist="voice_field_quantity voice_field_size voice_field_cheese voice_field_vegetables voice_field_meats">
				<vxml:assign name="confirmPizzaBlock" expr="true"/>
			</vxml:filled>

			<vxml:block name="voice_confirm_block" cond="confirmPizzaBlock == true">
				<vxml:var name="hasVeggieToppings" expr="false"/>
				<vxml:var name="hasMeatToppings" expr="false"/>
				<vxml:var name="hasExtraCheese" expr="false"/>

				You're pizza order is:
				<vxml:value expr="voice_field_quantity"/>
				<vxml:value expr="voice_field_size"/>
				<vxml:if cond="voice_field_quantity > 1">
					pizzas,
				<vxml:else/>
					pizza,
				</vxml:if>
				with
				<vxml:if cond="document.getElementById('vegetableOlives').checked == true">
					<vxml:assign name="hasVeggieToppings" expr="true"/>
					olives,
				</vxml:if>
				<vxml:if cond="document.getElementById('vegetableMushrooms').checked == true">
					<vxml:assign name="hasVeggieToppings" expr="true"/>
					mushrooms,
				</vxml:if>
				<vxml:if cond="document.getElementById('vegetableOnions').checked == true">
					<vxml:assign name="hasVeggieToppings" expr="true"/>
					onions,
				</vxml:if>
				<vxml:if cond="document.getElementById('vegetablePeppers').checked == true">
					<vxml:assign name="hasVeggieToppings" expr="true"/>
					peppers,
				</vxml:if>
				<vxml:if cond="document.getElementById('meatBacon').checked == true">
					<vxml:assign name="hasMeatToppings" expr="true"/>
					bacon,
				</vxml:if>
				<vxml:if cond="document.getElementById('meatChicken').checked == true">
					<vxml:assign name="hasMeatToppings" expr="true"/>
					chicken,
				</vxml:if>
				<vxml:if cond="document.getElementById('meatHam').checked == true">
					<vxml:assign name="hasMeatToppings" expr="true"/>
					ham,
				</vxml:if>
				<vxml:if cond="document.getElementById('meatMeatball').checked == true">
					<vxml:assign name="hasMeatToppings" expr="true"/>
					meatball,
				</vxml:if>
				<vxml:if cond="document.getElementById('meatSausage').checked == true">
					<vxml:assign name="hasMeatToppings" expr="true"/>
					sausage,
				</vxml:if>
				<vxml:if cond="document.getElementById('meatPepperoni').checked == true">
					<vxml:assign name="hasMeatToppings" expr="true"/>
					peperoni,
				</vxml:if>
				<vxml:if cond="document.getElementById('toppingsExtraCheese').checked == true">
					<vxml:assign name="hasExtraCheese" expr="true"/>
					<vxml:if cond="hasVeggieToppings == true || hasMeatToppings == true">
						and
					</vxml:if>
					extra cheese.
				</vxml:if>
				<vxml:if cond="hasVeggieToppings == false &amp;&amp; hasMeatToppings == false &amp;&amp; hasExtraCheese == false">
					nothing on it. How bland.
				</vxml:if>
				<vxml:assign name="confirmPizzaOrder" expr="true"/>
				<vxml:clear namelist="confirm_pizza_order change_pizza_order"/>
			</vxml:block>

			<vxml:field name="confirm_pizza_order" xv:id="voice_confirm" type="boolean" modal="true" cond="confirmPizzaOrder == true">
				<vxml:prompt>
					Is this order correct?
				</vxml:prompt>
				<vxml:filled>
					<vxml:if cond="confirm_pizza_order == true">
						Thank you for your order.
						<vxml:return/>
					<vxml:else/>
						<vxml:throw event="change.pizza.order"/>
					</vxml:if>
				</vxml:filled>
			</vxml:field>

			<vxml:field name="change_pizza_order" modal="true" cond="changePizzaOrder == true">
				<vxml:grammar>
					<![CDATA[
							#JSGF V1.0;
							grammar change_order;
							public <change> = [change][the] quantity | size | toppings ;
					]]>
				</vxml:grammar>
				<vxml:prompt>
					Which part of your order would you like to change?
				</vxml:prompt>
				<vxml:catch event="help nomatch noinput">
					For example, say the quantity.
				</vxml:catch>
				<vxml:catch event="help nomatch noinput" count="2">
					You can say quantity, size or toppings.
				</vxml:catch>
				<vxml:filled>
					<vxml:assign name="changePizzaOrder" expr="false"/>
					<vxml:if cond="change_pizza_order == 'quantity'">
						<vxml:clear namelist="voice_field_quantity"/>
					<vxml:elseif cond="change_pizza_order == 'size'"/>
						<vxml:clear namelist="voice_field_size"/>
					<vxml:else/>
						<vxml:clear namelist="voice_field_cheese voice_field_vegetables voice_field_meats"/>
					</vxml:if>
					<vxml:clear namelist="voice_confirm_block"/>
					<vxml:reprompt/>
				</vxml:filled>
			</vxml:field>
			<vxml:catch event="change.pizza">
				<vxml:assign name="confirmPizzaOrder" expr="false"/>
				<vxml:assign name="changePizzaOrder" expr="true"/>
				<vxml:assign name="confirmPizzaBlock" expr="false"/>
				<vxml:reprompt/>
			</vxml:catch>
		</vxml:form>

		<xv:sync xv:field="#voice_quantity" xv:input="quantity"/>
		<xv:sync xv:field="#voice_size" xv:input="size"/>
		<xv:sync xv:field="#voice_cheese" xv:input="cheese"/>
		<xv:sync xv:field="#voice_meats" xv:input="meats"/>
		<xv:sync xv:field="#voice_vegetables" xv:input="vegetables"/>
		<xv:sync xv:field="#voice_confirm" xv:input="submitButton"/>
	</head>
	<body ev:event="load" ev:handler="#pizza_order_form">
		<form onsubmit="displayPizzaOrder(); return false;" >
				<img src="images/mmpizza.jpg" border="0" alt="" /><br/>

				<b>Quantity:</b><br/>
				<input type="text" name="quantity" id="pizzaQuantity"/>
				<br/><br/>

				<b>Size:</b><br/>
				<input type="radio" name="size" id="sizeSmall" value="small"/>
					Small 12&quot;

				<input type="radio" name="size" id="sizeMedium" value="medium"/>
					Medium 16&quot;
				<input type="radio" name="size" id="sizeLarge" value="large"/>
					Large 22&quot;
				<br/><br/>

				<b>Toppings:</b><br/>
				<input type="checkbox" name="cheese" id="toppingsExtraCheese" value="cheese"/>

					Extra Cheese
				<br/><br/>

				<b>Vegetable Toppings:</b><br/>
				<input type="checkbox" name="vegetables" id="vegetableOlives" value="olives"/>
					Olives
				<input type="checkbox" name="vegetables" id="vegetableMushrooms" value="mushrooms"/>
					Mushrooms
				<br/>
				<input type="checkbox" name="vegetables" id="vegetableOnions" value="onions"/>

					Onions
				<input type="checkbox" name="vegetables" id="vegetablePeppers" value="peppers"/>
					Peppers
				<br/><br/>

				<b>Meat Toppings:</b><br/>
				<input type="checkbox" name="meats" id="meatBacon" value="bacon"/>
					Bacon
				<input type="checkbox" name="meats" id="meatChicken" value="chicken"/>
					Chicken
				<input type="checkbox" name="meats" id="meatHam" value="ham"/>

					Ham
				<br/>
				<input type="checkbox" name="meats" id="meatMeatball" value="meatball"/>
					Meatball
				<input type="checkbox" name="meats" id="meatSausage" value="sausage"/>
					Sausage
				<input type="checkbox" name="meats" id="meatPepperoni" value="pepperoni"/>
					Pepperoni
				<br/><br/>

				<input type="submit" name="submitButton" id="submitButton" value="Submit Pizza Order" />

		</form>
	</body>
</html>
