Hugging Face's logo

Spaces:
eaglelandsonce
/
AI_Big_Small_Fact_or_Fiction
Running

App Files Community
eaglelandsonce commited on
Commit
2342027
·
verified ·
1 Parent(s): 3633c66

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +104 -18
index.html CHANGED
@@ -1,19 +1,105 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>AI Big or Small Fact or Fiction</title>
6
+ <link rel="preconnect" href="https://fonts.gstatic.com" />
7
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet">
8
+ <style>
9
+ body {
10
+ font-family: 'Poppins', sans-serif;
11
+ background: linear-gradient(120deg, #ade0f4, #f2cfff);
12
+ height: 100vh;
13
+ display: flex;
14
+ flex-direction: column;
15
+ align-items: center;
16
+ justify-content: center;
17
+ padding: 20px;
18
+ }
19
+ #game-container {
20
+ background: #ffffffcc;
21
+ width: 90%;
22
+ max-width: 600px;
23
+ padding: 2rem;
24
+ border-radius: 12px;
25
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
26
+ text-align: center;
27
+ }
28
+ button {
29
+ margin: 0.5rem;
30
+ padding: 0.75rem 1.5rem;
31
+ font-size: 1rem;
32
+ cursor: pointer;
33
+ border: none;
34
+ border-radius: 8px;
35
+ background-color: #3498db;
36
+ color: #fff;
37
+ }
38
+ </style>
39
+ </head>
40
+ <body>
41
+ <div id="game-container">
42
+ <h1>AI Big or Small Fact or Fiction</h1>
43
+ <div id="statement">Loading...</div>
44
+ <button onclick="checkAnswer(true)">Fact</button>
45
+ <button onclick="checkAnswer(false)">Fiction</button>
46
+ <div id="result"></div>
47
+ <button id="next" onclick="nextStatement()" style="display:none;">Next</button>
48
+ <div id="score"></div>
49
+ </div>
50
+
51
+ <script>
52
+ const statements = [
53
+ {text: "Small-scale AI projects usually deal with minimal inconsistency in data sources.", isFact: true, explanation: "Fact! Small projects typically handle fewer data sources, reducing complexity."},
54
+ {text: "Large-scale AI projects have manageable storage needs.", isFact: false, explanation: "Fiction! Large-scale projects face significant storage, processing, and latency challenges."},
55
+ {text: "Integration issues are minimal in large-scale AI projects.", isFact: false, explanation: "Fiction! Integration can be very complex due to frequent schema mismatches and synchronization issues."},
56
+ {text: "Model complexity in small-scale AI projects is usually limited.", isFact: true, explanation: "Fact! Small projects generally involve simpler models with fewer requirements."},
57
+ {text: "Infrastructure scalability is usually not an issue in large-scale AI projects.", isFact: false, explanation: "Fiction! Scalability is a significant challenge in large-scale AI."},
58
+ {text: "Small-scale AI projects typically use advanced automated version control.", isFact: false, explanation: "Fiction! Small projects often have basic manual version control with infrequent deployments."},
59
+ {text: "Large-scale AI projects often require complex monitoring for drift and bias.", isFact: true, explanation: "Fact! Large-scale deployments require robust monitoring systems to detect and handle issues like drift and bias."},
60
+ {text: "Small AI teams typically handle end-to-end processes.", isFact: true, explanation: "Fact! Smaller teams usually manage the entire AI lifecycle themselves."},
61
+ {text: "Cost management in large-scale AI projects is usually simple and predictable.", isFact: false, explanation: "Fiction! Cost management in large-scale AI involves many stakeholders and is more complex."},
62
+ {text: "Risk exposure is higher in large-scale AI projects due to factors like downtime and data breaches.", isFact: true, explanation: "Fact! Larger AI projects face significant risks such as data breaches and scalability issues."}
63
+ ];
64
+
65
+ let currentStatement = 0;
66
+ let score = 0;
67
+
68
+ function shuffleArray(array) {
69
+ return array.sort(() => Math.random() - 0.5);
70
+ }
71
+
72
+ function loadStatement() {
73
+ document.getElementById("result").innerText = '';
74
+ document.getElementById("next").style.display = 'none';
75
+ document.getElementById("statement").innerText = statements[currentStatement].text;
76
+ document.getElementById("score").innerText = `Score: ${score}/${statements.length}`;
77
+ }
78
+
79
+ function checkAnswer(guess) {
80
+ const correct = statements[currentStatement].isFact;
81
+ if (guess === correct) {
82
+ document.getElementById("result").innerText = "Correct! " + statements[currentStatement].explanation;
83
+ score++;
84
+ } else {
85
+ document.getElementById("result").innerText = "Incorrect! " + statements[currentStatement].explanation;
86
+ }
87
+ document.getElementById("next").style.display = 'inline-block';
88
+ }
89
+
90
+ function nextStatement() {
91
+ currentStatement++;
92
+ if (currentStatement < statements.length) {
93
+ loadStatement();
94
+ } else {
95
+ document.getElementById("statement").innerText = `Game Over! Your final score: ${score}/${statements.length}`;
96
+ document.getElementById("next").style.display = 'none';
97
+ document.getElementById("result").innerText = "";
98
+ }
99
+ }
100
+
101
+ statements.sort(() => Math.random() - 0.5);
102
+ loadStatement();
103
+ </script>
104
+ </body>
105
  </html>