I'll create an interactive unit circle activity similar to the one you referenced, optimized for Blogger. This will include trigonometric functions, angle visualization, and interactive controls.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Unit Circle</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.container {
max-width: 1000px;
width: 100%;
background: rgba(0, 0, 0, 0.7);
border-radius: 15px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
margin: 20px 0;
}
h1 {
text-align: center;
margin-bottom: 10px;
font-size: 2.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.subtitle {
text-align: center;
margin-bottom: 30px;
font-size: 1.2rem;
opacity: 0.9;
}
.content {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}
.circle-container {
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
align-items: center;
}
.canvas-container {
position: relative;
width: 300px;
height: 300px;
margin: 20px 0;
}
canvas {
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.controls {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
max-width: 300px;
}
.angle-control {
display: flex;
flex-direction: column;
gap: 10px;
}
.angle-slider {
display: flex;
align-items: center;
gap: 10px;
}
input[type="range"] {
flex: 1;
height: 8px;
-webkit-appearance: none;
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #fdbb2d;
border-radius: 50%;
cursor: pointer;
}
.angle-input {
display: flex;
gap: 10px;
align-items: center;
}
input[type="number"] {
width: 80px;
padding: 8px;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.9);
text-align: center;
font-weight: bold;
}
.info-panel {
flex: 1;
min-width: 300px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
}
.trig-values {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.trig-value {
background: rgba(0, 0, 0, 0.3);
padding: 15px;
border-radius: 8px;
text-align: center;
}
.trig-value .label {
font-size: 1.2rem;
margin-bottom: 5px;
color: #fdbb2d;
}
.trig-value .value {
font-size: 1.5rem;
font-weight: bold;
}
.coordinates {
background: rgba(0, 0, 0, 0.3);
padding: 15px;
border-radius: 8px;
text-align: center;
}
.coordinates .label {
font-size: 1.2rem;
margin-bottom: 5px;
color: #fdbb2d;
}
.coordinates .value {
font-size: 1.5rem;
font-weight: bold;
}
.buttons {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 10px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background: #fdbb2d;
color: #1a2a6c;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
background: #ffcc44;
transform: translateY(-2px);
}
.instructions {
margin-top: 30px;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 10px;
line-height: 1.6;
}
.instructions h2 {
margin-bottom: 10px;
color: #fdbb2d;
}
.instructions ul {
margin-left: 20px;
}
.instructions li {
margin-bottom: 8px;
}
@media (max-width: 768px) {
.content {
flex-direction: column;
align-items: center;
}
.info-panel {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Interactive Unit Circle</h1>
<p class="subtitle">Explore trigonometric functions visually</p>
<div class="content">
<div class="circle-container">
<div class="canvas-container">
<canvas id="unitCircle" width="300" height="300"></canvas>
</div>
<div class="controls">
<div class="angle-control">
<label for="angleSlider">Angle (ΞΈ):</label>
<div class="angle-slider">
<span>0°</span>
<input type="range" id="angleSlider" min="0" max="360" value="45" step="1">
<span>360°</span>
</div>
</div>
<div class="angle-input">
<label for="angleInput">Set Angle:</label>
<input type="number" id="angleInput" min="0" max="360" value="45">
<span>degrees</span>
</div>
<div class="buttons">
<button id="radiansBtn">Show Radians</button>
<button id="resetBtn">Reset</button>
</div>
</div>
</div>
<div class="info-panel">
<div class="trig-values">
<div class="trig-value">
<div class="label">sin(ΞΈ)</div>
<div class="value" id="sinValue">0.707</div>
</div>
<div class="trig-value">
<div class="label">cos(ΞΈ)</div>
<div class="value" id="cosValue">0.707</div>
</div>
<div class="trig-value">
<div class="label">tan(ΞΈ)</div>
<div class="value" id="tanValue">1.000</div>
</div>
<div class="trig-value">
<div class="label">Angle (ΞΈ)</div>
<div class="value" id="angleValue">45°</div>
</div>
</div>
<div class="coordinates">
<div class="label">Coordinates (cos ΞΈ, sin ΞΈ)</div>
<div class="value" id="coordsValue">(0.707, 0.707)</div>
</div>
<div class="angle-input">
<label for="radInput">Angle in Radians:</label>
<input type="number" id="radInput" value="0.785" step="0.001">
<span>radians</span>
</div>
</div>
</div>
<div class="instructions">
<h2>How to Use the Interactive Unit Circle</h2>
<ul>
<li>Drag the slider or type an angle to change the position on the unit circle</li>
<li>Observe how the sine, cosine, and tangent values change with the angle</li>
<li>See the coordinates of the point on the circle (cos ΞΈ, sin ΞΈ)</li>
<li>Switch between degrees and radians using the button</li>
<li>Note that the radius of the unit circle is 1, so coordinates represent trigonometric ratios</li>
</ul>
</div>
</div>
<script>
// Get DOM elements
const canvas = document.getElementById('unitCircle');
const ctx = canvas.getContext('2d');
const angleSlider = document.getElementById('angleSlider');
const angleInput = document.getElementById('angleInput');
const radInput = document.getElementById('radInput');
const radiansBtn = document.getElementById('radiansBtn');
const resetBtn = document.getElementById('resetBtn');
const sinValue = document.getElementById('sinValue');
const cosValue = document.getElementById('cosValue');
const tanValue = document.getElementById('tanValue');
const angleValue = document.getElementById('angleValue');
const coordsValue = document.getElementById('coordsValue');
// Initial values
let angle = 45; // degrees
let isRadians = false;
// Draw the unit circle
function drawUnitCircle() {
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 130;
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw circle
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.strokeStyle = 'white';
ctx.lineWidth = 2;
ctx.stroke();
// Draw axes
ctx.beginPath();
ctx.moveTo(centerX - radius - 10, centerY);
ctx.lineTo(centerX + radius + 10, centerY);
ctx.moveTo(centerX, centerY - radius - 10);
ctx.lineTo(centerX, centerY + radius + 10);
ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
ctx.lineWidth = 1;
ctx.stroke();
// Draw labels
ctx.fillStyle = 'white';
ctx.font = '14px Arial';
ctx.fillText('1', centerX + radius + 5, centerY + 5);
ctx.fillText('-1', centerX - radius - 15, centerY + 5);
ctx.fillText('1', centerX - 10, centerY - radius - 5);
ctx.fillText('-1', centerX - 15, centerY + radius + 15);
ctx.fillText('(1, 0)', centerX + radius - 10, centerY + 20);
ctx.fillText('(0, 1)', centerX - 30, centerY - radius + 5);
ctx.fillText('(-1, 0)', centerX - radius - 30, centerY + 20);
ctx.fillText('(0, -1)', centerX - 30, centerY + radius + 20);
// Calculate point on circle
const rad = angle * Math.PI / 180;
const pointX = centerX + radius * Math.cos(rad);
const pointY = centerY - radius * Math.sin(rad);
// Draw radius line
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(pointX, pointY);
ctx.strokeStyle = '#fdbb2d';
ctx.lineWidth = 2;
ctx.stroke();
// Draw point
ctx.beginPath();
ctx.arc(pointX, pointY, 6, 0, 2 * Math.PI);
ctx.fillStyle = '#fdbb2d';
ctx.fill();
// Draw angle arc
ctx.beginPath();
ctx.arc(centerX, centerY, 30, 0, rad, false);
ctx.strokeStyle = '#fdbb2d';
ctx.lineWidth = 2;
ctx.stroke();
// Draw triangle lines
ctx.beginPath();
ctx.moveTo(pointX, pointY);
ctx.lineTo(pointX, centerY);
ctx.moveTo(pointX, centerY);
ctx.lineTo(centerX, centerY);
ctx.setLineDash([5, 3]);
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
ctx.lineWidth = 1;
ctx.stroke();
ctx.setLineDash([]);
// Draw angle label
ctx.fillStyle = '#fdbb2d';
ctx.font = 'bold 16px Arial';
ctx.fillText(`ΞΈ = ${isRadians ? (rad).toFixed(2) + ' rad' : angle + '°'}`, centerX + 40, centerY - 40);
// Draw coordinates
ctx.fillText(`(${Math.cos(rad).toFixed(3)}, ${Math.sin(rad).toFixed(3)})`, pointX - 40, pointY - 15);
}
// Update display values
function updateValues() {
const rad = angle * Math.PI / 180;
const sinVal = Math.sin(rad);
const cosVal = Math.cos(rad);
const tanVal = Math.tan(rad);
sinValue.textContent = sinVal.toFixed(3);
cosValue.textContent = cosVal.toFixed(3);
// Handle undefined tan values
if (Math.abs(tanVal) > 100) {
tanValue.textContent = "undefined";
} else {
tanValue.textContent = tanVal.toFixed(3);
}
angleValue.textContent = isRadians ? (rad).toFixed(2) + " rad" : angle + "°";
coordsValue.textContent = `(${cosVal.toFixed(3)}, ${sinVal.toFixed(3)})`;
// Update inputs
angleSlider.value = angle;
angleInput.value = angle;
radInput.value = rad.toFixed(3);
}
// Event listeners
angleSlider.addEventListener('input', function() {
angle = parseInt(this.value);
updateValues();
drawUnitCircle();
});
angleInput.addEventListener('change', function() {
angle = parseInt(this.value);
if (angle < 0) angle = 0;
if (angle > 360) angle = 360;
updateValues();
drawUnitCircle();
});
radInput.addEventListener('change', function() {
const rad = parseFloat(this.value);
angle = rad * 180 / Math.PI;
if (angle < 0) angle = 0;
if (angle > 360) angle = 360;
updateValues();
drawUnitCircle();
});
radiansBtn.addEventListener('click', function() {
isRadians = !isRadians;
this.textContent = isRadians ? "Show Degrees" : "Show Radians";
updateValues();
drawUnitCircle();
});
resetBtn.addEventListener('click', function() {
angle = 45;
isRadians = false;
radiansBtn.textContent = "Show Radians";
updateValues();
drawUnitCircle();
});
// Initialize
drawUnitCircle();
updateValues();
</script>
</body>
</html>
```
How to Add This to Your Blogger
1. In your Blogger dashboard, create a new post or edit an existing one
2. Switch to the HTML view (click the "<>" icon in the editor toolbar)
3. Copy and paste the entire HTML code above into the editor
4. Publish or update your post
Features of This Interactive Unit Circle
· Visual representation of the unit circle with angle visualization
· Interactive slider and input fields to change the angle
· Real-time calculation and display of sine, cosine, and tangent values
· Coordinate display for the point on the circle
· Toggle between degrees and radians
· Responsive design that works on both desktop and mobile devices
· Clear instructions for users
The interactive unit circle will help your readers understand trigonometric functions by visualizing how angles correspond to coordinates on the circle and how the trigonometric ratios change as the angle increases.
No comments:
Post a Comment