Spaces:
Running
Running
File size: 7,112 Bytes
8376c78 903193e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 |
<!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>
|