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.
If this is not visible, please visit the live example on webcomponents.org.
<ueq-element name="ueq-sample"></ueq-element>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>
...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>
...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>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.
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'
...
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 FormDataAs 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 |
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>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.
| Language | Localization |
|---|---|
| Arabic |  |
| Bulgarian |  |
| Bengali |  |
| Bosnian |  |
| Czech |  |
| Danish |  |
| German |  |
| Greek |  |
| English |  |
| Spanish |  |
| Estonian |  |
| Persian |  |
| Finnish |  |
| French |  |
| Hebrew |  |
| Hindi |  |
| Croatian |  |
| Hungarian |  |
| Indonesian |  |
| Italian |  |
| Japanese |  |
| Kannada |  |
| Marathi |  |
| Malay |  |
| Dutch |  |
| Norwegian |  |
| Polish |  |
| Portuguese |  |
| Russian |  |
| Slovak |  |
| Slovene |  |
| Swedish |  |
| Tamil |  |
| Thai |  |
| Turkish |  |
| Chinese |  |
If you are missing a specific language or would like to provide a new translation, please reach out to the UEQ Team.
This has been released under MIT license.
