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

xxxxxxxxxx
 
<!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>
​
    <link rel="stylesheet" href="main.css" media="screen" charset="utf-8">
  <style id="jsbin-css">
.big-mono {
  font-family: monospace;
  font-size: 2em;
}
​
.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>
​
    <section id="guess-area">
      <input type="text" id="word-guess">
​
      <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>
​
<script id="jsbin-source-html" type="text/html"><!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>
​
    <link rel="stylesheet" href="main.css" media="screen" charset="utf-8">
  </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>
​
    <section id="guess-area">
      <input type="text" id="word-guess">
​
      <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>
  </body>
​
  <script type="text/javascript" src="script.js"><\/script>
​
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/lg-bot/343694d651adedd80dfd458f20869f57/raw/39e5dba5b89cc9f48b9aa8ab6ec6f8bc78e34c03/tests.js"><\/script> 
</html>
</script>
​
<script id="jsbin-source-css" type="text/css">.big-mono {
  font-family: monospace;
  font-size: 2em;
}
​
.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;
}
​
</script>
​
<script id="jsbin-source-javascript" type="text/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></body>
​
  <script type="text/javascript" src="script.js"></script>
​
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/lg-bot/343694d651adedd80dfd458f20869f57/raw/39e5dba5b89cc9f48b9aa8ab6ec6f8bc78e34c03/tests.js"></script> 
</html>
    