<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Hello, world!</title>
</head>
<body>
<h1>Sequence of Random Ones</h1>
<label for="var1">How many "1"s in a row using dice throws? (e.g. 4):</label>
<input type="number" id="var1" required>
<br>
<label for="var2">How many such events to construct? (e.g. 1000):</label>
<input type="number" id="var2" required>
<br>
<br>
<button id="run">Calculate</button>
<br>
<p id="debug"></p>
<p id="result"></p>
<script>
function sequenceOfOnes() {
let counter = 0;
let total = 0;
let attempts = 0;
// Get user inputs from HTML elements
const targetOneElement = document.getElementById("var1");
const targetEndElement = document.getElementById("var2");
const targetOne = parseFloat(targetOneElement.value);
const targetEnd = parseFloat(targetEndElement.value);
const debugElement = document.getElementById("debug");
const resultElement = document.getElementById("result");
debugElement.textContent = `targetOne: ${targetOne}, targetEnd: ${targetEnd}.`;
while (true) {
const diceRoll = Math.floor(Math.random() * 6) + 1;
if (diceRoll === 1) {
counter++;
if (counter === targetOne) {
total++;
if (total === targetEnd) break;
}
} else {
counter = 0;
attempts++;
}
}
// Display the result in the HTML
debugElement.textContent = ``;
resultElement.textContent = `Total: ${total} in Attempts: ${attempts}. Once every: ${attempts/total}.`;
}
// Attach an event listener to the calculate button
const calculateButton = document.getElementById("run");
calculateButton.addEventListener("click", sequenceOfOnes);
</script>
</body>
</html>