Question

In: Computer Science

using xsd, Create a number guessing game You would need an input box and buttons Ask...

using xsd, Create a number guessing game

You would need an input box and buttons

Ask the user for a number

Produce a random number from 1-50

Do the comparison

a. Make sure to provide hints back to the user if the number enter is low or high

-this element should be automatically added

b. Clear the value enter in the text

c. Give them 3 tries

Whether the user wins or loses, display all the guesses along with the actual number with

congrats or try again message

-after the message, allow them to play again

Expert Solution

<!DOCTYPE html>
<html>
<head>
    <title>Guess The Number</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js"></script>
</head>
<body class="text-center">
    <nav class="navbar navbar-dark bg-dark">
        <!-- Navbar content -->
        <a class="navbar-brand" href="#">Guess The Number</a>
    </nav>
    <main>
        <h1 class="banner p-3">Can u guess the number that computer has selected?</h1>
        <div class="form-group ">
            <input id="number-guess" class="form-control form-control-lg" type="number" placeholder="What's your guess?">
        </div>
        <div id="result">
            <!-- This is where the result will be-->
        </div>
        <button type="button" id="number-submit" class="btn btn-lg btn-secondary">Check Me</button>
        <button type="button" id="restart-game" class="btn btn-lg btn-light">Restart</button>
        <div id="history">
            <!-- This is where the guess history will be-->
        </div>
    </main>
</body>
</html>

style.css

#number-guess, #result, #history {
    max-width: 400px;
    margin: 0 auto;
}

#history {
    margin-top: 16px;
}
  
.banner {
    color:#070d4f;
    font-size: 30px;
    font-family: sans-serif;
}

script.js

/**
 * Guess The Number Game
 */

// Variable to store the list of guesses
let guesses;
// Variable for store the correct random number
let correctNumber;

window.onload = function () {
  initGame();
  document.getElementById("number-submit").addEventListener("click", playGame);
  document.getElementById("restart-game").addEventListener("click", initGame);
};

function playGame() {
  let numberGuess = document.getElementById("number-guess").value;
  saveGuessHistory(numberGuess);
  displayHistory();
  displayResult(numberGuess);
}

// Initialize a new game by resetting all values and content on the page
function initGame() {
  correctNumber = getRandomNumber();
  guesses = [];
  displayHistory();
  resetResultContent();
}

// Reset the results list display
function resetResultContent() {
  document.getElementById("result").innerHTML = "";
}

// Return random number between 1 and 100
function getRandomNumber() {
  /**
   * Math.random returns a number between 0 and 1,
   * and that's why we multiply it by 50
   */
  return Math.floor(Math.random() * 50 + 1);
}

// Save the user guess entered from the input
function saveGuessHistory(guess) {
  guesses.push(guess);
}

// Display history in HTML
function displayHistory() {
  let index = guesses.length - 1;
  let list = "<ul class='list-group'>";
  while (index >= 0) {
    list +=
      "<li class='list-group-item'>" +
      "You guessed " +
      guesses[index] +
      "</li>";
    index -= 1;
  }
  list += "</ul>";
  document.getElementById("history").innerHTML = list;
}

// Display the result in HTML
function displayResult(numberGuess) {
  if (numberGuess > correctNumber) {
    showNumberAbove();
  } else if (numberGuess < correctNumber) {
    showNumberBelow();
  } else {
    showYouWon();
  }
}

// Retrieve the dialog based on if the guess is wrong or correct
function getDialog(dialogType, text) {
  let dialog;
  switch (dialogType) {
    case "warning":
      dialog = "<div class='alert alert-warning' role='alert'>";
      break;
    case "won":
      dialog = "<div class='alert alert-success' role='alert'>";
      break;
  }
  dialog += text;
  dialog += "</div>";
  return dialog;
}

function showYouWon() {
  const text = "Awesome job, you got it!";
  let dialog = getDialog("won", text);
  document.getElementById("result").innerHTML = dialog;
}

function showNumberAbove() {
  const text = "Your guess is too high!";
  let dialog = getDialog("warning", text);
  document.getElementById("result").innerHTML = dialog;
}

function showNumberBelow() {
  const text = "Your guess is too low!";
  let dialog = getDialog("warning", text);
  document.getElementById("result").innerHTML = dialog;
}

venereology answered 2 years ago

using xml, Create a number guessing game You would need an input box and buttons Ask...

using xml, Create a number guessing game You would need an input box and buttons Ask the user for a number Produce a random number from 1-50 Do the comparison a. Make sure to provide hints back to the user if the number enter is low or high -this element should be automatically added b. Clear the value enter in the text c. Give them 3 tries Whether the user wins or loses, display all the...

guessing game in Java. It will have a guess input used for guessing the random number...

guessing game in Java. It will have a guess input used for guessing the random number that is generated from 1 - 100. When the user makes a guess it will tell them if the number is lower or higher than the guess. There is also a choice to give up which then reveals the correct number. The last choice will be new game which resets the random number. Last, the program should keep counts of tries. When the user...

Python: You will modify the given code to create a guessing game that takes user input...

Python: You will modify the given code to create a guessing game that takes user input and allows you to make multiple guesses. There should also be a loop Use the following attached Sample Code as a guide. There are mistakes in the code!!! #Guessing Game import random number=random.randint(1, another number) print("Hello, CIS 101") print("Let's play a guessing Game!called guess my number.") print("The rules are: ") print("I think of a number and you'll have to guess it.") guess = random.randint(1,...

Java guessing game: For this program you will use Linear Search. - Ask the user to...

Java guessing game: For this program you will use Linear Search. - Ask the user to choose between a number from 0 to 2000. - The user will guess how long the linear search will take in nanoseconds, - After the user puts in their answer, show the user the difference between the actual answer and their answer. (Example: The user puts in 5 nanoseconds. The actual time is 11 nanoseconds. The program will show 6 nanoseconds.) There should be...

1. [100] Create a C program for a number guessing game. Here are the requirements: a....

1. [100] Create a C program for a number guessing game. Here are the requirements: a. Your program generates a random number between -100 and 100 and keeps asking the user to guess the number until the user guesses it correctly. Your random number generator should be implemented as a C function which takes min and max values as input parameters and returns a random number between those values including the min and the max. b. If the user guesses...

Part1. Create a number guessing game in Python. Randomly generate a number from 1 to 10....

Part1. Create a number guessing game in Python. Randomly generate a number from 1 to 10. Have the user guess the number. If it is too high, tell the user to guess lower - it it is too low, tell the user to guess higher. Continue until she guesses the correct number. - Part 2. Allow the user to play a new game after they have guessed correctly. Part 3. Ask for a different name and keep track of how...

in java Create simple number guessing game as follows. First, prompt the user to enter a...

in java Create simple number guessing game as follows. First, prompt the user to enter a min and max value. In your code, declare and assign a variable with a random integer in this range (inclusive). Then, ask the user to guess the number. Input the user's guess. And at the end output "Correct!" if the user's guess was right on spot, or "Sorry, the answer is not corrcet.” The number I was looking for was xxx. Replace xxx with...

Using pseudocode design a number guessing game program. The program should generate a random number and...

Using pseudocode design a number guessing game program. The program should generate a random number and then ask the user to guess the number. Each time the user enters his or her guess, the program should indicate it was too high or too low. The game is over when the user correctly guesses the number. When the game ends, the program should display the number of guesses that the user made.

Project 5-3: Guessing Game Create an application that lets a user guess a number between 1...

Project 5-3: Guessing Game Create an application that lets a user guess a number between 1 and 100. Console Welcome to the Guess the Number Game ++++++++++++++++++++++++++++++++++++ I'm thinking of a number from 1 to 100. Try to guess it. Enter number: 50 You got it in 1 tries. Great work! You are a mathematical wizard. Try again? (y/n): y I'm thinking of a number from 1 to 100. Try to guess it. Enter number: 50 Way too high! Guess...

Part (a) Write a number guessing game using System.Collections.Generic.Dictionary. Generate 10 distinct random numbers in the...

Part (a) Write a number guessing game using System.Collections.Generic.Dictionary. Generate 10 distinct random numbers in the range of 1 to 20. Each random number is associated with a prize money (from 1 to 10000). Use a Dictionary to store the mapping between the random number and the prize money. Ask user for two distinct numbers, a and b, both from 1 to 20; if a and b are not distinct, or out of range, quit the program Lookup the prize...