Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 26, 2016 23:58
Show Gist options
  • Save anonymous/da005b9ca67538b545642a950085faa8 to your computer and use it in GitHub Desktop.
Save anonymous/da005b9ca67538b545642a950085faa8 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/nexojuf
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">
body {
background-color: aqua;
padding-top: 150px;
}
.box {
width: 300px;
border: 10px solid black;
padding-top: 25px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 25px;
margin: 25px;
}
.big-mono {
font-family: monospace;
font-size: 2em;
background-color: yellow;
}
.notice {
margin-top: 1em;
font-style: italic;
}
</style>
</head>
<body>
<div class = "box">
<div id="letters" class="big-mono">
OPMARGR
</div>
<section id="guess-area">
<input type="text" id="word-guess">
<button onclick="checkGuess()">Guess</button>
<button onclick="updateLetters()">Update Letters</button>
<div id="game-message" class="notice">
Enter your first guess!
</div>
</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 randomLetters() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var vowels = "AEIOU";
for( var i=0; i < 5; i++ ) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
for( var i=0; i < 2; i++ ) {
text += vowels.charAt(Math.floor(Math.random() * vowels.length));
}
return text;
}
function updateLetters() {
var newLetters = randomLetters();
var update = document.querySelector('#letters');
update.innerHTML = newLetters;
}
function shuffle(updateLetters) {
return arr.sort(function () {
return Math.random() - Math.random()
});
};
</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 class = "box">
<div id="letters" class="big-mono">
OPMARGR
</div>
<section id="guess-area">
<input type="text" id="word-guess">
<button onclick="checkGuess()">Guess</button>
<button onclick="updateLetters()">Update Letters</button>
<div id="game-message" class="notice">
Enter your first guess!
</div>
</section>
</div>
</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">body {
background-color: aqua;
padding-top: 150px;
}
.box {
width: 300px;
border: 10px solid black;
padding-top: 25px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 25px;
margin: 25px;
}
.big-mono {
font-family: monospace;
font-size: 2em;
background-color: yellow;
}
.notice {
margin-top: 1em;
font-style: italic;
}
</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 randomLetters() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var vowels = "AEIOU";
for( var i=0; i < 5; i++ ) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
for( var i=0; i < 2; i++ ) {
text += vowels.charAt(Math.floor(Math.random() * vowels.length));
}
return text;
}
function updateLetters() {
var newLetters = randomLetters();
var update = document.querySelector('#letters');
update.innerHTML = newLetters;
}
function shuffle(updateLetters) {
return arr.sort(function () {
return Math.random() - Math.random()
});
};
</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.nexojuf.css
body {
background-color: aqua;
padding-top: 150px;
}
.box {
width: 300px;
border: 10px solid black;
padding-top: 25px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 25px;
margin: 25px;
}
.big-mono {
font-family: monospace;
font-size: 2em;
background-color: yellow;
}
.notice {
margin-top: 1em;
font-style: italic;
}
Raw
jsbin.nexojuf.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;
}
function randomLetters() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var vowels = "AEIOU";
for( var i=0; i < 5; i++ ) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
for( var i=0; i < 2; i++ ) {
text += vowels.charAt(Math.floor(Math.random() * vowels.length));
}
return text;
}
function updateLetters() {
var newLetters = randomLetters();
var update = document.querySelector('#letters');
update.innerHTML = newLetters;
}
function shuffle(updateLetters) {
return arr.sort(function () {
return Math.random() - Math.random()
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment