Knowbly content can be published to a self-hosted Wordpress site in a number of different ways. See the options below:
- Linking and Embedding Web Standard Courses in Wordpress
- Linking and Embedding Widgets in Wordpress
- Using the SCORM Cloud Plugin in Wordpress
Linking and Embedding Web Standard Courses in Wordpress
Knowbly Web Standard content is web content. Linking to a web standard course in Wordpress is accomplished in the same way as linking to any other hosted web content on the internet. First you will need to export the Web Standard package from knowbly and then post so that it resides on a server that is pointed to by web hosting software such as Apache. After that, a linked path (URL) to the index.html file is all that is required. As with any other web-based content, the content linked to can be put within an iFrame, it can be opened in a new page, opened in the same page, and so on.
Unzip web standard course content and place the folder containing the course on an http/https server. The file that must be linked to is index.html
The URL is dictated by the hosting software and the location of the files. (Please consult with your own web administrator for further help setting up and configuring web services.)
Note: It is important to understand that web servers (e.g. Apache) allow different configurations to create a path to hosted content. URLs to the hosted course files might look like any of the following examples (these are NOT active links, only examples!):
- Remote URLs examples:
- http://www.mycoursecontent.com/mycoursecontent/myfirstcourse/index.html - the course extracted to a folder called “myfirstcourse” and the index.html file was within that folder
- http://www.somecourses.com/somecourse/firstcourse - the course extracted to a folder called “firstcourse”, and the web server software configured to automatically recognize and open the index.xhtml file at the top level of that folder
- Local URLs examples
- In Wordpress, add a new post (or edit an existing post) and select the “Insert/Edit Link” button in order to add a link to the course at the URL pointing to it in the location in the post desired.
- The link will launch your course when selected in the main Wordpress view.
- Select the link in the admin area and then select “Edit -> Link Options” to edit the link behaviour. If the course should be opened in a new tab, for example, Link Options can be used to specify that.
- To add an iFrame containing the course to a Wordpress Post, go to the admin region of the post in Wordpress, select the “Text” tab and insert the iFrame code in the format below where the iFrame should appear in the post. Insert your own url for the source. For example:
<iframe src="http://www.buehlerart.com/wordpress/courses/course1" width="1000px" height="600px" frameborder="1" scrolling="yes" align="left"></iframe>
- This will produce an iFrame (with parameters set on the iFrame shown in step 6 of width, height, frameborder and so on) inline in the post.
Important note regarding Scoring and Course State Persistence
If course persistence or the generation of reports based on user-specific data and scores is required, please see Using SCORM Cloud for Wordpress in this document.
All scoring and progress for courses added inline in an iFrame or otherwise linked to this way, will provide scoring and results only within the context of the course itself. There is no association between the course and Wordpress itself that will allow for saving the course data between sessions or generating reports for users other than the information generated within the course itself while it is active.
Important note regarding iFrame and browser Same-origin policies
In order to include Knowbly course content in an iFrame on a page, the course content pointed to by any iFrame links must be within the same domain “origin” as the page attempting to include the content or it will violate “same-origin” policy for most browsers and the iFrame will be blank. This is a security measure to prevent the possibility of remote scripts exploiting information they should not have access to from within iFrames.
Please review the following article for an in-depth discussion of same-origin policy and restrictions placed in integrating content on pages that violate it.
Linking and Embedding Widgets in Wordpress
- From within knowbly, select the widget you wish to embed, select Publish and retrieve the URL and the embed code for the widget.
- In the admin area of your Wordpress installation, add a new post, or edit an existing one, and using the "Text" tab, insert the iFrame embed code where you wish the widget to be displayed in your code.
- The widget will now display where the embed code was placed in the Wordpress site.
- In order to link to a widget without embedding it into an iFrame, first export the widget to a Web Standard package, extract it and put it on the server location the files will reside in. They can be local to the Wordpress installation or on another server with a different origin URL.
- Once the Web Standard Widget files are resident on a server and pointed to by a URL, they can be added to Wordpress content in the same way as full courses are, as a standard href (link) using the “Insert/Edit Link” button.
- The link will now open the widget it references for any user reviewing the Wordpress site. As with other links, the widget will open either in a new tab, or in the same Wordpress window it was selected in, depending on the link settings as specified in the Wordpress admin area for the link.
- Widgets communicate their data continually, but require a listener in place to do something with that data. An example of this is shown in the code blurb below in which we get a handle to the widget we want to listen to, and get “widgetProgress” as the widget is interacted with. Please contact our support team for more details on capturing widget data.
const myWidget = document.querySelector('div.kio-widget-container.kio-tabs-accordion').__vue__;
myWidget.$on("widgetProgress", (p) => console.log(p));
Using the SCORM Cloud Plugin in Wordpress
- Install SCORM Cloud plugin for Wordpress. Please see the “SCORM Cloud Plugin for Wordpress - General Information” section below for links and information on this.
- Once the plugin has been installed, add a new post (or edit an existing post) and select the SCORM Cloud button to embed a SCORM Cloud course into the post.
- Select the course you wish to embed, and then select any parameters (such as whether or not users are required to authenticate to take the course).
- Users will be able to review and take the course upon going to the post (after authenticating if required). Authenticated users will not have to enter name or email in order to take the course.
- After taking the course, authenticated users will have report information generated and shown in the post, and in the admin area of Wordpress by selecting the SCORM Cloud Plugin.
- Users that are not authenticated will have reporting data logged in the SCORM Cloud plugin only.
SCORM Cloud Plugin for Wordpress Resources
Info about SCORM Cloud Plugin for Wordpress
SCORM Cloud plugin and information
Installing the SCORM Cloud Plugin
Adding a course to a post with SCORM Cloud Plugin