@penstat2/flash-card

A Project EdTechJoker creation

See https://github.com/elmsln/edtechjoker/blob/master/fall-21/projects/p3-haxtheweb/README.md for requirements to complete this project.

Quickstart

To get started:

yarn install
yarn start
# requires node 10 & npm 6 or higher

Using <flash-card>

Example slotted data

<p slot="front">What is strawberry in Spanish?</p>
<p slot="back">fresa</p>

We use named slots to read data. "front" is the question, and "back" is the answer. The element also has four attributes, dark, back, speak and img-src.

dark

Dark mode for the card. We use simple-colors from elmsln to achieve this.

back

Shows the back of the card first.

speak

A speech icon will appear that, when clicked, will read out the text on the card.

img-src=

By defulat, the image rendered is a grey box. You can supply a keyword or url for an image to be rendered in the card.

Using <flash-card-set>

Example usage

<flash-card-set>
  <ul>
    <li>
      <p slot="front">What is strawberry in Spanish?</p>
      <p slot="back">fresa</p>
      <p slot="image">https://loremflickr.com/320/240/strawberry</p>
    </li>
    <li>
      <p slot="image">https://loremflickr.com/320/240/food</p>
      <p slot="attributes">speak</p>
      <p slot="front">What is food in Spanish?</p>
      <p slot="back">comida</p>
    </li>
    <li>
      <p slot="back">persona</p>
      <p slot="front">What is person in Spanish?</p>
      <p slot="image">https://loremflickr.com/320/240/manequin</p>
      <p slot="attributes">speak dark</p>
    </li>
  </ul>
</flash-card-set>

This code renders a set of three flash cards, visible one at a time, with the above data. The tag relies on <ul> and <li> tags for organization, so those are required. The tag also requires named slots. At a minimum, it requires slot="back and slot="front". slot="image and slot="attributes" are optional.

###slot="front The question to be rendered

###slot="back The answer to the question

###slot="image The inner HTML for this should be the keyword or url for an image to be rendered in the card.

###slot="atributes The inner HTML for this should be a space separated list of attributes to be applied to the card. The only options are dark, speak, and back.

Behavior

The cards in the set are separate from each other, and each card 'saves' its state. The set element renders each card separately, so each card has its own state.

Scripts

• start runs your app for development, reloading on file changes
• start:build runs your app after it has been built using the build command
• build builds your app and outputs it in your dist directory
• test runs your test suite with Web Test Runner
• lint runs the linter for your project
• format fixes linting and formatting errors

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.