Spaces:

eaglelandsonce
/

Agentic_Jeopardy

Running

App Files Files Community

eaglelandsonce commited on Dec 23, 2024

Commit

8376c78

verified ·

1 Parent(s): 903193e

Update index.html

Browse files

Files changed (1) hide show

index.html +168 -18

index.html CHANGED Viewed

@@ -1,19 +1,169 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Agentic Workforce Jeopardy</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-color: #f0f0f0;
+            margin: 0;
+        }
+        h1 {
+            color: #0078D4;
+        }
+        #game-board {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            grid-auto-rows: 100px;
+            gap: 2px;
+            margin: 20px 0;
+            background-color: #000;
+            border: 4px solid #000;
+        }
+        .category {
+            background-color: #005a9e;
+            color: #fff;
+            font-weight: bold;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            font-size: 18px;
+            border: 1px solid #000;
+        }
+        .card {
+            background-color: #0078D4;
+            color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 16px;
+            font-weight: bold;
+            cursor: pointer;
+            border: 1px solid #000;
+            text-align: center;
+            transition: background-color 0.3s;
+        }
+        .card:hover {
+            background-color: #005a9e;
+        }
+        .card.disabled {
+            background-color: #cccccc;
+            cursor: default;
+        }
+        #question-display {
+            width: 80%;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        #score {
+            font-size: 24px;
+            font-weight: bold;
+            color: #0078D4;
+        }
+        .answer-btn {
+            margin: 5px;
+            padding: 10px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <h1>Agentic Workforce Jeopardy</h1>
+    <p><strong>Learn More:</strong> <a href="https://www.linkedin.com/pulse/unleashing-power-genai-workforce-michael-lively-bqjqe/" target="_blank">Agentic Workforce</a></p>
+    <div id="game-board">
+        <!-- Categories -->
+        <div class="category">Agentics</div>
+        <div class="category">AI Types</div>
+        <div class="category">LangChain</div>
+        <div class="category">Applications</div>
+        <div class="category">Future Trends</div>
+        <!-- Cards will be dynamically added here -->
+    </div>
+    <div id="question-display"></div>
+    <div id="score">Score: 0</div>
+    <script>
+        const categories = ['Agentics', 'AI Types', 'LangChain', 'Applications', 'Future Trends'];
+        const questions = [
+            [
+                { q: "What is an agent in Generative AI?", a: ["A human assistant", "A specialized AI system", "A cloud service"], correct: 1 },
+                { q: "What company announced the Copilot initiative?", a: ["Google", "Microsoft", "Amazon"], correct: 1 },
+                { q: "Who plans to release one billion agentics into the workforce?", a: ["Elon Musk", "Marc Benioff", "Satya Nadella"], correct: 1 }
+            ],
+            [
+                { q: "What is the first type of AI?", a: ["Artificial Narrow Intelligence", "Artificial General Intelligence", "Artificial Human Intelligence"], correct: 0 },
+                { q: "When is Artificial Human Intelligence (AHI) expected?", a: ["2025", "2030", "2040"], correct: 1 },
+                { q: "What will ASI accomplish?", a: ["Solve all healthcare problems", "Make Nobel discoveries every 2-3 days", "End the need for work"], correct: 1 }
+            ],
+            [
+                { q: "What does LangChain integrate with for database queries?", a: ["Pinecone", "SQL", "Google Drive"], correct: 1 },
+                { q: "Which integration enables social media automation?", a: ["Zapier", "Twitter API", "LangChain"], correct: 1 },
+                { q: "Which tool is used for vector database integration with LangChain?", a: ["Weaviate", "MySQL", "Apache Spark"], correct: 0 }
+            ],
+            [
+                { q: "What can attach to food items to provide interaction?", a: ["An app", "AI devices", "A barcode scanner"], correct: 1 },
+                { q: "What is the purpose of 'Everything Talks'?", a: ["Translate languages", "Interact with data and people", "Analyze patient symptoms"], correct: 1 },
+                { q: "Who is Patient 47 in 'Everything Talks'?", a: ["James", "Loraine", "Anna"], correct: 1 }
+            ],
+            [
+                { q: "What is the universal translator?", a: ["A document editor", "An AI that handles all languages", "A coding assistant"], correct: 1 },
+                { q: "What challenge comes with an explosion in agentics?", a: ["Increased scientific breakthroughs", "Volatility in key areas", "Universal employment"], correct: 1 },
+                { q: "What does AGI aim to revolutionize?", a: ["Knowledge work", "Factory automation", "Online shopping"], correct: 0 }
+            ]
+        ];
+        let score = 0;
+        const gameBoard = document.getElementById('game-board');
+        const questionDisplay = document.getElementById('question-display');
+        const scoreDisplay = document.getElementById('score');
+        function createBoard() {
+            for (let row = 0; row < 3; row++) {
+                for (let col = 0; col < 5; col++) {
+                    const card = document.createElement('div');
+                    card.className = 'card';
+                    card.textContent = `$${(row + 1) * 100}`;
+                    card.onclick = () => showQuestion(col, row, card);
+                    gameBoard.appendChild(card);
+                }
+            }
+        }
+        function showQuestion(category, difficulty, cardElement) {
+            if (cardElement.classList.contains('disabled')) return;
+            const question = questions[category][difficulty];
+            let answerHtml = question.a.map((answer, index) =>
+                `<button class="answer-btn" onclick="checkAnswer(${category}, ${difficulty}, ${index})">${answer}</button>`
+            ).join('');
+            questionDisplay.innerHTML = `
+                <h2>${categories[category]} for $${(difficulty + 1) * 100}</h2>
+                <p>${question.q}</p>
+                ${answerHtml}
+            `;
+            cardElement.classList.add('disabled');
+            cardElement.style.backgroundColor = '#cccccc';
+        }
+        function checkAnswer(category, difficulty, selectedAnswer) {
+            const question = questions[category][difficulty];
+            const isCorrect = selectedAnswer === question.correct;
+            const value = (difficulty + 1) * 100;
+            score += isCorrect ? value : -value;
+            scoreDisplay.textContent = `Score: ${score}`;
+            questionDisplay.innerHTML += `<p>${isCorrect ? 'Correct!' : 'Wrong!'}</p>`;
+        }
+        createBoard();
+    </script>
+</body>
 </html>