eaglelandsonce/DatabricksMatching_Lecture1
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>Key Conepts Azure Databricks Matching Game</title>7 <style>8 body {9 font-family: Arial, sans-serif;10 line-height: 1.6;11 color: #333;12 max-width: 1000px;13 margin: 0 auto;14 padding: 20px;15 }16 h1 {17 color: #0078D4;18 }19 #score {20 font-size: 18px;21 font-weight: bold;22 margin-bottom: 20px;23 }24 .game-container {25 display: flex;26 justify-content: space-between;27 }28 .column {29 padding: 10px;30 }31 #elements {32 width: 30%;33 }34 #descriptions {35 width: 65%;36 }37 .item {38 background-color: #f0f0f0;39 border: 1px solid #ddd;40 padding: 10px;41 margin-bottom: 10px;42 cursor: pointer;43 border-radius: 4px;44 transition: background-color 0.3s ease;45 }46 .item:hover {47 background-color: #e0e0e0;48 }49 .item.selected {50 background-color: #0078D4;51 color: white;52 }53 .item.correct {54 background-color: #107C10;55 color: white;56 }57 .item.incorrect {58 background-color: #D83B01;59 color: white;60 }61 #result {62 margin-top: 20px;63 font-weight: bold;64 }65 button {66 background-color: #0078D4;67 color: white;68 border: none;69 padding: 10px 20px;70 cursor: pointer;71 font-size: 16px;72 margin-top: 20px;73 margin-right: 10px;74 border-radius: 4px;75 transition: background-color 0.3s ease;76 }77 button:hover {78 background-color: #106EBE;79 }80 .modal {81 display: none;82 position: fixed;83 z-index: 1;84 left: 0;85 top: 0;86 width: 100%;87 height: 100%;88 overflow: auto;89 background-color: rgba(0,0,0,0.4);90 }91 .modal-content {92 background-color: #fefefe;93 margin: 15% auto;94 padding: 20px;95 border: 1px solid #888;96 width: 80%;97 max-width: 800px;98 border-radius: 8px;99 }100 .close {101 color: #aaa;102 float: right;103 font-size: 28px;104 font-weight: bold;105 cursor: pointer;106 }107 .close:hover,108 .close:focus {109 color: black;110 text-decoration: none;111 cursor: pointer;112 }113 </style>114</head>115<body>116 <h1>Key Concepts Azure Databricks Matching Game</h1>117 <div id="score">Score: 0 / 8</div>118 <p>Match the Azure Databricks elements with their descriptions. Click on an item from each column to make a match.</p>119 <div class="game-container">120 <div class="column" id="elements"></div>121 <div class="column" id="descriptions"></div>122 </div>123 <div id="result"></div>124 <button id="replay">Replay Game</button>125 <button id="showSolution">Show Solution</button>126 127 <div id="solutionModal" class="modal">128 <div class="modal-content">129 <span class="close">×</span>130 <h2>Solution</h2>131 <div id="solutionContent"></div>132 </div>133 </div>134 135 <script>136 const gameData = [137 { element: "Clusters", description: "The computational engines of Azure Databricks that users can create and scale according to their needs." },138 { element: "Jobs", description: "Used to schedule and run automated tasks, such as notebook runs or Spark jobs." },139 { element: "Databricks Runtime", description: "A set of performance-optimized versions of Apache Spark with enhancements for improved functionality." },140 { element: "Delta Lake", description: "An open-source storage layer that brings reliability and scalability to data lakes with ACID transactions." },141 { element: "Databricks SQL", description: "A way to perform SQL queries on data within Azure Databricks, including an SQL editor and visualization tools." },142 { element: "MLflow", description: "An open-source platform for managing the end-to-end machine learning lifecycle." },143 { element: "Workspaces", description: "An environment for accessing all the Databricks assets, providing a user interface to manage notebooks, libraries, and experiments." },144 { element: "Notebooks", description: "Interactive documents that contain runnable code, visualizations, and narrative text, supporting multiple languages simultaneously." }145 ];146 147 let selectedElement = null;148 let selectedDescription = null;149 let correctMatches = 0;150 151 function shuffleArray(array) {152 for (let i = array.length - 1; i > 0; i--) {153 const j = Math.floor(Math.random() * (i + 1));154 [array[i], array[j]] = [array[j], array[i]];155 }156 }157 158 function createGameBoard() {159 const elementsContainer = document.getElementById('elements');160 const descriptionsContainer = document.getElementById('descriptions');161 162 elementsContainer.innerHTML = '';163 descriptionsContainer.innerHTML = '';164 165 const shuffledElements = [...gameData];166 const shuffledDescriptions = [...gameData];167 shuffleArray(shuffledElements);168 shuffleArray(shuffledDescriptions);169 170 shuffledElements.forEach((item, index) => {171 const elementDiv = document.createElement('div');172 elementDiv.className = 'item';173 elementDiv.textContent = item.element;174 elementDiv.dataset.index = index;175 elementDiv.onclick = () => selectItem(elementDiv, 'element');176 elementsContainer.appendChild(elementDiv);177 });178 179 shuffledDescriptions.forEach((item, index) => {180 const descriptionDiv = document.createElement('div');181 descriptionDiv.className = 'item';182 descriptionDiv.textContent = item.description;183 descriptionDiv.dataset.index = index;184 descriptionDiv.onclick = () => selectItem(descriptionDiv, 'description');185 descriptionsContainer.appendChild(descriptionDiv);186 });187 }188 189 function selectItem(item, type) {190 if (type === 'element') {191 if (selectedElement && selectedElement.classList) {192 selectedElement.classList.remove('selected');193 }194 selectedElement = item;195 } else {196 if (selectedDescription && selectedDescription.classList) {197 selectedDescription.classList.remove('selected');198 }199 selectedDescription = item;200 }201 item.classList.add('selected');202 203 if (selectedElement && selectedDescription) {204 checkMatch();205 }206 }207 208 function checkMatch() {209 const elementIndex = gameData.findIndex(item => item.element === selectedElement.textContent);210 const descriptionIndex = gameData.findIndex(item => item.description === selectedDescription.textContent);211 212 if (elementIndex === descriptionIndex) {213 selectedElement.classList.add('correct');214 selectedDescription.classList.add('correct');215 correctMatches++;216 updateScore();217 if (correctMatches === gameData.length) {218 document.getElementById('result').textContent = 'Congratulations! You\'ve matched all items correctly!';219 }220 } else {221 selectedElement.classList.add('incorrect');222 selectedDescription.classList.add('incorrect');223 setTimeout(() => {224 if (selectedElement && selectedElement.classList) {225 selectedElement.classList.remove('incorrect');226 }227 if (selectedDescription && selectedDescription.classList) {228 selectedDescription.classList.remove('incorrect');229 }230 }, 1000);231 }232 if (selectedElement && selectedElement.classList) {233 selectedElement.classList.remove('selected');234 }235 if (selectedDescription && selectedDescription.classList) {236 selectedDescription.classList.remove('selected');237 }238 selectedElement = null;239 selectedDescription = null;240 }241 242 function updateScore() {243 document.getElementById('score').textContent = `Score: ${correctMatches} / ${gameData.length}`;244 }245 246 function replayGame() {247 correctMatches = 0;248 selectedElement = null;249 selectedDescription = null;250 createGameBoard();251 updateScore();252 document.getElementById('result').textContent = '';253 }254 255 function showSolution() {256 const modal = document.getElementById('solutionModal');257 const solutionContent = document.getElementById('solutionContent');258 solutionContent.innerHTML = '';259 gameData.forEach(item => {260 solutionContent.innerHTML += `<p><strong>${item.element}:</strong> ${item.description}</p>`;261 });262 modal.style.display = 'block';263 }264 265 document.getElementById('replay').onclick = replayGame;266 document.getElementById('showSolution').onclick = showSolution;267 268 // Close the modal when clicking the close button or outside the modal269 document.querySelector('.close').onclick = function() {270 document.getElementById('solutionModal').style.display = 'none';271 }272 window.onclick = function(event) {273 if (event.target == document.getElementById('solutionModal')) {274 document.getElementById('solutionModal').style.display = 'none';275 }276 }277 278 createGameBoard();279 updateScore();280 </script>281</body>282</html>