Hugging Face's logo

Spaces:
ParulPandey
/
Multiplication_Farm_Fun
Running

App Files Community
Pp commited on
Commit
1cf66db
·
verified ·
1 Parent(s): dbdfa02

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +23 -32
index.html CHANGED
@@ -3,48 +3,39 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Multiplication Farm! 🧑‍🌾</title>
 
7
  <link rel="stylesheet" href="style.css">
8
- <link href="https://fonts.googleapis.com/css2?family=Lilita+One&display=swap" rel="stylesheet">
9
  </head>
10
  <body>
11
-
12
- <div id="game-wrapper">
13
-
14
- <h1>Multiplication Farm!</h1>
15
-
16
- <div id="score-area">
17
- Score: <span id="score">0</span> / <span id="total-questions">10</span>
18
  </div>
19
 
20
- <div id="problem-area">
21
- <h2>Time to Plant/Gather!</h2>
22
- <p>Show me this multiplication:</p>
23
- <div id="multiplication-problem">
24
- <span id="num1">?</span> x <span id="num2">?</span> = ?
25
  </div>
26
- </div>
27
 
28
- <div id="feedback-area">
29
- Click the farm plot that matches the problem!
30
  </div>
31
 
32
- <div id="farm-options-area">
33
- <h2>Choose the Correct Farm Plot:</h2>
34
- <div id="field-choices">
35
- <!-- Farm plot options will be dynamically added here by JS -->
36
- <!-- Example of one plot option structure (repeated by JS) -->
37
- <!--
38
- <div class="field-option" data-rows="3" data-cols="4">
39
- <div class="item">🍎</div> <div class="item">🍎</div> <div class="item">🍎</div> <div class="item">🍎</div>
40
- <div class="item">🍎</div> <div class="item">🍎</div> <div class="item">🍎</div> <div class="item">🍎</div>
41
- <div class="item">🍎</div> <div class="item">🍎</div> <div class="item">🍎</div> <div class="item">🍎</div>
42
- </div>
43
- -->
44
- </div>
45
- </div>
46
 
47
- </div> <!-- End of game-wrapper -->
48
 
49
  <script src="script.js"></script>
50
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <!-- Updated Title Here -->
7
+ <title>RotaryDial ☎️</title>
8
  <link rel="stylesheet" href="style.css">
9
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
10
  </head>
11
  <body>
12
+ <div class="phone-body">
13
+ <div class="display-panel">
14
+ <span id="dialed-numbers"></span>
15
+ <button id="call-button" aria-label="Call">📞</button>
 
 
 
16
  </div>
17
 
18
+ <div class="dial-assembly">
19
+ <!-- Rotating Dial Plate -->
20
+ <div id="dial">
21
+ <!-- Holes and Numbers generated here -->
22
+ <div class="dial-center-design"></div>
23
  </div>
 
24
 
25
+ <!-- Finger Stop -->
26
+ <div id="finger-stop"></div>
27
  </div>
28
 
29
+ <button id="clear-button">Clear</button>
30
+
31
+ <!-- Audio Elements -->
32
+ <!-- Sound for the main dial return "whoosh" (optional) -->
33
+ <audio id="dial-return-sound" src="rotary-dial-return.mp3" preload="auto"></audio>
34
+ <!-- Sound for the individual clicks -->
35
+ <audio id="dial-click-sound" src="rotary-click.mp3" preload="auto"></audio>
36
+ <!-- NOTE: You need to provide the actual sound files rotary-dial-return.mp3 and rotary-click.mp3 -->
 
 
 
 
 
 
37
 
38
+ </div>
39
 
40
  <script src="script.js"></script>
41
  </body>