Keywords

1 Introduction

SCORM was widely used in online teaching as a good way to promote E-learning teaching. Neves et al. [1] gave four characteristics of SCORM standard: sustainability, reusability, interoperability and availability. Based on these principles, various forms of courseware are supported by SCORM [2, 3], such as video, image, audio etc. Hanisch and, Straβer have conducted a lot of research on the interaction of SCORM courseware [4]. In order to display multimedia content, especially interactive media, the authors designed a SCORM courseware player based on the Flash action script 3 language [5]. An immersive authoring tool using the augmented reality was presented by Jee, Lim, Youn, and Lee [6], which also identified the existence of libraries that allow applications with AR authorship to be constructed, such as ARToolKit. As the trend of future development in the field of new media education, the strong interaction between AR and VR content can bring better teaching results. [7]. However, the advantages of AR and VR are not fully applied into SCORM courseware.

Web AR and Web VR are an emerging technologies which can achieve AR and VR in the web environment. Compare with traditional AR and VR, Web AR and Web VR are open source, easy to use, low achievement barriers [8]. Based on these features, Web AR and Web VR can be well confirmed towards the SCORM standard and are consistent with the learning management system (LMS). Flexible forms of Web AR and Web VR provide educators with more possibilities for other courseware based on SCORM standard. Web AR together with Experience API allow teachers to create educational applications of AR which benefit the learning process [8]. Cubillo and Martín et al. developed an Augmented Reality Learning Environment (ARLE) system to integrate AR content into the theoretical content and learning practices of the classroom [9]. However, the majority of teachers only need to display the AR/VR contents while teaching, for whom it is a quite difficult to understand the development processes. And there is no attempt to combine with Web AR and Web VR with SCORM courseware. In this paper, the authors bring some breakthroughs and references in the creation of E-learning courseware contained AR/VR contents, hoping to improve teaching effectiveness.

2 Design and Implementation

2.1 Implementation of Web AR & Web VR

The implementation of Web AR and Web VR are based on the rendering of virtual images through the browser. In terms of 3D rendering, there is some overlap between Web AR and Web VR. In the production of Web VR content, it only need to build the scene and set components on Three.js, and then realize the final integration on the webpage. A sample of Web VR is shown as Table 1. After creating the container, we established the perspective camera and added the corresponding controller. Next is the creation and setting of scenarios, such as the fog, hemisphere light, directional light and so on. Model loading and rendering are also required.

Table 1. A sample of Web VR
Full size table

As for Web AR, more steps are needed to implement AR content. In this paper, we used A-frame XR to realize. As the development tools for the 3D frame of Web VR, A-frame XR added the AR Module in the recently updated version. A sample of Web AR is shown as Table 2. A-frame containing AR.js is first introduced. After the definition of the dimensions of the body, an A-frame scene is created and the augmented reality content can also be added. Then add the camera and put the resources in <a-assets> placed in the scene. It ensures that resources are not lost visually and also avoids performance problems caused by scenarios where trying to capture assets while rendering.

Table 2. A sample of Web AR codes
Full size table

In order to adapt it to the SCORM, the implementation of Web AR and Web VR need to be defined as Sco. Based on the internet-based features, Web AR and Web VR are easy to integrate with Sco, which only need to call the HTML file generated whenever needed. In order to implement the effect of AR and VR on the website, we need to render them on the browser. Web AR and Web VR have some same 3D frameworks. The authors used Web GL framework Three.js to implement Web GL rendering (Fig. 1).

Fig. 1.
figure 1

Web VR and Web AR realized in the SCORM player

Full size image

The difference between Web AR and Web VR is that Web VR can be implemented through the rendering of the model, while Web AR has more steps. The authors used AR.js to identify and track marks. (1) ARToolKit can be used to train images as markers, moreover make sure the marker can be tracked and recognized. (2) Then, we need to get the corresponding video stream data through the computer camera. AR.js can call the built-in API, getUserMedia(), of WebRTC (Web real-time communication) in order to get camera permission of browser and collect the image information. (3) Next, we need to establish an identification and tracking system for the AR marks. On the network side, we use jsARToolKit to track the marker generated previously. At the same time, it can generate the corresponding coordinates, and the markers are locked. (4) At last, render the 3D content on the location of markers.

After the Sco content of Web VR and Web AR has been completed, it needs to be consistent with the learning management system by generate some information interactions, such as learning time, etc.

2.2 Design of Player

The player is composed of HTML nesting framework, which can be divided into three main frameworks: instructional video, menu and presentation. The Web AR and Web VR content are played in the demo area. By calling the relevant Web AR and Web VR html in the framework area, Web AR and Web VR content can be displayed. We set the instructional video as the primary object in this player. The instructional videos of each lesson has several Scos correspondingly, which are named according to its subject classification.

So far, the contents of AR and VR has developed in the form of computer-assisted instruction. In our design, instructional videos are also regarded as the main teaching content, taking into account the application of actual teaching situation. Therefore, in spite of the important role of Web AR and Web VR as Sco forms, users are not allowed to stay more time as they like at any Web AR and Web VR Sco. The Sco can be switched according to the progress of instructional video. In order to ensure the consistency with the content of the instructional, the authors set “time” tag in the XML file to indicate the duration time of the Web AR and Web VR contents. A sample of the XML file is shown as Table 3. The total time of this Sco episode1.html is 300 s. That is to say, when the first part of instructional video enters the next section, the first Sco episode will also jump to the next Sco synchronously and automatically.

Table 3. A sample of the XML file
Full size table

One of the most important advantages of SCORM is that the SCORM standard is suitable with the LMS, which works well with each other. The SCORM-based courseware allows relevant information to be synchronized to the LMS, of which the learning progress becomes the main parameter. Recording the learning progress through the LMS not only facilitates the learner to return to the courseware, but also enables tracking of the learner’s learning state. There is no doubt that it will improve the efficiency of learning. However, in traditional SCORM-based courseware, the learning status is assessed by the Sco units. It means that the learner can open the current Sco again, based on where he left the login earlier. But it is only suitable for the short-time Scos. If the duration of Scos is a bit long, the learner have no choice but to watch the same video once more from the starting point, which becomes a big restriction on the interaction between the traditional SCORM and LMS. In our SCORM-based courseware, we can intercept the current learning time point from the timeline of instructional video with JavaScript, and then write it into parameter “cmi.core.lesson_location” on the LMS server. When the learner open the courseware next time, it will get the parameter by using the function doLMSGetValue (“cmi.core.lesson_location”, time.point). As a result, the SCORM-based courseware will find the exact timepoint location of the teaching video.

3 Result

The authors designed a demo courseware about the structure of molecular. The menu of the knowledge points and the Scos’ name was displayed on the left of the player, which can be chosen by the learner. The instructional video is located in the upper left corner of the player. The right area of the player was used to display a variety of media content, including captions, pictures and Web AR and Web VR materials for teaching. The Scos of this player was set to display in VR mode initially. There is a toggle button next to the progress bar, which could switch between the AR mode and VR mode. In addition, the permission of the camera is required in the AR mode. Therefore, the learner should allow the player to use the computer camera when the dialog box appears. Screenshots of the SCORM courseware running interface are shown as Figs. 2 and 3.

Fig. 2.
figure 2

SCORM courseware player when playing Web VR content

Full size image
Fig. 3.
figure 3

SCORM courseware player when playing Web AR content

Full size image

4 Conclusion

In this paper, the authors proposed a Web AR and Web VR supported browser player, which is helpful to improve teaching methods and promote teaching effect. It can not only support the mate-material for AR and VR with web form, but also can support other media. This courseware based on Web AR and Web VR is fitter with SCORM standards. It can also provide a more convenient possibility for new media courseware display. This player is browser-based, which makes it easier to realize cross-platform. On this basis, the application environment of SCORM courseware will become wider.