ueq-element
v1.0.2
Published
A [WebComponent](https://www.webcomponents.org/) to support a configurable [User Experience Questionnaire (UEQ)](https://www.ueq-online.org).
Downloads
13
Readme
ueq-element
A WebComponent to support a configurable User Experience Questionnaire (UEQ).
It supports the default 26-item version and the shorter 8-item version (UEQ-S). It allows for extensive configuration through custom attributes.
Support for UEQ+ is planned but not yet implemented.
Live Example
If this is not visible, please visit the live example on webcomponents.org.
<ueq-element name="ueq-sample"></ueq-element>Installation
Via CDN
You can use the released component directly via jsDerlivr:
...
<head>
<script type="module" src="https://cdn.jsdelivr.net/npm/ueq-element/lib/ueq-element.esm.js"></script>
</head>
...As a depedency
Or you can install it via npm:
npm install --save ueq-elementor yarn:
yarn add ueq-elementand include it from your node_modules:
...
<head>
<script type="module" src="node_modules/ueq-element/lib/ueq-element.esm.js"></script>
</head>
...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 name="form-element-name"></ueq-element>
</form>
</body>Value retrieval
The ueq-element supports value retrieval in "classic" HTML way or via direct Javascript access.
If the required attribute of the ueq-element is not set, only the values for items which have been selected are set.
HTML form access
On standard usage with submitting the HTML form, the data is sent in the array format, indiced by the row number, not the index.
name[1] = '5'
name[2] = '5'
name[3] = '5'
...The attribute named-values configures the element to aubmit values as a map instead of an array in the form:
name[enjoyableness] = '5'
name[understandability] = '5'
name[creativity] = '5'
...JavaScript value access
If you are using the element with javascript access, the ueq-element provides 2 getters for accessing values in different formats:
const el = document.querySelector('ueq-element');
const valueAsObject = el.values; // Returns values as JS object
const valueAsForm = el.formData; // Returns values as FormDataConfiguration
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 |
| ------------- | ------ | ------- | ----------- |
| type | string | Full | Select type uf the UEQ scale to be used. Valid values are Full, Short, and Plus (not implemented) |
| named-values | bool | false | Submits the selected values as map instead of array |
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, setting of the lang attribute of a parent overrides the language.
You can set the language directly via lang-attribute of the element itself:
<ueq-element lang="de"></ueq-element>Alternatively, you can have HTML infer the rule from the parent:
<body lang="en">
<form lang="fr">
<ueq-element></ueq-element>
<!-- Language of the UEQ will be french -->
</form>
</body>Available languages
Semantically, all valid language codes are accepted.
This means, if available, also secondary languages may be applicable (like en-UK or en-US) if available.
If a secondary language is chosen, that does not exist (e.g. en-XYZ), the default secondary language is automatically
chosen for the specified primary language.
If no default language is set or the primary language is not set, primary language en with secondary us is set.
If you are missing a specific language or would like to provide a new translation, please reach out to the UEQ Team.
License
This has been released under MIT license.
