KMeans Lab - Agrupamento com Explica\u00e7\u00e3o<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.2.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&family=Source+Code+Pro&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"styles.css\">\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/1.4.0\/p5.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/ml5\/0.7.1\/ml5.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n \r\n <div id=\"welcomeScreen\" class=\"welcome-screen\">\r\n <h1>Bem-vindo ao KMeans Lab!<\/h1>\r\n <div class=\"form-group\">\r\n <label for=\"nameInput\">Como devemos te chamar?<\/label>\r\n <input type=\"text\" id=\"nameInput\" placeholder=\"Digite seu nome\" required>\r\n <\/div>\r\n <button id=\"playButton\" class=\"btn primary-btn\">\r\n <i class=\"fas fa-play-circle\"><\/i> Come\u00e7ar\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div id=\"gameContent\" class=\"game-content hidden\">\r\n <header class=\"game-header\">\r\n <h1>KMeans Lab<\/h1>\r\n <div class=\"game-info\">\r\n <div id=\"playerName\" class=\"player-info\">\r\n <i class=\"fas fa-user\"><\/i> <span id=\"playerNameText\"><\/span>\r\n <\/div>\r\n <div id=\"levelIndicator\" class=\"level-info\">\r\n <i class=\"fas fa-layer-group\"><\/i> N\u00edvel 1\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n \r\n \r\n <div class=\"canvas-container\" id=\"canvas-container\">\r\n \r\n <\/div>\r\n \r\n <div class=\"game-controls\">\r\n <button id=\"groupButton\" class=\"btn action-btn\">\r\n <i class=\"fas fa-object-group\"><\/i> Agrupar\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div id=\"quizContainer\" class=\"quiz-container hidden\">\r\n <h2>Analise os grupos e identifique a caracter\u00edstica predominante<\/h2>\r\n <div id=\"quizQuestions\" class=\"quiz-questions\"><\/div>\r\n <button id=\"submitAnswers\" class=\"btn primary-btn\">\r\n <i class=\"fas fa-check-circle\"><\/i> Verificar Respostas\r\n <\/button>\r\n <\/div>\r\n <\/div> \r\n\r\n \r\n <div id=\"resultsScreen\" class=\"results-screen hidden\">\r\n <h1>Parab\u00e9ns, <span id=\"playerNameResult\"><\/span>!<\/h1>\r\n <div class=\"results-container\">\r\n <div class=\"results-header\">\r\n <i class=\"fas fa-trophy\"><\/i> Voc\u00ea completou o KMeans Lab!\r\n <\/div>\r\n \r\n <div class=\"results-stats\">\r\n <div class=\"stat-item\">\r\n <div class=\"stat-icon\"><i class=\"fas fa-check-circle\"><\/i><\/div>\r\n <div class=\"stat-value\" id=\"correctAnswers\">0<\/div>\r\n <div class=\"stat-label\">Respostas Corretas<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"results-levels\">\r\n <h3>Desempenho por N\u00edvel<\/h3>\r\n <div class=\"level-stats\" id=\"levelStatsContainer\">\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"results-message\">\r\n <p id=\"feedbackMessage\">Excelente trabalho! Voc\u00ea demonstrou uma \u00f3tima compreens\u00e3o dos conceitos de agrupamento.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div> \r\n <script >\r\n let objects = [];\r\nlet groups = [];\r\nlet colors = ['#FF0000', '#0000FF', '#FFFF00'];\r\nlet colorNames = {\r\n '#FF0000': 'vermelho',\r\n '#0000FF': 'azul',\r\n '#FFFF00': 'amarelo'\r\n};\r\nlet sizes = [20, 40];\r\nlet sizeNames = {\r\n 20: 'pequeno',\r\n 40: 'grande'\r\n};\r\nlet shapes = ['square', 'triangle', 'circle'];\r\nlet shapeNames = {\r\n 'square': 'quadrado',\r\n 'triangle': 'tri\u00e2ngulo',\r\n 'circle': 'c\u00edrculo'\r\n};\r\nlet groupPositions = [];\r\nlet centroids = [];\r\nlet playerName = '';\r\nlet currentLevel = 1;\r\nlet quizAnswers = [];\r\nlet selectedAnswers = [];\r\nlet levelScores = []; \/\/ Array para armazenar a pontua\u00e7\u00e3o de cada n\u00edvel\r\nlet totalCorrectAnswers = 0;\r\nlet totalQuestions = 0;\r\nlet groupingDone = false; \/\/ Flag para controlar se o agrupamento j\u00e1 foi realizado\r\nlet explanationsShown = false; \/\/ Flag para controlar se as explica\u00e7\u00f5es j\u00e1 foram mostradas\r\n\r\nfunction setup() {\r\n let canvas = createCanvas(800, 600);\r\n canvas.parent('canvas-container');\r\n generateObjects();\r\n \r\n document.getElementById('groupButton').onclick = () => {\r\n \/\/ Verificar se o agrupamento j\u00e1 foi feito\r\n if (!groupingDone) {\r\n const groupsForLevel = {\r\n 1: 3,\r\n 2: 4,\r\n 3: 5\r\n };\r\n kMeans(groupsForLevel[currentLevel]);\r\n showQuiz();\r\n groupingDone = true; \/\/ Marcar que o agrupamento foi feito\r\n \r\n \/\/ Desativar o bot\u00e3o de agrupar ap\u00f3s o uso\r\n document.getElementById('groupButton').disabled = true;\r\n document.getElementById('groupButton').classList.add('btn-disabled');\r\n }\r\n };\r\n}\r\n\r\nfunction draw() {\r\n background(240);\r\n if (groupPositions.length > 0) {\r\n for (let i = 0; i < groupPositions.length; i++) {\r\n noFill();\r\n stroke(100);\r\n strokeWeight(2);\r\n ellipse(groupPositions[i].x, groupPositions[i].y, 150, 150);\r\n fill(0);\r\n noStroke();\r\n textAlign(CENTER, CENTER);\r\n textSize(24);\r\n text(`Grupo ${i + 1}`, groupPositions[i].x, groupPositions[i].y - 90);\r\n }\r\n }\r\n for (let i = 0; i < objects.length; i++) {\r\n drawObject(objects[i]);\r\n }\r\n}\r\n\r\nfunction generateObjects() {\r\n objects = [];\r\n for (let i = 0; i < 30; i++) {\r\n objects.push({\r\n x: random(width),\r\n y: random(height),\r\n color: random(colors),\r\n size: random(sizes),\r\n shape: random(shapes),\r\n group: null,\r\n targetX: null,\r\n targetY: null\r\n });\r\n }\r\n groupPositions = [];\r\n \r\n \/\/ Resetar a flag de agrupamento ao gerar novos objetos\r\n groupingDone = false;\r\n \/\/ Resetar a flag de explica\u00e7\u00f5es\r\n explanationsShown = false;\r\n \r\n \/\/ Reativar o bot\u00e3o de agrupar\r\n document.getElementById('groupButton').disabled = false;\r\n document.getElementById('groupButton').classList.remove('btn-disabled');\r\n}\r\n\r\nfunction drawObject(obj) {\r\n if (obj.targetX !== null && obj.targetY !== null) {\r\n obj.x = lerp(obj.x, obj.targetX, 0.1);\r\n obj.y = lerp(obj.y, obj.targetY, 0.1);\r\n }\r\n\r\n fill(obj.color);\r\n stroke(0);\r\n strokeWeight(2);\r\n \r\n if (obj.shape === 'square') {\r\n rect(obj.x, obj.y, obj.size, obj.size);\r\n } else if (obj.shape === 'triangle') {\r\n triangle(obj.x, obj.y + obj.size,\r\n obj.x + obj.size \/ 2, obj.y,\r\n obj.x + obj.size, obj.y + obj.size);\r\n } else if (obj.shape === 'circle') {\r\n ellipse(obj.x + obj.size \/ 2, obj.y + obj.size \/ 2, obj.size, obj.size);\r\n }\r\n}\r\n\r\nfunction kMeans(k) {\r\n \/\/ Initialize centroids\r\n centroids = [];\r\n for (let i = 0; i < k; i++) {\r\n centroids.push({\r\n color: random(colors),\r\n size: random(sizes),\r\n shape: random(shapes)\r\n });\r\n }\r\n \r\n let changed = true;\r\n let iterations = 0;\r\n const maxIterations = 100;\r\n \r\n while (changed && iterations < maxIterations) {\r\n changed = false;\r\n iterations++;\r\n \r\n \/\/ Assign objects to centroids\r\n for (let obj of objects) {\r\n let minDist = Infinity;\r\n let newGroup = null;\r\n for (let i = 0; i < centroids.length; i++) {\r\n let dist = calculateDistance(obj, centroids[i]);\r\n if (dist < minDist) {\r\n minDist = dist;\r\n newGroup = i;\r\n }\r\n }\r\n if (obj.group !== newGroup) {\r\n obj.group = newGroup;\r\n changed = true;\r\n }\r\n }\r\n \r\n \/\/ Update centroids\r\n for (let i = 0; i < centroids.length; i++) {\r\n let groupObjects = objects.filter(obj => obj.group === i);\r\n if (groupObjects.length > 0) {\r\n centroids[i] = calculateCentroid(groupObjects);\r\n }\r\n }\r\n }\r\n\r\n \/\/ Calculate group positions\r\n groupPositions = [];\r\n for (let i = 0; i < k; i++) {\r\n groupPositions.push({\r\n x: width \/ (k + 1) * (i + 1),\r\n y: height \/ 2\r\n });\r\n }\r\n\r\n \/\/ Assign target positions to objects\r\n for (let obj of objects) {\r\n let groupPos = groupPositions[obj.group];\r\n let angle = random(TWO_PI);\r\n let radius = random(30, 60);\r\n obj.targetX = groupPos.x + cos(angle) * radius;\r\n obj.targetY = groupPos.y + sin(angle) * radius;\r\n }\r\n}\r\n\r\nfunction calculateDistance(obj1, obj2) {\r\n let colorDist = obj1.color === obj2.color ? 0 : 1;\r\n let sizeDist = Math.abs(obj1.size - obj2.size) \/ Math.max(...sizes);\r\n let shapeDist = obj1.shape === obj2.shape ? 0 : 1;\r\n return colorDist + sizeDist + shapeDist;\r\n}\r\n\r\nfunction calculateCentroid(group) {\r\n let centroid = { color: {}, size: 0, shape: {} };\r\n for (let obj of group) {\r\n centroid.color[obj.color] = (centroid.color[obj.color] || 0) + 1;\r\n centroid.size += obj.size;\r\n centroid.shape[obj.shape] = (centroid.shape[obj.shape] || 0) + 1;\r\n }\r\n centroid.color = Object.keys(centroid.color).reduce((a, b) => centroid.color[a] > centroid.color[b] ? a : b);\r\n centroid.size \/= group.length;\r\n centroid.shape = Object.keys(centroid.shape).reduce((a, b) => centroid.shape[a] > centroid.shape[b] ? a : b);\r\n return centroid;\r\n}\r\n\r\nfunction generateExplanation(groupIndex) {\r\n let groupObjects = objects.filter(obj => obj.group === groupIndex);\r\n \r\n \/\/ Calculate characteristics frequencies\r\n let colorFreq = {};\r\n let sizeFreq = {};\r\n let shapeFreq = {};\r\n \r\n groupObjects.forEach(obj => {\r\n colorFreq[obj.color] = (colorFreq[obj.color] || 0) + 1;\r\n sizeFreq[obj.size] = (sizeFreq[obj.size] || 0) + 1;\r\n shapeFreq[obj.shape] = (shapeFreq[obj.shape] || 0) + 1;\r\n });\r\n\r\n \/\/ Find dominant characteristics\r\n let dominantColor = Object.keys(colorFreq).reduce((a, b) => colorFreq[a] > colorFreq[b] ? a : b);\r\n let dominantSize = Object.keys(sizeFreq).reduce((a, b) => sizeFreq[a] > sizeFreq[b] ? a : b);\r\n let dominantShape = Object.keys(shapeFreq).reduce((a, b) => shapeFreq[a] > shapeFreq[b] ? a : b);\r\n\r\n let explanation = `<div class=\"group-explanation\">\r\n <strong>Explica\u00e7\u00e3o do Grupo ${groupIndex + 1}<\/strong> (${groupObjects.length} objetos)<br>\r\n Caracter\u00edsticas predominantes:<br>\r\n - Cor: ${colorNames[dominantColor]} (${Math.round(colorFreq[dominantColor]\/groupObjects.length*100)}%)<br>\r\n - Tamanho: ${sizeNames[dominantSize]} (${Math.round(sizeFreq[dominantSize]\/groupObjects.length*100)}%)<br>\r\n - Forma: ${shapeNames[dominantShape]} (${Math.round(shapeFreq[dominantShape]\/groupObjects.length*100)}%)\r\n <\/div>`;\r\n \r\n return explanation;\r\n}\r\n\r\nfunction showQuiz() {\r\n const quizContainer = document.getElementById('quizContainer');\r\n const quizQuestions = document.getElementById('quizQuestions');\r\n quizContainer.classList.remove('hidden');\r\n \r\n \/\/ Bot\u00e3o come\u00e7a como \"Verificar Respostas\"\r\n const submitButton = document.getElementById('submitAnswers');\r\n submitButton.textContent = \"Verificar Respostas\";\r\n submitButton.innerHTML = '<i class=\"fas fa-check-circle\"><\/i> Verificar Respostas';\r\n submitButton.style.display = 'block';\r\n submitButton.disabled = true;\r\n submitButton.classList.add('btn-disabled');\r\n \r\n quizAnswers = [];\r\n const numGroups = currentLevel + 2; \/\/ 3 groups for level 1, 4 for level 2, 5 for level 3\r\n selectedAnswers = new Array(numGroups).fill(null);\r\n quizQuestions.innerHTML = '';\r\n\r\n for (let i = 0; i < numGroups; i++) {\r\n let groupObjects = objects.filter(obj => obj.group === i);\r\n \r\n \/\/ Calculate characteristics frequencies\r\n let colorFreq = {};\r\n let sizeFreq = {};\r\n let shapeFreq = {};\r\n \r\n groupObjects.forEach(obj => {\r\n colorFreq[obj.color] = (colorFreq[obj.color] || 0) + 1;\r\n sizeFreq[obj.size] = (sizeFreq[obj.size] || 0) + 1;\r\n shapeFreq[obj.shape] = (shapeFreq[obj.shape] || 0) + 1;\r\n });\r\n\r\n \/\/ Find dominant characteristic\r\n let dominantColor = Object.keys(colorFreq).reduce((a, b) => colorFreq[a] > colorFreq[b] ? a : b);\r\n let dominantSize = Object.keys(sizeFreq).reduce((a, b) => sizeFreq[a] > sizeFreq[b] ? a : b);\r\n let dominantShape = Object.keys(shapeFreq).reduce((a, b) => shapeFreq[a] > shapeFreq[b] ? a : b);\r\n\r\n let colorPercentage = Math.round(colorFreq[dominantColor]\/groupObjects.length*100);\r\n let sizePercentage = Math.round(sizeFreq[dominantSize]\/groupObjects.length*100);\r\n let shapePercentage = Math.round(shapeFreq[dominantShape]\/groupObjects.length*100);\r\n \r\n let maxPercentage = Math.max(colorPercentage, sizePercentage, shapePercentage);\r\n let correctAnswers = [];\r\n\r\n if (colorPercentage === maxPercentage) {\r\n correctAnswers.push(`Cor: ${colorNames[dominantColor]}`);\r\n }\r\n if (sizePercentage === maxPercentage) {\r\n correctAnswers.push(`Tamanho: ${sizeNames[dominantSize]}`);\r\n }\r\n if (shapePercentage === maxPercentage) {\r\n correctAnswers.push(`Forma: ${shapeNames[dominantShape]}`);\r\n }\r\n\r\n \/\/ Agora junta tudo em uma \u00fanica string separada por v\u00edrgula\r\n let correctAnswerString = correctAnswers.join(' & ');\r\n\r\n \/\/ Armazena como string no array de respostas corretas\r\n quizAnswers.push(correctAnswerString);\r\n\r\n const options = [\r\n `Cor: ${colorNames[dominantColor]}`,\r\n `Tamanho: ${sizeNames[dominantSize]}`,\r\n `Forma: ${shapeNames[dominantShape]}`\r\n ];\r\n\r\n const questionHTML = `\r\n <div class=\"quiz-item\" id=\"quiz-item-${i}\">\r\n <h4>Grupo ${i + 1}<\/h4>\r\n <p class=\"question-status\" id=\"status-${i}\">Escolha uma op\u00e7\u00e3o (obrigat\u00f3rio)<\/p>\r\n <div class=\"quiz-options\">\r\n ${options.map((option, index) => `\r\n <div class=\"quiz-option\" onclick=\"selectAnswer(${i}, '${option}')\"\r\n id=\"option-${i}-${index}\">\r\n ${option}\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <div class=\"explanation-container\" id=\"explanation-${i}\" style=\"display: none;\"><\/div>\r\n <\/div>\r\n `;\r\n \r\n quizQuestions.innerHTML += questionHTML;\r\n }\r\n \r\n \/\/ Adicionar CSS para os status das perguntas e explica\u00e7\u00f5es\r\n const style = document.createElement('style');\r\n style.textContent = `\r\n .question-status {\r\n font-size: 14px;\r\n color: #d32f2f;\r\n margin: 5px 0;\r\n }\r\n .question-completed {\r\n color: #388e3c;\r\n }\r\n .explanation-container {\r\n margin-top: 10px;\r\n padding: 10px;\r\n background-color: #f5f5f5;\r\n border-left: 4px solid #2196f3;\r\n border-radius: 4px;\r\n animation: fadeIn 0.5s;\r\n }\r\n @keyframes fadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n .group-explanation {\r\n margin-bottom: 10px;\r\n }\r\n `;\r\n document.head.appendChild(style);\r\n}\r\n\r\nfunction selectAnswer(groupIndex, answer) {\r\n selectedAnswers[groupIndex] = answer;\r\n \r\n \/\/ Update visual selection\r\n const options = document.querySelectorAll(`[id^=\"option-${groupIndex}-\"]`);\r\n options.forEach(option => {\r\n option.classList.remove('selected');\r\n if (option.textContent.trim() === answer) {\r\n option.classList.add('selected');\r\n }\r\n });\r\n \r\n \/\/ Atualizar o status da pergunta para completado\r\n const statusElement = document.getElementById(`status-${groupIndex}`);\r\n statusElement.textContent = \"Op\u00e7\u00e3o selecionada \u2713\";\r\n statusElement.classList.add('question-completed');\r\n \r\n \/\/ Check if all questions are answered\r\n if (selectedAnswers.every(answer => answer !== null)) {\r\n document.getElementById('submitAnswers').disabled = false;\r\n document.getElementById('submitAnswers').classList.remove('btn-disabled');\r\n }\r\n}\r\n\r\nfunction showExplanations() {\r\n explanationsShown = true;\r\n const numGroups = currentLevel + 2;\r\n \r\n for (let i = 0; i < numGroups; i++) {\r\n \/\/ Mostra a explica\u00e7\u00e3o para este grupo\r\n const explanationContainer = document.getElementById(`explanation-${i}`);\r\n explanationContainer.innerHTML = generateExplanation(i);\r\n explanationContainer.style.display = 'block';\r\n }\r\n \r\n \/\/ Muda o bot\u00e3o para \"Pr\u00f3ximo N\u00edvel\" ou mostra resultados finais\r\n const submitButton = document.getElementById('submitAnswers');\r\n if (currentLevel < 3) {\r\n submitButton.textContent = \"Pr\u00f3ximo N\u00edvel\";\r\n submitButton.innerHTML = '<i class=\"fas fa-arrow-right\"><\/i> Pr\u00f3ximo N\u00edvel';\r\n submitButton.onclick = advanceToNextLevel;\r\n } else {\r\n submitButton.textContent = \"Ver Resultados Finais\";\r\n submitButton.innerHTML = '<i class=\"fas fa-trophy\"><\/i> Ver Resultados Finais';\r\n submitButton.onclick = showResultsScreen;\r\n }\r\n}\r\n\r\nfunction advanceToNextLevel() {\r\n currentLevel++;\r\n document.getElementById('levelIndicator').textContent = `N\u00edvel ${currentLevel}`;\r\n generateObjects();\r\n document.getElementById('quizContainer').classList.add('hidden');\r\n \r\n \/\/ Resetar o bot\u00e3o para voltar a ser \"Verificar Respostas\"\r\n const submitButton = document.getElementById('submitAnswers');\r\n submitButton.textContent = \"Verificar Respostas\";\r\n submitButton.innerHTML = '<i class=\"fas fa-check-circle\"><\/i> Verificar Respostas';\r\n submitButton.onclick = checkAnswers;\r\n submitButton.disabled = true;\r\n submitButton.classList.add('btn-disabled');\r\n}\r\n\r\nfunction checkAnswers() {\r\n const numGroups = currentLevel + 2;\r\n let correctCount = 0;\r\n \r\n for (let i = 0; i < numGroups; i++) {\r\n const options = document.querySelectorAll(`[id^=\"option-${i}-\"]`);\r\n options.forEach(option => {\r\n const isSelected = option.classList.contains('selected');\r\n const correctAnswers = quizAnswers[i].split(' & ').map(s => s.trim());\r\n const isCorrect = correctAnswers.includes(option.textContent.trim());\r\n \r\n if (isSelected && isCorrect) {\r\n correctCount++;\r\n option.classList.add('correct');\r\n } else if (isSelected && !isCorrect) {\r\n option.classList.add('incorrect');\r\n } else if (!isSelected && isCorrect) {\r\n option.classList.add('correct');\r\n }\r\n });\r\n }\r\n \r\n \/\/ Registra o resultado do n\u00edvel atual\r\n registerLevelResult(currentLevel, correctCount, numGroups);\r\n \r\n \/\/ Desabilitar o bot\u00e3o temporariamente\r\n document.getElementById('submitAnswers').disabled = true;\r\n document.getElementById('submitAnswers').classList.add('btn-disabled');\r\n \r\n \/\/ Mostrar as explica\u00e7\u00f5es ap\u00f3s um curto atraso\r\n setTimeout(() => {\r\n showExplanations();\r\n document.getElementById('submitAnswers').disabled = false;\r\n document.getElementById('submitAnswers').classList.remove('btn-disabled');\r\n }, 1500);\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o modificada para mostrar a tela de resultados sem pontua\u00e7\u00e3o total e precis\u00e3o\r\nfunction showResultsScreen() {\r\n \/\/ Esconde outras telas e mostra a tela de resultados\r\n document.getElementById('gameContent').classList.add('hidden');\r\n document.getElementById('resultsScreen').classList.remove('hidden');\r\n \r\n \/\/ Atualiza o nome do jogador na tela de resultados\r\n document.getElementById('playerNameResult').textContent = playerName;\r\n \r\n \/\/ Calcula estat\u00edsticas gerais\r\n totalCorrectAnswers = levelScores.reduce((sum, score) => sum + score.correct, 0);\r\n totalQuestions = levelScores.reduce((sum, score) => sum + score.total, 0);\r\n \r\n \/\/ Atualiza apenas o elemento de respostas corretas\r\n document.getElementById('correctAnswers').textContent = `${totalCorrectAnswers}\/${totalQuestions}`;\r\n \r\n \/\/ Gera conte\u00fado para o desempenho em cada n\u00edvel\r\n const levelStatsContainer = document.getElementById('levelStatsContainer');\r\n levelStatsContainer.innerHTML = '';\r\n \r\n levelScores.forEach((levelData, index) => {\r\n const levelNumber = index + 1;\r\n const levelPercentage = levelData.total > 0 ? Math.round((levelData.correct \/ levelData.total) * 100) : 0;\r\n \r\n const levelStatItem = document.createElement('div');\r\n levelStatItem.className = 'level-stat-item';\r\n levelStatItem.innerHTML = `\r\n <div class=\"level-name\">N\u00edvel ${levelNumber}<\/div>\r\n <div class=\"level-bar-container\">\r\n <div class=\"level-bar\" style=\"width: ${levelPercentage}%\"><\/div>\r\n <\/div>\r\n <div class=\"level-score\">${levelData.correct}\/${levelData.total}<\/div>\r\n `;\r\n \r\n levelStatsContainer.appendChild(levelStatItem);\r\n });\r\n \r\n \/\/ Gera uma mensagem de feedback com base no desempenho geral\r\n const accuracy = totalQuestions > 0 ? Math.round((totalCorrectAnswers \/ totalQuestions) * 100) : 0;\r\n const feedbackMessage = document.getElementById('feedbackMessage');\r\n if (accuracy >= 90) {\r\n feedbackMessage.textContent = \"Impressionante! Voc\u00ea dominou completamente os conceitos de agrupamento!\";\r\n } else if (accuracy >= 75) {\r\n feedbackMessage.textContent = \"Excelente trabalho! Voc\u00ea demonstrou uma \u00f3tima compreens\u00e3o dos conceitos de agrupamento.\";\r\n } else if (accuracy >= 60) {\r\n feedbackMessage.textContent = \"Bom trabalho! Voc\u00ea est\u00e1 no caminho certo para entender os conceitos de agrupamento.\";\r\n } else if (accuracy >= 40) {\r\n feedbackMessage.textContent = \"Voc\u00ea est\u00e1 progredindo! Continue praticando para melhorar sua compreens\u00e3o de agrupamento.\";\r\n } else {\r\n feedbackMessage.textContent = \"N\u00e3o desanime! O agrupamento pode ser desafiador.\";\r\n }\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para registrar o resultado de um n\u00edvel\r\nfunction registerLevelResult(levelNum, correctCount, totalQuestions) {\r\n \/\/ Calcula a pontua\u00e7\u00e3o com base nas respostas corretas e no n\u00edvel\r\n const scoreMultiplier = levelNum; \/\/ N\u00edveis mais altos valem mais pontos\r\n const score = correctCount * 10 * scoreMultiplier;\r\n \r\n \/\/ Armazena os resultados do n\u00edvel\r\n levelScores[levelNum - 1] = {\r\n level: levelNum,\r\n correct: correctCount,\r\n total: totalQuestions,\r\n score: score\r\n };\r\n}\r\n\r\n\/\/ Event Listeners\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Garantir que a tela de resultados esteja oculta no in\u00edcio\r\n document.getElementById('resultsScreen').classList.add('hidden');\r\n \r\n \/\/ Inicializa o array de pontua\u00e7\u00f5es dos n\u00edveis\r\n for (let i = 0; i < 3; i++) {\r\n levelScores.push({\r\n level: i + 1,\r\n correct: 0,\r\n total: 0,\r\n score: 0\r\n });\r\n }\r\n \r\n \/\/ Adicionar classe CSS para bot\u00f5es desativados\r\n const style = document.createElement('style');\r\n style.textContent = `\r\n .btn-disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n }\r\n `;\r\n document.head.appendChild(style);\r\n \r\n \/\/ Atualiza o handler do bot\u00e3o de submiss\u00e3o para a nova fun\u00e7\u00e3o checkAnswers\r\n document.getElementById('submitAnswers').onclick = checkAnswers;\r\n\r\n document.getElementById('playButton').addEventListener('click', () => {\r\n const nameInput = document.getElementById('nameInput');\r\n if (nameInput.value.trim() === '') {\r\n alert('Por favor, digite seu nome para come\u00e7ar!');\r\n return;\r\n }\r\n \r\n playerName = nameInput.value;\r\n document.getElementById('welcomeScreen').classList.add('hidden');\r\n document.getElementById('gameContent').classList.remove('hidden');\r\n document.getElementById('playerNameText').textContent = playerName;\r\n \r\n \/\/ Initialize the game\r\n setup();\r\n generateObjects();\r\n });\r\n\r\n \/\/ Remover todos os bot\u00f5es para reiniciar ou jogar novamente\r\n try {\r\n if (document.getElementById('restartButton')) {\r\n document.getElementById('restartButton').remove();\r\n }\r\n if (document.getElementById('playAgainButton')) {\r\n document.getElementById('playAgainButton').remove();\r\n }\r\n if (document.getElementById('shareResultsButton')) {\r\n document.getElementById('shareResultsButton').remove();\r\n }\r\n } catch (e) {\r\n console.log(\"Um ou mais bot\u00f5es j\u00e1 foram removidos\");\r\n }\r\n \r\n \/\/ Remover a se\u00e7\u00e3o de bot\u00f5es inteira da tela de resultados\r\n try {\r\n const resultsButtons = document.querySelector('.results-buttons');\r\n if (resultsButtons) {\r\n resultsButtons.remove();\r\n }\r\n } catch (e) {\r\n console.log(\"A se\u00e7\u00e3o de bot\u00f5es j\u00e1 foi removida\");\r\n }\r\n});\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>KMeans Lab – Agrupamento com Explica\u00e7\u00e3o Bem-vindo ao KMeans Lab! Como devemos te chamar? Come\u00e7ar KMeans Lab N\u00edvel 1 Agrupar Analise os grupos e identifique a caracter\u00edstica predominante Verificar Respostas Parab\u00e9ns, ! Voc\u00ea completou o KMeans Lab! 0 Respostas Corretas Desempenho por N\u00edvel Excelente trabalho! Voc\u00ea demonstrou uma \u00f3tima compreens\u00e3o dos conceitos de agrupamento.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":132,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1101"}],"collection":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/comments?post=1101"}],"version-history":[{"count":7,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1101\/revisions"}],"predecessor-version":[{"id":1145,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1101\/revisions\/1145"}],"up":[{"embeddable":true,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/132"}],"wp:attachment":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/media?parent=1101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n \r\n \r\n \r\n KMeans Lab - Agrupamento com Explica\u00e7\u00e3o<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.2.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&family=Source+Code+Pro&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"styles.css\">\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/1.4.0\/p5.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/ml5\/0.7.1\/ml5.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n \r\n <div id=\"welcomeScreen\" class=\"welcome-screen\">\r\n <h1>Bem-vindo ao KMeans Lab!<\/h1>\r\n <div class=\"form-group\">\r\n <label for=\"nameInput\">Como devemos te chamar?<\/label>\r\n <input type=\"text\" id=\"nameInput\" placeholder=\"Digite seu nome\" required>\r\n <\/div>\r\n <button id=\"playButton\" class=\"btn primary-btn\">\r\n <i class=\"fas fa-play-circle\"><\/i> Come\u00e7ar\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div id=\"gameContent\" class=\"game-content hidden\">\r\n <header class=\"game-header\">\r\n <h1>KMeans Lab<\/h1>\r\n <div class=\"game-info\">\r\n <div id=\"playerName\" class=\"player-info\">\r\n <i class=\"fas fa-user\"><\/i> <span id=\"playerNameText\"><\/span>\r\n <\/div>\r\n <div id=\"levelIndicator\" class=\"level-info\">\r\n <i class=\"fas fa-layer-group\"><\/i> N\u00edvel 1\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n \r\n \r\n <div class=\"canvas-container\" id=\"canvas-container\">\r\n \r\n <\/div>\r\n \r\n <div class=\"game-controls\">\r\n <button id=\"groupButton\" class=\"btn action-btn\">\r\n <i class=\"fas fa-object-group\"><\/i> Agrupar\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div id=\"quizContainer\" class=\"quiz-container hidden\">\r\n <h2>Analise os grupos e identifique a caracter\u00edstica predominante<\/h2>\r\n <div id=\"quizQuestions\" class=\"quiz-questions\"><\/div>\r\n <button id=\"submitAnswers\" class=\"btn primary-btn\">\r\n <i class=\"fas fa-check-circle\"><\/i> Verificar Respostas\r\n <\/button>\r\n <\/div>\r\n <\/div> \r\n\r\n \r\n <div id=\"resultsScreen\" class=\"results-screen hidden\">\r\n <h1>Parab\u00e9ns, <span id=\"playerNameResult\"><\/span>!<\/h1>\r\n <div class=\"results-container\">\r\n <div class=\"results-header\">\r\n <i class=\"fas fa-trophy\"><\/i> Voc\u00ea completou o KMeans Lab!\r\n <\/div>\r\n \r\n <div class=\"results-stats\">\r\n <div class=\"stat-item\">\r\n <div class=\"stat-icon\"><i class=\"fas fa-check-circle\"><\/i><\/div>\r\n <div class=\"stat-value\" id=\"correctAnswers\">0<\/div>\r\n <div class=\"stat-label\">Respostas Corretas<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"results-levels\">\r\n <h3>Desempenho por N\u00edvel<\/h3>\r\n <div class=\"level-stats\" id=\"levelStatsContainer\">\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"results-message\">\r\n <p id=\"feedbackMessage\">Excelente trabalho! Voc\u00ea demonstrou uma \u00f3tima compreens\u00e3o dos conceitos de agrupamento.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div> \r\n <script >\r\n let objects = [];\r\nlet groups = [];\r\nlet colors = ['#FF0000', '#0000FF', '#FFFF00'];\r\nlet colorNames = {\r\n '#FF0000': 'vermelho',\r\n '#0000FF': 'azul',\r\n '#FFFF00': 'amarelo'\r\n};\r\nlet sizes = [20, 40];\r\nlet sizeNames = {\r\n 20: 'pequeno',\r\n 40: 'grande'\r\n};\r\nlet shapes = ['square', 'triangle', 'circle'];\r\nlet shapeNames = {\r\n 'square': 'quadrado',\r\n 'triangle': 'tri\u00e2ngulo',\r\n 'circle': 'c\u00edrculo'\r\n};\r\nlet groupPositions = [];\r\nlet centroids = [];\r\nlet playerName = '';\r\nlet currentLevel = 1;\r\nlet quizAnswers = [];\r\nlet selectedAnswers = [];\r\nlet levelScores = []; \/\/ Array para armazenar a pontua\u00e7\u00e3o de cada n\u00edvel\r\nlet totalCorrectAnswers = 0;\r\nlet totalQuestions = 0;\r\nlet groupingDone = false; \/\/ Flag para controlar se o agrupamento j\u00e1 foi realizado\r\nlet explanationsShown = false; \/\/ Flag para controlar se as explica\u00e7\u00f5es j\u00e1 foram mostradas\r\n\r\nfunction setup() {\r\n let canvas = createCanvas(800, 600);\r\n canvas.parent('canvas-container');\r\n generateObjects();\r\n \r\n document.getElementById('groupButton').onclick = () => {\r\n \/\/ Verificar se o agrupamento j\u00e1 foi feito\r\n if (!groupingDone) {\r\n const groupsForLevel = {\r\n 1: 3,\r\n 2: 4,\r\n 3: 5\r\n };\r\n kMeans(groupsForLevel[currentLevel]);\r\n showQuiz();\r\n groupingDone = true; \/\/ Marcar que o agrupamento foi feito\r\n \r\n \/\/ Desativar o bot\u00e3o de agrupar ap\u00f3s o uso\r\n document.getElementById('groupButton').disabled = true;\r\n document.getElementById('groupButton').classList.add('btn-disabled');\r\n }\r\n };\r\n}\r\n\r\nfunction draw() {\r\n background(240);\r\n if (groupPositions.length > 0) {\r\n for (let i = 0; i < groupPositions.length; i++) {\r\n noFill();\r\n stroke(100);\r\n strokeWeight(2);\r\n ellipse(groupPositions[i].x, groupPositions[i].y, 150, 150);\r\n fill(0);\r\n noStroke();\r\n textAlign(CENTER, CENTER);\r\n textSize(24);\r\n text(`Grupo ${i + 1}`, groupPositions[i].x, groupPositions[i].y - 90);\r\n }\r\n }\r\n for (let i = 0; i < objects.length; i++) {\r\n drawObject(objects[i]);\r\n }\r\n}\r\n\r\nfunction generateObjects() {\r\n objects = [];\r\n for (let i = 0; i < 30; i++) {\r\n objects.push({\r\n x: random(width),\r\n y: random(height),\r\n color: random(colors),\r\n size: random(sizes),\r\n shape: random(shapes),\r\n group: null,\r\n targetX: null,\r\n targetY: null\r\n });\r\n }\r\n groupPositions = [];\r\n \r\n \/\/ Resetar a flag de agrupamento ao gerar novos objetos\r\n groupingDone = false;\r\n \/\/ Resetar a flag de explica\u00e7\u00f5es\r\n explanationsShown = false;\r\n \r\n \/\/ Reativar o bot\u00e3o de agrupar\r\n document.getElementById('groupButton').disabled = false;\r\n document.getElementById('groupButton').classList.remove('btn-disabled');\r\n}\r\n\r\nfunction drawObject(obj) {\r\n if (obj.targetX !== null && obj.targetY !== null) {\r\n obj.x = lerp(obj.x, obj.targetX, 0.1);\r\n obj.y = lerp(obj.y, obj.targetY, 0.1);\r\n }\r\n\r\n fill(obj.color);\r\n stroke(0);\r\n strokeWeight(2);\r\n \r\n if (obj.shape === 'square') {\r\n rect(obj.x, obj.y, obj.size, obj.size);\r\n } else if (obj.shape === 'triangle') {\r\n triangle(obj.x, obj.y + obj.size,\r\n obj.x + obj.size \/ 2, obj.y,\r\n obj.x + obj.size, obj.y + obj.size);\r\n } else if (obj.shape === 'circle') {\r\n ellipse(obj.x + obj.size \/ 2, obj.y + obj.size \/ 2, obj.size, obj.size);\r\n }\r\n}\r\n\r\nfunction kMeans(k) {\r\n \/\/ Initialize centroids\r\n centroids = [];\r\n for (let i = 0; i < k; i++) {\r\n centroids.push({\r\n color: random(colors),\r\n size: random(sizes),\r\n shape: random(shapes)\r\n });\r\n }\r\n \r\n let changed = true;\r\n let iterations = 0;\r\n const maxIterations = 100;\r\n \r\n while (changed && iterations < maxIterations) {\r\n changed = false;\r\n iterations++;\r\n \r\n \/\/ Assign objects to centroids\r\n for (let obj of objects) {\r\n let minDist = Infinity;\r\n let newGroup = null;\r\n for (let i = 0; i < centroids.length; i++) {\r\n let dist = calculateDistance(obj, centroids[i]);\r\n if (dist < minDist) {\r\n minDist = dist;\r\n newGroup = i;\r\n }\r\n }\r\n if (obj.group !== newGroup) {\r\n obj.group = newGroup;\r\n changed = true;\r\n }\r\n }\r\n \r\n \/\/ Update centroids\r\n for (let i = 0; i < centroids.length; i++) {\r\n let groupObjects = objects.filter(obj => obj.group === i);\r\n if (groupObjects.length > 0) {\r\n centroids[i] = calculateCentroid(groupObjects);\r\n }\r\n }\r\n }\r\n\r\n \/\/ Calculate group positions\r\n groupPositions = [];\r\n for (let i = 0; i < k; i++) {\r\n groupPositions.push({\r\n x: width \/ (k + 1) * (i + 1),\r\n y: height \/ 2\r\n });\r\n }\r\n\r\n \/\/ Assign target positions to objects\r\n for (let obj of objects) {\r\n let groupPos = groupPositions[obj.group];\r\n let angle = random(TWO_PI);\r\n let radius = random(30, 60);\r\n obj.targetX = groupPos.x + cos(angle) * radius;\r\n obj.targetY = groupPos.y + sin(angle) * radius;\r\n }\r\n}\r\n\r\nfunction calculateDistance(obj1, obj2) {\r\n let colorDist = obj1.color === obj2.color ? 0 : 1;\r\n let sizeDist = Math.abs(obj1.size - obj2.size) \/ Math.max(...sizes);\r\n let shapeDist = obj1.shape === obj2.shape ? 0 : 1;\r\n return colorDist + sizeDist + shapeDist;\r\n}\r\n\r\nfunction calculateCentroid(group) {\r\n let centroid = { color: {}, size: 0, shape: {} };\r\n for (let obj of group) {\r\n centroid.color[obj.color] = (centroid.color[obj.color] || 0) + 1;\r\n centroid.size += obj.size;\r\n centroid.shape[obj.shape] = (centroid.shape[obj.shape] || 0) + 1;\r\n }\r\n centroid.color = Object.keys(centroid.color).reduce((a, b) => centroid.color[a] > centroid.color[b] ? a : b);\r\n centroid.size \/= group.length;\r\n centroid.shape = Object.keys(centroid.shape).reduce((a, b) => centroid.shape[a] > centroid.shape[b] ? a : b);\r\n return centroid;\r\n}\r\n\r\nfunction generateExplanation(groupIndex) {\r\n let groupObjects = objects.filter(obj => obj.group === groupIndex);\r\n \r\n \/\/ Calculate characteristics frequencies\r\n let colorFreq = {};\r\n let sizeFreq = {};\r\n let shapeFreq = {};\r\n \r\n groupObjects.forEach(obj => {\r\n colorFreq[obj.color] = (colorFreq[obj.color] || 0) + 1;\r\n sizeFreq[obj.size] = (sizeFreq[obj.size] || 0) + 1;\r\n shapeFreq[obj.shape] = (shapeFreq[obj.shape] || 0) + 1;\r\n });\r\n\r\n \/\/ Find dominant characteristics\r\n let dominantColor = Object.keys(colorFreq).reduce((a, b) => colorFreq[a] > colorFreq[b] ? a : b);\r\n let dominantSize = Object.keys(sizeFreq).reduce((a, b) => sizeFreq[a] > sizeFreq[b] ? a : b);\r\n let dominantShape = Object.keys(shapeFreq).reduce((a, b) => shapeFreq[a] > shapeFreq[b] ? a : b);\r\n\r\n let explanation = `<div class=\"group-explanation\">\r\n <strong>Explica\u00e7\u00e3o do Grupo ${groupIndex + 1}<\/strong> (${groupObjects.length} objetos)<br>\r\n Caracter\u00edsticas predominantes:<br>\r\n - Cor: ${colorNames[dominantColor]} (${Math.round(colorFreq[dominantColor]\/groupObjects.length*100)}%)<br>\r\n - Tamanho: ${sizeNames[dominantSize]} (${Math.round(sizeFreq[dominantSize]\/groupObjects.length*100)}%)<br>\r\n - Forma: ${shapeNames[dominantShape]} (${Math.round(shapeFreq[dominantShape]\/groupObjects.length*100)}%)\r\n <\/div>`;\r\n \r\n return explanation;\r\n}\r\n\r\nfunction showQuiz() {\r\n const quizContainer = document.getElementById('quizContainer');\r\n const quizQuestions = document.getElementById('quizQuestions');\r\n quizContainer.classList.remove('hidden');\r\n \r\n \/\/ Bot\u00e3o come\u00e7a como \"Verificar Respostas\"\r\n const submitButton = document.getElementById('submitAnswers');\r\n submitButton.textContent = \"Verificar Respostas\";\r\n submitButton.innerHTML = '<i class=\"fas fa-check-circle\"><\/i> Verificar Respostas';\r\n submitButton.style.display = 'block';\r\n submitButton.disabled = true;\r\n submitButton.classList.add('btn-disabled');\r\n \r\n quizAnswers = [];\r\n const numGroups = currentLevel + 2; \/\/ 3 groups for level 1, 4 for level 2, 5 for level 3\r\n selectedAnswers = new Array(numGroups).fill(null);\r\n quizQuestions.innerHTML = '';\r\n\r\n for (let i = 0; i < numGroups; i++) {\r\n let groupObjects = objects.filter(obj => obj.group === i);\r\n \r\n \/\/ Calculate characteristics frequencies\r\n let colorFreq = {};\r\n let sizeFreq = {};\r\n let shapeFreq = {};\r\n \r\n groupObjects.forEach(obj => {\r\n colorFreq[obj.color] = (colorFreq[obj.color] || 0) + 1;\r\n sizeFreq[obj.size] = (sizeFreq[obj.size] || 0) + 1;\r\n shapeFreq[obj.shape] = (shapeFreq[obj.shape] || 0) + 1;\r\n });\r\n\r\n \/\/ Find dominant characteristic\r\n let dominantColor = Object.keys(colorFreq).reduce((a, b) => colorFreq[a] > colorFreq[b] ? a : b);\r\n let dominantSize = Object.keys(sizeFreq).reduce((a, b) => sizeFreq[a] > sizeFreq[b] ? a : b);\r\n let dominantShape = Object.keys(shapeFreq).reduce((a, b) => shapeFreq[a] > shapeFreq[b] ? a : b);\r\n\r\n let colorPercentage = Math.round(colorFreq[dominantColor]\/groupObjects.length*100);\r\n let sizePercentage = Math.round(sizeFreq[dominantSize]\/groupObjects.length*100);\r\n let shapePercentage = Math.round(shapeFreq[dominantShape]\/groupObjects.length*100);\r\n \r\n let maxPercentage = Math.max(colorPercentage, sizePercentage, shapePercentage);\r\n let correctAnswers = [];\r\n\r\n if (colorPercentage === maxPercentage) {\r\n correctAnswers.push(`Cor: ${colorNames[dominantColor]}`);\r\n }\r\n if (sizePercentage === maxPercentage) {\r\n correctAnswers.push(`Tamanho: ${sizeNames[dominantSize]}`);\r\n }\r\n if (shapePercentage === maxPercentage) {\r\n correctAnswers.push(`Forma: ${shapeNames[dominantShape]}`);\r\n }\r\n\r\n \/\/ Agora junta tudo em uma \u00fanica string separada por v\u00edrgula\r\n let correctAnswerString = correctAnswers.join(' & ');\r\n\r\n \/\/ Armazena como string no array de respostas corretas\r\n quizAnswers.push(correctAnswerString);\r\n\r\n const options = [\r\n `Cor: ${colorNames[dominantColor]}`,\r\n `Tamanho: ${sizeNames[dominantSize]}`,\r\n `Forma: ${shapeNames[dominantShape]}`\r\n ];\r\n\r\n const questionHTML = `\r\n <div class=\"quiz-item\" id=\"quiz-item-${i}\">\r\n <h4>Grupo ${i + 1}<\/h4>\r\n <p class=\"question-status\" id=\"status-${i}\">Escolha uma op\u00e7\u00e3o (obrigat\u00f3rio)<\/p>\r\n <div class=\"quiz-options\">\r\n ${options.map((option, index) => `\r\n <div class=\"quiz-option\" onclick=\"selectAnswer(${i}, '${option}')\"\r\n id=\"option-${i}-${index}\">\r\n ${option}\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <div class=\"explanation-container\" id=\"explanation-${i}\" style=\"display: none;\"><\/div>\r\n <\/div>\r\n `;\r\n \r\n quizQuestions.innerHTML += questionHTML;\r\n }\r\n \r\n \/\/ Adicionar CSS para os status das perguntas e explica\u00e7\u00f5es\r\n const style = document.createElement('style');\r\n style.textContent = `\r\n .question-status {\r\n font-size: 14px;\r\n color: #d32f2f;\r\n margin: 5px 0;\r\n }\r\n .question-completed {\r\n color: #388e3c;\r\n }\r\n .explanation-container {\r\n margin-top: 10px;\r\n padding: 10px;\r\n background-color: #f5f5f5;\r\n border-left: 4px solid #2196f3;\r\n border-radius: 4px;\r\n animation: fadeIn 0.5s;\r\n }\r\n @keyframes fadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n .group-explanation {\r\n margin-bottom: 10px;\r\n }\r\n `;\r\n document.head.appendChild(style);\r\n}\r\n\r\nfunction selectAnswer(groupIndex, answer) {\r\n selectedAnswers[groupIndex] = answer;\r\n \r\n \/\/ Update visual selection\r\n const options = document.querySelectorAll(`[id^=\"option-${groupIndex}-\"]`);\r\n options.forEach(option => {\r\n option.classList.remove('selected');\r\n if (option.textContent.trim() === answer) {\r\n option.classList.add('selected');\r\n }\r\n });\r\n \r\n \/\/ Atualizar o status da pergunta para completado\r\n const statusElement = document.getElementById(`status-${groupIndex}`);\r\n statusElement.textContent = \"Op\u00e7\u00e3o selecionada \u2713\";\r\n statusElement.classList.add('question-completed');\r\n \r\n \/\/ Check if all questions are answered\r\n if (selectedAnswers.every(answer => answer !== null)) {\r\n document.getElementById('submitAnswers').disabled = false;\r\n document.getElementById('submitAnswers').classList.remove('btn-disabled');\r\n }\r\n}\r\n\r\nfunction showExplanations() {\r\n explanationsShown = true;\r\n const numGroups = currentLevel + 2;\r\n \r\n for (let i = 0; i < numGroups; i++) {\r\n \/\/ Mostra a explica\u00e7\u00e3o para este grupo\r\n const explanationContainer = document.getElementById(`explanation-${i}`);\r\n explanationContainer.innerHTML = generateExplanation(i);\r\n explanationContainer.style.display = 'block';\r\n }\r\n \r\n \/\/ Muda o bot\u00e3o para \"Pr\u00f3ximo N\u00edvel\" ou mostra resultados finais\r\n const submitButton = document.getElementById('submitAnswers');\r\n if (currentLevel < 3) {\r\n submitButton.textContent = \"Pr\u00f3ximo N\u00edvel\";\r\n submitButton.innerHTML = '<i class=\"fas fa-arrow-right\"><\/i> Pr\u00f3ximo N\u00edvel';\r\n submitButton.onclick = advanceToNextLevel;\r\n } else {\r\n submitButton.textContent = \"Ver Resultados Finais\";\r\n submitButton.innerHTML = '<i class=\"fas fa-trophy\"><\/i> Ver Resultados Finais';\r\n submitButton.onclick = showResultsScreen;\r\n }\r\n}\r\n\r\nfunction advanceToNextLevel() {\r\n currentLevel++;\r\n document.getElementById('levelIndicator').textContent = `N\u00edvel ${currentLevel}`;\r\n generateObjects();\r\n document.getElementById('quizContainer').classList.add('hidden');\r\n \r\n \/\/ Resetar o bot\u00e3o para voltar a ser \"Verificar Respostas\"\r\n const submitButton = document.getElementById('submitAnswers');\r\n submitButton.textContent = \"Verificar Respostas\";\r\n submitButton.innerHTML = '<i class=\"fas fa-check-circle\"><\/i> Verificar Respostas';\r\n submitButton.onclick = checkAnswers;\r\n submitButton.disabled = true;\r\n submitButton.classList.add('btn-disabled');\r\n}\r\n\r\nfunction checkAnswers() {\r\n const numGroups = currentLevel + 2;\r\n let correctCount = 0;\r\n \r\n for (let i = 0; i < numGroups; i++) {\r\n const options = document.querySelectorAll(`[id^=\"option-${i}-\"]`);\r\n options.forEach(option => {\r\n const isSelected = option.classList.contains('selected');\r\n const correctAnswers = quizAnswers[i].split(' & ').map(s => s.trim());\r\n const isCorrect = correctAnswers.includes(option.textContent.trim());\r\n \r\n if (isSelected && isCorrect) {\r\n correctCount++;\r\n option.classList.add('correct');\r\n } else if (isSelected && !isCorrect) {\r\n option.classList.add('incorrect');\r\n } else if (!isSelected && isCorrect) {\r\n option.classList.add('correct');\r\n }\r\n });\r\n }\r\n \r\n \/\/ Registra o resultado do n\u00edvel atual\r\n registerLevelResult(currentLevel, correctCount, numGroups);\r\n \r\n \/\/ Desabilitar o bot\u00e3o temporariamente\r\n document.getElementById('submitAnswers').disabled = true;\r\n document.getElementById('submitAnswers').classList.add('btn-disabled');\r\n \r\n \/\/ Mostrar as explica\u00e7\u00f5es ap\u00f3s um curto atraso\r\n setTimeout(() => {\r\n showExplanations();\r\n document.getElementById('submitAnswers').disabled = false;\r\n document.getElementById('submitAnswers').classList.remove('btn-disabled');\r\n }, 1500);\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o modificada para mostrar a tela de resultados sem pontua\u00e7\u00e3o total e precis\u00e3o\r\nfunction showResultsScreen() {\r\n \/\/ Esconde outras telas e mostra a tela de resultados\r\n document.getElementById('gameContent').classList.add('hidden');\r\n document.getElementById('resultsScreen').classList.remove('hidden');\r\n \r\n \/\/ Atualiza o nome do jogador na tela de resultados\r\n document.getElementById('playerNameResult').textContent = playerName;\r\n \r\n \/\/ Calcula estat\u00edsticas gerais\r\n totalCorrectAnswers = levelScores.reduce((sum, score) => sum + score.correct, 0);\r\n totalQuestions = levelScores.reduce((sum, score) => sum + score.total, 0);\r\n \r\n \/\/ Atualiza apenas o elemento de respostas corretas\r\n document.getElementById('correctAnswers').textContent = `${totalCorrectAnswers}\/${totalQuestions}`;\r\n \r\n \/\/ Gera conte\u00fado para o desempenho em cada n\u00edvel\r\n const levelStatsContainer = document.getElementById('levelStatsContainer');\r\n levelStatsContainer.innerHTML = '';\r\n \r\n levelScores.forEach((levelData, index) => {\r\n const levelNumber = index + 1;\r\n const levelPercentage = levelData.total > 0 ? Math.round((levelData.correct \/ levelData.total) * 100) : 0;\r\n \r\n const levelStatItem = document.createElement('div');\r\n levelStatItem.className = 'level-stat-item';\r\n levelStatItem.innerHTML = `\r\n <div class=\"level-name\">N\u00edvel ${levelNumber}<\/div>\r\n <div class=\"level-bar-container\">\r\n <div class=\"level-bar\" style=\"width: ${levelPercentage}%\"><\/div>\r\n <\/div>\r\n <div class=\"level-score\">${levelData.correct}\/${levelData.total}<\/div>\r\n `;\r\n \r\n levelStatsContainer.appendChild(levelStatItem);\r\n });\r\n \r\n \/\/ Gera uma mensagem de feedback com base no desempenho geral\r\n const accuracy = totalQuestions > 0 ? Math.round((totalCorrectAnswers \/ totalQuestions) * 100) : 0;\r\n const feedbackMessage = document.getElementById('feedbackMessage');\r\n if (accuracy >= 90) {\r\n feedbackMessage.textContent = \"Impressionante! Voc\u00ea dominou completamente os conceitos de agrupamento!\";\r\n } else if (accuracy >= 75) {\r\n feedbackMessage.textContent = \"Excelente trabalho! Voc\u00ea demonstrou uma \u00f3tima compreens\u00e3o dos conceitos de agrupamento.\";\r\n } else if (accuracy >= 60) {\r\n feedbackMessage.textContent = \"Bom trabalho! Voc\u00ea est\u00e1 no caminho certo para entender os conceitos de agrupamento.\";\r\n } else if (accuracy >= 40) {\r\n feedbackMessage.textContent = \"Voc\u00ea est\u00e1 progredindo! Continue praticando para melhorar sua compreens\u00e3o de agrupamento.\";\r\n } else {\r\n feedbackMessage.textContent = \"N\u00e3o desanime! O agrupamento pode ser desafiador.\";\r\n }\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para registrar o resultado de um n\u00edvel\r\nfunction registerLevelResult(levelNum, correctCount, totalQuestions) {\r\n \/\/ Calcula a pontua\u00e7\u00e3o com base nas respostas corretas e no n\u00edvel\r\n const scoreMultiplier = levelNum; \/\/ N\u00edveis mais altos valem mais pontos\r\n const score = correctCount * 10 * scoreMultiplier;\r\n \r\n \/\/ Armazena os resultados do n\u00edvel\r\n levelScores[levelNum - 1] = {\r\n level: levelNum,\r\n correct: correctCount,\r\n total: totalQuestions,\r\n score: score\r\n };\r\n}\r\n\r\n\/\/ Event Listeners\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Garantir que a tela de resultados esteja oculta no in\u00edcio\r\n document.getElementById('resultsScreen').classList.add('hidden');\r\n \r\n \/\/ Inicializa o array de pontua\u00e7\u00f5es dos n\u00edveis\r\n for (let i = 0; i < 3; i++) {\r\n levelScores.push({\r\n level: i + 1,\r\n correct: 0,\r\n total: 0,\r\n score: 0\r\n });\r\n }\r\n \r\n \/\/ Adicionar classe CSS para bot\u00f5es desativados\r\n const style = document.createElement('style');\r\n style.textContent = `\r\n .btn-disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n }\r\n `;\r\n document.head.appendChild(style);\r\n \r\n \/\/ Atualiza o handler do bot\u00e3o de submiss\u00e3o para a nova fun\u00e7\u00e3o checkAnswers\r\n document.getElementById('submitAnswers').onclick = checkAnswers;\r\n\r\n document.getElementById('playButton').addEventListener('click', () => {\r\n const nameInput = document.getElementById('nameInput');\r\n if (nameInput.value.trim() === '') {\r\n alert('Por favor, digite seu nome para come\u00e7ar!');\r\n return;\r\n }\r\n \r\n playerName = nameInput.value;\r\n document.getElementById('welcomeScreen').classList.add('hidden');\r\n document.getElementById('gameContent').classList.remove('hidden');\r\n document.getElementById('playerNameText').textContent = playerName;\r\n \r\n \/\/ Initialize the game\r\n setup();\r\n generateObjects();\r\n });\r\n\r\n \/\/ Remover todos os bot\u00f5es para reiniciar ou jogar novamente\r\n try {\r\n if (document.getElementById('restartButton')) {\r\n document.getElementById('restartButton').remove();\r\n }\r\n if (document.getElementById('playAgainButton')) {\r\n document.getElementById('playAgainButton').remove();\r\n }\r\n if (document.getElementById('shareResultsButton')) {\r\n document.getElementById('shareResultsButton').remove();\r\n }\r\n } catch (e) {\r\n console.log(\"Um ou mais bot\u00f5es j\u00e1 foram removidos\");\r\n }\r\n \r\n \/\/ Remover a se\u00e7\u00e3o de bot\u00f5es inteira da tela de resultados\r\n try {\r\n const resultsButtons = document.querySelector('.results-buttons');\r\n if (resultsButtons) {\r\n resultsButtons.remove();\r\n }\r\n } catch (e) {\r\n console.log(\"A se\u00e7\u00e3o de bot\u00f5es j\u00e1 foi removida\");\r\n }\r\n});\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>KMeans Lab – Agrupamento com Explica\u00e7\u00e3o Bem-vindo ao KMeans Lab! Como devemos te chamar? Come\u00e7ar KMeans Lab N\u00edvel 1 Agrupar Analise os grupos e identifique a caracter\u00edstica predominante Verificar Respostas Parab\u00e9ns, ! Voc\u00ea completou o KMeans Lab! 0 Respostas Corretas Desempenho por N\u00edvel Excelente trabalho! Voc\u00ea demonstrou uma \u00f3tima compreens\u00e3o dos conceitos de agrupamento.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":132,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1101"}],"collection":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/comments?post=1101"}],"version-history":[{"count":7,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1101\/revisions"}],"predecessor-version":[{"id":1145,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1101\/revisions\/1145"}],"up":[{"embeddable":true,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/132"}],"wp:attachment":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/media?parent=1101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}