A Project EdTechJoker creation

About the sorting question tag

• use the tag in your html as shown below.
• dark attribute -> dark theme
• celebrate -> plays audio and shows confetti if 100% correct
• shame -> plays audio and throws rotten tomatoes if > 100% correct
• mute -> stops audio from playing for celebrate and shame
• no-background -> stops background gif from displaying for celebrate and shame
• disabled -> stops options from being re-ordered, disables reset button and submit button

More on the Sorting question tag

• is a custom web component that when used as directed will generate an element that displays options in a randomized order
• the user can use the mouse to drag and drop elements or the up and down arrows on the options themselves
• the submit button checks the order of options and then can celebrate or shame the user
• the reset button removes all indicators of correct/ incorrect answers and re-randomizes the order of the options
• when using this tag code the options in the correct order and the tag will automatically randomize them

Sorting Question usage

<script type="module">

import @viable-slime/SlimeSortingQuestion.js

</script>

<sorting-question dark celebrate shame mute no-background question="Sort the following in order">

<sorting-option></sorting-option>

<sorting-option></sorting-option>

<sorting-option></sorting-option>

</sorting-question>

Coded By Viable-Slime (Sean Brill)

• IST 402 at Penn State taught by Bryan Ollendyke

Quickstart

To get started:

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

Navigate to the HAX page to see it in context. Make sure to change rename-me in ALL parts of the repo to your project name.

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.