Hugging Face's logo

Spaces:
ParulPandey
/
Multiplication_Farm_Fun
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +34 -25
index.html CHANGED
@@ -3,40 +3,49 @@
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>
42
- </html>
 
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
+
8
  <link rel="stylesheet" href="style.css">
9
+ <link href="https://fonts.googleapis.com/css2?family=Lilita+One&display=swap" rel="stylesheet">
10
  </head>
11
  <body>
12
+
13
+ <div id="game-wrapper">
14
+
15
+ <h1>Multiplication Farm!</h1>
16
+
17
+ <div id="score-area">
18
+ Score: <span id="score">0</span> / <span id="total-questions">10</span>
19
  </div>
20
 
21
+ <div id="problem-area">
22
+ <h2>Time to Plant/Gather!</h2>
23
+ <p>Show me this multiplication:</p>
24
+ <div id="multiplication-problem">
25
+ <span id="num1">?</span> x <span id="num2">?</span> = ?
26
  </div>
 
 
 
27
  </div>
28
 
29
+ <div id="feedback-area">
30
+ Click the farm plot that matches the problem!
31
+ </div>
32
 
33
+ <div id="farm-options-area">
34
+ <h2>Choose the Correct Farm Plot:</h2>
35
+ <div id="field-choices">
36
+ <!-- Farm plot options will be dynamically added here by JS -->
37
+ <!-- Example of one plot option structure (repeated by JS) -->
38
+ <!--
39
+ <div class="field-option" data-rows="3" data-cols="4">
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 class="item">🍎</div> <div class="item">🍎</div> <div class="item">🍎</div> <div class="item">🍎</div>
43
+ </div>
44
+ -->
45
+ </div>
46
+ </div>
47
 
48
+ </div> <!-- End of game-wrapper -->
49
 
50
  <script src="script.js"></script>
51
+ </body>