Skip to content

Commit 9be9e7b

Browse files
jspann21jspann21
committed
add page, work towards unifying
1 parent 3090a84 commit 9be9e7b

6 files changed

Lines changed: 352 additions & 698 deletions

‎customary-units-three-numbers.html‎

Lines changed: 3 additions & 248 deletions
Original file line numberDiff line numberDiff line change
@@ -3,254 +3,8 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Customary Units of Length: Three Numbers</title>
7-
<style>
8-
body {
9-
font-family: 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
10-
background-color: #f0f9ff;
11-
margin: 0;
12-
padding: 20px;
13-
display: flex;
14-
flex-direction: column;
15-
align-items: center;
16-
min-height: 100vh;
17-
}
18-
19-
.main-content {
20-
display: flex;
21-
gap: 20px;
22-
align-items: flex-start;
23-
max-width: 1200px;
24-
width: 100%;
25-
margin-bottom: 50px;
26-
position: relative;
27-
}
28-
29-
.problem-area {
30-
flex: 1;
31-
}
32-
33-
.header-container {
34-
display: flex;
35-
justify-content: space-between;
36-
align-items: center;
37-
width: 100%;
38-
margin-bottom: 20px;
39-
}
40-
41-
.home-button {
42-
padding: 8px 15px;
43-
font-size: 16px;
44-
background-color: #2196F3;
45-
color: white;
46-
border: none;
47-
border-radius: 5px;
48-
cursor: pointer;
49-
text-decoration: none;
50-
display: inline-flex;
51-
align-items: center;
52-
}
53-
54-
.home-button:hover {
55-
background-color: #1976D2;
56-
}
57-
58-
.toggle-scratchpad {
59-
padding: 8px 15px;
60-
font-size: 16px;
61-
background-color: #2196F3;
62-
color: white;
63-
border: none;
64-
border-radius: 5px;
65-
cursor: pointer;
66-
margin-left: auto;
67-
}
68-
69-
.toggle-scratchpad:hover {
70-
background-color: #1976D2;
71-
}
72-
73-
.scratchpad-area {
74-
display: none;
75-
width: 350px;
76-
min-height: 550px;
77-
background: white;
78-
border-radius: 15px;
79-
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
80-
padding: 10px;
81-
}
82-
83-
.scratchpad-area.open {
84-
display: block;
85-
}
86-
87-
.scratchpad-controls {
88-
display: flex;
89-
gap: 10px;
90-
margin-bottom: 10px;
91-
justify-content: center;
92-
}
93-
94-
.scratchpad-button {
95-
padding: 8px 15px;
96-
font-size: 16px;
97-
background-color: #4CAF50;
98-
color: white;
99-
border: none;
100-
border-radius: 5px;
101-
cursor: pointer;
102-
display: flex;
103-
align-items: center;
104-
gap: 5px;
105-
}
106-
107-
.scratchpad-button:hover {
108-
background-color: #45a049;
109-
}
110-
111-
.scratchpad-button.clear {
112-
background-color: #ff4444;
113-
}
114-
115-
.scratchpad-button.clear:hover {
116-
background-color: #ff3333;
117-
}
118-
119-
.scratchpad-canvas {
120-
width: 100%;
121-
height: 500px !important;
122-
min-height: 500px;
123-
border: 2px solid #ddd;
124-
border-radius: 8px;
125-
touch-action: none;
126-
cursor: crosshair;
127-
background-color: #fff;
128-
display: block;
129-
}
130-
131-
.problem-type {
132-
position: fixed;
133-
bottom: 0;
134-
left: 0;
135-
right: 0;
136-
background-color: #fff;
137-
padding: 10px;
138-
font-size: 14px;
139-
color: #666;
140-
text-align: center;
141-
border-top: 2px solid #4CAF50;
142-
box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
143-
}
144-
145-
.container {
146-
width: 100%;
147-
text-align: center;
148-
}
149-
150-
.problem {
151-
font-size: 24px;
152-
margin: 20px;
153-
padding: 20px;
154-
background-color: white;
155-
border-radius: 15px;
156-
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
157-
}
158-
159-
.options {
160-
display: grid;
161-
grid-template-columns: repeat(2, 1fr);
162-
gap: 15px;
163-
margin: 20px;
164-
}
165-
166-
.option {
167-
padding: 20px;
168-
font-size: 24px;
169-
background-color: #4CAF50;
170-
color: white;
171-
border: none;
172-
border-radius: 10px;
173-
cursor: pointer;
174-
transition: all 0.3s ease;
175-
}
176-
177-
.option:hover {
178-
transform: scale(1.05);
179-
background-color: #45a049;
180-
}
181-
182-
.option.wrong {
183-
background-color: #ff4444;
184-
animation: shake 0.5s;
185-
}
186-
187-
.option.correct {
188-
background-color: #4CAF50;
189-
animation: correct 0.5s;
190-
}
191-
192-
.navigation {
193-
margin-top: 20px;
194-
}
195-
196-
.nav-button {
197-
padding: 10px 20px;
198-
font-size: 18px;
199-
margin: 0 10px;
200-
background-color: #2196F3;
201-
color: white;
202-
border: none;
203-
border-radius: 5px;
204-
cursor: pointer;
205-
}
206-
207-
.nav-button:hover {
208-
background-color: #1976D2;
209-
}
210-
211-
@keyframes shake {
212-
0%, 100% { transform: translateX(0); }
213-
25% { transform: translateX(-10px); }
214-
75% { transform: translateX(10px); }
215-
}
216-
217-
@keyframes correct {
218-
0% { transform: scale(1); }
219-
50% { transform: scale(1.1); }
220-
100% { transform: scale(1); }
221-
}
222-
223-
.stars {
224-
position: fixed;
225-
width: 100%;
226-
height: 100%;
227-
pointer-events: none;
228-
z-index: 9999;
229-
}
230-
231-
.star {
232-
position: absolute;
233-
color: gold;
234-
font-size: 30px;
235-
animation: star-fall 1s ease-out forwards;
236-
}
237-
238-
@keyframes star-fall {
239-
0% {
240-
transform: translateY(-50px) rotate(0deg);
241-
opacity: 1;
242-
}
243-
100% {
244-
transform: translateY(100vh) rotate(360deg);
245-
opacity: 0;
246-
}
247-
}
248-
249-
h1 {
250-
text-align: center;
251-
margin: 0 auto;
252-
}
253-
</style>
6+
<title>Customary Units of Length - Three Numbers</title>
7+
<link rel="stylesheet" href="styles.css">
2548
</head>
2559
<body>
25610
<div class="main-content">
@@ -288,6 +42,7 @@ <h1>Fun Math Problems! 🎨</h1>
28842
Customary Units of Length: Using 3 One or Two Digit Numbers
28943
</div>
29044
<div class="stars" id="stars-container"></div>
45+
<script src="animations.js"></script>
29146
<script src="customary-units-three-numbers.js"></script>
29247
</body>
29348
</html>

‎customary-units-three-numbers.js‎

Lines changed: 6 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ function generateProblem() {
88

99
// Helper function for unit pluralization
1010
function getUnit(value, unit) {
11+
if (unit === 'foot') {
12+
return value === 1 ? 'foot' : 'feet';
13+
}
1114
return value === 1 ? unit : unit + 's';
1215
}
1316

@@ -406,16 +409,6 @@ function shuffleArray(array) {
406409
return array;
407410
}
408411

409-
function createStar() {
410-
const star = document.createElement('div');
411-
star.className = 'star';
412-
star.textContent = '⭐';
413-
star.style.left = Math.random() * window.innerWidth + 'px';
414-
star.style.fontSize = `${Math.random() * 20 + 20}px`; // Random size between 20-40px
415-
star.style.animationDuration = `${Math.random() * 1.5 + 0.5}s`; // Random duration between 0.5-2s
416-
return star;
417-
}
418-
419412
// Game state
420413
let currentProblem = null;
421414
let currentProblemIndex = 0;
@@ -432,7 +425,6 @@ const problemText = document.getElementById('problem-text');
432425
const optionsContainer = document.getElementById('options-container');
433426
const prevButton = document.getElementById('prev-btn');
434427
const nextButton = document.getElementById('next-btn');
435-
const starsContainer = document.getElementById('stars-container');
436428

437429
// Scratchpad elements
438430
const scratchpadArea = document.getElementById('scratchpad-area');
@@ -470,29 +462,14 @@ function handleOptionClick(option, index) {
470462
const selectedAnswer = parseInt(option.textContent);
471463

472464
if (selectedAnswer === currentProblem.answer) {
473-
option.classList.add('correct');
474-
475-
// Create and animate stars
476-
for (let i = 0; i < 15; i++) {
477-
const star = createStar();
478-
starsContainer.appendChild(star);
479-
setTimeout(() => star.remove(), 2000);
480-
}
481-
482-
// Disable all options temporarily
483-
const options = optionsContainer.getElementsByClassName('option');
484-
Array.from(options).forEach(opt => opt.disabled = true);
485-
486-
// Move to next problem after a delay
487-
setTimeout(() => {
465+
animationSystem.handleCorrectAnswer(option, optionsContainer.getElementsByClassName('option'), () => {
488466
if (currentProblemIndex < totalProblems - 1) {
489467
currentProblemIndex++;
490468
displayProblem();
491469
}
492-
}, 1500);
470+
});
493471
} else {
494-
option.classList.add('wrong');
495-
setTimeout(() => option.classList.remove('wrong'), 500);
472+
animationSystem.handleWrongAnswer(option);
496473
}
497474
}
498475

@@ -529,5 +506,4 @@ nextButton.onclick = () => {
529506
};
530507

531508
// Initialize the first problem
532-
displayProblem();
533509
displayProblem();

0 commit comments

Comments
 (0)