Quer oferecer experiências mais profundas e ricas aos seus alunos? Crie projetos baseados em código diretamente no Rise 360 com o bloco de código. Desenvolva ferramentas e demonstrações interativas com um editor de código no aplicativo ou faça o upload de seus próprios projetos concluídos. Não sabe por onde começar? Confira este treinamento para se inspirar ou continue lendo para experimentar você mesmo.

1. Inserir um bloco de código
2. Modificar as configurações de bloqueio
3. Acessibilidade e problemas conhecidos

Observação: os blocos de código só podem usar os recursos disponíveis no próprio bloco, e o que é escrito afeta somente o ambiente desse bloco. O código escrito em HTML, CSS e JavaScript funciona melhor para blocos de código personalizados.

Etapa 1: inserir um bloco de código

1. Abra um curso Rise 360 e edite uma aula existente ou crie uma nova.
2. Selecione Todos os blocos na barra de atalho dos blocos. Ou clique no ícone de inserção de bloco (+) que aparece quando você passa o mouse sobre um limite entre os blocos.
3. Na barra lateral, escolha a categoria Código.
4. Selecione uma opção dependendo de como você compilou seu projeto de código.
   • Clique em Adicionar código para inserir e editar o código diretamente. As alterações que você faz são refletidas em tempo real.
   • Clique em Carregar projeto para carregar um arquivo ZIP que atenda aos seguintes critérios:
     • Inclui um arquivo de projeto principal chamado index.html que contém o código do seu projeto. Não pode ser chamado de outra coisa. Esse arquivo não pode estar em uma pasta e deve estar no nível raiz do seu arquivo
     • Inclui todos os ativos do seu projeto, incluindo arquivos de origem, como imagens
     • Não é maior que 5 GB
5. Quando o bloco for exibido, clique no botão de ação ou passe o mouse sobre o bloco para acessar a barra de ferramentas de design à esquerda. Em seguida, clique no ícone Conteúdo. Na barra lateral, adicione seu código ou faça o upload do seu projeto compactado.
   • No bloco Adicionar código, use os ícones de pesquisa/substituição, cópia e exclusão para fazer alterações rapidamente em todo o bloco de código.
   • No bloco Carregar projeto, use o ícone de exclusão para limpar o arquivo ZIP atualmente carregado.

Seu projeto será executado imediatamente após ser adicionado ao Rise 360.

Observação: os blocos de código incluídos no treinamento publicado para LMS ou exportação para a web não podem ser visualizados localmente, mas serão exibidos conforme o esperado quando enviados para seu host de treinamento.

Parâmetros de conclusão

Para garantir que os alunos concluam uma atividade de bloco de código antes de continuar, defina parâmetros de conclusão para seu bloco de código. Com as etapas a seguir concluídas, os blocos contínuos reconhecem quando os alunos concluíram a atividade dentro do bloco.

1. Editar o conteúdo de um bloco de código existente ou adicionar um novo bloco.
2. Ative a opção Definir requisitos de conclusão.
3. Copie o trecho de código exibido: window.parent.postMessage ({type: 'complete'}, '*');
4. Cole o código na janela de código ou em seu projeto existente. Para blocos de projeto de upload existentes, você precisará reimportar seu projeto depois de adicionar o trecho do código de conclusão.

É isso mesmo! Agora, os blocos contínuos do Rise 360 reconhecerão quando a atividade do bloco de código for concluída.

Observação: ativar o botão de conclusão e incluir um bloco de continuação baseado em conclusão sem incluir o trecho de código em seu projeto impedirá que os alunos continuem o treinamento.

Galeria de inspirações

Ambos os blocos têm acesso com um clique ao nosso curso tutorial com exemplos de projetos. Dê uma olhada e veja o que é possível e, em seguida, crie o seu próprio com base no código e nos ativos fornecidos! Basta clicar em Precisa de ajuda para começar? botão para conferir.

Codificação Vibe

Se você usa um LLM de terceiros para gerar código (também conhecido como “codificação vibe”), use o seguinte como modelo de solicitação para garantir maior compatibilidade com o Rise 360. Substitua o texto entre colchetes pelo seu próprio conteúdo.

1. Crie um arquivo `index.html` que possa conter HTML, CSS e JavaScript e não inclua solicitações externas da web

2. <iframe>Este arquivo `index.html` será usado dentro de um ``

3. No arquivo `index.html`, crie [descreva seu projeto], dê a ele um plano de fundo transparente

4. Codifique que, uma vez [descreva os parâmetros de conclusão], o aplicativo deve chamar `window.parent.postMessage ({type: 'complete'}, '*'); `para que a janela principal saiba que a interação foi concluída

Etapa 2: Modificar as configurações de bloqueio

Modifique a aparência do seu conteúdo na tela passando o mouse sobre um bloco existente para acessar a barra de ferramentas de design à esquerda. Clique no ícone Estilo para acessar as opções de plano de fundo do bloco. O menu Formatar fornece opções para alterar o preenchimento do bloco, a largura do conteúdo e a altura máxima do bloco.

Acessibilidade e problemas conhecidos

Acessibilidade

A acessibilidade do bloco de código é determinada pela acessibilidade do código HTML que ele contém. Confira essas dicas para tornar seu bloco de código acessível:

• Escreva um código que esteja alinhado com os padrões WCAG 2.2.
• Use HTML semântico sempre que possível. Ele fornece acessibilidade integrada e reduz a necessidade de código personalizado.
• Use leitores de tela, navegação pelo teclado e recursos de zoom para testar seu curso. Verifique se os alunos conseguem acompanhar as atualizações e têm tempo suficiente para responder ou explorar o conteúdo.

Use um plug-in de verificação de acessibilidade, como o axe DevTools fornecido pela Deque ou o verificador de acessibilidade Wave, para verificar seu código.

Procurando mais dicas de design de acessibilidade? Confira os seguintes recursos:

• Rise 360: Como criar um curso acessível
• Índice de acessibilidade

Problemas conhecidos

Atualmente, os blocos de código têm os seguintes problemas conhecidos:

• Publicar seu treinamento em PDF não produz uma reprodução individual do conteúdo do bloco de código.
• No momento, o Articulate Localization não é compatível com blocos de código. Os blocos de código também não podem ser traduzidos por meio da tradução manual de XLIFF. Para traduzir blocos de código, você deve inserir manualmente blocos de código específicos do idioma após a tradução.