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. In task 2, you will complete the server side code such that you are able to run the server on your computer any time. (This is also what is expected for your project - have a local server file up running and have a client side code talking to the server.)

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. In task 2, you will complete the server side code such that you are able to run the server on your computer any time. (This is also what is expected for your project - have a local server file up running and have a client side code talking to the server.)

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Related questions

Question

Please help me with this. It not working. Instructions are providede below in the image:

Code:

var url = "http://localhost:3000/post"; // You will run a server on your machine!

var myID; // My ID on the server

var guessWord;

Start a new game

function resetGame() {

var myName = prompt("What is your name?");

// Reset the count of incorrect letters

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

);

}

Print the current guess to the HTML

function printGuess() {

var guessWordDisplay = ""; // Variable to store the display of the guess word

// 1. Locate the HTML element with ID 'guessarea'

var guessArea = document.getElementById('guessarea');

// 2. Cycle through the 'guessWord' array and write each character to the 'guessarea' in turn

for (var i = 0; i < guessWord.length; i++) {

guessWordDisplay += guessWord[i] + " "; // Add each character to the display with a space

}

// Set the text content of the 'guessarea' to the constructed display string

guessArea.textContent = guessWordDisplay;

}

Checks if the letter provided by the user

matches one or more of the letters in the word

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.

);

}

Handle server's response.

Input:

-- data, a JSON formatted string from the server

-- status, the status of the response (e.g. success or failure)

function response(data, status) {

var response = JSON.parse(data);

if (response['action'] == 'generateWord') { // Have we asked to generate a word?

// Retrieve info from the response

// This includes the word length and user ID

myID = response['nameID']; // Store our ID on the server

var wordLen = response['len']; // Length of the word

// Initialize the guessWord array

guessWord = Array(wordLen).fill("_ ");

printGuess(); // Print the current guess to the HTML

} 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']; // Update the guessWord

printGuess(); // Print out the guess

// If the letter is NOT correct, we need to add it to the MISTAKES!

if (!correct) {

var wrongGuess = document.getElementById("guess").value; // Get the incorrect letter

document.getElementById("mistakes").textContent += wrongGuess + " "; // Add it to the mistakes area

document.getElementById("guess").value = ""; // Clear the guess input

}

// Check if every element is a letter to determine if the user is a winner

var isWinner = guessWord.every(function(character) {

return character !== "_ ";

});

// Check if the user is a winner

if (isWinner) {

alert("You Won!");

resetGame();

}

// Check if the user is a loser

if (error_count >= 6) {

alert("You Lose!");

resetGame();

}

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.
In task 2, you will complete the server side code such that you are able to run the server on your
computer any time. (This is also what is expected for your project - have a local server file up running
and have a client side code talking to the server.)

Expert Solution

Step by step

Solved in 2 steps

SEE SOLUTION Check out a sample Q&A here