Spaces:
Running
Running
| <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-container { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: 20px; | |
| } | |
| .answer-btn { | |
| margin: 5px; | |
| padding: 10px 15px; | |
| font-size: 18px; | |
| cursor: pointer; | |
| text-align: center; | |
| border: 2px solid #005a9e; | |
| border-radius: 5px; | |
| background-color: #0078D4; | |
| color: #fff; | |
| font-weight: bold; | |
| transition: background-color 0.3s, color 0.3s; | |
| } | |
| .answer-btn:hover { | |
| background-color: #005a9e; | |
| color: #f0f0f0; | |
| } | |
| .answer-btn.disabled { | |
| background-color: #cccccc; | |
| color: #666; | |
| cursor: not-allowed; | |
| } | |
| .feedback { | |
| margin-top: 10px; | |
| font-size: 18px; | |
| font-weight: bold; | |
| } | |
| </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> | |
| </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; | |
| let totalCards = 15; // 5 categories x 3 questions each | |
| let answeredCards = 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]; | |
| const 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> | |
| <div class="answer-container">${answerHtml}</div> | |
| `; | |
| cardElement.classList.add('disabled'); | |
| cardElement.style.backgroundColor = '#cccccc'; | |
| answeredCards++; | |
| } | |
| function checkAnswer(category, difficulty, selectedAnswer) { | |
| const question = questions[category][difficulty]; | |
| const correctAnswer = question.a[question.correct]; | |
| const isCorrect = selectedAnswer === question.correct; | |
| const value = (difficulty + 1) * 100; | |
| // Disable all answer buttons | |
| document.querySelectorAll('.answer-btn').forEach(btn => { | |
| btn.disabled = true; | |
| btn.classList.add('disabled'); | |
| }); | |
| if (isCorrect) { | |
| score += value; | |
| questionDisplay.innerHTML += `<p class="feedback" style="color: green;">Correct! You earned $${value}.</p>`; | |
| } else { | |
| score -= value; | |
| questionDisplay.innerHTML += `<p class="feedback" style="color: red;">Wrong! You lost $${value}. The correct answer was: ${correctAnswer}</p>`; | |
| } | |
| scoreDisplay.textContent = `Score: ${score}`; | |
| if (answeredCards === totalCards) { | |
| endGame(); | |
| } | |
| } | |
| function endGame() { | |
| questionDisplay.innerHTML = `<h2>Game Over!</h2><p>Your final score is $${score}.</p>`; | |
| } | |
| createBoard(); | |
| </script> | |
| </body> | |
| </html> | |