Design and implement a Web page named esp.html that allows the users to conduct
ID: 3731019 • Letter: D
Question
Design and implement a Web page named esp.html that allows the users to conduct an ESP test. Your page should look something like the one below. The rectangle containing a question mark represents the back of a card that is associated with a particular shape. After contemplating which shape appears on the front of the card, the user clicks the button corresponding to the shape he or she believes is on the card (here, four possibilities are assumed). After each guess, the question mark should be replaced by a randomly selected shape, and an alert box should notify the user as to whether the guess was correct. Statistics concerning the number and percetnage of correct guesses should be maintained in text spans. After the statistics have been updated and the alert box has been closed, the page should restore the question-mark image, enabling the user to enter another guess. Although you can create your own images for the cards, you can also use the images provided for you in the http://balance3e.com/Images directory. This directory contains images of four shapes -- square.gif, triangle.gif, circle.gif, and star.gif -- as well as mystery.gif, which displays the question mark. Please keep javascript in separate file.
ESP Test Measure your Extrasensory Perception The card below hides the image of a square, triangle, circle or star. Concentrate on the hidden image, then click on the corresponding button to make your guess. Statistics showing the number and percentage of correct guesses will be calculated. Circle Square Star Triangle You have guessed correctly 0 out of 0 time(s). This means you were correct 0% of the time.Explanation / Answer
index.html
<!DOCTYPE html>
<html>
<head>
<title>ESP Test</title>
</head>
<body>
<h1>ESP Test</h1>
<h3>Measure your Extrasensory Perception</h3>
<p>The card below hides the image of a square, triangle, circle or start. Concentrate on the hidden image, then click on the corresponding button to make your guess.</p>
<p>Statistics showing the number and percentage of correct guesses will be calculated.</p>
<hr />
<div>
<button>Circle</button>
<button>Square</button>
<button>Star</button>
<button>Triangle</button>
</div>
<div>
<img src="http://balance3e.com/Images/mystery.gif" width="200px" height="200px" id="rand_img"/>
</div>
<div>
<p>You have guessed correctly <span id="tries_correct">0</span> out of <span id="tries">0</span> times(s).</p>
<p>This means you were correct <span id="tries_perc">0</span> % of the time.</p>
</div>
</body>
<script type="text/javascript" src="scripts.js"> </script>
</html>
scripts.js
var images = ["square.gif", "triangle.gif", "circle.gif", "star.gif"];
var rand_shape = Math.floor((Math.random() * 4));
var total_tries = 0;
var correct = 0;
function guessed(id) {
total_tries++;
document.getElementById("rand_img").setAttribute("src", "http://balance3e.com/Images/" + images[rand_shape]);
if (id == rand_shape) {
alert("You guessed Correct!!!");
correct++;
}
else
alert("Bad Luck!!! Try once again...");
document.getElementById("tries").innerText = total_tries;
document.getElementById("tries_correct").innerText = correct;
document.getElementById("tries_perc").innerText = Math.round((correct / total_tries) * 100, 2);
rand_shape = Math.floor((Math.random() * 4));
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.