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

• Task panel

• Tooltip

• Scenario selector

• Hint

• Evaluation page

Installation

Use the npm package manager to install

npm i @idoms/education-plugin-web

Usage

Import plugin and css dependency

Exapmle:

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

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:

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:

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:

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

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"
                }
            }
        }
    }
]