ueq_plus v0.0.3
ueq-plus
A WebComponent to support a configurable User Experience Questionnaire Plus (UEQ+).\ This questionaire is a modular extension of the User Experience Questionnaire (UEQ) with a larger list of UX scales.
Installation
As a dependency
You can install it via npm:
npm install --save ueq_plusUsage
The ueq-element is a form-associated element,
which means it can be used as any other form element inside a HTML form:
<body>
<form>
<ueq-element
lang="de"
id="ueq-element"
name="ueq-system-xyz"
scales="[0,1]"
config-url="your-config-url"
required
named-values
json-values></ueq-element>
</form>
</body>Configuration
Attributes
As the ueq-element is , the general attributes for form elements are allowed by default.
In addition, a set of specialized, optional attributes are available:
| Attribute | Type | Default | Description | |
|---|---|---|---|---|
named-values | bool | false | Submits the selected values as map instead of array | |
name | string | For internal differentation of UEQ elements | # | |
scales | string | [] | Used for partial display of the questions | |
config-url | string | URL under which the Json config is hosted | ||
config-base64 | string | Base64 representation of the config | ||
force-config-reload | bool | Deactivates caching. If set to false, the config gets reloaded every 30 minutes. | ||
json-values | bool | false | Switches between Json response and normal form response | |
required | bool | false | Filling out the form is required |
Scheme for the config:
{
"important": false,
"scales": [
{
"name": "attractiveness",
"size": 4
},
{
"name": "efficiency",
"size": 3
},
{
"name": "perspicuity",
"size": 2
}
]
}| Attribute | Type | Description | |
|---|---|---|---|
| required | important | bool | Show importance questions |
| required | scales | list | Used for partial display of whole questionaire |
Valid scale names: attractiveness, efficiency, perspicuity, dependability, stimulation,novelty, trust, haptics, acoustics, personalization, usefulness, value, visual aesthetics, intuitive use, trustworthiness of content, quality of content, clarity ,response behavior, response quality, comprehensibility
The config gets validated. There is a error message in the console, if the validation fails.
Partial display:
This attribute defines, which scales get displayed.
Examples related to the above shown config:
For scales="[0,1]" --> attractiveness and efficiency get shown.
For scales="[2]" --> perspicuity gets shown.
Return values:
The attribute namedValues can be used to specify whether the keys of the return values should be named according to the categories and modalities or only the index should be used. The index is used internally by the component to store the values uniquely. The first two digits of the key indicate the category. A leading zero is added for a one-digit index. The numbering of the categories is zero-based and in the order of the categories from the configuration file. The third digit indicates the line within the category. The value for each key indicates which of the 7 radio buttons is currently selected. The numbering is also zero-based and thus in the range 0,6.
If the namedValues atribute is set, the return values have the following format:
<name of questionnaire>[<category>_<modality>]: <selected radio button>Example:
ueq-system-xyz[attractiveness_enjoyableness]: 0
ueq-system-xyz[attractiveness_quality]: 3
ueq-system-xyz[attractiveness_imp]: 1
...If the namedValues attribute is not set, the return is in the following format:
<name of questionnaire>[<three-character index as key>]: <selected radio button>Example (First category, third modality, third radio button selected):
"002": 2 Json-values
When the json-values attribute is set:
json-data : {"attractiveness_enjoyableness":1,"attractiveness_quantity":2,"attractiveness_pleasure":1,...}Language configuration
The UEQ comes with a lot of translations in different languages.
Those will be applied according to the language set in the HTML context.
This means that setting the lang attribute in the html-, body- or form-element overrides the language.
You can set the language directly via lang-attribute of the element itself:
<ueq-element lang="de"></ueq-element>Available languages
The desired language is specified within the UEQ tag.
If the chosen language does not exist, the default language of the browser is automatically
chosen for the specified primary language.
If this language is not stored either, English is used as the default language.
Futhermore, if there is no complete translation for the used language, en is set as language.
Semantically, all valid language codes are accepted.
If you are missing a specific language or would like to provide a new translation, please reach out to the UEQ Plus Team.
License
This has been released under MIT license.