Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 5, 2016 23:05
Show Gist options
  • Save anonymous/010dbb349ea551d33a5be1c9997b509e to your computer and use it in GitHub Desktop.
Save anonymous/010dbb349ea551d33a5be1c9997b509e to your computer and use it in GitHub Desktop.
Download ZIP
Make a Word Make-a-Word challenge for the Learners Guild Enrollment Game: https://learnathon.learnersguild.org/ // source http://jsbin.com/fakiniq/438
Raw
index.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">
<style id="jsbin-css">
.big-mono {
font-family: monospace;
font-size: 2em;
text-align: center;
}
.notice {
margin-top: 1em;
font-style: italic;
text-align: center;
}
.guess-area {
text-align: center;
}
</style>
</head>
<body>
<div id="letters" class="big-mono">
OPMARGR
</div>
<section id="guess-area" class="guess-area">
<input type="text" id="word-guess">
<button onclick="checkGuess()">Guess</button>
<button onclick="shuffle()">Shuffle</button>
<button onclick="randomLetters()">Update</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();
// 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;
}
// Our Code
function updateLetters(passedLetters) {
var newLetters = passedLetters;
letters.innerHTML = newLetters;
}
function randomLetters(){
var con = ["B","C","D","F","G","H","J","K","L","M","N","P","Q","R","S","T","V","W","X","Y","Z"];
var vow = ["A","E","I","O","U"]
var accumLetters = ""
var grabLetter = ""
var randomNumCON;
var randomNumVOW;
for (i = 0; i < 5; i++) {
randomNumCON = Math.floor(Math.random() * 21 + 0);
grabLetter = con[randomNumCON];
accumLetters = accumLetters + grabLetter;
}
for (i = 0; i < 2; i++) {
randomNumVOW = Math.floor(Math.random() * 5 + 0);
grabLetter = vow[randomNumVOW];
accumLetters = accumLetters + grabLetter;
}
updateLetters(accumLetters)
return accumLetters;
}
function shuffle()
</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>
<section id="guess-area" class="guess-area">
<input type="text" id="word-guess">
<button onclick="checkGuess()">Guess</button>
<button onclick="shuffle()">Shuffle</button>
<button onclick="randomLetters()">Update</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://rawgit.com/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;
text-align: center;
}
.notice {
margin-top: 1em;
font-style: italic;
text-align: center;
}
.guess-area {
text-align: center;
}
</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;
}
// Our Code
function updateLetters(passedLetters) {
var newLetters = passedLetters;
letters.innerHTML = newLetters;
}
function randomLetters(){
var con = ["B","C","D","F","G","H","J","K","L","M","N","P","Q","R","S","T","V","W","X","Y","Z"];
var vow = ["A","E","I","O","U"]
var accumLetters = ""
var grabLetter = ""
var randomNumCON;
var randomNumVOW;
for (i = 0; i < 5; i++) {
randomNumCON = Math.floor(Math.random() * 21 + 0);
grabLetter = con[randomNumCON];
accumLetters = accumLetters + grabLetter;
}
for (i = 0; i < 2; i++) {
randomNumVOW = Math.floor(Math.random() * 5 + 0);
grabLetter = vow[randomNumVOW];
accumLetters = accumLetters + grabLetter;
}
updateLetters(accumLetters)
return accumLetters;
}
function shuffle()
</script></body>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="https://rawgit.com/lg-bot/343694d651adedd80dfd458f20869f57/raw/39e5dba5b89cc9f48b9aa8ab6ec6f8bc78e34c03/tests.js"></script>
</html>
Raw
jsbin.fakiniq.css
.big-mono {
font-family: monospace;
font-size: 2em;
text-align: center;
}
.notice {
margin-top: 1em;
font-style: italic;
text-align: center;
}
.guess-area {
text-align: center;
}
Raw
jsbin.fakiniq.js
// 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;
}
// Our Code
function updateLetters(passedLetters) {
var newLetters = passedLetters;
letters.innerHTML = newLetters;
}
function randomLetters(){
var con = ["B","C","D","F","G","H","J","K","L","M","N","P","Q","R","S","T","V","W","X","Y","Z"];
var vow = ["A","E","I","O","U"]
var accumLetters = ""
var grabLetter = ""
var randomNumCON;
var randomNumVOW;
for (i = 0; i < 5; i++) {
randomNumCON = Math.floor(Math.random() * 21 + 0);
grabLetter = con[randomNumCON];
accumLetters = accumLetters + grabLetter;
}
for (i = 0; i < 2; i++) {
randomNumVOW = Math.floor(Math.random() * 5 + 0);
grabLetter = vow[randomNumVOW];
accumLetters = accumLetters + grabLetter;
}
updateLetters(accumLetters)
return accumLetters;
}
function shuffle()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment