ueq_plus

v0.0.3

Published

3 years ago

0High
0Medium
0Low

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_plus

Usage

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme