Coloque na Ordem Certa<\/title>\n\n<style>\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n font-family: Arial, sans-serif;\n background: #f4f7fb;\n color: #222;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n padding: 25px 15px 50px;\n }\n\n h1 {\n text-align: center;\n font-size: 2rem;\n margin-bottom: 8px;\n }\n\n .introducao {\n text-align: center;\n font-size: 1.1rem;\n margin-bottom: 30px;\n }\n\n .atividade {\n background: white;\n border-radius: 16px;\n padding: 22px;\n margin-bottom: 25px;\n box-shadow: 0 4px 14px rgba(0,0,0,0.08);\n }\n\n .atividade h2 {\n margin-top: 0;\n font-size: 1.35rem;\n }\n\n .instrucao {\n margin-bottom: 15px;\n }\n\n .fichas {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n margin-bottom: 22px;\n }\n\n .ficha {\n background: #e8f0ff;\n border: 2px solid #4678d8;\n border-radius: 10px;\n padding: 13px 16px;\n cursor: grab;\n font-size: 1rem;\n user-select: none;\n transition: 0.2s;\n }\n\n .ficha:hover {\n transform: translateY(-2px);\n }\n\n .ficha.selecionada {\n background: #fff1a8;\n border-color: #d59a00;\n }\n\n .espacos {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n }\n\n .espaco {\n min-height: 85px;\n border: 3px dashed #aaa;\n border-radius: 12px;\n padding: 8px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background: #fafafa;\n cursor: pointer;\n }\n\n .numero {\n font-weight: bold;\n color: #777;\n margin-bottom: 6px;\n }\n\n .espaco .ficha {\n width: 100%;\n text-align: center;\n margin: 0;\n }\n\n .botoes {\n margin-top: 18px;\n display: flex;\n gap: 10px;\n }\n\n button {\n border: none;\n border-radius: 9px;\n padding: 11px 18px;\n font-size: 1rem;\n cursor: pointer;\n }\n\n .verificar {\n background: #2e7d32;\n color: white;\n }\n\n .reiniciar {\n background: #e5e5e5;\n }\n\n .feedback {\n margin-top: 15px;\n font-size: 1.1rem;\n font-weight: bold;\n min-height: 24px;\n }\n\n .correto {\n color: #22863a;\n }\n\n .errado {\n color: #c62828;\n }\n\n .resultado-final {\n text-align: center;\n font-size: 1.3rem;\n font-weight: bold;\n background: white;\n border-radius: 14px;\n padding: 20px;\n margin-top: 30px;\n box-shadow: 0 4px 14px rgba(0,0,0,0.08);\n }\n\n @media (max-width: 650px) {\n .espacos {\n grid-template-columns: 1fr;\n }\n\n .ficha {\n width: 100%;\n text-align: center;\n }\n }\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"container\">\n\n <h1>Coloque na Ordem Certa<\/h1>\n\n <p class=\"introducao\">\n Arraste as fichas para os espa\u00e7os na ordem correta.\n <\/p>\n\n \n <div class=\"atividade\" data-resposta=\"Colocar a meia|Colocar o t\u00eanis|Amarrar o cadar\u00e7o\">\n\n <h2>1. Colocando o t\u00eanis<\/h2>\n\n <p class=\"instrucao\">\n Qual \u00e9 a ordem correta?\n <\/p>\n\n <div class=\"fichas\">\n <div class=\"ficha\" draggable=\"true\">Amarrar o cadar\u00e7o<\/div>\n <div class=\"ficha\" draggable=\"true\">Colocar a meia<\/div>\n <div class=\"ficha\" draggable=\"true\">Colocar o t\u00eanis<\/div>\n <\/div>\n\n <div class=\"espacos\">\n <div class=\"espaco\">\n <span class=\"numero\">1\u00ba<\/span>\n <\/div>\n\n <div class=\"espaco\">\n <span class=\"numero\">2\u00ba<\/span>\n <\/div>\n\n <div class=\"espaco\">\n <span class=\"numero\">3\u00ba<\/span>\n <\/div>\n <\/div>\n\n <div class=\"botoes\">\n <button class=\"verificar\">Verificar<\/button>\n <button class=\"reiniciar\">Tentar novamente<\/button>\n <\/div>\n\n <div class=\"feedback\"><\/div>\n\n <\/div>\n\n\n \n <div class=\"atividade\" data-resposta=\"Colocar pasta na escova|Escovar os dentes|Enxaguar a boca\">\n\n <h2>2. Escovando os dentes<\/h2>\n\n <p class=\"instrucao\">\n Qual \u00e9 a ordem correta?\n <\/p>\n\n <div class=\"fichas\">\n <div class=\"ficha\" draggable=\"true\">Enxaguar a boca<\/div>\n <div class=\"ficha\" draggable=\"true\">Escovar os dentes<\/div>\n <div class=\"ficha\" draggable=\"true\">Colocar pasta na escova<\/div>\n <\/div>\n\n <div class=\"espacos\">\n <div class=\"espaco\">\n <span class=\"numero\">1\u00ba<\/span>\n <\/div>\n\n <div class=\"espaco\">\n <span class=\"numero\">2\u00ba<\/span>\n <\/div>\n\n <div class=\"espaco\">\n <span class=\"numero\">3\u00ba<\/span>\n <\/div>\n <\/div>\n\n <div class=\"botoes\">\n <button class=\"verificar\">Verificar<\/button>\n <button class=\"reiniciar\">Tentar novamente<\/button>\n <\/div>\n\n <div class=\"feedback\"><\/div>\n\n <\/div>\n\n\n \n <div class=\"atividade\" data-resposta=\"Colocar a chave na fechadura|Girar a chave|Abrir a porta\">\n\n <h2>3. Abrindo a porta<\/h2>\n\n <p class=\"instrucao\">\n Qual \u00e9 a ordem correta?\n <\/p>\n\n <div class=\"fichas\">\n <div class=\"ficha\" draggable=\"true\">Abrir a porta<\/div>\n <div class=\"ficha\" draggable=\"true\">Colocar a chave na fechadura<\/div>\n <div class=\"ficha\" draggable=\"true\">Girar a chave<\/div>\n <\/div>\n\n <div class=\"espacos\">\n <div class=\"espaco\">\n <span class=\"numero\">1\u00ba<\/span>\n <\/div>\n\n <div class=\"espaco\">\n <span class=\"numero\">2\u00ba<\/span>\n <\/div>\n\n <div class=\"espaco\">\n <span class=\"numero\">3\u00ba<\/span>\n <\/div>\n <\/div>\n\n <div class=\"botoes\">\n <button class=\"verificar\">Verificar<\/button>\n <button class=\"reiniciar\">Tentar novamente<\/button>\n <\/div>\n\n <div class=\"feedback\"><\/div>\n\n <\/div>\n\n <div class=\"resultado-final\">\n Atividades corretas: <span id=\"pontuacao\">0<\/span> de 3\n <\/div>\n\n<\/div>\n\n\n<script>\n\nlet fichaArrastada = null;\nlet fichaSelecionada = null;\n\n\n\/\/ ==========================\n\/\/ ARRASTAR\n\/\/ ==========================\n\ndocument.querySelectorAll(\".ficha\").forEach(ficha => {\n\n ficha.addEventListener(\"dragstart\", () => {\n fichaArrastada = ficha;\n });\n\n ficha.addEventListener(\"dragend\", () => {\n fichaArrastada = null;\n });\n\n\n \/\/ Tamb\u00e9m permite clicar\n ficha.addEventListener(\"click\", () => {\n\n document.querySelectorAll(\".ficha\").forEach(f => {\n f.classList.remove(\"selecionada\");\n });\n\n fichaSelecionada = ficha;\n ficha.classList.add(\"selecionada\");\n\n });\n\n});\n\n\n\/\/ ==========================\n\/\/ ESPA\u00c7OS\n\/\/ ==========================\n\ndocument.querySelectorAll(\".espaco\").forEach(espaco => {\n\n espaco.addEventListener(\"dragover\", evento => {\n evento.preventDefault();\n });\n\n espaco.addEventListener(\"drop\", evento => {\n\n evento.preventDefault();\n\n if (fichaArrastada) {\n moverFicha(fichaArrastada, espaco);\n }\n\n });\n\n\n \/\/ Clique para colocar ficha\n espaco.addEventListener(\"click\", () => {\n\n if (fichaSelecionada) {\n\n moverFicha(fichaSelecionada, espaco);\n\n fichaSelecionada.classList.remove(\"selecionada\");\n fichaSelecionada = null;\n\n }\n\n });\n\n});\n\n\n\/\/ ==========================\n\/\/ MOVER FICHA\n\/\/ ==========================\n\nfunction moverFicha(ficha, espaco) {\n\n const fichaExistente = espaco.querySelector(\".ficha\");\n\n \/\/ Se o espa\u00e7o j\u00e1 tiver uma ficha,\n \/\/ devolve a ficha anterior para a \u00e1rea inicial\n if (fichaExistente) {\n\n const atividade = espaco.closest(\".atividade\");\n const areaFichas = atividade.querySelector(\".fichas\");\n\n areaFichas.appendChild(fichaExistente);\n\n }\n\n espaco.appendChild(ficha);\n\n}\n\n\n\/\/ ==========================\n\/\/ VERIFICAR\n\/\/ ==========================\n\ndocument.querySelectorAll(\".verificar\").forEach(botao => {\n\n botao.addEventListener(\"click\", () => {\n\n const atividade = botao.closest(\".atividade\");\n\n const respostaCorreta =\n atividade.dataset.resposta.split(\"|\");\n\n const espacos =\n atividade.querySelectorAll(\".espaco\");\n\n const respostaAluno = [];\n\n espacos.forEach(espaco => {\n\n const ficha = espaco.querySelector(\".ficha\");\n\n respostaAluno.push(\n ficha ? ficha.textContent.trim() : \"\"\n );\n\n });\n\n\n const feedback =\n atividade.querySelector(\".feedback\");\n\n\n \/\/ Verifica espa\u00e7os vazios\n if (respostaAluno.includes(\"\")) {\n\n feedback.textContent =\n \"Coloque todas as fichas nos espa\u00e7os.\";\n\n feedback.className =\n \"feedback errado\";\n\n return;\n\n }\n\n\n const correto =\n respostaAluno.every(\n (item, indice) =>\n item === respostaCorreta[indice]\n );\n\n\n if (correto) {\n\n feedback.textContent =\n \"\u2705 Muito bem! A ordem est\u00e1 correta!\";\n\n feedback.className =\n \"feedback correto\";\n\n atividade.dataset.acertou = \"true\";\n\n }\n\n else {\n\n feedback.textContent =\n \"\u274c Ainda n\u00e3o est\u00e1 na ordem correta. Tente novamente!\";\n\n feedback.className =\n \"feedback errado\";\n\n atividade.dataset.acertou = \"false\";\n\n }\n\n\n atualizarPontuacao();\n\n });\n\n});\n\n\n\/\/ ==========================\n\/\/ REINICIAR\n\/\/ ==========================\n\ndocument.querySelectorAll(\".reiniciar\").forEach(botao => {\n\n botao.addEventListener(\"click\", () => {\n\n const atividade =\n botao.closest(\".atividade\");\n\n const areaFichas =\n atividade.querySelector(\".fichas\");\n\n atividade\n .querySelectorAll(\".espaco .ficha\")\n .forEach(ficha => {\n\n areaFichas.appendChild(ficha);\n\n });\n\n\n atividade.querySelector(\".feedback\")\n .textContent = \"\";\n\n\n atividade.dataset.acertou = \"false\";\n\n atualizarPontuacao();\n\n });\n\n});\n\n\n\/\/ ==========================\n\/\/ PONTUA\u00c7\u00c3O\n\/\/ ==========================\n\nfunction atualizarPontuacao() {\n\n let pontos = 0;\n\n document.querySelectorAll(\".atividade\")\n .forEach(atividade => {\n\n if (atividade.dataset.acertou === \"true\") {\n pontos++;\n }\n\n });\n\n document.getElementById(\"pontuacao\")\n .textContent = pontos;\n\n}\n\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><a href=\"https:\/\/www.kidlocoding.com\/sequences\/paintthesquares\">Clique aqui.<\/a> Jogue at\u00e9 o n\u00edvel 5.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fluxograma<\/h2>\n\n\n\n<p>Fluxograma \u00e9 um esquema que mostra os passos de uma tarefa na ordem em que devem acontecer.<\/p>\n\n\n\n<p><a href=\"https:\/\/drive.google.com\/file\/d\/1iCU5tNg747LWrChQqsfUSDLxxupRdOzA\/view?usp=sharing\">Clique aqui<\/a> para ver um exemplo de fluxograma.<\/p>\n\n\n\n<div id=\"quiz-semaforo\">\n\n <div class=\"questao\">\n <p><strong>1. Se o sem\u00e1foro estiver verde para pedestres, o que voc\u00ea deve fazer?<\/strong><\/p>\n\n <label>\n <input type=\"radio\" name=\"q1\" value=\"certa\">\n Atravessar na faixa de pedestres.\n <\/label>\n\n <label>\n <input type=\"radio\" name=\"q1\" value=\"errada\">\n Aguardar o sem\u00e1foro ficar verde.\n <\/label>\n <\/div>\n\n <div class=\"questao\">\n <p><strong>2. Se o sem\u00e1foro n\u00e3o estiver verde para pedestres, o que voc\u00ea deve fazer?<\/strong><\/p>\n\n <label>\n <input type=\"radio\" name=\"q2\" value=\"errada\">\n Atravessar na faixa de pedestres.\n <\/label>\n\n <label>\n <input type=\"radio\" name=\"q2\" value=\"certa\">\n Aguardar o sem\u00e1foro ficar verde.\n <\/label>\n <\/div>\n\n <div class=\"botoes\">\n <button type=\"button\" onclick=\"verificarQuizSemaforo()\">Verificar<\/button>\n <button type=\"button\" onclick=\"reiniciarQuizSemaforo()\">Reiniciar<\/button>\n <\/div>\n\n <p id=\"resultado-semaforo\"><\/p>\n\n<\/div>\n\n<style>\n #quiz-semaforo {\n width: auto;\n max-width: var(--wp--style--global--content-size, 700px);\n margin: 20px auto;\n padding: 0;\n box-sizing: border-box;\n font-family: Arial, sans-serif;\n }\n\n #quiz-semaforo * {\n box-sizing: border-box;\n }\n\n #quiz-semaforo .questao {\n width: 100%;\n background: #f7f7f7;\n border: 2px solid #ddd;\n border-radius: 10px;\n padding: 18px;\n margin-bottom: 18px;\n }\n\n #quiz-semaforo .questao p {\n font-size: 18px;\n margin-top: 0;\n margin-bottom: 14px;\n }\n\n #quiz-semaforo label {\n display: block;\n width: 100%;\n background: white;\n border: 2px solid #ccc;\n border-radius: 8px;\n padding: 12px;\n margin: 10px 0;\n cursor: pointer;\n font-size: 17px;\n }\n\n #quiz-semaforo label:hover {\n background: #eeeeee;\n }\n\n #quiz-semaforo input {\n margin-right: 8px;\n }\n\n #quiz-semaforo .botoes {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n }\n\n #quiz-semaforo button {\n padding: 12px 22px;\n border: 2px solid #444;\n border-radius: 8px;\n background: white;\n font-size: 17px;\n cursor: pointer;\n }\n\n #quiz-semaforo button:hover {\n background: #eeeeee;\n }\n\n #resultado-semaforo {\n font-size: 20px;\n font-weight: bold;\n margin-top: 20px;\n }\n\n #quiz-semaforo label.correta {\n background: #d9f7d9 !important;\n border-color: #2e8b57 !important;\n }\n\n #quiz-semaforo label.errada {\n background: #ffdede !important;\n border-color: #c0392b !important;\n }\n<\/style>\n\n<script>\n function verificarQuizSemaforo() {\n const quiz = document.getElementById(\"quiz-semaforo\");\n const questoes = quiz.querySelectorAll(\".questao\");\n\n let acertos = 0;\n let respondidas = 0;\n\n questoes.forEach(function(questao) {\n\n const alternativas = questao.querySelectorAll(\"label\");\n\n alternativas.forEach(function(label) {\n label.classList.remove(\"correta\", \"errada\");\n });\n\n const marcada = questao.querySelector(\"input:checked\");\n\n if (marcada) {\n respondidas++;\n\n const labelMarcada = marcada.closest(\"label\");\n\n if (marcada.value === \"certa\") {\n acertos++;\n labelMarcada.classList.add(\"correta\");\n } else {\n labelMarcada.classList.add(\"errada\");\n\n const correta = questao.querySelector('input[value=\"certa\"]');\n\n if (correta) {\n correta.closest(\"label\").classList.add(\"correta\");\n }\n }\n }\n });\n\n const resultado = document.getElementById(\"resultado-semaforo\");\n\n if (respondidas < 2) {\n resultado.textContent = \"Responda \u00e0s duas perguntas antes de verificar.\";\n return;\n }\n\n resultado.textContent =\n \"Voc\u00ea acertou \" + acertos + \" de 2 quest\u00f5es!\";\n }\n\n function reiniciarQuizSemaforo() {\n const quiz = document.getElementById(\"quiz-semaforo\");\n\n const alternativas = quiz.querySelectorAll(\"input\");\n const labels = quiz.querySelectorAll(\"label\");\n\n alternativas.forEach(function(input) {\n input.checked = false;\n });\n\n labels.forEach(function(label) {\n label.classList.remove(\"correta\", \"errada\");\n });\n\n document.getElementById(\"resultado-semaforo\").textContent = \"\";\n }\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Loop<\/h2>\n\n\n\n<p>Loop \u00e9 uma repeti\u00e7\u00e3o da mesma regra.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.kidlocoding.com\/loops\/chompthefruits\">Clique aqui.<\/a> Jogue at\u00e9 o n\u00edvel 5.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Algoritmo Algoritmo \u00e9 uma sequ\u00eancia finita e ordenada de passos que, ao final, resolvem um determinado problema. Exemplo: uma receita de bolo. Por que \u00e9 importante seguir a ordem correta? Coloque na Ordem Certa Coloque na Ordem Certa Arraste as fichas para os espa\u00e7os na ordem correta. 1. Colocando o t\u00eanis Qual \u00e9 a ordem… <a class=\"more-link\" href=\"https:\/\/professorpaulosouza.com.br\/index.php\/2026\/08\/27\/1-algoritmos\/\">Continue reading <span class=\"screen-reader-text\">1. Algoritmos<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47],"tags":[],"class_list":["post-1394","post","type-post","status-publish","format-standard","hentry","category-aluno-monitor","entry"],"_links":{"self":[{"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/posts\/1394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=1394"}],"version-history":[{"count":10,"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/posts\/1394\/revisions"}],"predecessor-version":[{"id":1422,"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/posts\/1394\/revisions\/1422"}],"wp:attachment":[{"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=1394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/categories?post=1394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/tags?post=1394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1394,"date":"2026-08-27T10:19:15","date_gmt":"2026-08-27T13:19:15","guid":{"rendered":"https:\/\/professorpaulosouza.com.br\/?p=1394"},"modified":"2026-08-27T12:38:29","modified_gmt":"2026-08-27T15:38:29","slug":"1-algoritmos","status":"publish","type":"post","link":"https:\/\/professorpaulosouza.com.br\/index.php\/2026\/08\/27\/1-algoritmos\/","title":{"rendered":"1. Algoritmos"},"content":{"rendered":"\n

Algoritmo<\/h2>\n\n\n\n
Algoritmo \u00e9 uma sequ\u00eancia finita e ordenada de passos que, ao final, resolvem um determinado problema.<\/font><\/font><\/p>\n\n\n\n
Exemplo: uma receita de bolo.<\/p>\n\n\n\n
Por que \u00e9 importante seguir a ordem correta?<\/p>\n\n\n\n\n\n\n\n\n\nColoque na Ordem Certa<\/title>\n\n<style>\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n font-family: Arial, sans-serif;\n background: #f4f7fb;\n color: #222;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n padding: 25px 15px 50px;\n }\n\n h1 {\n text-align: center;\n font-size: 2rem;\n margin-bottom: 8px;\n }\n\n .introducao {\n text-align: center;\n font-size: 1.1rem;\n margin-bottom: 30px;\n }\n\n .atividade {\n background: white;\n border-radius: 16px;\n padding: 22px;\n margin-bottom: 25px;\n box-shadow: 0 4px 14px rgba(0,0,0,0.08);\n }\n\n .atividade h2 {\n margin-top: 0;\n font-size: 1.35rem;\n }\n\n .instrucao {\n margin-bottom: 15px;\n }\n\n .fichas {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n margin-bottom: 22px;\n }\n\n .ficha {\n background: #e8f0ff;\n border: 2px solid #4678d8;\n border-radius: 10px;\n padding: 13px 16px;\n cursor: grab;\n font-size: 1rem;\n user-select: none;\n transition: 0.2s;\n }\n\n .ficha:hover {\n transform: translateY(-2px);\n }\n\n .ficha.selecionada {\n background: #fff1a8;\n border-color: #d59a00;\n }\n\n .espacos {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n }\n\n .espaco {\n min-height: 85px;\n border: 3px dashed #aaa;\n border-radius: 12px;\n padding: 8px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background: #fafafa;\n cursor: pointer;\n }\n\n .numero {\n font-weight: bold;\n color: #777;\n margin-bottom: 6px;\n }\n\n .espaco .ficha {\n width: 100%;\n text-align: center;\n margin: 0;\n }\n\n .botoes {\n margin-top: 18px;\n display: flex;\n gap: 10px;\n }\n\n button {\n border: none;\n border-radius: 9px;\n padding: 11px 18px;\n font-size: 1rem;\n cursor: pointer;\n }\n\n .verificar {\n background: #2e7d32;\n color: white;\n }\n\n .reiniciar {\n background: #e5e5e5;\n }\n\n .feedback {\n margin-top: 15px;\n font-size: 1.1rem;\n font-weight: bold;\n min-height: 24px;\n }\n\n .correto {\n color: #22863a;\n }\n\n .errado {\n color: #c62828;\n }\n\n .resultado-final {\n text-align: center;\n font-size: 1.3rem;\n font-weight: bold;\n background: white;\n border-radius: 14px;\n padding: 20px;\n margin-top: 30px;\n box-shadow: 0 4px 14px rgba(0,0,0,0.08);\n }\n\n @media (max-width: 650px) {\n .espacos {\n grid-template-columns: 1fr;\n }\n\n .ficha {\n width: 100%;\n text-align: center;\n }\n }\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"container\">\n\n <h1>Coloque na Ordem Certa<\/h1>\n\n <p class=\"introducao\">\n Arraste as fichas para os espa\u00e7os na ordem correta.\n <\/p>\n\n \n <div class=\"atividade\" data-resposta=\"Colocar a meia|Colocar o t\u00eanis|Amarrar o cadar\u00e7o\">\n\n <h2>1. Colocando o t\u00eanis<\/h2>\n\n <p class=\"instrucao\">\n Qual \u00e9 a ordem correta?\n <\/p>\n\n <div class=\"fichas\">\n <div class=\"ficha\" draggable=\"true\">Amarrar o cadar\u00e7o<\/div>\n <div class=\"ficha\" draggable=\"true\">Colocar a meia<\/div>\n <div class=\"ficha\" draggable=\"true\">Colocar o t\u00eanis<\/div>\n <\/div>\n\n <div class=\"espacos\">\n <div class=\"espaco\">\n <span class=\"numero\">1\u00ba<\/span>\n <\/div>\n\n <div class=\"espaco\">\n <span class=\"numero\">2\u00ba<\/span>\n <\/div>\n\n <div class=\"espaco\">\n <span class=\"numero\">3\u00ba<\/span>\n <\/div>\n <\/div>\n\n <div class=\"botoes\">\n <button class=\"verificar\">Verificar<\/button>\n <button class=\"reiniciar\">Tentar novamente<\/button>\n <\/div>\n\n <div class=\"feedback\"><\/div>\n\n <\/div>\n\n\n \n <div class=\"atividade\" data-resposta=\"Colocar pasta na escova|Escovar os dentes|Enxaguar a boca\">\n\n <h2>2. Escovando os dentes<\/h2>\n\n <p class=\"instrucao\">\n Qual \u00e9 a ordem correta?\n <\/p>\n\n <div class=\"fichas\">\n <div class=\"ficha\" draggable=\"true\">Enxaguar a boca<\/div>\n <div class=\"ficha\" draggable=\"true\">Escovar os dentes<\/div>\n <div class=\"ficha\" draggable=\"true\">Colocar pasta na escova<\/div>\n <\/div>\n\n <div class=\"espacos\">\n <div class=\"espaco\">\n <span class=\"numero\">1\u00ba<\/span>\n <\/div>\n\n <div class=\"espaco\">\n <span class=\"numero\">2\u00ba<\/span>\n <\/div>\n\n <div class=\"espaco\">\n <span class=\"numero\">3\u00ba<\/span>\n <\/div>\n <\/div>\n\n <div class=\"botoes\">\n <button class=\"verificar\">Verificar<\/button>\n <button class=\"reiniciar\">Tentar novamente<\/button>\n <\/div>\n\n <div class=\"feedback\"><\/div>\n\n <\/div>\n\n\n \n <div class=\"atividade\" data-resposta=\"Colocar a chave na fechadura|Girar a chave|Abrir a porta\">\n\n <h2>3. Abrindo a porta<\/h2>\n\n <p class=\"instrucao\">\n Qual \u00e9 a ordem correta?\n <\/p>\n\n <div class=\"fichas\">\n <div class=\"ficha\" draggable=\"true\">Abrir a porta<\/div>\n <div class=\"ficha\" draggable=\"true\">Colocar a chave na fechadura<\/div>\n <div class=\"ficha\" draggable=\"true\">Girar a chave<\/div>\n <\/div>\n\n <div class=\"espacos\">\n <div class=\"espaco\">\n <span class=\"numero\">1\u00ba<\/span>\n <\/div>\n\n <div class=\"espaco\">\n <span class=\"numero\">2\u00ba<\/span>\n <\/div>\n\n <div class=\"espaco\">\n <span class=\"numero\">3\u00ba<\/span>\n <\/div>\n <\/div>\n\n <div class=\"botoes\">\n <button class=\"verificar\">Verificar<\/button>\n <button class=\"reiniciar\">Tentar novamente<\/button>\n <\/div>\n\n <div class=\"feedback\"><\/div>\n\n <\/div>\n\n <div class=\"resultado-final\">\n Atividades corretas: <span id=\"pontuacao\">0<\/span> de 3\n <\/div>\n\n<\/div>\n\n\n<script>\n\nlet fichaArrastada = null;\nlet fichaSelecionada = null;\n\n\n\/\/ ==========================\n\/\/ ARRASTAR\n\/\/ ==========================\n\ndocument.querySelectorAll(\".ficha\").forEach(ficha => {\n\n ficha.addEventListener(\"dragstart\", () => {\n fichaArrastada = ficha;\n });\n\n ficha.addEventListener(\"dragend\", () => {\n fichaArrastada = null;\n });\n\n\n \/\/ Tamb\u00e9m permite clicar\n ficha.addEventListener(\"click\", () => {\n\n document.querySelectorAll(\".ficha\").forEach(f => {\n f.classList.remove(\"selecionada\");\n });\n\n fichaSelecionada = ficha;\n ficha.classList.add(\"selecionada\");\n\n });\n\n});\n\n\n\/\/ ==========================\n\/\/ ESPA\u00c7OS\n\/\/ ==========================\n\ndocument.querySelectorAll(\".espaco\").forEach(espaco => {\n\n espaco.addEventListener(\"dragover\", evento => {\n evento.preventDefault();\n });\n\n espaco.addEventListener(\"drop\", evento => {\n\n evento.preventDefault();\n\n if (fichaArrastada) {\n moverFicha(fichaArrastada, espaco);\n }\n\n });\n\n\n \/\/ Clique para colocar ficha\n espaco.addEventListener(\"click\", () => {\n\n if (fichaSelecionada) {\n\n moverFicha(fichaSelecionada, espaco);\n\n fichaSelecionada.classList.remove(\"selecionada\");\n fichaSelecionada = null;\n\n }\n\n });\n\n});\n\n\n\/\/ ==========================\n\/\/ MOVER FICHA\n\/\/ ==========================\n\nfunction moverFicha(ficha, espaco) {\n\n const fichaExistente = espaco.querySelector(\".ficha\");\n\n \/\/ Se o espa\u00e7o j\u00e1 tiver uma ficha,\n \/\/ devolve a ficha anterior para a \u00e1rea inicial\n if (fichaExistente) {\n\n const atividade = espaco.closest(\".atividade\");\n const areaFichas = atividade.querySelector(\".fichas\");\n\n areaFichas.appendChild(fichaExistente);\n\n }\n\n espaco.appendChild(ficha);\n\n}\n\n\n\/\/ ==========================\n\/\/ VERIFICAR\n\/\/ ==========================\n\ndocument.querySelectorAll(\".verificar\").forEach(botao => {\n\n botao.addEventListener(\"click\", () => {\n\n const atividade = botao.closest(\".atividade\");\n\n const respostaCorreta =\n atividade.dataset.resposta.split(\"|\");\n\n const espacos =\n atividade.querySelectorAll(\".espaco\");\n\n const respostaAluno = [];\n\n espacos.forEach(espaco => {\n\n const ficha = espaco.querySelector(\".ficha\");\n\n respostaAluno.push(\n ficha ? ficha.textContent.trim() : \"\"\n );\n\n });\n\n\n const feedback =\n atividade.querySelector(\".feedback\");\n\n\n \/\/ Verifica espa\u00e7os vazios\n if (respostaAluno.includes(\"\")) {\n\n feedback.textContent =\n \"Coloque todas as fichas nos espa\u00e7os.\";\n\n feedback.className =\n \"feedback errado\";\n\n return;\n\n }\n\n\n const correto =\n respostaAluno.every(\n (item, indice) =>\n item === respostaCorreta[indice]\n );\n\n\n if (correto) {\n\n feedback.textContent =\n \"\u2705 Muito bem! A ordem est\u00e1 correta!\";\n\n feedback.className =\n \"feedback correto\";\n\n atividade.dataset.acertou = \"true\";\n\n }\n\n else {\n\n feedback.textContent =\n \"\u274c Ainda n\u00e3o est\u00e1 na ordem correta. Tente novamente!\";\n\n feedback.className =\n \"feedback errado\";\n\n atividade.dataset.acertou = \"false\";\n\n }\n\n\n atualizarPontuacao();\n\n });\n\n});\n\n\n\/\/ ==========================\n\/\/ REINICIAR\n\/\/ ==========================\n\ndocument.querySelectorAll(\".reiniciar\").forEach(botao => {\n\n botao.addEventListener(\"click\", () => {\n\n const atividade =\n botao.closest(\".atividade\");\n\n const areaFichas =\n atividade.querySelector(\".fichas\");\n\n atividade\n .querySelectorAll(\".espaco .ficha\")\n .forEach(ficha => {\n\n areaFichas.appendChild(ficha);\n\n });\n\n\n atividade.querySelector(\".feedback\")\n .textContent = \"\";\n\n\n atividade.dataset.acertou = \"false\";\n\n atualizarPontuacao();\n\n });\n\n});\n\n\n\/\/ ==========================\n\/\/ PONTUA\u00c7\u00c3O\n\/\/ ==========================\n\nfunction atualizarPontuacao() {\n\n let pontos = 0;\n\n document.querySelectorAll(\".atividade\")\n .forEach(atividade => {\n\n if (atividade.dataset.acertou === \"true\") {\n pontos++;\n }\n\n });\n\n document.getElementById(\"pontuacao\")\n .textContent = pontos;\n\n}\n\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><a href=\"https:\/\/www.kidlocoding.com\/sequences\/paintthesquares\">Clique aqui.<\/a> Jogue at\u00e9 o n\u00edvel 5.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fluxograma<\/h2>\n\n\n\n<p>Fluxograma \u00e9 um esquema que mostra os passos de uma tarefa na ordem em que devem acontecer.<\/p>\n\n\n\n<p><a href=\"https:\/\/drive.google.com\/file\/d\/1iCU5tNg747LWrChQqsfUSDLxxupRdOzA\/view?usp=sharing\">Clique aqui<\/a> para ver um exemplo de fluxograma.<\/p>\n\n\n\n<div id=\"quiz-semaforo\">\n\n <div class=\"questao\">\n <p><strong>1. Se o sem\u00e1foro estiver verde para pedestres, o que voc\u00ea deve fazer?<\/strong><\/p>\n\n <label>\n <input type=\"radio\" name=\"q1\" value=\"certa\">\n Atravessar na faixa de pedestres.\n <\/label>\n\n <label>\n <input type=\"radio\" name=\"q1\" value=\"errada\">\n Aguardar o sem\u00e1foro ficar verde.\n <\/label>\n <\/div>\n\n <div class=\"questao\">\n <p><strong>2. Se o sem\u00e1foro n\u00e3o estiver verde para pedestres, o que voc\u00ea deve fazer?<\/strong><\/p>\n\n <label>\n <input type=\"radio\" name=\"q2\" value=\"errada\">\n Atravessar na faixa de pedestres.\n <\/label>\n\n <label>\n <input type=\"radio\" name=\"q2\" value=\"certa\">\n Aguardar o sem\u00e1foro ficar verde.\n <\/label>\n <\/div>\n\n <div class=\"botoes\">\n <button type=\"button\" onclick=\"verificarQuizSemaforo()\">Verificar<\/button>\n <button type=\"button\" onclick=\"reiniciarQuizSemaforo()\">Reiniciar<\/button>\n <\/div>\n\n <p id=\"resultado-semaforo\"><\/p>\n\n<\/div>\n\n<style>\n #quiz-semaforo {\n width: auto;\n max-width: var(--wp--style--global--content-size, 700px);\n margin: 20px auto;\n padding: 0;\n box-sizing: border-box;\n font-family: Arial, sans-serif;\n }\n\n #quiz-semaforo * {\n box-sizing: border-box;\n }\n\n #quiz-semaforo .questao {\n width: 100%;\n background: #f7f7f7;\n border: 2px solid #ddd;\n border-radius: 10px;\n padding: 18px;\n margin-bottom: 18px;\n }\n\n #quiz-semaforo .questao p {\n font-size: 18px;\n margin-top: 0;\n margin-bottom: 14px;\n }\n\n #quiz-semaforo label {\n display: block;\n width: 100%;\n background: white;\n border: 2px solid #ccc;\n border-radius: 8px;\n padding: 12px;\n margin: 10px 0;\n cursor: pointer;\n font-size: 17px;\n }\n\n #quiz-semaforo label:hover {\n background: #eeeeee;\n }\n\n #quiz-semaforo input {\n margin-right: 8px;\n }\n\n #quiz-semaforo .botoes {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n }\n\n #quiz-semaforo button {\n padding: 12px 22px;\n border: 2px solid #444;\n border-radius: 8px;\n background: white;\n font-size: 17px;\n cursor: pointer;\n }\n\n #quiz-semaforo button:hover {\n background: #eeeeee;\n }\n\n #resultado-semaforo {\n font-size: 20px;\n font-weight: bold;\n margin-top: 20px;\n }\n\n #quiz-semaforo label.correta {\n background: #d9f7d9 !important;\n border-color: #2e8b57 !important;\n }\n\n #quiz-semaforo label.errada {\n background: #ffdede !important;\n border-color: #c0392b !important;\n }\n<\/style>\n\n<script>\n function verificarQuizSemaforo() {\n const quiz = document.getElementById(\"quiz-semaforo\");\n const questoes = quiz.querySelectorAll(\".questao\");\n\n let acertos = 0;\n let respondidas = 0;\n\n questoes.forEach(function(questao) {\n\n const alternativas = questao.querySelectorAll(\"label\");\n\n alternativas.forEach(function(label) {\n label.classList.remove(\"correta\", \"errada\");\n });\n\n const marcada = questao.querySelector(\"input:checked\");\n\n if (marcada) {\n respondidas++;\n\n const labelMarcada = marcada.closest(\"label\");\n\n if (marcada.value === \"certa\") {\n acertos++;\n labelMarcada.classList.add(\"correta\");\n } else {\n labelMarcada.classList.add(\"errada\");\n\n const correta = questao.querySelector('input[value=\"certa\"]');\n\n if (correta) {\n correta.closest(\"label\").classList.add(\"correta\");\n }\n }\n }\n });\n\n const resultado = document.getElementById(\"resultado-semaforo\");\n\n if (respondidas < 2) {\n resultado.textContent = \"Responda \u00e0s duas perguntas antes de verificar.\";\n return;\n }\n\n resultado.textContent =\n \"Voc\u00ea acertou \" + acertos + \" de 2 quest\u00f5es!\";\n }\n\n function reiniciarQuizSemaforo() {\n const quiz = document.getElementById(\"quiz-semaforo\");\n\n const alternativas = quiz.querySelectorAll(\"input\");\n const labels = quiz.querySelectorAll(\"label\");\n\n alternativas.forEach(function(input) {\n input.checked = false;\n });\n\n labels.forEach(function(label) {\n label.classList.remove(\"correta\", \"errada\");\n });\n\n document.getElementById(\"resultado-semaforo\").textContent = \"\";\n }\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Loop<\/h2>\n\n\n\n<p>Loop \u00e9 uma repeti\u00e7\u00e3o da mesma regra.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.kidlocoding.com\/loops\/chompthefruits\">Clique aqui.<\/a> Jogue at\u00e9 o n\u00edvel 5.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Algoritmo Algoritmo \u00e9 uma sequ\u00eancia finita e ordenada de passos que, ao final, resolvem um determinado problema. Exemplo: uma receita de bolo. Por que \u00e9 importante seguir a ordem correta? Coloque na Ordem Certa Coloque na Ordem Certa Arraste as fichas para os espa\u00e7os na ordem correta. 1. Colocando o t\u00eanis Qual \u00e9 a ordem… <a class=\"more-link\" href=\"https:\/\/professorpaulosouza.com.br\/index.php\/2026\/08\/27\/1-algoritmos\/\">Continue reading <span class=\"screen-reader-text\">1. Algoritmos<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47],"tags":[],"class_list":["post-1394","post","type-post","status-publish","format-standard","hentry","category-aluno-monitor","entry"],"_links":{"self":[{"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/posts\/1394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=1394"}],"version-history":[{"count":10,"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/posts\/1394\/revisions"}],"predecessor-version":[{"id":1422,"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/posts\/1394\/revisions\/1422"}],"wp:attachment":[{"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=1394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/categories?post=1394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/professorpaulosouza.com.br\/index.php\/wp-json\/wp\/v2\/tags?post=1394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}