Vuoi offrire esperienze più profonde e ricche ai tuoi allievi? Crea progetti basati sul codice direttamente in Rise 360 con blocco di codice. Sviluppa strumenti e demo interattivi con un editor di codice integrato nell'app o carica i tuoi progetti completati. Non sai da dove iniziare? Dai un'occhiata a questo corso di formazione per trarre ispirazione o continua a leggere per provarlo tu stesso.

Nota: il blocco di codice è disponibile solo con una licenza Articulate 360 AI standard.

1. Inserisci un blocco di codice
2. Modifica le impostazioni del blocco
3. Accessibilità e problemi noti

Nota: i blocchi di codice possono utilizzare solo le risorse disponibili nel blocco stesso e ciò che viene scritto influisce solo sull'ambiente del blocco. Il codice scritto in HTML, CSS e JavaScript funziona meglio per i blocchi di codice personalizzati.

Fase 1: Inserimento di un blocco di codice

1. Apri un corso Rise 360, quindi modifica una lezione esistente o creane una nuova.
2. Seleziona Tutti i blocchi dalla barra delle scorciatoie dei blocchi. In alternativa, fai clic sull'icona di inserimento del blocco (+) che appare quando passi il mouse su un confine tra i blocchi.
3. Dalla barra laterale, scegli la categoria Codice.
4. Seleziona un'opzione a seconda di come hai compilato il tuo progetto di codice.
   • Fai clic su Aggiungi codice per inserire e modificare direttamente il codice. Le modifiche apportate si riflettono in tempo reale.
   • Fai clic su Carica progetto per caricare un file ZIP che soddisfi i seguenti criteri:
     • Include un file di progetto principale denominato index.html che contiene il codice per il progetto. Non può essere chiamato nient'altro. Questo file non può essere in una cartella e deve trovarsi al livello principale del file
     • Include tutte le risorse per il progetto, inclusi i file sorgente come le immagini
     • Non è più grande di 5 GB
5. Quando il blocco viene visualizzato, fai clic sul pulsante di azione o passa il mouse sul blocco per accedere alla barra degli strumenti di progettazione a sinistra. Quindi, fai clic sull'icona Contenuto. Nella barra laterale, aggiungi il codice o carica il progetto compresso.
   • Nel blocco Aggiungi codice, usa le icone di ricerca/sostituisci, copia ed elimina per apportare rapidamente modifiche all'intero blocco di codice.
   • Nel blocco Carica progetto, usa l'icona Elimina per cancellare il file ZIP attualmente caricato.

Il tuo progetto verrà eseguito immediatamente una volta aggiunto a Rise 360.

Nota: i blocchi di codice inclusi nei corsi di formazione pubblicati per LMS o per l'esportazione web non possono essere visualizzati in anteprima localmente, ma verranno visualizzati come previsto quando vengono caricati sul tuo host di formazione.

Parametri di completamento

Per garantire che gli allievi completino un'attività a blocchi di codice prima di procedere, imposta i parametri di completamento per il blocco di codice. Una volta completati i seguenti passaggi, i blocchi continue riconoscono quando gli allievi hanno completato l'attività all'interno del blocco.

1. Modifica il contenuto di un blocco di codice esistente o aggiungi un nuovo blocco.
2. Abilita l'opzione Imposta requisiti di completamento.
3. Copia il frammento di codice che mostra: window.parent.postMessage ({type: 'complete'}, '*');
4. Incolla il codice nella finestra del codice o nel tuo progetto esistente. Per i blocchi di progetto di caricamento esistenti, dovrai reimportare il progetto dopo aver aggiunto lo snippet di codice di completamento.

Questo è tutto! Ora i blocchi continue di Rise 360 riconosceranno quando l'attività del blocco di codice è stata completata.

Nota: l'attivazione dell'interruttore di completamento e l'inclusione di un blocco di continuazione basato sul completamento senza includere lo snippet di codice nel progetto impediranno agli allievi di continuare la formazione.

Galleria di ispirazione

Entrambi i blocchi hanno accesso con un clic al nostro corso tutorial con progetti di esempio. Dai un'occhiata e scopri cosa è possibile fare, quindi creane uno tuo in base al codice e agli asset forniti! Basta fare clic sul pulsante Hai bisogno di aiuto per iniziare? pulsante per verificarlo.

Codifica Vibe

Se utilizzi un LLM di terze parti per generare codice (noto anche come «vibe coding»), utilizza quanto segue come modello di prompt per garantire una maggiore compatibilità con Rise 360. Sostituisci il testo tra parentesi quadre con i tuoi contenuti.

1. Crea un file `index.html` che può contenere HTML, CSS e JavaScript e non includa richieste web esterne

2. <iframe>Questo file `index.html` verrà utilizzato all'interno di un ``

3. Nel file `index.html`, crea [descrivi il tuo progetto], assegnagli uno sfondo trasparente

4. Codifica che una volta [descrivi i parametri di completamento], l'applicazione dovrebbe chiamare `window.parent.postMessage ({type: 'complete'}, '*'); `per far sapere alla finestra principale che l'interazione è stata completata

Fase 2: Modificare le impostazioni del blocco

Modifica l'aspetto dei tuoi contenuti sullo schermo posizionando il mouse su un blocco esistente per accedere alla barra degli strumenti di progettazione a sinistra. Fai clic sull'icona Stile per accedere alle opzioni di sfondo del blocco. Il menu Formato fornisce opzioni per modificare la spaziatura del blocco, la larghezza del contenuto e l'altezza massima del blocco.

Accessibilità e problemi noti

Accessibilità

L'accessibilità del blocco di codice è determinata dall'accessibilità del codice HTML che contiene. Dai un'occhiata a questi suggerimenti per rendere accessibile il tuo blocco di codice:

• Scrivi codice in linea con gli standard WCAG 2.2.
• Usa l'HTML semantico ogni volta che è possibile. Fornisce accessibilità integrata e riduce la necessità di codice personalizzato.
• Usa gli screen reader, la navigazione da tastiera e le funzioni di zoom per testare il corso. Ricontrolla che gli allievi possano seguire gli aggiornamenti e abbiano abbastanza tempo per rispondere o esplorare i contenuti.

Usa un plug-in per il controllo dell'accessibilità come axe DevTools fornito da Deque o il correttore di accessibilità Wave per verificare il codice.

Cerchi altri suggerimenti per la progettazione dell'accessibilità? Consulta le seguenti risorse:

• Rise 360: Come Progettare un corso accessibile
• Indice di accessibilità

Problemi noti

Attualmente, i blocchi di codice presentano i seguenti problemi noti:

• La pubblicazione del corso di formazione in formato PDF non produce una riproduzione individuale del contenuto dei blocchi di codice.
• Articulate Localization non è attualmente supportata per i blocchi di codice. Inoltre, i blocchi di codice non possono essere tradotti tramite la traduzione manuale XLIFF. Per tradurre i blocchi di codice, è necessario inserire manualmente i blocchi di codice specifici della lingua dopo la traduzione.