Hugging Face's logo

Spaces:
eaglelandsonce
/
MLS_GenerativeAI_Landscape
Running

App Files Community
eaglelandsonce commited on
Commit
1febfc0
·
verified ·
1 Parent(s): 6773879

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +59 -5
index.html CHANGED
@@ -1,8 +1,8 @@
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>Generative AI Jeopardy</title>
7
  <style>
8
  body {
@@ -24,6 +24,7 @@
24
  margin: 20px 0;
25
  background-color: #000;
26
  border: 4px solid #000;
 
27
  }
28
  .category {
29
  background-color: #005a9e;
@@ -61,6 +62,13 @@
61
  text-align: center;
62
  margin-bottom: 20px;
63
  }
 
 
 
 
 
 
 
64
  #score {
65
  font-size: 24px;
66
  font-weight: bold;
@@ -70,15 +78,18 @@
70
  </head>
71
  <body>
72
  <h1>Generative AI Jeopardy</h1>
73
- <p><strong>Learn More:</strong>
 
74
  <a href="https://olympus.mygreatlearning.com/courses/125919" target="_blank">Generative AI Landscape</a>
75
  </p>
76
  <div id="game-board">
 
77
  <div class="category">Generative AI Fundamentals</div>
78
  <div class="category">Machine Learning & Deep Learning</div>
79
  <div class="category">Foundation Models & Transformers</div>
80
  <div class="category">Vector Embeddings & LLMs</div>
81
  <div class="category">AI Risks & Hallucinations</div>
 
82
  </div>
83
  <div id="question-display"></div>
84
  <div id="score">Score: 0</div>
@@ -118,12 +129,13 @@
118
  { q: "Which is a risk of Generative AI?", a: ["Misinformation", "Better accuracy", "Improved efficiency"], correct: 0 }
119
  ]
120
  ];
 
121
  let score = 0;
122
- let totalCards = 15;
123
- let answeredCards = 0;
124
  const gameBoard = document.getElementById("game-board");
125
  const questionDisplay = document.getElementById("question-display");
126
  const scoreDisplay = document.getElementById("score");
 
 
127
  function createBoard() {
128
  for (let row = 0; row < 3; row++) {
129
  for (let col = 0; col < 5; col++) {
@@ -136,6 +148,48 @@
136
  }
137
  }
138
  createBoard();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
139
  </script>
140
  </body>
141
  </html>
 
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>Generative AI Jeopardy</title>
7
  <style>
8
  body {
 
24
  margin: 20px 0;
25
  background-color: #000;
26
  border: 4px solid #000;
27
+ width: 80%;
28
  }
29
  .category {
30
  background-color: #005a9e;
 
62
  text-align: center;
63
  margin-bottom: 20px;
64
  }
65
+ #question-display button {
66
+ display: block;
67
+ margin: 10px auto;
68
+ padding: 10px 20px;
69
+ font-size: 16px;
70
+ cursor: pointer;
71
+ }
72
  #score {
73
  font-size: 24px;
74
  font-weight: bold;
 
78
  </head>
79
  <body>
80
  <h1>Generative AI Jeopardy</h1>
81
+ <p>
82
+ <strong>Learn More:</strong>
83
  <a href="https://olympus.mygreatlearning.com/courses/125919" target="_blank">Generative AI Landscape</a>
84
  </p>
85
  <div id="game-board">
86
+ <!-- Categories -->
87
  <div class="category">Generative AI Fundamentals</div>
88
  <div class="category">Machine Learning & Deep Learning</div>
89
  <div class="category">Foundation Models & Transformers</div>
90
  <div class="category">Vector Embeddings & LLMs</div>
91
  <div class="category">AI Risks & Hallucinations</div>
92
+ <!-- Cards will be added here -->
93
  </div>
94
  <div id="question-display"></div>
95
  <div id="score">Score: 0</div>
 
129
  { q: "Which is a risk of Generative AI?", a: ["Misinformation", "Better accuracy", "Improved efficiency"], correct: 0 }
130
  ]
131
  ];
132
+
133
  let score = 0;
 
 
134
  const gameBoard = document.getElementById("game-board");
135
  const questionDisplay = document.getElementById("question-display");
136
  const scoreDisplay = document.getElementById("score");
137
+
138
+ // Create cards below the category row (3 rows x 5 columns)
139
  function createBoard() {
140
  for (let row = 0; row < 3; row++) {
141
  for (let col = 0; col < 5; col++) {
 
148
  }
149
  }
150
  createBoard();
151
+
152
+ // Function to display the question and handle answer selection
153
+ function showQuestion(categoryIndex, questionIndex, cardElement) {
154
+ // Prevent clicking the same card twice
155
+ if (cardElement.classList.contains("disabled")) return;
156
+
157
+ // Retrieve the question data
158
+ const questionData = questions[categoryIndex][questionIndex];
159
+
160
+ // Clear previous content
161
+ questionDisplay.innerHTML = "";
162
+
163
+ // Create and display the question text
164
+ const questionText = document.createElement("p");
165
+ questionText.textContent = questionData.q;
166
+ questionDisplay.appendChild(questionText);
167
+
168
+ // Display each answer as a button
169
+ questionData.a.forEach((answer, index) => {
170
+ const btn = document.createElement("button");
171
+ btn.textContent = answer;
172
+ btn.onclick = () => {
173
+ // Check the answer
174
+ if (index === questionData.correct) {
175
+ score += (questionIndex + 1) * 100;
176
+ } else {
177
+ score -= (questionIndex + 1) * 100;
178
+ }
179
+ scoreDisplay.textContent = `Score: ${score}`;
180
+
181
+ // Disable the card so it can't be clicked again
182
+ cardElement.classList.add("disabled");
183
+ cardElement.onclick = null;
184
+
185
+ // Clear the question display after a short delay
186
+ setTimeout(() => {
187
+ questionDisplay.innerHTML = "";
188
+ }, 2000);
189
+ };
190
+ questionDisplay.appendChild(btn);
191
+ });
192
+ }
193
  </script>
194
  </body>
195
  </html>