turns-00027.parquet:14554
508ba4ef922137b74af2a010degenerate_repetitionAbsentFinal dense release
USER
Offer a way to define a mininum and maximum, Also some presets like coin flip, and dice rolls for RPG.
ASSISTANT
To extend the functionality of the random generator with the ability to define a minimum and maximum number, as well as presets like coin flips and dice rolls for RPG games, you can modify the code as follows:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Random Generator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #f0f0f0;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 400px;
text-align: center;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
select, input, button {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
}
button {
background-color: #007BFF;
color: white;
cursor: pointer;
border: none;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
}
.range {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Enhanced Random Generator</h1>
<select id="optionSelect" onchange="toggleRange()">
<option value="number">Random Number</option>
<option value="coin">Coin Flip</option>
<option value="dice">Dice Roll</option>
<option value="color">Random Color</option>
<option value="animal">Random Animal</option>
</select>
<div class="range" id="rangeInputs">
<input type="number" placeholder="Minimum" id="minNumber">
<input type="number" placeholder="Maximum" id="maxNumber">
</div>
<button onclick="generateRandom()">Generate</button>
<div class="result" id="result"></div>
</div>
<script>
const animals = ["Cat", "Dog", "Elephant", "Giraffe", "Lion"];
const colors = ["Red", "Green", "Blue", "Yellow", "Purple"];
const coin = ["Heads", "Tails"];
const dice = [1, 2, 3, 4, 5, 6];
function toggleRange() {
const selectedOption = document.getElementById('optionSelect').value;
const rangeInputs = document.getElementById('rangeInputs');
if (selectedOption === 'number') {
rangeInputs.style.display = 'block';
} else {
rangeInputs.style.display = 'none';
}
}
function generateRandom() {
const selectedOption = document.getElementById('optionSelect').value;
let result;
if (selectedOption === 'number') {
const min = parseInt(document.getElementById('minNumber').value) || 1;
const max = parseInt(document.getElementById('maxNumber').value) || 100;
if (min < max) {
result = Math.floor(Math.random() * (max - min + 1)) + min;
} else {
result = "Invalid range!";
}
} else if (selectedOption === 'coin') {
result = coin[Math.floor(Math.random() * coin.length)];
} else if (selectedOption === 'dice') {
result = dice[Math.floor(Math.random() * dice.length)];
} else if (selectedOption === 'color') {
result = colors[Math.floor(Math.random() * colors.length)];
} else if (selectedOption === 'animal') {
result = animals[Math.floor(Math.random() * animals.length)];
}
document.getElementById('result').innerText = result;
}
</script>
</body>
</html>
```
### Key Changes:
- **Number Range Selector**: Added two input fields for the minimum and maximum values. They appear only when "Random Number" is selected, allowing the user to specify a range.
- **Predefined Options**: Added options for "Coin Flip" and "Dice Roll," with results pulled from predefined arrays.
- **Toggle Input Visibility**: A JavaScript function `toggleRange()` is used to show or hide the minimum and maximum input fields based on the selected option.
- **Validation**: Includes basic validation to ensure that the minimum is less than the maximum for number generation.
This implementation expands the functionality by introducing both custom number ranges and predefined outcomes, common in simple gaming scenarios like coin flips and dice rolls.