Write A JavaScript That Simulates Tossing Of 10 Coins ✓ Solved

Write A Java Script That Simulates The Tossing Of 10 Coins There Sho

Write a JAVA SCRIPT that simulates the tossing of 10 coins. · There should be a separate function flip that takes no arguments and returns false for tails and true for heads and heads and tails are decided based on a random value. · There should be a Toss button. · Let the program toss all the 10 coins each time the user clicks the Toss button. · Display the results in a table that shows for each toss the frequency of Heads and frequency of Tails and the percentage based on the total tosses. · For each of the coin toss, show a picture of all the 10 coins with the correct side (Heads or Tails ) based on the toss result. · Every time you click on the Toss button the frequencies have to be updated in the table and the percentages respectively. · Note: If the program realistically simulates the coin tossing each side of the coin should appear approximately 50%. · Include the two images and as usual the source of the images in comments. · Have an appropriate heading for the page and for the table.

Sample Paper For Above instruction

Write A Java Script That Simulates The Tossing Of 10 Coins There Sho

body {

font-family: Arial, sans-serif;

margin: 20px;

}

h1 {

text-align: center;

}

coinResults {

margin-top: 20px;

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.coin {

width: 50px;

height: 50px;

margin: 2px;

}

table {

width: 70%;

margin: 30px auto;

border-collapse: collapse;

}

th, td {

border: 1px solid #666;

padding: 8px 12px;

text-align: center;

}

th {

background-color: #eee;

}

tossButton {

display: block;

margin: 0 auto;

padding: 10px 20px;

font-size: 16px;

}

Coin Toss Simulation: Tossing 10 Coins

Number of Tosses Heads Count Tails Count Heads Percentage Tails Percentage
0 0 0 0% 0%

// URLs for the images of coins

// Heads image source

const headsImgSrc = "https://example.com/head.png"; // replace with actual image URL

// Tails image source

const tailsImgSrc = "https://example.com/tail.png"; // replace with actual image URL

// Arrays to keep track of total counts

let totalHeads = 0;

let totalTails = 0;

let totalTosses = 0;

// References to table cells to update

const tbody = document.querySelector("#resultsTable tbody");

document.getElementById("tossButton").addEventListener("click", () => {

let currentHeads = 0;

let currentTails = 0;

let coinDiv = document.getElementById("coinResults");

coinDiv.innerHTML = ""; // clear previous coins

const coinsContainer = document.createElement("div");

coinsContainer.id = "coinResults";

// Toss 10 coins

for (let i = 0; i

const result = flip();

if (result) {

currentHeads++;

} else {

currentTails++;

}

// Create image element for each coin

const coinImg = document.createElement("img");

coinImg.className = "coin";

coinImg.src = result ? headsImgSrc : tailsImgSrc;

coinImg.alt = result ? "Heads" : "Tails";

coinsContainer.appendChild(coinImg);

}

// Update the display

document.getElementById("coinResults").replaceWith(coinsContainer);

// Update totals

totalHeads += currentHeads;

totalTails += currentTails;

totalTosses += 1;

// Update table

updateTable();

});

// flip function

function flip() {

// Randomly returns true (heads) or false (tails) with approximately equal probability

return Math.random()

}

function updateTable() {

const row = tbody.rows[0];

row.cells[0].innerText = totalTosses;

row.cells[1].innerText = totalHeads;

row.cells[2].innerText = totalTails;

const headsPercent = ((totalHeads / (totalHeads + totalTails)) * 100).toFixed(2) + "%";

const tailsPercent = ((totalTails / (totalHeads + totalTails)) * 100).toFixed(2) + "%";

row.cells[3].innerText = headsPercent;

row.cells[4].innerText = tailsPercent;

}

Related Assignments