<ed-ans> component

A webcomponent for sentences answers in education.

Usage

A set of answers is wrapped inside de <ed-ans> element in a markdown unordered list extended with a score metadata and will be compared to student answer.

You must:

  1. Indicate the score between 0 and 100 for each answer at the beginning of the answer :100: Your answer here gets a score of 100
  2. and use first answer as the correct answer with score 100.
<ed-ans>
- :100: Paris is the capital of _France_.
- :75: The capital is Paris.
- :50: Paris.
</ed-ans>

Credits

NLP processing is made using Winkjs open-source library.

API

Generated with @custom-elements-manifest

ed-ans/src/EdAns.ts:

class: EdAnsElement, ed-ans
Superclass
Name Module Package
HTMLElement
Static Methods
Name Privacy Description Parameters Return Inherited From
define tagName
Fields
Name Privacy Type Default Description Inherited From
label string
_answers private answerData[] []
html
innerHTML `` ` <style>
:host {
  display: block;
}
div {
  display: flex;
  width: 100%;
  & > * {font-size: 1.1em;}
}
input {
  flex: 1;
}     </style>     <div class="user-input">     <input type="text" name="answer" placeholder="Enter your answer"/>     <button is="ed-check-button"/>     </div>     <output name="answer"></out>     ` `` |             |                |
Methods
Name Privacy Description Parameters Return Inherited From
_bagOfWords private s: string
_handleResponse private evt: Event
Events
Name Type Description Inherited From
edEvent CustomEvent
Attributes
Name Field Inherited From
html

<hr/>

Playground for <ed-ans> component


Settings

Attributes
Content

Live preview

html
<ed-ans></ed-ans>
preview