<?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">
	
<head>
  <title>Tune Your Violin</title>

  <vxml:form id="captureNote">

	<vxml:field name="audioNote" xv:id="audioNote">
           <vxml:prompt>Speak a note.</vxml:prompt>
	   <vxml:grammar> <![CDATA[
               #JSGF V1.0;
               grammar one_twenty;
               public <onetotwenty> = G|D|A|E|all|again;
               ]]>
          </vxml:grammar>
        </vxml:field>
   </vxml:form>


   <vxml:form id="present">
	  <vxml:block>
               <vxml:assign name="audioNote2" expr= "document.getElementById('spokenNote').value"/>
               <vxml:if cond="audioNote2 == 'G'">
                    <vxml:prompt>Here is a G</vxml:prompt>
                    <vxml:audio src="G.wav"/>
               </vxml:if> 
               <vxml:if cond="audioNote2 == 'D'">
                    <vxml:prompt>Here is a D</vxml:prompt>
                    <vxml:audio src="D.wav"/> 
               </vxml:if> 
               <vxml:if cond="audioNote2 == 'A'"> 
                    <vxml:prompt>Here is an A</vxml:prompt>
                    <vxml:audio src="A.wav"/>
               </vxml:if>  
               <vxml:if cond="audioNote2 == 'E'">
                    <vxml:prompt>Here is a E</vxml:prompt>
                    <vxml:audio src="E.wav"/>
               </vxml:if>  
               <vxml:if cond="audioNote2 == 'all'">
                    <vxml:prompt>Here are all of the notes</vxml:prompt> 
                    <vxml:audio src="all.wav"/>
               </vxml:if>  
               <vxml:if cond="audioNote2 == 'again'">
                    <vxml:prompt>Here is a XX</vxml:prompt>
                    <vxml:audio src="G.wav"/> 
               </vxml:if>
	   </vxml:block>
	   <vxml:field name="audioNote" xv:id="audioNote">
              <vxml:prompt>Entered audio note.</vxml:prompt>
	      <vxml:grammar> <![CDATA[
                 #JSGF V1.0;
                 grammar one_twenty;
                 public <onetotwenty> = G|D|A|E|all;
                 ]]>
              </vxml:grammar>
              <vxml:filled>
              </vxml:filled> 
        </vxml:field>
  </vxml:form>

<script type="text/javascript" id="doItAgain" declare="declare">
      <![CDATA[ 

            dnote = document.getElementById('spokenNote').value;
	    if (dnote=="A") {playA();}
	    if (dnote=="G") {playG();}
	    if (dnote=="D") {playD();}
	    if (dnote=="E") {playE();}	
	    if (dnote=="all"){playAll();}           
    
      function playA() {
         last="D";
	 playing.innerText="Now playing A...";
	 document.note.src="A.jpg";
         document.getElementById('repeat').click();
      }

      function playD() {
         last="D";
	 playing.innerText="Now playing D...";
	 document.note.src="D.jpg";
         document.getElementById('repeat').click(); 
      }

      function playE() {
         last="E";
	 playing.innerText="Now playing E...";
	 document.note.src="E.jpg";
         document.getElementById('repeat').click(); 
      }

      function playG() {
         last="G";
	 playing.innerText="Now playing G...";
	 document.note.src="G.jpg";
         document.getElementById('repeat').click(); 
      }

      function playAll() {
         last="all";
	 playing.innerText="Now playing all notes...";
	 document.note.src="all.jpg";
         document.getElementById('repeat').click(); 
      }

      ]]> 
</script>   

<xv:sync xv:input="spokenNote" xv:field="#audioNote"/>

<ev:listener observer="violin" ev:event="vxmldone" ev:handler="#doItAgain" ev:propagagte="stop"/>

</head>

<body id="violin" ev:event="load" ev:handler="#captureNote">
 <form name = "screen" id="screen">
   <h1>Tune your violin </h1>
   <p>
   To play a note say "G," "D," "A" or "E."  To hear all 4 notes, say "all." 
   <input type="text" id="spokenNote" value="" size="4" /> <br/> <br/>

   <h2 id="playing"></h2>
   <img name="note" id="note" src="E.jpg" height="150"/>
   <input name="repeat" id="repeat" type = "hidden" value = " " ev:event="click" ev:handler="#present"/>
   </p>
 </form>

</body>
</html>