Please help me with this question. I am having trouble understanding what to do. The HTML code is provided in one of the images below as well as the instructions. The client_side.js and the CSS code are provide below Thank you CLIENT; var url = "http://localhost:3000/post"; var myID; var guessWord; function resetGame(){ var myName = prompt("What is your name?") document.getElementById("mistakes").innerHTML = "Wrong Letters: " // request server to start a new game! $.post(url+'?data='+JSON.stringify({ 'name':myName, //client's identity on the server 'action':'generateWord'}), response); } function printGuess(){ //you write code here! //1. Locate the HTML element with ID 'guessarea' //2. Cycle through the 'guessWord' array and write // each character to the 'guessarea' in turn } function makeGuess(){ //ask the server to validate the guess $.post( url+'?data='+JSON.stringify({ 'name':myID, 'action':'evaluate', 'letterGuess':document.hangman.elements["guess"].value, //the user's guess! 'guessWord':guessWord }), response // a function that will be called once the server responds. ); } function response(data, status){ var response = JSON.parse(data); if (response['action'] == 'generateWord'){ //have we asked to generate a word? myID = response['nameID']; var wordLen = response['len'] //TO DO: initialize the guessWord array //1. Create a new Array that contains from for wordLen elements //2. Initialize each element in guessWord to be this: "_ " printGuess(); } else if (response['action'] == 'evaluate'){ //retrieve info from the response //this includes the number of incorrect responses //and the updated state of the guess word var correct = response['correct']; var error_count = response['num_errors']; guessWord = response['attemptWord']; printGuess(); //TO DO: //1. If the letter is NOT correct, we need to add it to the MISTAKES! In this case: //1a. Get the value in the HTML element with the ID "guess" //1b. Add this letter to the letters in the HTML element with the ID "mistakes" //1c. Once you've done this, make sure the HTML element with the ID "guess" is set to contain "" (an empty string) //2. Check to see if you have a winner! //2a. To do this, cycle thru guessWord to see if every element is a LETTER //2b. If yes, you have a winner! In this case, create an alert that reads "You Won!" //2c. Then, call 'resetGame()' to start the game over //3. Check to see if you have a loser! //3a. To do this, check to see if error_count is >= 6 //3b. If yes, you have a loser :(. In this case, create an alert that reads "You Lose!" //3c. Then, call 'resetGame()' to start the game over } } STYLE.CSS @import url(https://fonts.googleapis.com/css?family=Permanent+Marker); body { font-family: Helvetica,Arial,sans-serif; margin: 0px 0px 0px 20px; font-size: 18px; background-color: #94cff3; text-align: center; } input { border: 2px solid #cc0000; font-family: Helvetica, sans-serif; color: #333333; padding: 10px; } #ratefeld { font-family: 'Permanent Marker', 'cursive'; font-size: 2.0em; } h1 { font-family: 'Permanent Marker', 'cursive'; }
Please help me with this question. I am having trouble understanding what to do. The HTML code is provided in one of the images below as well as the instructions. The client_side.js and the CSS code are provide below
Thank you
CLIENT;
var url = "http://localhost:3000/post";
var myID;
var guessWord;
function resetGame(){
var myName = prompt("What is your name?")
document.getElementById("mistakes").innerHTML = "Wrong Letters: "
// request server to start a new game!
$.post(url+'?data='+JSON.stringify({
'name':myName, //client's identity on the server
'action':'generateWord'}),
response);
}
function printGuess(){
//you write code here!
//1. Locate the HTML element with ID 'guessarea'
//2. Cycle through the 'guessWord' array and write
// each character to the 'guessarea' in turn
}
function makeGuess(){
//ask the server to validate the guess
$.post(
url+'?data='+JSON.stringify({
'name':myID,
'action':'evaluate',
'letterGuess':document.hangman.elements["guess"].value, //the user's guess!
'guessWord':guessWord
}),
response // a function that will be called once the server responds.
);
}
function response(data, status){
var response = JSON.parse(data);
if (response['action'] == 'generateWord'){ //have we asked to generate a word?
myID = response['nameID'];
var wordLen = response['len']
//TO DO: initialize the guessWord array
//1. Create a new Array that contains from for wordLen elements
//2. Initialize each element in guessWord to be this: "_ "
printGuess();
} else if (response['action'] == 'evaluate'){
//retrieve info from the response
//this includes the number of incorrect responses
//and the updated state of the guess word
var correct = response['correct'];
var error_count = response['num_errors'];
guessWord = response['attemptWord'];
printGuess();
//TO DO:
//1. If the letter is NOT correct, we need to add it to the MISTAKES! In this case:
//1a. Get the value in the HTML element with the ID "guess"
//1b. Add this letter to the letters in the HTML element with the ID "mistakes"
//1c. Once you've done this, make sure the HTML element with the ID "guess" is set to contain "" (an empty string)
//2. Check to see if you have a winner!
//2a. To do this, cycle thru guessWord to see if every element is a LETTER
//2b. If yes, you have a winner! In this case, create an alert that reads "You Won!"
//2c. Then, call 'resetGame()' to start the game over
//3. Check to see if you have a loser!
//3a. To do this, check to see if error_count is >= 6
//3b. If yes, you have a loser :(. In this case, create an alert that reads "You Lose!"
//3c. Then, call 'resetGame()' to start the game over
}
}
STYLE.CSS
@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);
body {
font-family: Helvetica,Arial,sans-serif;
margin: 0px 0px 0px 20px;
font-size: 18px;
background-color: #94cff3;
text-align: center;
}
input {
border: 2px solid #cc0000;
font-family: Helvetica, sans-serif;
color: #333333;
padding: 10px;
}
#ratefeld {
font-family: 'Permanent Marker', 'cursive';
font-size: 2.0em;
}
h1 {
font-family: 'Permanent Marker', 'cursive';
}
![D. TASKS
1) TASK 1: Client-Side of a Hang-person Game.
2) TASK2: Server-Side of a Hang-person Game
F. Code overview
You've been provided with javascript that is intended to be run both client and server side. We have
provided starter code for you that illustrates how to package queries on the client side and deliver
them to the server. AJAX (short for Asynchronous JavaScript transfer) is a set of web
development techniques that use various web technologies to create asynchronous web applications.
jQuery is a popular javascript library that contains methods to create and interpret AJAX requests.
We will be using these methods to wrap queries from the user, on the client side, and pass these
queries to the server. Our server side javascript will then use jQuery methods to decode queries and
issue responses to the client. Processing responses on the server side can be useful, particularly if
you are seeking to withhold some information (like the answer to a word puzzle) from you client.
G. Task 1 client side
Use html, CSS, and JS to design the client side of the game. We have provided you with a starter
code, which you will eventually connect to a server that you run on your machine (or a lab
machine). You should:
1) Open index.html. You should read the code and comments in the html file. The file contains the
structure of the game board. You will not need to edit this file but you should understand it.
2) Next, in the response function of client_side.js, read the comments and write the code that is
required. This is a function that handles responses from the server. In this function, if the
response['action'] variable is 'generate Word', you should initialize the guessWord array on the
client side. This will be an array with a number of elements equal to the value of wordLen (which
will be given to you by the server). You will then cycle thru the guessWord array you have created
and initialize each element in the array to this string value: "_".
3) If instead the response['action'] variable is 'evaluate', you will need to treat the response from
the server differently. For example, if the server indicates that the user's guess is NOT correct,
you must:
•
Locate the value contained in the HTML element with the ID "guess" (this is a letter)
Add this letter to the set of letters within the HTML element with the ID "mistakes"
Set the value contained in the HTML element with the ID "guess" to an empty string. Note
that you should clear this HTML element even if the guess is correct, so that it is ready to
receive the next guess from the user.
In addition, in this portion of the code, you must determine if the user is a winner or a loser.
• To test if the user is a winner, you should cycle thru the guessWord array to see if every
element is a LETTER (rather than this string value: "_"). If every letter is populated, create
an alert that reads "You Won!". Then, call 'resetGame()' to start the game over from the
beginning.
• To test if the user is a loser, you should see if the error count returned from the server is 6
or more. If yes, create an alert that reads "You Lose!". Then, call 'resetGame()' to start the
game over from the beginning.
4) Finally, open client side.js. In the printGuess function of client side.js, you should read the
comments and write the code that is required. More specifically, you will write code to
retrieve the value within the HTML element with ID 'guessarea'. You will then cycle through the
'guessWord' array and write each character in this array to the 'guessarea' element in your HTML.
If you make the above changes properly, your hangman game will work but it will not produce any
results.](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F3c89ea5d-2102-4b32-bd50-a773918486d8%2Fc1b13e6f-ce02-4794-8098-8a55cb162141%2Fbvrcpmr_processed.png&w=3840&q=75)
Step by step
Solved in 3 steps
