我正在開發一個播放SCORM內容的電子學習應用程序。我對角度和scorm相當陌生。我正在使用角度4和彈簧引導。我正在面臨將後端API暴露給SCORM內容的困難。從外部JS文件調用角度組件的方法
這些是我迄今爲止嘗試:
下面的代碼視圖當然,content.ts有所有8種SCORM方法,上海合作組織將在JavaScript文件序與LMS溝通調用。
視圖道-content.component.ts
import { Component, OnInit, HostListener,ElementRef } from '@angular/core';
import {Router, ActivatedRoute, Params} from '@angular/router';
import { LaunchService } from '../services/launch-service.service';
import { DataService } from '../services/data.service';
import { DomSanitizer } from '@angular/platform-browser';
import { ApiService } from '../services/api.service';
import { ViewChild } from '@angular/core';
//import { IndexComponent } from './../index/index.component'
@Component({
selector: 'app-view-course-content',
templateUrl: './view-course-content.component.html',
styleUrls: ['./view-course-content.component.css']
})
export class ViewCourseContentComponent implements OnInit {
pdfUrl;
courseId;
API;
formData = new FormData();
pdfSrc;
api = 'http://localhost:8080';
@ViewChild('API_1484_11') API_NN;
@ViewChild('API') API_IE;
@ViewChild('APIHOLDER') APIHOLDER;
debug = true;
constructor(private activatedRoute: ActivatedRoute, private dataService: DataService, private launchService: LaunchService, private _sanitizer: DomSanitizer, private apiService : ApiService,private elementRef: ElementRef) {
console.log('Unit Id in viewCourse', this.dataService.unitId);
this.activatedRoute.params.subscribe((params: Params) => {
this.courseId = params['id'];
this.formData.append('courseId', params['id']);
console.log(this.courseId);
});
}
ngOnInit() {
this.scormAPI = this._sanitizer.bypassSecurityTrustResourceUrl('assets/js/api.js');
}
//------------------------------------------
//SCORM RTE Functions - Initialization
//------------------------------------------
Initialize(dummyString) {
console.log("Inside Initialize() function");
if (this.debug) { alert('*** LMSInitialize ***'); }
console.log("Inside Initialize() function");
//return this.API_1484_11.Initialize();
// return "true";
this.apiService.initialize().subscribe((response) => {
console.log('Inside apiService Initialize call in view-course-component-ts ');
// console.log("Response inside view course content", response['_body']);
})
}
//------------------------------------------
//SCORM RTE Functions - Getting and Setting Values
//------------------------------------------
GetValue(varname) {
if (this.debug) {
alert('*** LMSGetValue varname='+varname
+' varvalue=value ***');
}
}
LMSSetValue(varname,varvalue) {
if (this.debug) {
alert('*** LMSSetValue varname='+varname
+' varvalue='+varvalue+' ***');
}
}
LMSCommit(dummyString) {
if (this.debug) { alert('*** LMSCommit ***'); }
return "true";
}
//------------------------------------------
//SCORM RTE Functions - Closing The Session
//------------------------------------------
LMSFinish(dummyString) {
if (this.debug) { alert('*** LMSFinish ***'); }
return "true";
}
//------------------------------------------
//SCORM RTE Functions - Error Handling
//------------------------------------------
LMSGetLastError() {
if (this.debug) { alert('*** LMSGetLastError ***'); }
return 0;
}
LMSGetDiagnostic(errorCode) {
if (this.debug) {
alert('*** LMSGetDiagnostic errorCode='+errorCode+' ***');
}
return "diagnostic string";
}
LMSGetErrorString(errorCode) {
if (this.debug) {
alert('*** LMSGetErrorString errorCode='+errorCode+' ***');
}
return "error string";
}
}
在下面的代碼實際上啓動SCORM內容。我已經把它放在一個框架中。
視圖當然,content.component.html
<script type="text/javascript"
src="assets/runtime/BrowserDetect.js"></script>
<!-- <script type="text/javascript"
src="assets/js/SCORM_API_wrapper.js"></script> -->
<script type="text/javascript"
src="assets/js/scormAPI.js"></script>
<div>
<div align="center"> View Course Content Page </div>
<div id="scormContent" *ngIf = "unitId == 2">
<frameset frameborder="0" border="0" rows="0,*" cols="*" >
<frame
src="assets/CourseImports/shared/launchpage.html"
name="Content" id="Content" marginwidth="1px;" marginheight="1px;" noresize="noresize"></frame>
</frameset>
課程是從儀表板啓動。
dashboard.component.html
<div class="container-fluid dashboard">
<div class="row ">
<h1 class="page-header page-heading animated fadeInDownBig">
Courses<small></small>
</h1>
<div class="col-md-3 col-sm-6" *ngFor='let course of courses'>
<div class="widget widget-stats bg-aqua-lighter">
<div class="stats-icon">
<i class="fa fa-desktop:before"></i>
</div>
<a target="_blank" href="javascript:void(0);"
(click)="viewCourse(course.courseId)">
<div class="img-hover">
<img src="api/admin/getCourseCoverImage{{course.courseId}}"
id="coverImage" alt="HTML5 Image" height="70px" width="120px"
class="img-responsive img-rounded" />
</div>
</a>
<div class="stats-info">
<!-- <p id="testId_${publishedTestSurvey.testDetails.testId}">${publishedTestSurvey.testDetails.testName}</p>
<h4>${fn:length(publishedTestSurvey.testDetails.testQuestionDetailsSet)}
questions | ${publishedTestSurvey.testDetails.duration}
Minutes | ${publishedTestSurvey.testDetails.testRepetitions}
Total Attempts</h4> -->
<p>{{course.courseName}}</p>
<div class="stats-link">
<!-- <a target="_blank" href="view-course/{{course.courseId}}" (click)="viewCourse(course.courseId)">
Open Course <i class="fa fa-arrow-circle-o-right"></i>
</a> -->
<!-- <a target="_blank" href="javascript:void(0);" (click)="viewCourse(course.courseId)">
Open Course <i class="fa fa-arrow-circle-o-right"></i>
</a> -->
</div>
</div>
</div>
</div>
</div>
</div>
這些都是調用,上海合作組織將與LMS
API.Initialize()
API.SetValue()
API.GetValue()
API.Terminate()
API.GetLastError()
API.GetErrorString()
API.GetDiagnostic()
我一直無法弄清楚如何公開的溝通view-course-content.ts中的SCORM方法向上面的js調用SCORM內容。
view-course-content.ts是我的Javascript API,需要調用。 如何捕獲js文件所做的調用並將其重定向到view-course-content.component.ts中的方法?我無法控制進行這些調用的js文件。
任何幫助將不勝感激!謝謝。
@ 1221076,謝謝你的評論。我對scorm內容和API交互的理解是scorm內容總是有一個普通的js,我應該能夠捕捉scorm內容從那個普通js發起的調用,我的理解是不正確的?我的主要問題是我無法從sco的純js中捕獲API.Initialize()調用。從您的評論中,我瞭解到我們正在從該組件啓動API調用。但這不是它的工作原理,內容應該初始化溝通,對吧?如果我錯了,請糾正我。 –