Question

In: Computer Science

Create a HTML file that prompts the user to enter the number of dice (1-5) to...

Create a HTML file that prompts the user to enter the number of dice (1-5) to play with and display exactly as shown below (example run on Chrome). If the user enters a number less than 1, then set the number to 1. If the user enters a number greater than 5, then set it to 5.

Center align elements and use height:200px for dice images.

rollDice.html:  

When user enters a number less than 1


When user enters a number greater than 5

When the user enters a valid number

Continued on the next page ....

When the user clicks on the button ‘Click to Roll’, call a Javascript function ‘roll()’, which selects a die randomly and rolls it (Two random numbers are generated - one for selecting a die, the other to select roll a number from the die). Based on the output, Javascript changes the image of the selected die while displays the message at the bottom as shown below.

You can add a button in HTML that responds to click by calling the function ‘roll()’ as below.



Solutions

Expert Solution

CONSIDERING THE GIVEN PARAMETERS FROM QUESTION WE SHOW FOLLOWING AS:

CREATING A HTML FILE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Roll</title>
<base target="_blank" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class='content-wrapper'>
<div class='container'>
<section class='content'>
<div class='row'>
<div class='col-md-12'>
<div class='box box-body'>
<div class='body-custom'>
<form name='Roll_form' action='' method=''>
<br>
<div class='form-group'>
<center>
<input type='text' class='form-control' id='txt_number' name='txt_number' style='width:100px' />
</center>
</div>
<div class='form-group'>
<center>
<input type='button' class='btn btn-default' id='btn' name='btn' style='' value='Click to roll' onClick='return roll()' />
</center>
</div>
<div id='loader' style='display:hidden'>
<center><img src='' id='img_selected_die' style='height:200px;' /></center>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<script>
function roll()
{
var number = document.getElementById('txt_number').value;
if(isNaN(number) == true)
{
alert('Please Enter a Number');
document.getElementById('txt_number').value = '';
}
else
{
  
if(number < 1)
{
number = 1;
}
else if(number > 5)
{
number = 5;
}
  
document.getElementById('loader').style.display = 'block';
document.getElementById("img_selected_die").src = "./roll_"+number+".PNG";
}
}
  
</script>
</body>
</html>


shutterst Franco Volpatoterseck Shutterstshutterst 2. shuttersto CorrestedFranco Volpato

Explain : Make a folder , Create a index.html page with above code and place these above images in the same folder with roll_1.PNG , roll_2.PNG name respectively .Run the index.html page in google chrome.

PLEASE UPVOTE ITS VERY NECESSARY FOR ME

venereology answered 1 day ago
Next > < Previous

Related Solutions

Use c# Create a program called ResortPrices that prompts the user to enter the number of...
Use c# Create a program called ResortPrices that prompts the user to enter the number of days for a resort stay. Then display the price per night and the total price. Nightly rates are R 500.00 for one or two nights, R 650.00 for three or four nights, R 850.00 for five, six or seven nights, and R 1500.00 for eight nights or more.
Write a program that prompts the user to enter a file name, then opens the file...
Write a program that prompts the user to enter a file name, then opens the file in text mode and reads names. The file contains one name on each line. The program then compares each name with the name that is at the end of the file in a symmetrical position. For example if the file contains 10 names, the name #1 is compared with name #10, name #2 is compared with name #9, and so on. If you find...
Write a program that prompts the user to enter a number within the range of 1...
Write a program that prompts the user to enter a number within the range of 1 to 10 inclusive • The program then generates a random number using the random class: o If the users guess is out of range use a validation loop (DO) to repeat the prompt for a valid number o If the users guess matches the random number tell them they win! o If the users guess does not match the random number tell them they...
Write a program that prompts the user to enter a number within the range of 1...
Write a program that prompts the user to enter a number within the range of 1 to 10 inclusive • The program then generates a random number using the random class: o If the users guess is out of range use a validation loop (DO) to repeat the prompt for a valid number o If the users guess matches the random number tell them they win! o If the users guess does not match the random number tell them they...
IN C++ Write a program that prompts the user to enter the number of students and...
IN C++ Write a program that prompts the user to enter the number of students and each student’s name and score, and finally displays the student with the highest score (display the student’s name and score). Also calculate the average score and indicate by how much the highest score differs from the average. Use a while loop. Sample Output Please enter the number of students: 4 Enter the student name: Ben Simmons Enter the score: 70 Enter the student name:...
C# Create a console application that prompts the user to enter a regular expression, and then...
C# Create a console application that prompts the user to enter a regular expression, and then prompts the user to enter some input and compare the two for a match until the user presses Esc: The default regular expression checks for at least one digit. Enter a regular expression (or press ENTER to use the default): ^[a- z]+$ Enter some input: apples apples matches ^[a-z]+$? True Press ESC to end or any key to try again. Enter a regular expression...
Use a sentinel while loop that repeatedly prompts the user to enter a number, once -1...
Use a sentinel while loop that repeatedly prompts the user to enter a number, once -1 is entered, stop prompting for numbers and display the maximum number entered by the user. I am struggling to have my program print the math function. Here is what I have so far: import java.util.*; public class MaxSentinel { public static void main(String[] args) {    Scanner input = new Scanner(System.in); System.out.println("Please enter a value. Press -1 to stop prompt."); int number = 0;...
Write a function posnum that prompts the user to enter a positive number and loops to...
Write a function posnum that prompts the user to enter a positive number and loops to error-check. It returns the square root of the positive number entered by the user. It calls a subfunction in the loop to print an error message. The subfunction has a persistent variable to count the number of times an error has occurred. Here is an example of calling the function: >> squarerootvalue = posnum Enter a positive number: -5 Error #1: Follow instructions! Does...
In Java: Write a program that prompts the user to enter a positive number until the...
In Java: Write a program that prompts the user to enter a positive number until the user input a negative number. In the end, the program outputs the sum of all the positive numbers. You should use do-while loop (not while, not for). You cannot use break or if statement in the lab. Hint: if the program adds the last negative number to your sum, you can subtract the last number from the sum after the loop.
Write a program that prompts the user to enter the number of students and each student’s...
Write a program that prompts the user to enter the number of students and each student’s name and score, and finally displays the student with the highest score and the student with the second-highest score. Use the next() method in the Scanner class to read a name rather using the nextLine() method. This is my code , but i get this error Enter the number of students: Exception in thread "main" java.util.InputMismatchException    at java.util.Scanner.throwFor(Scanner.java:871)    at java.util.Scanner.next(Scanner.java:1494)    at...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT