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

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">
@import 'https://fonts.googleapis.com/css?family=Baloo+Chettan';
@import 'https://fonts.googleapis.com/css?family=News+Cycle';
​
.big-mono {
  font-family: monospace;
  font-size: 2em;
}
​
.notice {
  margin-top: 1em;
  font-style: italic;
}
#title-box{
  font-family: "Baloo Chettan";
  /*background-color: #A9C686;*/
  background-image: url("https://img00.deviantart.net/1077/i/2015/093/5/f/scrabble_board_by_alejandro576d-d7gyf2g.png");
  background-repeat: repeat-y;
  background-size: 350px;
  color: white;
  width: 300px;
  height: 50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  
  
}
body{
  background-color: #e6ffe6;
  margin: 0 auto;
  text-align: center;
  font-family:'news cycle';
  
}
img{
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
​
button{
  margin: 5px;
  background-color:#00b3b3;
  color:cornsilk;
  border:none;
  
}
</style>
</head>
  <body>
    <div id="title-box">
    <h1>Pseudo-Scrabble!</h1>
    </div>
    <div id="letters" class="big-mono">
      OPMARGR
    </div>
    <div id="main">
    <button onclick="randomLetters()">New Letters</button>
    <button onclick="shuffleLetters()">Shuffle Letters</button>
    <section id="guess-area">
      <input type="text" id="word-guess">
​
      <button onclick="checkGuess()">Guess</button>
​
      <div id="game-message" class="notice">
        Enter your first guess!
        <br/>
        
      </div>
      <img src="https://stream1.gifsoup.com/view5/4366246/nostalgia-chick-scrabble-o.gif"/>
    </section>
    </div>
  <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();
​
  // 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) {
      // Show a message saying guess is incorrect
      showMessage("Wrong guess, try again.");
      // 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
  showMessage("Good guess, that is correct!");
  // Return true to exit the function
  return true;
}
​
function updateLetters(){
  var newLetters = "ABCD";
  var updatedLetters = document.querySelector('#letters');
​
  // Set the text value of the element to the provided text
  updatedLetters.innerText = newLetters;
  //return updatedLetters; 
  
}
function randomLetters(){
  //create array of all letters
  var consonants = ["A", "B", "C", "D", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "V", "W", "X", "Y", "Z"];
  var vowels = ["A", "E", "I", "O", "U"];
  var newWord = [];
  
  
  
  for(var i=0; i<5; i++){
    
    var randomNumber = Math.floor((Math.random() * 21));
    var randomLetter = consonants[randomNumber];
    newWord.push(randomLetter);
    
}
  for(var i=0; i<2; i++){
    var randomNumber = Math.floor((Math.random() * 5));
    var randomLetter = vowels[randomNumber];
    newWord.push(randomLetter);
  }
  newWord = newWord.join('');
  updatedLetters = document.querySelector('#letters');
​
  // Set the text value of the element to the provided text
  updatedLetters.innerText = newWord;
  //return updatedLetters; 
  //two must be vowels - check that two of the randoms are in the vowels array
  //make counter, run through array using for loop
  //ch 
  //return string
  return newWord;
​
  //make button that runs updateLetters
}
function shuffle(string){
  var newArray = string.split('');
  var currentIndex = newArray.length, temporaryValue, randomIndex;
​
  // While there remain elements to shuffle...
  while (0 !== currentIndex) {
​
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
​
    // And swap it with the current element.
    temporaryValue = newArray[currentIndex];
    newArray[currentIndex] = newArray[randomIndex];
    newArray[randomIndex] = temporaryValue;
  }
  console.log(newArray);
  return newArray.join('');
}
//function to grab newWord and call shuffle
function shuffleLetters(){
  var word = document.querySelector('#letters').innerText;
  document.querySelector("#letters").innerText = shuffle(word);
​
}
</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="title-box">
    <h1>Pseudo-Scrabble!</h1>
    </div>
    <div id="letters" class="big-mono">
      OPMARGR
    </div>
    <div id="main">
    <button onclick="randomLetters()">New Letters</button>
    <button onclick="shuffleLetters()">Shuffle Letters</button>
    <section id="guess-area">
      <input type="text" id="word-guess">
​
      <button onclick="checkGuess()">Guess</button>
​
      <div id="game-message" class="notice">
        Enter your first guess!
        <br/>
        
      </div>
      <img src="https://stream1.gifsoup.com/view5/4366246/nostalgia-chick-scrabble-o.gif"/>
    </section>
    </div>
  </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">@import 'https://fonts.googleapis.com/css?family=Baloo+Chettan';
@import 'https://fonts.googleapis.com/css?family=News+Cycle';
​
.big-mono {
  font-family: monospace;
  font-size: 2em;
}
​
.notice {
  margin-top: 1em;
  font-style: italic;
}
#title-box{
  font-family: "Baloo Chettan";
  /*background-color: #A9C686;*/
  background-image: url("https://img00.deviantart.net/1077/i/2015/093/5/f/scrabble_board_by_alejandro576d-d7gyf2g.png");
  background-repeat: repeat-y;
  background-size: 350px;
  color: white;
  width: 300px;
  height: 50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  
  
}
body{
  background-color: #e6ffe6;
  margin: 0 auto;
  text-align: center;
  font-family:'news cycle';
  
}
img{
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
​
button{
  margin: 5px;
  background-color:#00b3b3;
  color:cornsilk;
  border:none;
  
}
​
​
</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();
​
  // 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) {
      // Show a message saying guess is incorrect
      showMessage("Wrong guess, try again.");
      // 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
  showMessage("Good guess, that is correct!");
  // Return true to exit the function
  return true;
}
​
function updateLetters(){
  var newLetters = "ABCD";
  var updatedLetters = document.querySelector('#letters');
​
  // Set the text value of the element to the provided text
  updatedLetters.innerText = newLetters;
  //return updatedLetters; 
  
}
function randomLetters(){
  //create array of all letters
  var consonants = ["A", "B", "C", "D", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "V", "W", "X", "Y", "Z"];
  var vowels = ["A", "E", "I", "O", "U"];
  var newWord = [];
  
  
  
  for(var i=0; i<5; i++){
    
    var randomNumber = Math.floor((Math.random() * 21));
    var randomLetter = consonants[randomNumber];
    newWord.push(randomLetter);
    
}
  for(var i=0; i<2; i++){
    var randomNumber = Math.floor((Math.random() * 5));
    var randomLetter = vowels[randomNumber];
    newWord.push(randomLetter);
  }
  newWord = newWord.join('');
  updatedLetters = document.querySelector('#letters');
​
  // Set the text value of the element to the provided text
  updatedLetters.innerText = newWord;
  //return updatedLetters; 
  //two must be vowels - check that two of the randoms are in the vowels array
  //make counter, run through array using for loop
  //ch 
  //return string
  return newWord;
​
  //make button that runs updateLetters
}
function shuffle(string){
  var newArray = string.split('');
  var currentIndex = newArray.length, temporaryValue, randomIndex;
​
  // While there remain elements to shuffle...
  while (0 !== currentIndex) {
​
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
​
    // And swap it with the current element.
    temporaryValue = newArray[currentIndex];
    newArray[currentIndex] = newArray[randomIndex];
    newArray[randomIndex] = temporaryValue;
  }
  console.log(newArray);
  return newArray.join('');
}
//function to grab newWord and call shuffle
function shuffleLetters(){
  var word = document.querySelector('#letters').innerText;
  document.querySelector("#letters").innerText = shuffle(word);
​
}
</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>
    