Skip to content

Commit bf3b15d

Browse files
jspann21jspann21
committed
Add .gitignore file and implement new clock reading problem page with interactive scratchpad
1 parent 7962bce commit bf3b15d

5 files changed

Lines changed: 459 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# IDE
2+
.idea/
3+
*.iml
4+
.vscode/
5+
6+
# Python
7+
.venv/
8+
venv/
9+
__pycache__/
10+
*.py[cod]
11+
*$py.class
12+
.Python
13+
*.egg-info/
14+
*.egg
15+
16+
# Node (if added later)
17+
node_modules/
18+
19+
# OS
20+
.DS_Store
21+
Thumbs.db
22+
desktop.ini
23+
24+
# Editor backups
25+
*~
26+
*.swp
27+
*.swo

‎index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ <h2 class="topic-title">Time</h2>
5252
<a href="time-problems.html" class="problem-link">
5353
⏰ Telling Time Problems
5454
</a>
55+
<a href="time-read-clock-tickmarks.html" class="problem-link">
56+
⏱️ Read Clock Time (Minute Tick Marks)
57+
</a>
5558
</div>
5659
</div>
5760

‎styles.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,48 @@ h1 {
216216
/* animation: correct 0.5s; */ /* Optional: can use pulse/highlight */
217217
}
218218

219+
.clock-read-layout {
220+
display: flex;
221+
flex-direction: column;
222+
align-items: center;
223+
gap: 20px;
224+
margin: 30px auto;
225+
max-width: 900px;
226+
}
227+
228+
.clock-read-options {
229+
width: 100%;
230+
margin: 0;
231+
padding: 0 20px;
232+
}
233+
234+
.clock-number-static {
235+
cursor: default;
236+
}
237+
238+
.clock-number-static:hover {
239+
background-color: transparent;
240+
}
241+
242+
.clock-tick {
243+
position: absolute;
244+
left: 50%;
245+
top: 6px;
246+
transform-origin: 50% 119px;
247+
background-color: #333;
248+
z-index: 2;
249+
}
250+
251+
.minute-tick {
252+
width: 2px;
253+
height: 8px;
254+
}
255+
256+
.hour-tick {
257+
width: 3px;
258+
height: 14px;
259+
}
260+
219261
/* Navigation */
220262
.navigation {
221263
margin: 30px auto;

‎time-read-clock-tickmarks.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Read Clock Time (Tick Marks)</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="main-content">
11+
<div class="problem-area">
12+
<div class="header-container">
13+
<a href="index.html" class="home-button">🏠 Home</a>
14+
<h1>⏱️ Read Clock Time (Tick Marks)</h1>
15+
<button class="toggle-scratchpad" id="toggle-scratchpad">📝 Open Scratchpad</button>
16+
</div>
17+
<div class="container">
18+
<div class="problem" id="problem-text"></div>
19+
<div class="options" id="options-container"></div>
20+
<div class="navigation">
21+
<button class="nav-button" id="prev-btn">← Previous</button>
22+
<button class="nav-button" id="next-btn">Next →</button>
23+
</div>
24+
</div>
25+
</div>
26+
<div class="scratchpad-area" id="scratchpad-area">
27+
<div class="scratchpad-controls">
28+
<button class="scratchpad-button" id="undo-btn">↩️ Undo</button>
29+
<button class="scratchpad-button" id="redo-btn">↪️ Redo</button>
30+
<button class="scratchpad-button clear" id="clear-btn">🗑️ Clear</button>
31+
<button class="scratchpad-button" id="close-scratchpad">❌ Close</button>
32+
</div>
33+
<canvas class="scratchpad-canvas" id="scratchpad"></canvas>
34+
</div>
35+
</div>
36+
<div class="problem-type">
37+
Clock Reading Problems (Minute Tick Marks)
38+
</div>
39+
<div class="stars" id="stars-container"></div>
40+
<script src="animations.js" type="module" defer></script>
41+
<script src="time-read-clock-tickmarks.js" type="module" defer></script>
42+
</body>
43+
</html>

0 commit comments

Comments
 (0)