<ed-choice> component

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	Type	Default
`label`	`string`
`type`
`isHTML`
`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`
`isHTML`

<hr/>

Playground for <ed-choice> component

Settings

Live preview

html

<ed-choice></ed-choice>

preview