Make a Word Make-a-Word challenge for the Learners Guild Enrollment Game: https://learnathon.learnersguild.org/ // source http://jsbin.com/cebico

<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="Make-a-Word challenge for the Learners Guild Enrollment Game: https://learnathon.learnersguild.org/">
    <meta charset="utf-8">
    <title>Make a Word</title>

.notice {
  margin-top: 1em;
  font-style: italic;
}

body {
  background: pink;
}

#letters {
  background: white;
  margin: 0 auto;
  margin-top: 250px;
  padding: 50px;
  border: 1px solid;
  text-align: center;
  clear:both;
}

#guess-area {
  text-align: center;
  margin: 20px;
  clear:both;
}

.wrapper {
  text-align: center;
}

.score-tab {
  display: inline;
  padding: 20px;
}
</style>
</head>
  <body>
    <div id="letters" class="big-mono">
      OPMARGR
    </div>
    <div class = "wrapper">
      <div id="score">
        <div class="score-tab">
          Number of wins: <span id="wins"> 0 </span>
        </div>
        <div class="score-tab">
        Number of loses: <span id="losses"> 0 </span>
        </div>
      </div>
    </div>

<button onclick="checkGuess()">Guess</button>
      <button onclick="updateLetters()">New Letters</button>
      <button onclick="shuffle(getElementById('letters').innerHTML)">Shuffle</button>

<div id="game-message" class="notice">
        Enter your first guess!
      </div>
    </section>
  <script id="jsbin-javascript">
// A function to get the set of possible letters
function getLetters() {
  // Select the element with the id 'letters'
  var lettersContainer = document.querySelector('#letters');

// Get the text content of the element
  var letters = lettersContainer.innerText;

// Return the letters
  return letters;
}

// A function to get the user's guess
function getGuess() {
  // Select the input element where the user enters their guess
  var wordGuess = document.querySelector('input#word-guess');

// Get the text content of the element
  var guess = wordGuess.value;

// Return the guess
  return guess;
}

// A function to display a message on the screen
function showMessage(messageText) {
  // Select the element to display a message
  var messageElem = document.querySelector('#game-message');

// Set the text value of the element to the provided text
  messageElem.innerText = messageText;
}

// A function to check whether the guessed word is correct or not
function checkGuess() {
  // Collect the text from the letters and the guess
  var letters = getLetters();
  var guess = getGuess();
  
  //variables for score-card
  var wins = parseInt(document.getElementById('wins').innerHTML);
  var losses = parseInt(document.getElementById('losses').innerHTML);
  //check to see if no letters were returned
  if(guess.length < 1){
    showMessage("You haven't entered anoything yet...");
    return false;
  }
  // Convert both to uppercase so we can compare equals
  guess = guess.toUpperCase();
  letters = letters.toUpperCase();

// Determine if all the characters in the guess are in the letters
  for (var i = 0; i < guess.length; i++) {
    var currentChar = guess[i];

// If the current character can't be found in letters, the guess is incorrect
    if (letters.indexOf(currentChar) === -1) {
      losses ++;
      // Show a message saying guess is incorrect
      showMessage("Wrong guess, try again.");
      document.getElementById('losses').innerHTML = losses;
      // Return false to exit the function
      return false;
    }
  }

// If we've made it this far, then the guess must be correct!
  // Show a message saying guess is correct
  wins++;
  showMessage("Good guess, that is correct!");
  document.getElementById('wins').innerHTML = wins;
  // Return true to exit the function
  return true;
}

//Challege#3. Change the letters used for matching
function updateLetters() {
 var newLetters = randomLetters();
  
document.getElementById('letters').innerHTML = newLetters;
}

//Challege#4. Change the letters used for matching to a random amount of letters.
function randomLetters() {
   var text = "";
   var consonats = "BCDFGHJKLMNPQRSTVWXYZ";
 var vowels = "AEIOU";

for( var i=0; i < 4; i++ )
       text += consonats.charAt(Math.floor(Math.random() * consonats.length));
     
 for(i=0; i < 3; i++ )
       text += vowels.charAt(Math.floor(Math.random() * vowels.length));
 
 return text;
}

//Challege#5. Shuffle the current letters.
function shuffle(newWord){
  //make string into an array of chars
  var array = newWord.split("");
  var currentIndex = array.length;
  
  // while loop to shuffle untill index reaches 0
  while (0 !== currentIndex) {

// Pick a remaining element...
    var randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

// And swap it with the current element.
    var temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  // display the shuffled letters in the HTML file
  document.getElementById('letters').innerHTML = array.join("");
  return array.join("");
}
</script>