Spelling Practice

-Revised -Credit:ecroppolis -JSFiddle

by Ebuka Chibueze

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.responsivevoice.org/responsivevoice.js?ver=4.2.5"></script>
<script src="https://code.responsivevoice.org/develop/responsivevoice.src.js"></script>
<h1>
  Spelling Practice
</h1>
<form>
  <div id="status"></div>
  <div id="current-word"></div>
</form>

<div id="play"><a href="#">play</a></div>
<h2>Options</h2>
<ul id="options">
  <li id="voices"><a href="#">Change Voice</a> [ currently: <span id="current-voice">US English Male</span>]</li>
</ul>
<div id="footer">
Have your own ideas? Fork me and build on. And/or <a href="http://www.ecropolis.com/contact-us/" target="_blank" >get in touch</a>. You can also fork and edit the word &amp; sentence arrays in the code to quiz a new set of words. Thanks to <a href="http://responsivevoice.com/" target="_blank" >Responsive Voice</a> for the text to speech API.
</div>

CSS

html body { font-family: arial, sans-serf; font-size: 14px; padding: 20px; background:#fff; }
a { text-decoration:none; color:#26a5c7; }
h2 { font-size: 16px; }
#play a { background: #272727; color: #FFF; border-radius: 3px; display:inline-block; padding: 2px 6px; margin-left: 10px; cursor:pointer;   }
#play a:hover { background: #000; color: #FFF; }
#current-word { padding: 20px 0; }
#status { height: 20px; }
#status.correct { color: green; }
#status.incorrect { color: red; }
#current-word button,
#current-word input { font-size: 14px; padding: 2px 10px;  }
#status em { text-decoration: underline; font-style: normal; }
#voices li { font-size: 12px; cursor: pointer; padding: 2px 3px; line-height:14px;  }
#voices #voicelist { padding: 10px 10px 10px 20px; background:#fffcf2; width: 215px; }
#voices #voicelist li { width: 200px;  }
#voices #voicelist li:hover { background-color:#CCC;  }
#footer { font-size: .7em; color: #8A8A8A; margin-top: 20px; border-top: 1px solid #8a8a8a; padding: 10px 0; } 
#footer a { color: #26a5c7; }

JavaScript

//Credit- ecroppolis
//Fork and edit your words around line 60. You can also create sample //sentences for each word just above the word array -- but you don't have to.



var currentWord, voicelist, voice;
var correctWords = [];
var incorrectWords = [];
var voicerate = .6;
var pitch = 2;

var finished = function(){
   $('#status').html('You Finished Quizing on all the Words!');
   $('#current-word,.repeater').css('visibility','hidden');
   $('#say-sentence').remove();
   if(incorrectWords.length)
   		$('.repeater').before($('<a>Quiz Words I Misspelled</a>').on('click',function(e){
      		e.preventDefault();
          $(this).fadeOut('fast',function(){ $(this).remove() });
      		words = incorrectWords;
      		$('#current-word').css('visibility','visible');
          currentWord = getWord(words);
          sayWord();
      }));
   else
      $('#status').append(' You got them all correct. Way to go!')
}
function getWord(words){
  if(words.length){
		return words[(randomIntFromInterval(0, words.length-1))];
  } else {
    finished();
    return false;
  }
}
function randomIntFromInterval(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
}
getSentences = function(word){
	var words = {
    'threw':['Santa threw the gifts into his bag.'],
    'through':['Sonic ran through Green Hill Zone.'],
    'which':['Which one should I pick?'],
    'witch':['The witch got on her broom and flew south'],
    'peace':['Peace on earth good will toward men'],
    'piece':['I found a piece of candy in my stocking'],
    'weather':['The weather outside is frightful'],
    'whether':['Timmy could not decide whether to ask for a blue or red car.'],
    'wait':['The children could not wait for their toys?'],
    'weight':['Santa needs to watch his weight?'],
    'our':['Our stockings were hung from the chimney.'],
    'are':['Are you going to the party'],
    'would':['Would you guide my slay tonight'],
    'wood':['Toys are rarely made from wood any more'],
   ...