<?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>Addition</title>

  <script> <![CDATA[        
        function answer(v1, v2)
		{
         return (parseInt(v1) + parseInt(v2));
		}
		function inc(i)
	    {
	      return parseInt(i) + 1;
	    }
    ]]> </script>

  
  	<script> <![CDATA[ 
       function rand() 
       {
         return Math.floor(Math.random()*10);
       } 
	   
	   function blank()
	   {
	      return "";
	   }
    ]]> </script> 

  <vxml:form id="hello">
    <vxml:block name = "set_values">
	   <vxml:assign name="document.getElementById('var1').value" expr="rand()"/> 
	   <vxml:assign name="document.getElementById('var2').value" expr="rand()"/>
           <vxml:assign name="document.getElementById('phrase1').value" expr="blank()"/>
           <vxml:assign name="document.getElementById('OK').checked" expr="false"/>
           <vxml:assign name="document.getElementById('Goodbye').checked" expr="false"/>	
    </vxml:block>
	<vxml:field name="ansr1" xv:id="ansr1">
	   <vxml:prompt> OK. Here is your addition problem </vxml:prompt>
	   <vxml:prompt> what is the answer? </vxml:prompt>
	   <vxml:grammar> <![CDATA[
               #JSGF V1.0;
               grammar one_twenty;
               public <onetotwenty> = 0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19;
               ]]>
          </vxml:grammar>

	  <vxml:filled>
	       <vxml:var name="total"/>
	       <vxml:var name="correct"/>
	       <vxml:var name="ans1" expr="answer(document.getElementById('var1').value,document.getElementById('var2').value)"/>
	       <vxml:assign name="correct" expr="document.getElementById('dcorrect').value" />
	       <vxml:assign name="total" expr="document.getElementById('dtotal').value" />
	       <vxml:assign name="total" expr="inc(total)"/>
               <vxml:if cond="ansr1 == ans1"> 
                   <vxml:prompt> correct.</vxml:prompt> 
	           <vxml:assign name="correct" expr="inc(correct)"/>
	       <vxml:else/> 
		   <vxml:prompt> 
                       Sorry, the correct answer is, 
                       <vxml:value expr="document.getElementById('var1').value"/> plus 
	               <vxml:value expr="document.getElementById('var2').value"/> equals
		       <vxml:value expr="ans1"/>.
                  </vxml:prompt>
	       </vxml:if>
	       <vxml:prompt> Total correct <value expr="correct"/>. </vxml:prompt>
	       <vxml:prompt> out of the total attempted <value expr="total"/>. </vxml:prompt>
	       <vxml:assign name="document.getElementById('dcorrect').value" expr="correct"/>
	       <vxml:assign name="document.getElementById('dtotal').value" expr="total"/>
	   </vxml:filled>
	</vxml:field>
        <vxml:field name="another" xv:id="another">
            <vxml:prompt>Do you want to try another exercise?</vxml:prompt>
	    <vxml:grammar> <![CDATA[
               #JSGF V1.0;
               grammar affirm;
               public <affirm> = yes|no;
               ]]>
          </vxml:grammar>
          <filled>
               <if cond="another == 'yes'">
                    <vxml:assign name="document.getElementById('Goodbye').checked" expr="false"/>
                    <vxml:assign name="document.getElementById('OK').checked" expr="true"/>
               <else/>
                    <vxml:assign name="document.getElementById('OK').checked" expr="false"/>
                    <vxml:assign name="document.getElementById('Goodbye').checked" expr="true"/>
               </if>
          </filled>
	  </vxml:field>
  </vxml:form>
  
  <xv:sync xv:input="phrase1" xv:field="#ansr1"/>

<script type="text/javascript" id="button_click_handler">
      <![CDATA[ 
         if (document.getElementById('OK').checked == true)
             {document.getElementById('again').click();}       
      ]]> 
</script>

<ev:listener ev:observer="jl" ev:event="vxmldone" ev:handler="#button_click_handler" ev:propagagte="stop"/>

</head>

<body id="jl" ev:event="load" ev:handler="#hello">

 <input type="hidden" id="again" value=" " ev:event="click" ev:handler="#hello"/>

 <form name = "jal">
  <h1>Exercise </h1>
  <p>
		
  <input type="text" id="var1"    value="" size="4"/> + 
  <input type="text" id="var2"    value="" size="4"/> = 
  <input type="text" id="phrase1" value="" size="4" /> <br/> <br/>

  <br/> <br/> Total correct = <input type="text" id="dcorrect" value="0" size="1"/> <br/>
  Total attempted = <input type="text" id="dtotal" value="0" size="1"/><br/>
  Do you want to try another exercise?<br/>
	   
  Yes <input id="OK"      name="radioset" type="radio" ev:event="click" ev:handler="#hello"> Yes </input>
  No  <input id="Goodbye" name="radioset" type="radio"> No </input>
  
  </p>
  </form>

</body>
</html>