eaglelandsonce/Workflow_Matchinggame
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 Concepts Azure Databricks Workflows 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 Workflows Matching Game</h1>117 <div id="score">Score: 0 / 9</div>118 <p>Match the Azure Databricks Workflow concepts 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: "Jobs", description: "These are the primary component in workflows, allowing the definition and scheduling of automated tasks like running notebooks, scripts, or JAR files. They can handle dependencies and complex workflows." },138 { element: "Tasks", description: "These are individual units of work within a workflow. They can be a notebook, script, or Spark-submit application and can be run sequentially or in parallel, based on defined dependencies." },139 { element: "Clusters", description: "These are automatically managed to run tasks, and they can be created or terminated as needed. Workflows can use either new or existing ones, and different tasks can run on separate instances to optimize performance." },140 { element: "Triggers", description: "These control when and how jobs are executed, either manually, on a schedule, or based on the success or failure of another job, providing flexibility in orchestration." },141 { element: "Notebooks", description: "These are collaborative, interactive documents that combine code, visualizations, and text. They are commonly used to execute complex data transformations or machine learning models." },142 { element: "Libraries", description: "These provide reusable packages or modules, such as Python packages or Java/Scala libraries, that can be attached to clusters and used by tasks during execution." },143 { element: "Scheduler", description: "This feature manages the timing and execution of tasks, supporting both specific time-based and recurring schedules, along with complex scenarios involving triggers." },144 { element: "Monitoring and Logging", description: "Tools that provide insights into the performance of jobs and clusters, including automatic collection of logs and metrics to assist with diagnostics and performance optimization." },145 { element: "APIs", description: "These programmatic interfaces allow for the creation, management, and execution of jobs and workflows, enabling integration with external systems and automation tools." }146 ];147 let selectedElement = null;148 let selectedDescription = null;149 let correctMatches = 0;150 function shuffleArray(array) {151 for (let i = array.length - 1; i > 0; i--) {152 const j = Math.floor(Math.random() * (i + 1));153 [array[i], array[j]] = [array[j], array[i]];154 }155 }156 function createGameBoard() {157 const elementsContainer = document.getElementById('elements');158 const descriptionsContainer = document.getElementById('descriptions');159 elementsContainer.innerHTML = '';160 descriptionsContainer.innerHTML = '';161 const shuffledElements = [...gameData];162 const shuffledDescriptions = [...gameData];163 shuffleArray(shuffledElements);164 shuffleArray(shuffledDescriptions);165 shuffledElements.forEach((item, index) => {166 const elementDiv = document.createElement('div');167 elementDiv.className = 'item';168 elementDiv.textContent = item.element;169 elementDiv.dataset.index = index;170 elementDiv.onclick = () => selectItem(elementDiv, 'element');171 elementsContainer.appendChild(elementDiv);172 });173 shuffledDescriptions.forEach((item, index) => {174 const descriptionDiv = document.createElement('div');175 descriptionDiv.className = 'item';176 descriptionDiv.textContent = item.description;177 descriptionDiv.dataset.index = index;178 descriptionDiv.onclick = () => selectItem(descriptionDiv, 'description');179 descriptionsContainer.appendChild(descriptionDiv);180 });181 }182 function selectItem(item, type) {183 if (type === 'element') {184 if (selectedElement && selectedElement.classList) {185 selectedElement.classList.remove('selected');186 }187 selectedElement = item;188 } else {189 if (selectedDescription && selectedDescription.classList) {190 selectedDescription.classList.remove('selected');191 }192 selectedDescription = item;193 }194 item.classList.add('selected');195 if (selectedElement && selectedDescription) {196 checkMatch();197 }198 }199 function checkMatch() {200 const elementIndex = gameData.findIndex(item => item.element === selectedElement.textContent);201 const descriptionIndex = gameData.findIndex(item => item.description === selectedDescription.textContent);202 if (elementIndex === descriptionIndex) {203 selectedElement.classList.add('correct');204 selectedDescription.classList.add('correct');205 correctMatches++;206 updateScore();207 if (correctMatches === gameData.length) {208 document.getElementById('result').textContent = 'Congratulations! You\'ve matched all items correctly!';209 }210 } else {211 selectedElement.classList.add('incorrect');212 selectedDescription.classList.add('incorrect');213 setTimeout(() => {214 if (selectedElement && selectedElement.classList) {215 selectedElement.classList.remove('incorrect');216 }217 if (selectedDescription && selectedDescription.classList) {218 selectedDescription.classList.remove('incorrect');219 }220 }, 1000);221 }222 if (selectedElement && selectedElement.classList) {223 selectedElement.classList.remove('selected');224 }225 if (selectedDescription && selectedDescription.classList) {226 selectedDescription.classList.remove('selected');227 }228 selectedElement = null;229 selectedDescription = null;230 }231 function updateScore() {232 document.getElementById('score').textContent = `Score: ${correctMatches} / ${gameData.length}`;233 }234 function replayGame() {235 correctMatches = 0;236 selectedElement = null;237 selectedDescription = null;238 createGameBoard();239 updateScore();240 document.getElementById('result').textContent = '';241 }242 function showSolution() {243 const modal = document.getElementById('solutionModal');244 const solutionContent = document.getElementById('solutionContent');245 solutionContent.innerHTML = '';246 gameData.forEach(item => {247 solutionContent.innerHTML += `<p><strong>${item.element}:</strong> ${item.description}</p>`;248 });249 modal.style.display = 'block';250 }251 document.getElementById('replay').onclick = replayGame;252 document.getElementById('showSolution').onclick = showSolution;253 document.querySelector('.close').onclick = function() {254 document.getElementById('solutionModal').style.display = 'none';255 }256 window.onclick = function(event) {257 if (event.target == document.getElementById('solutionModal')) {258 document.getElementById('solutionModal').style.display = 'none';259 }260 }261 createGameBoard();262 updateScore();263 </script>264</body>265</html>266