Möchten Sie Ihren Lernenden tiefere, reichhaltigere Erfahrungen bieten? Erstellen Sie codebasierte Projekte direkt in Rise 360 mit Codeblock. Entwickeln Sie interaktive Tools und Demos mit einem In-App-Code-Editor oder laden Sie Ihre eigenen abgeschlossenen Projekte hoch. Sie sind sich nicht sicher, wo Sie anfangen sollen? Schauen Sie sich dieses Training an, um sich inspirieren zu lassen, oder lesen Sie weiter, um es selbst auszuprobieren.

1. Fügen Sie einen Codeblock ein
2. Ändern Sie die Blockeinstellungen
3. Barrierefreiheit und bekannte Probleme

Hinweis: Codeblöcke können nur die Ressourcen verwenden, die im Block selbst verfügbar sind, und was geschrieben wurde, wirkt sich nur auf die Umgebung dieses Blocks aus. In HTML, CSS und JavaScript geschriebener Code eignet sich am besten für benutzerdefinierte Codeblöcke.

Schritt 1: Einen Codeblock einfügen

1. Öffnen Sie einen Rise 360-Kurs und bearbeiten Sie dann eine bestehende Lektion oder erstellen Sie eine neue.
2. Wählen Sie in der Shortcut-Leiste für Blöcke die Option Alle Blöcke aus. Oder klicken Sie auf das Symbol „Block einfügen“ (+), das angezeigt wird, wenn Sie mit der Maus über eine Grenze zwischen Blöcken fahren.
3. Wählen Sie in der Seitenleiste die Kategorie Code aus.
4. Wählen Sie je nachdem, wie Sie Ihr Codeprojekt kompiliert haben, eine Option aus.
   • Klicken Sie auf Code hinzufügen, um Code direkt einzugeben und zu bearbeiten. Änderungen, die Sie vornehmen, werden in Echtzeit übernommen.
   • Klicken Sie auf Projekt hochladen, um eine ZIP-Datei hochzuladen, die die folgenden Kriterien erfüllt:
     • Beinhaltet eine Kernprojektdatei mit dem Namenindex.html, die den Code für Ihr Projekt enthält. Sie kann nicht anders benannt werden. Diese Datei darf sich nicht in einem Ordner befinden und muss sich auf der Stammebene Ihrer Datei befinden
     • Beinhaltet alle Ressourcen für Ihr Projekt, einschließlich Quelldateien wie Bilder
     • Ist nicht größer als 5 GB
5. Wenn der Block angezeigt wird, klicken Sie auf die Aktionsschaltfläche oder bewegen Sie den Mauszeiger über den Block, um die Design-Symbolleiste auf der linken Seite aufzurufen. Klicken Sie dann auf das Inhaltssymbol. Fügen Sie in der Seitenleiste Ihren Code hinzu oder laden Sie Ihr ZIP-Projekt hoch.
   • Verwenden Sie im Block Code hinzufügen die Symbole Suchen/Ersetzen, Kopieren und Löschen, um schnell Änderungen an Ihrem gesamten Codeblock vorzunehmen.
   • Verwenden Sie im Block Projekt hochladen das Löschsymbol, um die aktuell hochgeladene ZIP-Datei zu löschen.

Ihr Projekt wird sofort ausgeführt, sobald es zu Rise 360 hinzugefügt wurde.

Hinweis: Codeblöcke, die in training enthalten sind, die für LMS oder den Webexport veröffentlicht wurden, können nicht lokal in der Vorschau angezeigt werden, werden aber erwartungsgemäß angezeigt, wenn sie auf Ihren Schulungshost hochgeladen werden.

Abschlussparameter

Um sicherzustellen, dass die Lernenden eine Codeblock-Aktivität abschließen, bevor sie fortfahren, legen Sie Vervollständigungsparameter für Ihren Codeblock fest. Wenn die folgenden Schritte abgeschlossen sind, erkennen die Continue-Blöcke, wann die Lernenden die Aktivität innerhalb des Blocks abgeschlossen haben.

1. Bearbeiten Sie entweder den Inhalt eines vorhandenen Codeblocks oder fügen Sie einen neuen Block hinzu.
2. Aktivieren Sie den Schalter Abschlussanforderungen festlegen.
3. Kopieren Sie den Codeausschnitt, der Folgendes anzeigt: window.parent.postMessage ({type: 'complete'}, '*');
4. Fügen Sie den Code in das Codefenster oder in Ihr vorhandenes Projekt ein. Bei bestehenden Upload-Projektblöcken müssen Sie Ihr Projekt erneut importieren, nachdem Sie den Abschlusscodeausschnitt hinzugefügt haben.

Das ist es! Jetzt erkennt Rise 360 Continue Blocks, wann die Codeblock-Aktivität abgeschlossen ist.

Hinweis: Wenn Sie den Umschalter „Abschluss“ aktivieren und einen abschlussbasierten Weiterbildungsblock hinzufügen, ohne den Codeausschnitt in Ihr Projekt aufzunehmen, werden die Lernenden daran gehindert, die training fortzusetzen.

Inspirationsgalerie

Beide Blöcke bieten mit einem Klick Zugriff auf unseren Tutorial-Kurs mit Beispielprojekten. Schauen Sie sich an, was möglich ist, und erstellen Sie dann Ihr eigenes auf der Grundlage des bereitgestellten Codes und der bereitgestellten Ressourcen! Klicken Sie einfach auf Brauchen Sie Hilfe beim Einstieg? klicken Sie, um es sich anzusehen.

Vibe-Codierung

Wenn Sie ein LLM eines Drittanbieters verwenden, um Code zu generieren (auch bekannt als „Vibe-Coding“), verwenden Sie Folgendes als Eingabeaufforderungsvorlage, um eine verbesserte Kompatibilität mit Rise 360 sicherzustellen. Ersetzen Sie den Text in eckigen Klammern durch Ihren eigenen Inhalt.

1. Erstellen Sie eine `index.html`-Datei, die HTML, CSS und JavaScript enthalten kann und keine externen Webanfragen enthält

2. <iframe>Diese `index.html`-Datei wird innerhalb eines ``verwendet

3. Erstellen Sie in der Datei `index.html` [Beschreiben Sie Ihr Projekt] und geben Sie ihm einen transparenten Hintergrund

4. Kodieren Sie, dass die Anwendung nach [Abschlussparameter beschreiben] `window.parent.postMessage ({type: 'complete'}, '*'); `aufrufen soll, um das übergeordnete Fenster darüber zu informieren, dass die Interaktion abgeschlossen wurde

Schritt 2: Ändern Sie die Blockeinstellungen

Ändern Sie, wie Ihre Inhalte auf dem Bildschirm aussehen, indem Sie den Mauszeiger über einen vorhandenen Block bewegen, um die Design-Symbolleiste auf der linken Seite aufzurufen. Klicken Sie auf das Stilsymbol, um auf die Optionen für den Blockhintergrund zuzugreifen. Das Menü Format bietet Optionen zum Ändern des Blockabstands, der Inhaltsbreite und der maximalen Höhe des Blocks.

Barrierefreiheit und bekannte Probleme

Barrierefreiheit

Die Barrierefreiheit von Codeblöcken wird durch die Barrierefreiheit des darin enthaltenen HTML-Codes bestimmt. Lesen Sie diese Tipps, um Ihren Codeblock barrierefrei zu gestalten:

• Schreiben Sie Code, der den WCAG 2.2-Standards entspricht.
• Verwenden Sie wann immer möglich semantisches HTML. Es bietet integrierte Barrierefreiheit und reduziert den Bedarf an benutzerdefiniertem Code.
• Verwenden Sie Bildschirmlesegeräte, Tastaturnavigation und Zoomfunktionen, um Ihren Kurs zu testen. Vergewissern Sie sich, dass die Lernenden Updates verfolgen können und genügend Zeit haben, um zu antworten oder Inhalte zu erkunden.

Verwenden Sie ein Plug-In zur Barrierefreiheitsprüfung wie die von Deque bereitgestellten axe DevTools oder den Wave Accessibility Checker, um Ihren Code zu überprüfen.

Suchen Sie nach weiteren Tipps zur Gestaltung von Barrierefreiheit? Schauen Sie sich die folgenden Ressourcen an:

• Rise 360: So entwerfen Sie einen barrierefreien Kurs
• Index der Barrierefreiheit

Bekannte Probleme

Derzeit sind für Codeblöcke die folgenden Probleme bekannt:

• Wenn Sie Ihre training als PDF veröffentlichen, wird der Inhalt von Codeblöcken nicht eins zu eins wiedergegeben.
• Articulate Localization wird derzeit nicht für Codeblöcke unterstützt. Codeblöcke können auch nicht per manueller XLIFF-Übersetzung übersetzt werden. Um Codeblöcke zu übersetzen, müssen Sie sprachspezifische Codeblöcke nach der Übersetzung manuell einfügen.