Studio via CDN

1. Load Studio

Includes the Studio charger only once. That file also prepares the Player that Studio needs for learner View.

<script src="https://p2lrn.org/studio/current/dist/p2lrn-studio.js"></script>

<p2lrn-studio></p2lrn-studio>

The file p2lrn-studio.js First load the Player of the same channel and then start Studio. Do not add a second Player charger.

2. Open an initial course

If you want the editor to start with a course already selected, indicate its URL using src. If you omit it, the user will be able to create or open a course from the interface.

<script src="https://p2lrn.org/studio/current/dist/p2lrn-studio.js"></script>

<p2lrn-studio src="/courses/course.p2lrn"></p2lrn-studio>

The attribute src It is optional. Without it, the user can create a new course from the interface.

3. Pin a version

To keep a particular version in a stable integration, change current by the published version number.

<script src="https://p2lrn.org/studio/0.5.0-alpha.11/dist/p2lrn-studio.js"></script>

The versioned loader uses the Player of that same version.

4. Enable saving and import

These options are necessary only when your platform offers central saving, Reader, or external package conversion.

<script src="https://p2lrn.org/studio/current/dist/p2lrn-studio.js"></script>

<p2lrn-studio
  src="/courses/course.p2lrn"
  save-endpoint="/api/p2lrn/studio/save"
  reader-endpoint="/api/p2lrn/studio/read"
  import-endpoint="/api/p2lrn/studio/import"
  course-path="course">
</p2lrn-studio>

5. What you can do without server services

With the loader and the basic component you can create a course, open file/URL, edit, switch to learner View, download a .p2lrn and generate/review offline deliveries. Endpoints are only necessary for functions that must communicate with your platform.

The shared library also does not require the Save/Reader/Import endpoints: after loading the runtime you can assign the element an object resourceLibrary with list() and get(digest). If the library supports Cache Storage, the same origin must allow it.

const studio = document.querySelector('p2lrn-studio');
const library = P2LRN.createCacheStorageResourceLibrary();
studio.resourceLibrary = library;

For a selected shared reference, studio.materializeSharedResource() You can add an embedded fallback before distributing the course outside of that library.

6. What the server should provide

The Save, Reader and Import paths are not protected by using the P2LRN CDN. It is up to the website that integrates Studio to implement session authentication and authorization by role, course and center on your own server. You should also apply CSRF when using cookies, restrictive CORS, size and request limits, and secure storage. The attribute save-endpoint it does not grant permissions or replace these controls. Review integration security requirements.

Save and import services belong to your platform. They must authenticate the user, authorize the operation, validate the input, and limit accepted paths and sizes. If you don't need those features, Studio can create, edit, preview, and download courses without those services.

7. Check the integration

1. Load.Confirm that the editor appears without errors in the console.
2. Course.Create a course or open the one indicated in src.
3. learner view.Check that the Player can render the content from the editor itself.
4. Output.Download the package; If you have configured services, also try saving and importing.

8. API and events

The complete API is maintained in Technical reference. In alpha.11 the relevant connected surfaces are resourceLibrary, materializeSharedResource(), exportOfflineAssignment(), downloadOfflineAssignment() and reviewOfflineResult().

In addition to create/open/download/save, Studio emits p2lrn-studio-offline-export and p2lrn-studio-offline-review. The guide Offline delivery explains the teacher → learner → route .p2lrn-result → teacher.