npm package: @idoms/education-plugin-web
Description: Web application tutorial framework.
Author: b-nagy
Latest version: 0.13.15

# 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

### Function map

| 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             |                               |                      |

### Screenshots during operation

> - Welcome page
>
> ![Welcome page](https://github.com/b-nagy/imagesForMDs/blob/main/education-plugin-web/welcomePage.PNG)
>
> - Task panel
>
> ![Task panel](https://github.com/b-nagy/imagesForMDs/blob/main/education-plugin-web/task.PNG)
>
> - Tooltip
>
> ![Tooltip](https://github.com/b-nagy/imagesForMDs/blob/main/education-plugin-web/toolTip.png)
>
> - Scenario selector
>
> ![Scenario selector panel](https://github.com/b-nagy/imagesForMDs/blob/main/education-plugin-web/scenarioSelectorPanel.PNG)
>
> - Hint
>
> ![Hint](https://github.com/b-nagy/imagesForMDs/blob/main/education-plugin-web/hint.png)
>
> - Evaluation page
>
> ![Eval page](https://github.com/b-nagy/imagesForMDs/blob/main/education-plugin-web/evaluationPage.png)

## Installation

Use the npm package manager to install

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

## Usage

Import plugin and css dependency

Exapmle:

```bash
#Svelte
<script>
//css
import "@fortawesome/fontawesome-free/css/all.css";
import "@idoms/education-plugin-web/dist/style.css";
//Plugin module option:
import { StartEducation } from "@idoms/education-plugin-web"; 


StartEducation(welcomePage, scenarioCollection, hintCollection, evaluationPage);
</script>

#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. <br> > **_Property_**: **sendMock**

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

> 3. Have the option to overwrite the displayed text. <br> > **_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"
                }
            }
        }
    }
]
```