...
The current QuML Player is an Angular App that outputs a web component. A lot of the functionalities as described below are part of the Android Angular Components.
Fetching the QuestionSet, Sections and getting individual Questions Metadata
Playing through the Questions (linear or non-linear)
Events like when to send Hints, Timeouts, Errors are part of the application state
Telemetry
...
The pseduo/live code can be tracked here - https://github.dev/ChakshuGautam/sunbird-quml-player/tree/player-refactor. The code is in the folder refactor
. player
.
Event Types
Code Block | ||
---|---|---|
| ||
export enum EventType {
TELEMETRY,
ERROR,
PERSISTANCE,
MAX_ATTEMPT_EXCEEDED,
MAX_TIME_EXCEEDED,
SHOW_WARNING_TIME,
SHOW_FEEDBACK,
NAVIGATE_TO_NEXT_QUESTION,
SECTION_COMPLETED,
PLAYER_CRASHED,
INTERNET_CONNECTION_ERROR,
PLAYER_EXIT,
CONTENT_ERROR,
} |
Detailed Event Description
Code Block | ||
---|---|---|
| ||
/**
* Emit an event when the max attempts are exhausted
* @param {RendererState} state - RendererState
*/
emitMaxAttemptsExhausted(state: RendererState) {
// this.rendererState.isMaxAttemptExhausted = true;
const desc = 'Max attempts are exhausted';
const event = new Event(EventType.MAX_ATTEMPT_EXCEEDED, {}, desc, 0);
this.emit(event);
}
/**
* Emit an event when the max time is exhausted
* @param {RendererState} state - RendererState
*/
emitMaxTimeExhausted(state: RendererState) {
// this.rendererState.isDurationExpired = true;
const desc = 'Max attempts are exhausted';
const event = new Event(EventType.MAX_TIME_EXCEEDED, {}, desc, 0);
this.emit(event);
}
/**
* Emit an event when the warning time started
* @param {RendererState} state - RendererState
*/
emitShowWarningTime(state: RendererState) {
// this.rendererState.showWarningTime = true;
const desc = 'Warning time started';
const event = new Event(EventType.SHOW_WARNING_TIME, {}, desc, 0);
this.emit(event);
}
/**
* Emit an event when user answers the question and showFeedBack is ON for a question set
* @param {RendererState} state - RendererState
*/
emitShowFeedBack(state: RendererState) {
// this.rendererState.showWarningTime = true;
const desc = 'Show feedback popup';
const data = {
isCorrect: true
}
const event = new Event(EventType.SHOW_FEEDBACK, data, desc, 0);
this.emit(event);
}
/**
* Emit an event when feedback popup closes, with the next question data
* @param {RendererState} state - RendererState
* @param {Question} question - Question
*/
emitNavigateToNextQuestion(state: RendererState, question: Question) {
const event = new Event(EventType.NAVIGATE_TO_NEXT_QUESTION, question, '', 0);
this.emit(event);
}
/**
* Emit an event to the renderer to navigate to the next question
* @param {RendererState} state - RendererState
* @param {string} nextSection - The id of the next section.
*/
emitSectionCompleted(state: RendererState, nextSection: string) {
// this.rendererState.isSectionCompleted = true;
const data = {
activeSection: state.activeSection,
nextSection: nextSection
}
const event = new Event(EventType.SECTION_COMPLETED, data, '', 0);
this.emit(event);
// this.rendererState.activeSection = this.rendererState.sections[this.rendererState.sectionIndex];
}
/**
* Emit an event to the renderer when the player crashed
* @param {RendererState} state - RendererState
*/
emitPlayerCrashed(state: RendererState) {
const data = {
crashType: '',
error: '',
}
const event = new Event(EventType.PLAYER_CRASHED, data, '', 0);
this.emit(event);
}
/**
* It emits an event to the renderer on internet connection lost
* @param {RendererState} state - RendererState
*/
emitInternetConnectionError(state: RendererState) {
this.persist({});
const data = {
isConnected: false,
}
const event = new Event(EventType.INTERNET_CONNECTION_ERROR, data, '', 0);
this.emit(event);
}
/**
* Emit an event when player is ready to exit
* @param {RendererState} state - The state of the renderer.
* @param {boolean} [isForcefulExit=false] - boolean to indicate forceful exit
*/
emitExit(state: RendererState, isForcefulExit: boolean = false) {
this.rendererState = state;
const data = {
isForcefulExit,
}
const event = new Event(EventType.PLAYER_EXIT, data, '', 0);
this.emit(event);
}
/**
* Emit an event to the renderer
* @param {RendererState} state - The current state of the renderer.
* @param {string} error - The error message to be displayed.
* @param {string} errorCode - The error code that will be used to identify the error.
*/
emitContentError(state: RendererState, error: string, errorCode: string) {
const data = {
error,
errorCode
}
const event = new Event(EventType.CONTENT_ERROR, {}, '', 0);
} |
Integration Guide for Angular - WIP
...
100% code coverage on
main-component
Testing script (npm) to watch all tests.
Next Steps
Get all the event schemas validated from Kartheek and Vivek.Check if the APIs are enough or not on the
Player.ts
.
...