<ed-pb> component

Usage

This wrapper component allows to easily write problems with ed-components.

Some specific markdown is wrapped inside an adapted ed-components.

Task-list are wrapped into <ed-choice> for single and multiple-choice answers.
Unordered lists with score metadata(:100:) are wrapped into <ed-ans> for text answers.
Unordered lists with num metadata(:num:) are wrapped into <ed-num> for numeric answers.

<ed-pb>
# You can include a title

## Exercice

> This is a note. Who'd have noted?

1.  Each numeric element list  is turned into a question.

    You can provide some context, and even include sub-questions.

    Under the hood the two sub-answers here use `ed-choice` component.

    
    1. Subquestion 2.1.

       A gfm task-list with _one checked answer_ will be turned into a **single choice question**.

       - [ ] first false answer
       - [x] This is true
       - [ ] third false answer
    
    1. Subquestion 2.2.

       A gfm task-list with _more than one checked answer_ will be turned into a **multiple choice question**.

       - [ ] first false answer
       - [x] This is true
       - [x] This is also true
       - [ ] false also

    However you can use unordered lists in your markdown content. 
    
    - Hello
    - World

1. Here is the second question, don't bother about which is the right number,
   markdown oredred lists handle this natively.

   This time, we'll use
   [nlp](https://en.wikipedia.org/wiki/Natural_language_processing) to score the
   answer of the student.

   Under the hood it uses `<ed-ans>` component.

   What is the capital of France?

   > You must write a sentence. 

   - :100: Paris is the capital of France.
   - :100: The capital of France is Paris.
   - :50: Paris.

1. You can also use `ed-num` component for numeric answers.
   
   1. How many Wonders of the ancient World were present during classical
      antiquity?

      - :num: 7

   1. How many Wonders of the ancient World are still in existence?

      - :num: 1
       
</ed-pb>

`emd` attribute

You can provide the emd content as an attribute to allow re-rendering the component on change. In that case, innerHTML content is totally ignored.

<ed-pb emd="# Hello emd
1. Are you happy with educational markdown?
   - [x] Yes
   - [ ] No">
_This content wiil not be used_
</ed-pb>

Credits

This component rely on micromark to parse markdown in the client-side.

API

Generated with @custom-elements-manifest

`ed-pb/src/EdPb.ts`:

class: `EdPbElement`

Superclass

Name	Module	Package
`HTMLElement`

Static Methods

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

Fields

Name	Privacy	Type	Default
`nAnsTot`	private	`number`	`0`
`nAns`	private	`number`	`0`
`score`	private	`number`	`0`
`label`
`emd`
`isHTML`
`innerHTML`			`` ` <style>

:host {
  display: block;
}
main {
  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;
}     #progress {
  position: sticky;
  backdrop-filter: blur(23px);
  top: 0;
  z-index: 10;
}     </style>     <main>     <section id="progress">       <h1 id="label"></h1>       <ed-progress-bar id="bar-progress" label="Progress" percent="0" style="background-color: var(--blue-7, #1c7ed6);"></ed-progress-bar>       <ed-progress-bar id="bar-results" label="Success" percent="0" style="background-color: var(--green-7, #37b24d);"></ed-progress-bar>       <hr>     </section>     <article></article>     </main>     ` `` |             |                |

Methods

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

Events

Name	Type	Description	Inherited From
`edEvent`	`CustomEvent`

Attributes

Name	Field	Inherited From
`label`
`description`
`emd`
`isHTML`

<hr/>

Playground for <ed-pb> component

Settings

Live preview

html

<ed-pb></ed-pb>

preview