Vous souhaitez proposer des expériences plus approfondies et plus riches à vos apprenants ? Créez des projets basés sur du code directement dans Rise 360 avec un bloc de code. Développez des outils interactifs et des démos à l'aide d'un éditeur de code intégré à l'application, ou téléchargez vos propres projets terminés. Vous ne savez pas par où commencer ? Consultez cette formation pour vous inspirer ou poursuivez votre lecture pour l'essayer vous-même.

1. Insérer un bloc de code
2. Modifier les paramètres du bloc
3. Accessibilité et problèmes connus

Remarque : les blocs de code ne peuvent utiliser que les ressources disponibles dans le bloc lui-même, et ce qui est écrit n'affecte que l'environnement de ce bloc. Le code écrit en HTML, CSS et JavaScript fonctionne mieux pour les blocs de code personnalisés.

Étape 1 : Insérer un bloc de code

1. Ouvrez un module Rise 360, puis modifiez une leçon existante ou créez-en une nouvelle.
2. Sélectionnez Tous les blocs dans la barre de raccourcis des blocs. Vous pouvez également cliquer sur l'icône d'insertion de bloc (+) qui apparaît lorsque vous passez la souris sur une limite entre les blocs.
3. Dans la barre latérale, choisissez la catégorie Code.
4. Sélectionnez une option en fonction de la façon dont vous avez compilé votre projet de code.
   • Cliquez sur Ajouter un code pour saisir et modifier le code directement. Les modifications que vous apportez sont reflétées en temps réel.
   • Cliquez sur Envoyer un projet pour télécharger un fichier ZIP répondant aux critères suivants :
     • Inclut un fichier de projet principal nommé index.html qui contient le code de votre projet. On ne peut pas le nommer autrement. Ce fichier ne peut pas se trouver dans un dossier et doit se trouver à la racine de votre fichier
     • Inclut toutes les ressources de votre projet, y compris les fichiers source tels que les images
     • N'est pas supérieur à 5 Go
5. Lorsque le bloc s'affiche, cliquez sur le bouton d'action ou survolez le bloc pour accéder à la barre d'outils de conception de gauche. Cliquez ensuite sur l'icône de contenu. Dans la barre latérale, ajoutez votre code ou téléchargez votre projet compressé.
   • Dans le bloc Ajouter du code, utilisez les icônes de recherche/remplacement, de copie et de suppression pour apporter rapidement des modifications à l'ensemble de votre bloc de code.
   • Dans le bloc Envoyer un projet, utilisez l'icône de suppression pour effacer le fichier ZIP actuellement chargé.

Votre projet s'exécutera immédiatement une fois ajouté à Rise 360.

Remarque : les blocs de code inclus dans les formations publiées pour le LMS ou l'exportation Web ne peuvent pas être prévisualisés localement, mais ils s'afficheront comme prévu lorsqu'ils seront téléchargés sur votre hôte de formation.

Paramètres d'achèvement

Pour vous assurer que les apprenants terminent une activité de bloc de code avant de continuer, définissez les paramètres d'achèvement de votre bloc de code. Une fois les étapes suivantes terminées, les blocs de poursuite reconnaissent le moment où les apprenants ont terminé l'activité comprise dans le bloc.

1. Modifiez le contenu d'un bloc de code existant ou ajoutez-en un nouveau.
2. Activez le bouton Définir les exigences d'achèvement.
3. Copiez l'extrait de code qui s'affiche : window.parent.postMessage ({type : 'complete'}, '*') ;
4. Collez le code dans la fenêtre de code ou dans votre projet existant. Pour les blocs de projet de téléchargement existants, vous devrez réimporter votre projet après avoir ajouté l'extrait de code de fin.

C'est ça ! Désormais, les blocs de poursuite de Rise 360 reconnaîtront la fin de l'activité du bloc de code.

Remarque : l'activation du bouton d'achèvement et l'inclusion d'un bloc de poursuite basé sur l'achèvement sans inclure l'extrait de code dans votre projet empêcheront les apprenants de poursuivre la formation.

Galerie d'inspiration

Les deux blocs permettent d'accéder en un clic à notre module didacticiel avec des exemples de projets. Jetez un œil et découvrez ce qui est possible, puis créez le vôtre en vous basant sur le code et les actifs fournis ! Cliquez simplement sur le bouton Besoin d'aide pour démarrer ? bouton pour le vérifier.

Codage Vibe

Si vous utilisez un LLM tiers pour générer du code (également appelé « codage vibe »), utilisez le modèle de message suivant pour garantir une meilleure compatibilité avec Rise 360. Remplacez le texte entre crochets par votre propre contenu.

1. Créez un fichier `index.html` qui peut contenir du HTML, du CSS et du JavaScript et qui n'inclut pas les requêtes Web externes

2. <iframe>Ce fichier `index.html` sera utilisé dans un fichier ``

3. Dans le fichier `index.html`, créez [décrivez votre projet], donnez-lui un arrière-plan transparent

4. Encodez qu'une fois [décrit les paramètres d'achèvement], l'application doit appeler `Window.parent.postMessage ({type : 'complete'}, '*') ; `pour indiquer à la fenêtre parent que l'activité interactive est terminée

Étape 2 : modifier les paramètres de blocage

Modifiez l'apparence de votre contenu à l'écran en survolant un bloc existant pour accéder à la barre d'outils de conception de gauche. Cliquez sur l'icône Style pour accéder aux options d'arrière-plan des blocs. Le menu Format propose des options permettant de modifier le remplissage des blocs, la largeur du contenu et la hauteur maximale du bloc.

Accessibilité et problèmes connus

Accessibilité

L'accessibilité des blocs de code est déterminée par l'accessibilité du code HTML qu'ils contiennent. Consultez ces conseils pour rendre votre bloc de code accessible :

• Écrivez du code conforme aux normes WCAG 2.2.
• Utilisez le HTML sémantique dans la mesure du possible. Il fournit une accessibilité intégrée et réduit le besoin de code personnalisé.
• Utilisez les lecteurs d'écran, la navigation au clavier et les fonctionnalités de zoom pour tester votre module. Vérifiez que les apprenants peuvent suivre les mises à jour et disposent de suffisamment de temps pour répondre ou explorer le contenu.

Utilisez un plug-in de vérification d'accessibilité tel qu'axe DevTools fourni par Deque ou le vérificateur d'accessibilité Wave pour vérifier votre code.

Vous recherchez d'autres conseils en matière de conception axée sur l'accessibilité ? Consultez les ressources suivantes :

• Rise 360 : Comment concevoir un module accessible
• Indice d'accessibilité

Problèmes connus

Les blocs de code présentent actuellement les problèmes connus suivants :

• La publication de votre formation au format PDF ne produit pas une reproduction individuelle du contenu des blocs de code.
• Articulate Localization n'est pas pris en charge pour les blocs de code pour le moment. Les blocs de code ne peuvent pas non plus être traduits par traduction XLIFF manuelle. Pour traduire des blocs de code, vous devez insérer manuellement des blocs de code spécifiques à la langue après la traduction.