Accessible UEQ(S) WebComponent

A more accessible version of the UEQ-S through usage with emotional bonding (Publication).
This widget uses smileys as an approach to link emotions to the UEQ tiers.
The development focused on the UEQ-S, so the full UEQ is not yet implemented.

You can use the accessible UEQ-S in any web application as a WebComponent.
All you need to do is import the javascript file and use the custom HTML element.

This WebComponent implements the ElementInternals interface
to allow for using the element in classic HTML forms. There is of course also a plain javascript API exposed.

Getting started

Using a CDN

You can use the accessible UEQ-S on your website without installing anything using jsDelivr:

1. Include and use it in your HTML
``html ... ... ... ...`

`Using` npm


1. Install via npm:

npm i accessible-ueq


2. Import and use in your html:

html
...

    

...

...
    
...


Receiving data

$3

You can use the element inside any HTML

-element, like an

.
The provided values will be submitted as JSON-encoded string in the form

json
{
  "support": ,
  "ease": ,
  "efficiency": ,
  "clarity": ,
  "excitement": ,
  "interest": ,
  "invention": ,
  "novelty": 
}


with numbers from

1 - 7

 depending on the selection.
$3

If you want to access the values via javascript rather than submitting a html form,
the

value

 property will return a javascript object rather than a JSON string.

javascript
function getUeqValues() {
  const data = document.querySelector('ueq-emotion[name="form-element-name"]').value;
  // data is provided as Javascript object
  console.log(data);
}

 
Live Example

html


Attributes

There is a set of attributes you can use to personalize your ueq-s

| Attribute | Mandatory | Type | Default | Description | | ------------- | --------- | ------ | ------- | ----------- | |name | __yes__ | string | - | Name of the form element. Must conform name attribute specifications for input elements. | |locale | no | string | en_US | Locale to be used for translation. Currently available: en_US, de_DE, de_LS(German simple language) | |value| no | string | {} | Set initial value of the element. Must be a JSON-object | |multi-field| no | bool | false | Activates Multi-Field setting | |type | no | string | 'Short' | Selects if the UEQ-Short should be used or the full UEQ (_not implemented_) |

`Multi-Field`


The default behaviour converts all questions into a single form-field, which contains all values as JSON-string.
If you want to get the single values as separate form fields, you can simply use the

multi-field

 attribute:

html


This will submit every modality as a single form value in the format:

javascript
my-ueq[support] = 
my-ueq[ease] = 
my-ueq[efficiency] = 
my-ueq[clarity] = 
my-ueq[excitement] = 
my-ueq[interest] = 
my-ueq[invention] = 
my-ueq[novelty] =


Accessing the value through javascript will however still deliver a JS-object in the default format.
Styling

The accessible UEQ-S is designed to be accessible as far as possible, even from color schemes.
However, for some applications, it may be necessary to change sizes or colors.
This can be done by setting the elements' css variables. This is even possible per element:

html

`[Deprecated] Usage with angular`


Usage as SurveyJS custom element for Angular.
The general usage of custom elements is displayed on SurveyJS Angular CLI.
> Originally developed towards usage with Angular only, the WebComponent is now leading the developemnt. 
> As soon as stable, there will be a new Angular component developed, using the WebComponent internally.

To add the accessible UEQ-S to you survey, just add this project to your components folder and edit your survey.component.ts:`typescript ... import * as Survey from 'survey-angular'; import {init as initUeqWidget} from './accessible-ueq/ueq-emotion.widget'; import {UeqEmotionType} from './accessible-ueq/ueq-emotion.contents'; ... initUeqWidget(Survey, { type: UeqEmotionType.Short, lang: 'en_US', });

`Now you can simply add the widget to your survey's HTML:`html`and Typescript:`typescript json = { title: 'My accessible survey', pages: [ { questions: [ { type: 'ueq-emotion', name: 'my-emotional-ueqs', title: 'Please rate the system you just have been showed', validators: [ { type: 'expression', text: 'Please provide a rating for every line', expression: 'UeqEmotionAspectsCheckedValidator({my-emotional-ueqs}, Short)' } ] } ] } ] };``

License

This has been released under MIT license.

![FOSSA Status](https://app.fossa.com/projects/git%2Bgithub.com%2FdaHaimi%2Faccessible-ueq?ref=badge_large)

Accessible UEQ(S) WebComponent

You can use the accessible UEQ-S in any web application as a WebComponent.
All you need to do is import the javascript file and use the custom HTML element.

This WebComponent implements the ElementInternals interface
to allow for using the element in classic HTML forms. There is of course also a plain javascript API exposed.

Getting started

Using a CDN

You can use the accessible UEQ-S on your website without installing anything using jsDelivr:

1. Include and use it in your HTML
``html ... ... ... ...`

`Using` npm


1. Install via npm:

npm i accessible-ueq


2. Import and use in your html:

html
...

    

...

...
    
...


Receiving data

$3

You can use the element inside any HTML

-element, like an

.
The provided values will be submitted as JSON-encoded string in the form

json
{
  "support": ,
  "ease": ,
  "efficiency": ,
  "clarity": ,
  "excitement": ,
  "interest": ,
  "invention": ,
  "novelty": 
}


with numbers from

1 - 7

 depending on the selection.
$3

If you want to access the values via javascript rather than submitting a html form,
the

value

 property will return a javascript object rather than a JSON string.

javascript
function getUeqValues() {
  const data = document.querySelector('ueq-emotion[name="form-element-name"]').value;
  // data is provided as Javascript object
  console.log(data);
}

 
Live Example

html


Attributes

There is a set of attributes you can use to personalize your ueq-s

`Multi-Field`


The default behaviour converts all questions into a single form-field, which contains all values as JSON-string.
If you want to get the single values as separate form fields, you can simply use the

multi-field

 attribute:

html


This will submit every modality as a single form value in the format:

javascript
my-ueq[support] = 
my-ueq[ease] = 
my-ueq[efficiency] = 
my-ueq[clarity] = 
my-ueq[excitement] = 
my-ueq[interest] = 
my-ueq[invention] = 
my-ueq[novelty] =


Accessing the value through javascript will however still deliver a JS-object in the default format.
Styling

The accessible UEQ-S is designed to be accessible as far as possible, even from color schemes.
However, for some applications, it may be necessary to change sizes or colors.
This can be done by setting the elements' css variables. This is even possible per element:

html

`[Deprecated] Usage with angular`


Usage as SurveyJS custom element for Angular.
The general usage of custom elements is displayed on SurveyJS Angular CLI.
> Originally developed towards usage with Angular only, the WebComponent is now leading the developemnt. 
> As soon as stable, there will be a new Angular component developed, using the WebComponent internally.

License

This has been released under MIT license.

![FOSSA Status](https://app.fossa.com/projects/git%2Bgithub.com%2FdaHaimi%2Faccessible-ueq?ref=badge_large)

accessible-ueq

Accessible UEQ(S) WebComponent

Getting started

Using a CDN

Using npm

Receiving data

$3

$3

Live Example

Attributes

Multi-Field

Styling

[Deprecated] Usage with angular

License

accessible-ueq

Accessible UEQ(S) WebComponent

Getting started

Using a CDN

Using npm

Receiving data

$3

$3

Live Example

Attributes

Multi-Field

Styling

[Deprecated] Usage with angular

License

`Using` npm

`Multi-Field`

`[Deprecated] Usage with angular`

`Using` npm

`Multi-Field`

`[Deprecated] Usage with angular`