<?xml version="1.0"?>

<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">


<!-- **************************** Support VoiceXML *************************** -->	

<head>
  <title>Online Dictionary</title>

  <vxml:form id="captureWord">

	<vxml:field name="category" xv:id="category">
           <vxml:prompt>Online dictionary</vxml:prompt>
           <vxml:prompt>Choose one, number 1 through 12</vxml:prompt>
	   <vxml:grammar> 
	       <![CDATA[
               #JSGF V1.0;
               grammar one_twenty;
               public <onetotwenty> 
	         = one|two|three|
	           four|five|six|
		   seven|eight|nine|
		   ten|eleven|twelve;
               ]]>
          </vxml:grammar>
        </vxml:field>
   </vxml:form>

   <vxml:form id="present">
	  <vxml:block>
               <vxml:assign name="category2" expr= "document.getElementById('spokenWord').value"/>
	       <vxml:if cond= "category2=='one'">
                    <vxml:prompt>Please call a taxi</vxml:prompt>
                    <vxml:audio src="./AudioFiles/t1.wav"/>
               </vxml:if> 
               <vxml:if cond= "category2=='two'">
                    <vxml:prompt>Please go to this address</vxml:prompt>
                    <vxml:audio src="./AudioFiles/t2.wav"/> 
               </vxml:if> 
               <vxml:if cond= "category2=='three'"> 
                    <vxml:prompt>Please stop it here</vxml:prompt>
                    <vxml:audio src="./AudioFiles/t3.wav"/>
               </vxml:if>  
               <vxml:if cond= "category2=='four'">
                    <vxml:prompt>I will check in</vxml:prompt>
                    <vxml:audio src="./AudioFiles/h1.wav"/>
               </vxml:if>  
               <vxml:if cond= "category2=='five'">
                    <vxml:prompt>I will check out</vxml:prompt>
                    <vxml:audio src="./AudioFiles/h2.wav"/>
               </vxml:if>  
               <vxml:if cond= "category2=='six'">
                    <vxml:prompt>Please change US dollar into Chinese yuan</vxml:prompt>
                    <vxml:audio src="./AudioFiles/h3.wav"/>
               </vxml:if>  
               <vxml:if cond= "category2=='seven'">
                    <vxml:prompt>I order it</vxml:prompt>
                    <vxml:audio src="./AudioFiles/r1.wav"/>
               </vxml:if>  
               <vxml:if cond= "category2=='eight'">
                    <vxml:prompt>Give me this</vxml:prompt>
                    <vxml:audio src="./AudioFiles/r2.wav"/>
               </vxml:if>  
               <vxml:if cond= "category2=='nine'">
                    <vxml:prompt>Check, please</vxml:prompt>
                    <vxml:audio src="./AudioFiles/r3.wav"/>
               </vxml:if>  
               <vxml:if cond= "category2=='ten'">
                    <vxml:prompt>How much it is?</vxml:prompt>
                    <vxml:audio src="./AudioFiles/s1.wav"/>
               </vxml:if>  
               <vxml:if cond= "category2=='eleven'">
                    <vxml:prompt>Please let me look around</vxml:prompt>
                    <vxml:audio src="./AudioFiles/s2.wav"/>
               </vxml:if>  
               <vxml:if cond= "category2=='twelve'">
                    <vxml:prompt>It's very expensive!</vxml:prompt>
                    <vxml:audio src="./AudioFiles/s3.wav"/>
               </vxml:if>  
	   </vxml:block>

	   <vxml:field name="category" xv:id="category">
              <vxml:prompt>Entered a choice</vxml:prompt>
	      <vxml:grammar> 
	         <![CDATA[
                    #JSGF V1.0;
                    grammar one_twenty;
                    public <onetotwenty> 
	               = one|two|three|
	                 four|five|six|
		         seven|eight|nine|
		         ten|eleven|twelve;
                 ]]>
              </vxml:grammar>
              <vxml:filled>
              </vxml:filled> 
        </vxml:field>
  </vxml:form>

  <script type="text/javascript" id="doItAgain" declare="declare">
      <![CDATA[ 

            dword = document.getElementById('spokenWord').value;
	    if (dword=="one") {playT1();}
	    if (dword=="two") {playT2();}
	    if (dword=="three") {playT3();}
	    if (dword=="four") {playH1();}	
	    if (dword=="five") {playH2();}           
	    if (dword=="six") {playH3();}           
	    if (dword=="seven") {playR1();}           
	    if (dword=="eight") {playR2();}           
	    if (dword=="nine") {playR3();}           
	    if (dword=="ten") {playS1();}           
	    if (dword=="eleven") {playS2();}           
	    if (dword=="twelve") {playS3();}           
    
      function playT1(){
         last="T1";
	 translating.innerText="Please call a taxi";
	 document.word.src="./Words/t_1.jpg";
         document.getElementById('repeat').click();
      }

      function playT2(){
         last="T2";
	 translating.innerText="Please go to this address";
	 document.word.src="./Words/t_2.jpg";
         document.getElementById('repeat').click(); 
      }

      function playT3() {
         last="T3";
	 translating.innerText="Please stop it here";
	 document.word.src="./Words/t_3.jpg";
         document.getElementById('repeat').click(); 
      }

      function playH1() {
         last="H1";
	 translating.innerText="I will check in";
         document.word.src="./Words/h_1.jpg";
         document.getElementById('repeat').click(); 
      }

      function playH2() {
         last="H2";
	 translating.innerText="I will check out";
	 document.word.src="./Words/h_2.jpg";
         document.getElementById('repeat').click(); 
      }

      function playH3() {
         last="H3";
	 translating.innerText="Please change US dollar into Chinese yuan";
	 document.word.src="./Words/h_3.jpg";
         document.getElementById('repeat').click(); 
      }
      
      function playR1() {
         last="R1";
	 translating.innerText="I order it";
	 document.word.src="./Words/r_1.jpg";
         document.getElementById('repeat').click(); 
      }
      
      function playR2() {
         last="R2";
	 translating.innerText="Give me this";
	 document.word.src="./Words/r_2.jpg";
         document.getElementById('repeat').click(); 
      }
      
      function playR3() {
         last="R3";
	 translating.innerText="Check, please";
	 document.word.src="./Words/r_3.jpg";
         document.getElementById('repeat').click(); 
      }
      
      function playS1() {
         last="S1";
	 translating.innerText="How much it is?";
	 document.word.src="./Words/s_1.jpg";
         document.getElementById('repeat').click(); 
      }
      
      function playS2() {
         last="S2";
	 translating.innerText="Please let me look around";
	 document.word.src="./Words/s_2.jpg";
         document.getElementById('repeat').click(); 
      }
      
      function playS3() {
         last="S3";
	 translating.innerText="It's very expensive!";
	 document.word.src="./Words/s_3.jpg";
         document.getElementById('repeat').click(); 
      }

      ]]> 
  </script>   

<xv:sync xv:input="spokenWord" xv:field="#category"/>

<ev:listener observer="traveler" ev:event="vxmldone" ev:handler="#doItAgain" ev:propagagte="stop"/>

</head>

<!-- ****************************** Support XHTML **************************** -->

<body id="traveler" ev:event="load" ev:handler="#captureWord">
 
 <form name="screen" id="screen"> 
     <h1> Travel Online Dictionary - English to Chinese</h1>
     <img src="./Pictures/t_main.jpg" height="120"/> 
     <img src="./Pictures/h_main.jpg" height="120"/> 
     <img src="./Pictures/r_main.jpg" height="120"/> 
     <img src="./Pictures/s_main.jpg" height="120"/> 
     <br/>
     <img src="./Pictures/t1.jpg" height="120"/> 
     <img src="./Pictures/h1.jpg" height="120"/> 
     <img src="./Pictures/r1.jpg" height="120"/> 
     <img src="./Pictures/s1.jpg" height="120"/> 
     <br/>
     <p>
     To translate a sentence<br/>
     For <b>Transportation</b> say
     <b>1)</b> Please call a taxi, 
     <b>2)</b> Please go to thie address, or
     <b>3)</b> Please stop it here<br/>
     For <b>Hotel</b> say 
     <b>4)</b> I will check-in,
     <b>5)</b> I will check-out, or
     <b>6)</b> Please change US dollar into Chinese yuan<br/>
     For <b>Restaurant</b> say 
     <b>7)</b> I order it, 
     <b>8)</b> Give me this, or
     <b>9)</b> Check, please<br/>
     For <b>Shopping</b> say 
     <b>10)</b> How much it is?, 
     <b>11)</b> Please let me look around, or
     <b>12)</b> It's very expensive!
     <input type="text" id="spokenWord" value="" size="6" /> 
     <br/>
          <h2 id="translating"></h2>
          <img name="word" id="word" src="./Words/lets_start.jpg" height="150"/>
          <input name="repeat" id="repeat" type = "hidden" value = " " ev:event="click" ev:handler="#present"/>
     </p>

 </form>

</body>
</html>
