<ed-num> component

Usage

The correct answer is provided inside the element.

<ed-num>
-24
</ed-num>

You can pass input type number attributes like min, max, step.

<ed-num min="0" max="10" step="0.01">
3.14
</ed-num>

By default, the score is evaluated by percentage of error, but you can set attribute value eval to exact to change this behavior.

<ed-num eval="exact">
3.14
</ed-num>

If the answer is 0 the score is also 0 or 100% as no error can be calculated.

<ed-num>
0
</ed-num>

Credits

This component is inspired by the numerical input problem used in Open edx.

API

Generated with @custom-elements-manifest

`ed-num/src/EdNum.ts`:

class: `EdNumElement`

Superclass

Name	Module	Package
`HTMLElement`

Static Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`define`			`tagName`

Fields

Name	Type	Default	Description
`label`	`string`
`_answer`	`number`
`readonly`
`eval`			Evaluation method By default calculate percentage of error If "exact": 100% if equal 0% if not
`min`
`max`
`step`
`innerHTML`		`` ` <style>

:host {
  display: block;
}
div {
  display: flex;
  width: 100%;
  & > * {font-size: 1.1em;}
}
input {
  flex: 1;
}     </style>     <div class="user-input">     <input type="number" name="answer" placeholder="Enter number"/>     <button is="ed-check-button"/>     </div>     <output name="answer"></out>     ` `` |                                                                                                                  |                |

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`_handleResponse`	private		`evt: Event`

Events

Name	Type	Description	Inherited From
`edEvent`	`CustomEvent`

Attributes

Name	Field	Inherited From
`max`
`min`
`step`
`eval`
`readonly`

<hr/>

Playground for <ed-num> component

Settings

Live preview

html

<ed-num></ed-num>

preview