<ed-choice> component

A web component to create quiz using markdown gfm markdown's task-list.

Usage

Basic Usage

The ed-choice element accepts gfm markdown for it's content. Each task-list is turned into a single choice question.

If only one element is checked it will be turned into a single-choide question with instant feedback.

<ed-choice>
  Do you love pizzas?

  - [ ] First _false_ answer
  - [x] Second **true** answer
  - [ ] Third _false_ answer
  - [ ] LONG ANSWER: Third _false_ answer Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Laboriosam, accusamus. Iste beatae
    necessitatibus quibusdam odit quas nobis rerum nesciunt harum modi
    exercitationem reprehenderit, quisquam tenetur sint maxime consequuntur?
    Adipisci, fuga.
        
</ed-choice>

If more than one answer is checked a submit button is added to allow the choice of multiple answers.

<ed-choice>
  Who are the best guitarsits of history.

  - [x] Jimi Hendrix
  - [ ] Your teacher
  - [x] Jeff Beck
        
</ed-choice>

OLX compatibility

Edx single select problem OLX can include this hierarchy of child elements.

<multiplechoiceresponse>      <ed-choice shuffle="true">
    <label>                   This is my label
    <description>             > optional description
    <choicegroup>             
          <choice>            - [x] True answer
              <choicehint>      > Optional choice hint
                              - [ ] False answer
                                > Optional choice hint
    
    <solution>                > solution
<demandhint>
    <hint>                    - optional additional information that learners can access if needed.
                              </ed-choice>

TODO

  • attributes for label, description, solution and hints
  • allow to define attributes in yaml header
  • script tag to generate all question as a json object.

References

API

Generated with @custom-elements-manifest

ed-choice/src/EdChoice.ts:

class: EdChoiceElement
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
type
html
innerHTML `` ` <style>
:host {
  display: block;       --ed-primary: var(--blue-7, #1c7ed6);       --ed-success: var(--green-7, #37b24d);       --ed-danger: var(--red-7, #f03e3e);
}

article {
  font-family: var(--font-sans, system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif);
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-style: solid;
  border-color: rgb(192, 192, 192);
  border-radius: 2em;
  padding: 0em 1em;
}

li {
  font-size: 1.1em;
  list-style-type: none;
}

li.bad-answer {
  text-decoration: line-through;
}

li.good-answer {
  text-decoration: underline solid var(--ed-success);
  font-size: 1.5em;
  transition: font-size 0.3s linear;
}
 #feedback {
  display: flex;
  justify-content: flex-end;
  button {
    font-size: 1.1em;
  }
}


{* TODO share math style*}
.math-inline {
  font-size: 1.3em;
}
.math-display {
  font-size: 1.5em;
}   </style>   <article>   <section id="content"></section>   <section id="feedback"></section>   </article>   ` `` |             |                |
Methods
Name Privacy Description Parameters Return Inherited From
_handleResponse private Check answer and dispatch event on user response evt: Event
Events
Name Type Description Inherited From
edEvent CustomEvent
Attributes
Name Field Inherited From
type
html

<hr/>

Playground for <ed-choice> component


Settings

Attributes
Content

Live preview

html
<ed-choice></ed-choice>
preview