|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>Generative AI 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; |
|
|
width: 80%; |
|
|
} |
|
|
.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; |
|
|
} |
|
|
#question-display button { |
|
|
display: block; |
|
|
margin: 10px auto; |
|
|
padding: 10px 20px; |
|
|
font-size: 16px; |
|
|
cursor: pointer; |
|
|
} |
|
|
#score { |
|
|
font-size: 24px; |
|
|
font-weight: bold; |
|
|
color: #0078D4; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Generative AI Jeopardy</h1> |
|
|
<p> |
|
|
<strong>Learn More:</strong> |
|
|
<a href="https://olympus.mygreatlearning.com/courses/125919" target="_blank">Generative AI Landscape</a> |
|
|
</p> |
|
|
<div id="game-board"> |
|
|
|
|
|
<div class="category">Generative AI Fundamentals</div> |
|
|
<div class="category">Machine Learning & Deep Learning</div> |
|
|
<div class="category">Foundation Models & Transformers</div> |
|
|
<div class="category">Vector Embeddings & LLMs</div> |
|
|
<div class="category">AI Risks & Hallucinations</div> |
|
|
</div> |
|
|
<div id="question-display"></div> |
|
|
<div id="score">Score: 0</div> |
|
|
|
|
|
<script> |
|
|
const questions = [ |
|
|
[ |
|
|
{ q: "What is Generative AI?", a: ["AI that creates new data similar to training data", "A rule-based expert system", "A basic search algorithm"], correct: 0 }, |
|
|
{ q: "Which area of AI does Generative AI belong to?", a: ["Symbolic AI", "Deep Learning", "Database Management"], correct: 1 }, |
|
|
{ q: "What problem does Generative AI solve?", a: ["Sorting algorithms", "Data compression", "Inverse problem of classification"], correct: 2 } |
|
|
], |
|
|
[ |
|
|
{ q: "What is the primary difference between Discriminative and Generative models?", a: ["Discriminative models generate new data", "They are identical", "Generative models learn data distribution"], correct: 2 }, |
|
|
{ q: "Which is NOT an example of a foundation model?", a: ["GPT-4", "BERT", "Linear Regression"], correct: 2 }, |
|
|
{ q: "Which ML technique is used to train Generative AI?", a: ["Linear Regression", "Unsupervised Learning", "Supervised Learning"], correct: 2 } |
|
|
], |
|
|
[ |
|
|
{ q: "What key technology underpins Transformer models?", a: ["Markov Chains", "Decision Trees", "Attention Mechanism"], correct: 2 }, |
|
|
{ q: "Which company introduced the Transformer architecture?", a: ["Microsoft", "OpenAI", "Google"], correct: 2 }, |
|
|
{ q: "What makes Transformer models scalable?", a: ["More CPU cores", "Sequential execution", "Parallelization"], correct: 2 } |
|
|
], |
|
|
[ |
|
|
{ q: "What are vector embeddings used for?", a: ["Sorting files", "Representing words numerically", "Data encryption"], correct: 1 }, |
|
|
{ q: "Which method is used to store vector embeddings?", a: ["Excel Sheets", "Vector Databases", "Data Frames"], correct: 1 }, |
|
|
{ q: "Which AI model uses vector embeddings heavily?", a: ["Clustering Models", "Large Language Models (LLMs)", "Decision Trees"], correct: 1 } |
|
|
], |
|
|
[ |
|
|
{ q: "What is AI hallucination?", a: ["Overfitting", "A sleep disorder", "Generating incorrect or fabricated information"], correct: 2 }, |
|
|
{ q: "How can AI hallucinations be reduced?", a: ["Better data and fine-tuning", "Removing training data", "Increasing randomness"], correct: 0 }, |
|
|
{ q: "Which is a risk of Generative AI?", a: ["Better accuracy", "Improved efficiency", "Misinformation"], correct: 2 } |
|
|
] |
|
|
]; |
|
|
|
|
|
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(categoryIndex, questionIndex, cardElement) { |
|
|
if (cardElement.classList.contains("disabled")) return; |
|
|
|
|
|
const questionData = questions[categoryIndex][questionIndex]; |
|
|
questionDisplay.innerHTML = ""; |
|
|
|
|
|
const questionText = document.createElement("p"); |
|
|
questionText.textContent = questionData.q; |
|
|
questionDisplay.appendChild(questionText); |
|
|
|
|
|
questionData.a.forEach((answer, index) => { |
|
|
const btn = document.createElement("button"); |
|
|
btn.textContent = answer; |
|
|
btn.onclick = () => { |
|
|
if (index === questionData.correct) { |
|
|
score += (questionIndex + 1) * 100; |
|
|
} else { |
|
|
score -= (questionIndex + 1) * 100; |
|
|
} |
|
|
scoreDisplay.textContent = `Score: ${score}`; |
|
|
cardElement.classList.add("disabled"); |
|
|
cardElement.onclick = null; |
|
|
|
|
|
setTimeout(() => { |
|
|
questionDisplay.innerHTML = ""; |
|
|
}, 2000); |
|
|
}; |
|
|
questionDisplay.appendChild(btn); |
|
|
}); |
|
|
} |
|
|
|
|
|
createBoard(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
