<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>flashcards japanese nouns in English and Japanese</TITLE>
</HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
 <script language="JavaScript" type="text/javascript">  
var count = 0  
var images = new Array  
                       ('spanishverbs1.png',
                        'spanishverbs2.png',  
                        'spanishverbs3.png', 
                        'spanishverbs4.png',
                        'spanishverbs5.png',  
                        'spanishverbs6.png', 
                        'spanishverbs7.png',
                        'spanishverbs8.png',  
                        'spanishverbs9.png', 
                        'spanishverbs10.png',
                        'spanishverbs11.png',  
                        'spanishverbs12.png', 
                        'spanishverbs13.png',
                        'spanishverbs14.png',  
                        'spanishverbs15.png', 
                        'spanishverbs16.png',
                        'spanishverbs17.png',  
                        'spanishverbs18.png', 
                        'spanishverbs19.png',
                        'spanishverbs20.png',  
                        'spanishverbs21.png', 
                        'spanishverbs22.png',
                        'spanishverbs23.png',  
                        'spanishverbs24.png', 
                        'spanishverbs25.png',
                        'spanishverbs26.png',  
                        'spanishverbs27.png'); 
                                              
                                         
 function slideShow(direction){  
  
 if (direction == 'next' && count <=20){  
 count++  
 }  
  
 if (direction == 'back' && count >=1){  
 count --  
 }  

 if (direction == 'find' && count <=6){  
 count = count +10;  
 }     

  document.getElementById("show").innerHTML = (count+1)+" of 27 <br> <img src='"+images[count]+"'>"  
}  
</script>

 <script>
var oldColor = 'red';

function changeColor() {
  oldColor = document.body.style.backgroundColor;
  var newColor = prompt('Enter a color:');
  document.body.style.backgroundColor = newColor;
}

function undoColor() {
  var newColor = oldColor;
  oldColor = document.body.style.backgroundColor;
  document.body.style.backgroundColor = newColor;
}


  
</script>           
                     
                       
       <script type="text/javascript">
        // Global variable to track current file name.
        var currentFile = "";
        function playAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    var btn = document.getElementById('play'); 
                    var audioURL = document.getElementById('audiofile'); 

                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;                       
                    }

                    // Tests the paused attribute and set state. 
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        oAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }
             // Rewinds the audio file by 30 seconds.

        function rewindAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime -= 5.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

             // Fast forwards the audio file by 30 seconds.

        function forwardAudio() {

             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime += 25.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

             // Restart the audio file to the beginning.

        function restartAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime = 0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
               }
            }
        }
            
    </script>
 
 <body  bgcolor='red' > 
<div style="position:absolute; top:1px; left:1px;"</div> 
<div id="show">  
<script>  
 slideShow()  
</script></div> 

<div style="position:absolute; top:450px; left:1px;"</div>  
<input type="button" value="<- Back" onclick="slideShow('back')"><input type="button" value="Next ->" onclick="slideShow('next')"><input type="button" value="Find ->" onclick="slideShow('find')">  
<button onclick='changeColor()'>Change color</button> <button onclick='undoColor()'>Undo color</button>  
  

<!--<div style="position:absolute; top:500px; left:40px;"
<p> <font size=5 color="red"></P>
<p> SPANISH/ENGLISH </P></font> -->

    <p>
      <input type="text" id="audiofile" size="80" value="spanishverbs1.mp3" />
    </p>
    <audio id="myaudio">
      HTML5 audio not supported
    </audio>
    <button id="play" onclick="playAudio();">
      Play
    </button>
    
    <button onclick="rewindAudio();">
      Rewind
    </button>
    <button onclick="forwardAudio();">
      Fast forward
    </button>
    <button onclick="restartAudio();">
      Restart
    </button>

<!-- <audio id="audiofile" controls height="10" width="10">
  <embed height="10" width="10" src="EigoToNihongo.mp3">  
  <source src="EigoToNihongo.mp3" type="audio/mpeg">
  </audio>
</div> -->

<p> 521 spanish verbs </P> 
<audio id="audiofile" controls height="10" width="10"> 
  <embed height="10" width="10" src="spanishverbs1.mp3">  
  <source src="spanishverbs1.mp3" type="audio/mpeg"> 
  </audio> 


 </body>

                   

</HTML>