Google Sites
AI made interactive resources
Example: Math investigation resource made by Chat GPT
A sly monkey says to you let's play a game:
we'll take turns to roll two dice
if both dice total 7, I get a point
if they total 2 OR 12, you get a point
the first to get 5 points wins!
Should you play the game?
Let's run some simulations to find out.
Click the ''Roll Dice" button below to run simulations of the game.
Chat GPT prompts
This gave a fully working activity that looked good. I embedded it into a site and tested it before asking for the following amendments...
This gave the version shown above which is more than good enough to make a great resource for an interesting investigation. You could ask for more refinements from Chat GPT or, with a little knowledge, edit the code to change font sizes and colors etc.
Here is the final code made by Chat GPT:
<!DOCTYPE html>
<html>
<head>
<title>Dice Roller</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
#diceValues {
font-size: 24px;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Dice Roller</h1>
<button id="rollButton">Roll Dice</button>
<button id="resetButton">Reset</button>
<div id="diceValues"></div>
<div id="clickCount">Click Count: 0</div>
<canvas id="chart"></canvas>
<script>
var clickCount = 0; // Track the number of clicks
// Initialize the chart
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: Array.from({ length: 11 }, (_, i) => (i + 2).toString()), // Labels for totals 2 to 12
datasets: [{
label: 'Frequency',
data: Array(11).fill(0), // Initialize all frequencies to 0
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
// Function to update the chart data
function updateChart(total) {
chart.data.datasets[0].data[total - 2]++;
chart.update();
}
// Function to roll the dice and update the chart
document.getElementById('rollButton').addEventListener('click', function () {
clickCount++;
document.getElementById('clickCount').textContent = `Click Count: ${clickCount}`;
var die1 = Math.floor(Math.random() * 6) + 1;
var die2 = Math.floor(Math.random() * 6) + 1;
var total = die1 + die2;
// Display the dice values
document.getElementById('diceValues').textContent = `Dice 1: ${die1}, Dice 2: ${die2}`;
updateChart(total);
});
// Function to reset the chart and click count
document.getElementById('resetButton').addEventListener('click', function () {
clickCount = 0;
document.getElementById('clickCount').textContent = `Click Count: ${clickCount}`;
chart.data.datasets[0].data = Array(11).fill(0); // Reset chart data
chart.update();
document.getElementById('diceValues').textContent = ''; // Clear dice values
});
</script>
</body>
</html>