Education module for web app - Beta

compatible with all frameworks

Features

- [x] Welcome page
- [x] Task panel from scenario collection (_practicable business processes_)
- [x] Tooltip from expected value of task
- [x] Scenario selector (restart or start new scenario during the process)
- [x] Hint element from collection (_explanatory texts appearing on the elements_)
- [x] Evaluation page

$3

| Welcome page | Scenario colletcion | Hint collection | Evaluation page |
| -------------------- | ----------------------------- | ----------------------------- | -------------------- |
| parameterizable page | task panel (/page/part) | hints on elements (mouseover) | parameterizable page |
| | tooltips (task expeced value) | | |
| | scenario selector | | |

$3

> - Welcome page
>
> !Welcome page
>
> - Task panel
>
> !Task panel
>
> - Tooltip
>
> !Tooltip
>
> - Scenario selector
>
> !Scenario selector panel
>
> - Hint
>
> !Hint
>
> - Evaluation page
>
> !Eval page

Installation

Use the npm package manager to install

``bash
npm i @idoms/education-plugin-web
`

Usage

Import plugin and css dependency

Exapmle:

`bash
#Svelte


#Example only hint function:
StartEducation({}, {}, hintCollection, {});
`

Welcome Page example:

`bash
const welcomePage = {
isActive: true,
header: 'Header text',
title: 'Title text',
instruction:
long text description...
,
userName: {
hidden: false,
required: true,
placeholderText: 'Username',
minLength: 5,
},
startButtonTitle: 'Start',
footerText: 'Footer text...',
inacivityTime: -1,
};
`

Hint example:

`bash
const hintCollection = [
{
selector: {
type: "tagName",
value: "h1"
},
text: "Hint text..."
},
{
selector: {
type: "id",
value: "InputText1"
},
text: "Hint text..."
},
{
selector: {
type: "xpath",
value: "//label"
},
text: "Hint text..."
}
];
`

Scenario example:

`bash
const scenario = {
name: 'Scenario 001',
scenarioSelector: {
title: 'choose a scenario!',
cancelButtonText: 'Cancel',
startButtonText: 'Start'
},
pages: [
{
page: {
name: 'page1',
selector: {
type: 'id',
value: 'sectionP1'
},
parts:[
{
name: 'page1 part1',
tasks: [
{
description: 'Enter the some in the Probe text 1 field',
target: {
id: 'p1_task_1',
selector: {
type: 'id',
value: 'probeInput'
},
expectedValue: {
type: 'text',
value: 'some',
enabledTaskHint: true
}
}
},
{
description: 'Check the *Checkbox example',
target: {
id: 'p1_task_4',
selector: {
type: 'id',
value: 'checkBoxExample1'
},
expectedValue: {
type: 'checked',
value: 'true',
enabledTaskHint: true
}
}
},
{
description: 'select the *Education 2',
target: {
id: 'p1_task_5',
selector: {
type: 'name',
value: 'scenario'
},
expectedValue: {
type: 'text',
value: 'edu002',
enabledTaskHint: true
}
}
}
]
},
{
name: 'page1 part2',
tasks: [
{
description: 'Enter the yes in the Probe text 3 field', //hide input text
target: {
id: 'p1_task_3',
selector: {
type: 'id',
value: 'probeInput3'
},
expectedValue: {
type: 'text',
value: 'some',
enabledTaskHint: true
}
}
},
{
description: 'click the show button', //button clicked
target: {
id: 'p1_task_10',
selector: {
type: 'xpath',
value: "//button[contains(text(),'task button')]"
},
expectedValue: {
type: 'button',
value: 'clicked',
enabledTaskHint: true
}
}
}
]
}
]
}
}
]
};
`

Evaluation page example:

`bash
const evaluationPage = {
isActive: true,
finalTaskID: 'p2_task_1',
headerText: 'Header text',
successText: 'success',
errorText: 'failed',
restartButtonText: 'New scenario',
correctAnswerText: 'Correct',
markedText: {
marked: 'Marked',
notMarked: 'Not marked'
}
};
`


Task

Available functions:

> 1. Have the option to submit mock data before or after completing the task.
> _Property_: sendMock

> 2. Have the option to display the expected value.
> _Property_: enalbledTaskHint

> 3. Have the option to overwrite the displayed text.
> _Property_: hintText

Example a task all propertys

`bash
tasks: [
{
/**
* The description field appears on the task panel
*/
description: 'Enter the some in the Probe text 1 field',
target: {
id: 'p1_task_1',
selector: {
type: 'id',
value: 'probeInput'
},
expectedValue: {
type: 'text',
value: 'some',
/*
* Optional property
* if true, the value is displayed
* under the task.
* (expectedValue.value)
*/
enabledTaskHint: true,
/*
* Optional property
* if this property exists
* then this text will appear
* in the task hint
*/
hintText: 'Visible text',
}
},
/*
* The sendMock property is optional
* if this property is exist
* then it sends an http request
* to the specified location
*/
sendMock: {
/*
* if this property is exist
* then sends the request when
* the element belonging to
* the task appears on the page
*
* if it is not exist
* then sends the request after
* the task has been executed
*/
pre: true,
url: 'http://localhost:8000/api/getTeamCards/v1',
method: 'PUT',
/*
* Set the headers properties
*/
headers: {
'Content-Type': 'application/json; charset=utf-8',
'accept': 'application/json'
},
/*
* Appends the content of the body to the request
*/
body: {
payload: {
scenarioID: "0"
}
}
}
}
]
``