Spaces:

eaglelandsonce
/

MLS_GenerativeAI_Landscape

Running

App Files Files Community

MLS_GenerativeAI_Landscape / index.html

eaglelandsonce

Update index.html

1febfc0 verified 12 days ago

raw

history blame contribute delete

7.17 kB

	<!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">
	<!-- Categories -->
	<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>
	<!-- Cards will be added here -->
	</div>
	<div id="question-display"></div>
	<div id="score">Score: 0</div>

	<script>
	const categories = [
	"Generative AI Fundamentals",
	"Machine Learning & Deep Learning",
	"Foundation Models & Transformers",
	"Vector Embeddings & LLMs",
	"AI Risks & Hallucinations"
	];
	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: ["Deep Learning", "Symbolic AI", "Database Management"], correct: 0 },
	{ q: "What problem does Generative AI solve?", a: ["Inverse problem of classification", "Sorting algorithms", "Data compression"], correct: 0 }
	],
	[
	{ q: "What is the primary difference between Discriminative and Generative models?", a: ["Generative models learn data distribution", "Discriminative models generate new data", "They are identical"], correct: 0 },
	{ q: "Which is NOT an example of a foundation model?", a: ["Linear Regression", "GPT-4", "BERT"], correct: 0 },
	{ q: "Which ML technique is used to train Generative AI?", a: ["Supervised Learning", "Unsupervised Learning", "Linear Regression"], correct: 1 }
	],
	[
	{ q: "What key technology underpins Transformer models?", a: ["Attention Mechanism", "Markov Chains", "Decision Trees"], correct: 0 },
	{ q: "Which company introduced the Transformer architecture?", a: ["Google", "Microsoft", "OpenAI"], correct: 0 },
	{ q: "What makes Transformer models scalable?", a: ["Parallelization", "More CPU cores", "Sequential execution"], correct: 0 }
	],
	[
	{ q: "What are vector embeddings used for?", a: ["Representing words numerically", "Sorting files", "Data encryption"], correct: 0 },
	{ q: "Which method is used to store vector embeddings?", a: ["Vector Databases", "Excel Sheets", "Data Frames"], correct: 0 },
	{ q: "Which AI model uses vector embeddings heavily?", a: ["Large Language Models (LLMs)", "Decision Trees", "Clustering Models"], correct: 0 }
	],
	[
	{ q: "What is AI hallucination?", a: ["Generating incorrect or fabricated information", "A sleep disorder", "Overfitting"], correct: 0 },
	{ q: "How can AI hallucinations be reduced?", a: ["Better data and fine-tuning", "Increasing randomness", "Removing training data"], correct: 0 },
	{ q: "Which is a risk of Generative AI?", a: ["Misinformation", "Better accuracy", "Improved efficiency"], correct: 0 }
	]
	];

	let score = 0;
	const gameBoard = document.getElementById("game-board");
	const questionDisplay = document.getElementById("question-display");
	const scoreDisplay = document.getElementById("score");

	// Create cards below the category row (3 rows x 5 columns)
	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);
	}
	}
	}
	createBoard();

	// Function to display the question and handle answer selection
	function showQuestion(categoryIndex, questionIndex, cardElement) {
	// Prevent clicking the same card twice
	if (cardElement.classList.contains("disabled")) return;

	// Retrieve the question data
	const questionData = questions[categoryIndex][questionIndex];

	// Clear previous content
	questionDisplay.innerHTML = "";

	// Create and display the question text
	const questionText = document.createElement("p");
	questionText.textContent = questionData.q;
	questionDisplay.appendChild(questionText);

	// Display each answer as a button
	questionData.a.forEach((answer, index) => {
	const btn = document.createElement("button");
	btn.textContent = answer;
	btn.onclick = () => {
	// Check the answer
	if (index === questionData.correct) {
	score += (questionIndex + 1) * 100;
	} else {
	score -= (questionIndex + 1) * 100;
	}
	scoreDisplay.textContent = `Score: ${score}`;

	// Disable the card so it can't be clicked again
	cardElement.classList.add("disabled");
	cardElement.onclick = null;

	// Clear the question display after a short delay
	setTimeout(() => {
	questionDisplay.innerHTML = "";
	}, 2000);
	};
	questionDisplay.appendChild(btn);
	});
	}
	</script>
	</body>
	</html>