sine waves - made by dia
unknown
html
a month ago
9.9 kB
4
Indexable
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hard Trig Graph Questions</title>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #0f172a;
color: #e5e7eb;
margin: 0;
padding: 0;
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
}
.card {
background: #020617;
border: 1px solid #1f2937;
border-radius: 14px;
padding: 24px 28px;
max-width: 800px;
width: 95%;
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
h1 {
font-size: 26px;
margin: 0 0 8px 0;
color: #f9fafb;
}
.subtitle {
color: #9ca3af;
font-size: 14px;
margin-bottom: 18px;
}
.pill-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
font-size: 13px;
}
.pill {
padding: 4px 10px;
border-radius: 999px;
border: 1px solid #4b5563;
color: #e5e7eb;
cursor: default;
user-select: none;
}
.pill.highlight {
border-color: #38bdf8;
background: rgba(56,189,248,0.15);
color: #e0f2fe;
}
label {
font-size: 13px;
color: #9ca3af;
margin-right: 6px;
}
select {
background: #020617;
color: #e5e7eb;
border-radius: 999px;
border: 1px solid #4b5563;
padding: 4px 10px;
font-size: 13px;
outline: none;
}
button {
margin-top: 16px;
padding: 10px 18px;
border-radius: 999px;
border: none;
background: #38bdf8;
color: #0f172a;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background 0.15s ease, transform 0.05s ease;
}
button:hover {
background: #0ea5e9;
transform: translateY(-1px);
}
button:active {
transform: translateY(0);
}
.question-box {
margin-top: 20px;
padding: 16px 18px;
border-radius: 12px;
background: #020617;
border: 1px solid #1f2937;
}
.question-title {
font-size: 13px;
color: #9ca3af;
margin-bottom: 4px;
}
.question-text {
white-space: pre-line;
font-size: 15px;
line-height: 1.5;
}
.note {
margin-top: 10px;
font-size: 12px;
color: #6b7280;
}
.footer {
margin-top: 18px;
font-size: 11px;
color: #4b5563;
}
</style>
</head>
<body>
<div class="card">
<h1>Hard Trig Graph Questions</h1>
<div class="subtitle">
Solving trigonometric equations graphically (sine-focused), tuned for strong Year 10 level.
</div>
<div class="pill-row">
<div class="pill highlight">Topic: Trig Graphs</div>
<div class="pill">Level: High Year 10 / Pre-IB</div>
<div class="pill">Mode: Graphical Solving</div>
</div>
<div class="pill-row">
<div>
<label for="family">Function family:</label>
<select id="family">
<option value="sine">Sine only</option>
<option value="sin_cos">Sine & cosine</option>
<option value="mixed">Mixed (sin, cos, tan)</option>
</select>
</div>
<div>
<label for="interval">Angle interval:</label>
<select id="interval">
<option value="0_360">0° to 360°</option>
<option value="-360_360">−360° to 360°</option>
<option value="0_720">0° to 720°</option>
</select>
</div>
</div>
<button id="newQuestion">Give me a hard question</button>
<div class="question-box" id="questionBox" style="display:none;">
<div class="question-title" id="questionTitle"></div>
<div class="question-text" id="questionText"></div>
<div class="note">
Work using a careful sketch or graphing tool, and read solutions from the intersections,
not by algebraic tricks.
</div>
</div>
<div class="footer">
All angles in degrees. Questions are designed for graphical methods and exact-value intuition.
</div>
</div>
<script>
const questions = {
sine: [
{
title: "Sine vs shifted sine",
baseIntervals: ["0_360","-360_360"],
text: `On the same axes, sketch y = sin x and y = sin(x − 30°) for the chosen interval.
Use your graph to solve:
sin x = sin(x − 30°)
Explain how the spacing of the intersection points is related to the period of sine and the 30° phase shift.`
},
{
title: "Sine vs vertical shift and stretch",
baseIntervals: ["0_360","-360_360"],
text: `On the same axes, sketch y = sin x and y = 2 sin x − 0.5.
Use your graph to solve:
sin x = 2 sin x − 0.5
1) Estimate all solutions in the chosen interval.
2) Classify each solution according to whether sin x is positive or negative at that point.`
},
{
title: "Sine vs oblique line",
baseIntervals: ["0_360","0_720"],
text: `On the same axes, draw y = sin x and y = x / 270 for the chosen interval.
Use your graph to solve approximately:
sin x = x / 270
Estimate all solutions to the nearest degree and explain why, beyond a certain point, there are no more intersections.`
},
{
title: "Horizontal band intersections",
baseIntervals: ["-360_360","0_720"],
text: `On the same axes, sketch y = sin x, y = 0.6 and y = −0.6 over the chosen interval.
Use your graph to solve:
−0.6 ≤ sin x ≤ 0.6
1) Find all x-values in the interval where this inequality holds.
2) Describe the repeating pattern of these solution intervals if the graph were extended infinitely.`
}
],
sin_cos: [
{
title: "Sine and cosine crossing",
baseIntervals: ["0_360","-360_360"],
text: `On the same axes, draw y = sin x and y = cos x over the chosen interval.
Use your graph to solve:
sin x = cos x
1) List all solutions in the interval.
2) Explain how the symmetry of the graphs helps you predict where the intersections occur, even without plotting every point.`
},
{
title: "Sine vs reflected cosine",
baseIntervals: ["0_360","0_720"],
text: `On the same axes, sketch y = sin x and y = 1 − cos x.
Use your graph to solve:
sin x = 1 − cos x
Explain how you can see from the graph that the number of solutions in one 360° period will repeat in each additional 360° period.`
},
{
title: "Amplitude + phase comparisons",
baseIntervals: ["0_360","-360_360"],
text: `On the same axes, sketch y = sin x and y = 0.8 cos(x − 45°).
Use your graph to solve:
sin x = 0.8 cos(x − 45°)
Estimate solutions to the nearest degree and comment on how changing the 0.8 to 1 would move or change the intersections.`
}
],
mixed: [
{
title: "Sine vs tangent (careful with asymptotes)",
baseIntervals: ["-360_360","0_360"],
text: `On the same axes, sketch y = sin x and y = tan x over the chosen interval.
Do NOT try to draw tan x exactly at its asymptotes; just show the general shape.
Use your graph to solve:
sin x = tan x
1) Ignore any intersections extremely close to the vertical asymptotes of tan x.
2) Estimate the other solutions and explain which x-values must be excluded because tan x is undefined.`
},
{
title: "Equation with both sine and cosine",
baseIntervals: ["0_360","-360_360"],
text: `On the same axes, graph y = sin x and y = 0.5 + cos x.
Use your graph to solve:
sin x = 0.5 + cos x
1) Estimate all solutions in the interval.
2) Explain why the number of intersection points in one full cycle of 360° does not change if you extend the interval.`
},
{
title: "Sine squared vs cosine",
baseIntervals: ["0_360","0_720"],
text: `On the same axes, sketch y = (sin x)² and y = 0.5 + 0.5 cos x over the chosen interval.
Use your graph to solve:
(sin x)² = 0.5 + 0.5 cos x
Treat this as a purely graphical question:
1) Mark all intersection points clearly.
2) Describe how often the two graphs meet in each 360° interval.`
}
]
};
const intervalInfo = {
"0_360": { label: "0° ≤ x ≤ 360°" },
"-360_360": { label: "−360° ≤ x ≤ 360°" },
"0_720": { label: "0° ≤ x ≤ 720°" }
};
function getRandomQuestion(family, intervalKey) {
const pool = questions[family].filter(q => q.baseIntervals.includes(intervalKey));
if (pool.length === 0) return null;
const idx = Math.floor(Math.random() * pool.length);
return pool[idx];
}
const familySelect = document.getElementById("family");
const intervalSelect = document.getElementById("interval");
const btn = document.getElementById("newQuestion");
const box = document.getElementById("questionBox");
const qTitle = document.getElementById("questionTitle");
const qText = document.getElementById("questionText");
btn.addEventListener("click", () => {
const family = familySelect.value;
const intervalKey = intervalSelect.value;
const q = getRandomQuestion(family, intervalKey);
if (!q) {
qTitle.textContent = "No question available for this combination.";
qText.textContent = "Try a different function family or interval.";
box.style.display = "block";
return;
}
qTitle.textContent = `${q.title} — interval ${intervalInfo[intervalKey].label}`;
qText.textContent = q.text.replace(/the chosen interval/g, intervalInfo[intervalKey].label);
box.style.display = "block";
});
</script>
</body>
</html>
Editor is loading...
Leave a Comment