<ed-choice> component

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

import "@ed-components/ed-components/ed-choice";

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>

Feedbacks

A blockquote under an answer is the feedback of this answer, and a blockquote right after the list is the feedback of the question, such as the solution. They are shown once the learner answered: the feedback of each chosen answer, as correct or incorrect, and the feedback of the question.

<ed-choice>
  What is $E$ in $E=mc^2$?

  - [ ] mass
    > No, $m$ is the mass.
  - [x] energy
    > Yes, $E$ is the energy.
  - [ ] entropy
    > No, entropy is usually written $S$.

  > $E$ is the energy, $m$ the mass and $c$ the speed of light.
</ed-choice>

OLX compatibility

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

<multiplechoiceresponse>      <ed-choice>
    <label>                   This is my label
    <description>             > optional description
    <choicegroup>
          <choice>            - [x] True answer
              <choicehint>      > Optional choice hint
                              - [ ] False answer
                                > Optional choice hint

    <solution>                > solution
                              </ed-choice>

Choice hints and the solution are feedbacks. A question with several true answers is a multi-select problem.

Not supported yet: shuffled choices (shuffle and fixed), hints on demand (<demandhint>), partial credit (correct="partial") and answer pools (answer-pool).

TODO

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

References