eaglelandsonce/ApacheDatabricks_Jeopardy
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Apache Spark on Azure Databricks Jeopardy</title>7 <style>8 body {9 font-family: Arial, sans-serif;10 display: flex;11 flex-direction: column;12 align-items: center;13 background-color: #f0f0f0;14 }15 h1 {16 color: #0078D4;17 }18 #game-board {19 display: grid;20 grid-template-columns: repeat(5, 1fr);21 gap: 10px;22 margin-bottom: 20px;23 }24 .card {25 width: 150px;26 height: 100px;27 background-color: #0078D4;28 color: #ffffff;29 display: flex;30 justify-content: center;31 align-items: center;32 font-size: 16px;33 font-weight: bold;34 cursor: pointer;35 transition: background-color 0.3s;36 text-align: center;37 }38 .card:hover {39 background-color: #005a9e;40 }41 .card.disabled {42 background-color: #cccccc;43 cursor: default;44 }45 #question-display {46 width: 80%;47 text-align: center;48 margin-bottom: 20px;49 }50 #score {51 font-size: 24px;52 font-weight: bold;53 color: #0078D4;54 }55 .answer-btn {56 margin: 5px;57 padding: 10px;58 font-size: 16px;59 cursor: pointer;60 }61 </style>62</head>63<body>64 <h1>Apache Spark on Azure Databricks Jeopardy</h1>65 <p><strong>Question Reference:</strong> <a href="https://docs.microsoft.com/en-us/azure/databricks/spark/latest/" target="_blank">Learn More about Apache Spark on Azure Databricks</a></p>66 <div id="game-board"></div>67 <div id="question-display"></div>68 <div id="score">Score: 0</div>69 70 <script>71 const categories = ['Apache Spark', 'Databricks Runtime', 'Spark Workloads', 'Benefits of Spark on Databricks', 'Learning Resources'];72 const questions = [73 [74 {75 q: "Who founded the Databricks company?",76 a: ["The original creators of Apache Spark", "Google engineers", "Microsoft employees"],77 correct: 078 },79 {80 q: "What core technology powers the compute clusters on Azure Databricks?",81 a: ["Apache Hadoop", "Databricks SQL", "Apache Spark"],82 correct: 283 },84 {85 q: "What language was Databricks' Photon engine rewritten in?",86 a: ["Python", "C++", "Java"],87 correct: 188 }89 ],90 [91 {92 q: "What does Databricks Runtime include to extend Apache Spark?",93 a: ["Open source libraries and Databricks SQL", "Optimizations and proprietary features", "Databricks for Hadoop"],94 correct: 195 },96 {97 q: "Can Databricks be used without Apache Spark?",98 a: ["No, Apache Spark is required", "Yes, other workloads like Databricks SQL are supported", "Only in a cloud-native environment"],99 correct: 1100 },101 {102 q: "What is the role of Apache Spark in Databricks SQL?",103 a: ["It is used under the hood to process SQL queries", "It stores all the data", "It doesn't play a role in Databricks SQL"],104 correct: 0105 }106 ],107 [108 {109 q: "What is Databricks Runtime for Machine Learning optimized for?",110 a: ["Cloud-native data management", "Big data processing", "Machine learning (ML) workloads"],111 correct: 2112 },113 {114 q: "How do Databricks jobs support arbitrary workloads?",115 a: ["By deploying only batch processing", "By scheduling arbitrary workloads against compute clusters", "By running Spark jobs only"],116 correct: 1117 },118 {119 q: "What does Databricks SQL use to process queries?",120 a: ["Photon engine", "Apache Spark", "Both"],121 correct: 2122 }123 ],124 [125 {126 q: "Why use Apache Spark on Databricks?",127 a: ["It's faster and easier to use", "It's the only cloud service that supports Spark", "Databricks is a secure, collaborative environment"],128 correct: 2129 },130 {131 q: "Who are key contributors to the Apache Spark open source project?",132 a: ["Only Google", "Databricks and other top companies", "Microsoft exclusively"],133 correct: 1134 },135 {136 q: "What optimization technology does Databricks continuously develop for Apache Spark?",137 a: ["Photon", "SQL Server", "Kafka"],138 correct: 0139 }140 ],141 [142 {143 q: "Where can you learn more about Apache Spark on Databricks?",144 a: ["Only on the Databricks blog", "Apache Spark DataFrames Tutorial", "Azure DevOps"],145 correct: 1146 },147 {148 q: "What tutorial can help you start using Apache Spark DataFrames?",149 a: ["Python for Spark", "Apache Spark DataFrames tutorial", "Azure ML Pipeline"],150 correct: 1151 },152 {153 q: "What resources are available to learn more about Spark in Python, R, or Scala?",154 a: ["PySpark, SparkR, and Scala docs", "Only Python docs", "Java tutorials"],155 correct: 0156 }157 ]158 ];159 160 let score = 0;161 let timeoutId;162 const gameBoard = document.getElementById('game-board');163 const questionDisplay = document.getElementById('question-display');164 const scoreDisplay = document.getElementById('score');165 166 function createBoard() {167 for (let i = 0; i < 5; i++) {168 for (let j = 0; j < 3; j++) {169 const card = document.createElement('div');170 card.className = 'card';171 card.textContent = `${categories[i]} $${(j + 1) * 100}`;172 card.onclick = () => showQuestion(i, j, card);173 gameBoard.appendChild(card);174 }175 }176 }177 178 function showQuestion(category, difficulty, cardElement) {179 if (cardElement.classList.contains('disabled')) return;180 if (timeoutId) {181 clearTimeout(timeoutId);182 timeoutId = null;183 }184 const question = questions[category][difficulty];185 let answerHtml = question.a.map((answer, index) => 186 `<button class="answer-btn" onclick="checkAnswer(${category}, ${difficulty}, ${index})">${answer}</button>`187 ).join('');188 questionDisplay.innerHTML = `189 <h2>${categories[category]} for $${(difficulty + 1) * 100}</h2>190 <p>${question.q}</p>191 ${answerHtml}192 `;193 cardElement.classList.add('disabled');194 cardElement.style.backgroundColor = '#cccccc';195 cardElement.style.cursor = 'default';196 }197 198 function checkAnswer(category, difficulty, selectedAnswer) {199 const buttons = document.querySelectorAll('.answer-btn');200 buttons.forEach(btn => btn.disabled = true);201 const question = questions[category][difficulty];202 const isCorrect = selectedAnswer === question.correct;203 const value = (difficulty + 1) * 100;204 if (isCorrect) {205 score += value;206 questionDisplay.innerHTML += `<p style="color: green;">Correct! You earned $${value}.</p>`;207 } else {208 score -= value;209 questionDisplay.innerHTML += `<p style="color: red;">Sorry, that's incorrect. You lost $${value}. The correct answer was: ${question.a[question.correct]}</p>`;210 }211 scoreDisplay.textContent = `Score: ${score}`;212 timeoutId = setTimeout(() => {213 clearQuestion();214 checkGameCompletion();215 }, 2000);216 }217 218 function clearQuestion() {219 questionDisplay.innerHTML = '';220 }221 222 function checkGameCompletion() {223 const remainingCards = document.querySelectorAll('.card:not(.disabled)');224 if (remainingCards.length === 0) {225 questionDisplay.innerHTML = `<h2>Game Over!</h2><p>Your final score is $${score}.</p>`;226 }227 }228 229 createBoard();230 </script>231</body>232</html>233