Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 26, 2016 23:57
Show Gist options
  • Save anonymous/9fd930631dd4926ecd269003fc36dfd3 to your computer and use it in GitHub Desktop.
Save anonymous/9fd930631dd4926ecd269003fc36dfd3 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/funenep
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;
background-color: green
}
.notice {
margin-top: 1em;
font-style: italic;
}
#ul-button {
background-color: green
}
body {
background-color:pink
}
#shuffle {
background-color: green
}
</style>
</head>
<body>
<div id="letters" class="big-mono">
OPMARGR
</div>
<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!
</div>
</section>
<button onClick="updateLetters()" id="ul-button">Update Letters</button>
<button id="shuffle" onClick="clickShuffle()">Shuffle Letters</button>
<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 = randomLetters();
document.querySelector('#letters').innerText = newLetters;
return newLetters;
}
function randomLetters(){
var cons = "bcdfghjklmnpqrstvwxyz";
var vows = "aeiou"
var text = ""
for(i=0; i < 5; i++){
text += cons.charAt(Math.floor(Math.random() * cons.length));
}
for(i=0; i < 2; i++){
text += vows.charAt(Math.floor(Math.random() * vows.length));
}
return text;
}
function shuffle(word){
var shuffledWord = '';
var charIndex = 0;
word = word.split('');
while(word.length > 0){
charIndex = word.length * Math.random() << 0;
shuffledWord += word[charIndex];
word.splice(charIndex,1);
}
return shuffledWord;
}
function clickShuffle(){
var shuffled = document.querySelector('#letters').innerHTML=shuffle(getLetters());
return shuffled
}
</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">
<input type="text" id="word-guess">
<button onClick="checkGuess()">Guess</button>
<div id="game-message" class="notice">
Enter your first guess!
</div>
</section>
<button onClick="updateLetters()" id="ul-button">Update Letters</button>
<button id="shuffle" onClick="clickShuffle()">Shuffle Letters</button>
</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;
background-color: green
}
.notice {
margin-top: 1em;
font-style: italic;
}
#ul-button {
background-color: green
}
body {
background-color:pink
}
#shuffle {
background-color: green
}
</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 = randomLetters();
document.querySelector('#letters').innerText = newLetters;
return newLetters;
}
function randomLetters(){
var cons = "bcdfghjklmnpqrstvwxyz";
var vows = "aeiou"
var text = ""
for(i=0; i < 5; i++){
text += cons.charAt(Math.floor(Math.random() * cons.length));
}
for(i=0; i < 2; i++){
text += vows.charAt(Math.floor(Math.random() * vows.length));
}
return text;
}
function shuffle(word){
var shuffledWord = '';
var charIndex = 0;
word = word.split('');
while(word.length > 0){
charIndex = word.length * Math.random() << 0;
shuffledWord += word[charIndex];
word.splice(charIndex,1);
}
return shuffledWord;
}
function clickShuffle(){
var shuffled = document.querySelector('#letters').innerHTML=shuffle(getLetters());
return shuffled
}
</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.funenep.css
.big-mono {
font-family: monospace;
font-size: 2em;
background-color: green
}
.notice {
margin-top: 1em;
font-style: italic;
}
#ul-button {
background-color: green
}
body {
background-color:pink
}
#shuffle {
background-color: green
}
Raw
jsbin.funenep.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 updateLetters(){
var newLetters = randomLetters();
document.querySelector('#letters').innerText = newLetters;
return newLetters;
}
function randomLetters(){
var cons = "bcdfghjklmnpqrstvwxyz";
var vows = "aeiou"
var text = ""
for(i=0; i < 5; i++){
text += cons.charAt(Math.floor(Math.random() * cons.length));
}
for(i=0; i < 2; i++){
text += vows.charAt(Math.floor(Math.random() * vows.length));
}
return text;
}
function shuffle(word){
var shuffledWord = '';
var charIndex = 0;
word = word.split('');
while(word.length > 0){
charIndex = word.length * Math.random() << 0;
shuffledWord += word[charIndex];
word.splice(charIndex,1);
}
return shuffledWord;
}
function clickShuffle(){
var shuffled = document.querySelector('#letters').innerHTML=shuffle(getLetters());
return shuffled
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment