Skip to content

Commit

Permalink
Merge pull request #412 from Tangerine-Community/410-clean-up
Browse files Browse the repository at this point in the history
SE Tools
  • Loading branch information
esurface authored Feb 15, 2024
2 parents 2b17b54 + 2bc64dc commit e8492cf
Show file tree
Hide file tree
Showing 22 changed files with 816 additions and 20,823 deletions.
1 change: 1 addition & 0 deletions .github/workflows/npm-publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ jobs:
with:
node-version: 16
registry-url: https://registry.npmjs.org/
ref: ${{ github.ref }}
- run: npm ci
- run: npm install
- run: npm run build
Expand Down
42 changes: 42 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,47 @@
# CHANGELOG

## v4.43.0

__Tangerine Radio Blocks__

The `tangy-radio-blocks` element is a single-select input that shows a set of `tangy-radio-block` options. Each option has a label, image, and border that identifies the option. The set of `tangy-radio-block` options appears in either a vertical or horizontal list based on the `columns` attribute.

This update adds a `sound` attribute to `tangy-radio-block` that takes a path to an audio file. When the image in the option is clicked, the audio will play.

```html
<tangy-radio-blocks name="moving_windows_comp_02" label="What does Kofi like to do?" orientation="rows" class="" style="" required="">
<option value="0" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Tie_her_shoes.mp3">Tie her shoes</option>
<option value="1" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Visit_the_city.mp3">Visit the city</option>
<option value="2" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Run.mp3">Run</option>
<option value="3" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Get_up_early.mp3">Get up early</option>
</tangy-radio-blocks>
```

__Tangerine Prompt__

The new `tangy-prompt-box` input type helps form designers create content sets that interacts with the user through a set of auto-playing sound files. The prompt in the [tangy-radio-blocks-lists demo](./demo/tangy-radio-blocks-lists.html) reads some instructions and then prompts the user by playing the audio associated with the options in a `tangy-radio-blocks` input. This provides a tool for the user to build a self administered assessment.

The `tangy-prompt-box` input adds two attributes `playOnOpen` which takes a list of option values. When set, the options in the attribute list will play when the input is shown. Also, the attribute `prompt-for` can be set on one or more options with the value of the name of a `tangy-radio-blocks` input. When clicked, the prompt will play it's own `sound`, then loop through the `sound` attributes in the `tangy-radio-blocks`. It will also change the border color to provide both an audio and visual cue.

Review the example code below. When the `tangy-form-item` opens the prompt box with play the audio for "instructions" and "help". Then, because of the `prompt-for` attribute is set to `moving_windows_comp_02`, it will play sound files in all of the options in the `tangy-radio-blocks` input. If the `help` option in the `tangy-prompt-box` is clicked, it will play it's own sound and then sounds in the prompt box.

```html
<tangy-form>
<tangy-form-item>
<tangy-prompt-box name="moving_windows_comp_02_prompt" play-on-open="0,1" justify-content="flex-start">
<option value="0" id="instructions" label="prompt" sound="assets/sounds/letters_moving_windows_comp_help.mp3" image="./assets/images/instructions.png"></option>
<option value="1" id="help" label="insturctions" prompt-for="moving_windows_comp_02" sound="assets/sounds/letters_moving_windows_comp_02_What_does_Kofi_like_to_do.mp3" image="./assets/images/ms-talk2.png"></option>
</tangy-prompt-box>
<tangy-radio-blocks name="moving_windows_comp_02" label="What does Kofi like to do?" orientation="rows" class="" style="" required="">
<option value="0" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Tie_her_shoes.mp3">Tie her shoes</option>
<option value="1" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Visit_the_city.mp3">Visit the city</option>
<option value="2" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Run.mp3">Run</option>
<option value="3" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Get_up_early.mp3">Get up early</option>
</tangy-radio-blocks>
</tangy-form-item>
</tangy-form>
```

## v4.42.0

- Add selected tangy-location labels to the input value for reporting outputs
Expand Down
Binary file added demo/assets/images/instructions.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
14 changes: 7 additions & 7 deletions demo/eftouch.html
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
</tangy-eftouch>
</template>
</tangy-form-item>
<tangy-form-item id="item2" hide-next-button hide-back-button>
<tangy-form-item id="item2">
<template>
2 / 11 <br>
Touch the cat.
Expand All @@ -114,7 +114,7 @@
</tangy-eftouch>
</template>
</tangy-form-item>
<tangy-form-item id="item3" hide-next-button hide-back-button>
<tangy-form-item id="item3">
<template>
3 / 11 <br>
Touch the dog.
Expand All @@ -140,7 +140,7 @@
</tangy-eftouch>
</template>
</tangy-form-item>
<tangy-form-item id="item4" hide-next-button hide-back-button>
<tangy-form-item id="item4">
<template>
4 / 11 <br>
Touch the tortoise.
Expand All @@ -166,7 +166,7 @@
</tangy-eftouch>
</template>
</tangy-form-item>
<tangy-form-item id="item5" hide-next-button hide-back-button>
<tangy-form-item id="item5">
<template>
5 / 11 <br>
Touch the cow.
Expand All @@ -193,7 +193,7 @@
</template>
</tangy-form-item>

<tangy-form-item id="item6" hide-next-button hide-back-button>
<tangy-form-item id="item6">
<template>
6 / 11 <br>
Touch the fish.
Expand All @@ -220,7 +220,7 @@
</template>
</tangy-form-item>

<tangy-form-item id="item7" hide-next-button hide-back-button>
<tangy-form-item id="item7">
<template>
7 / 11 <br>
Touch the bird.
Expand All @@ -247,7 +247,7 @@
</template>
</tangy-form-item>

<tangy-form-item id="item8" hide-next-button hide-back-button>
<tangy-form-item id="item8">
<template>
8 / 11 <br>
Touch the pig.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,24 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

<title>tangy-radio-blocks demo</title>
<title>tangy-radio-blocks lists demo</title>

<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../node_modules/devtools-detect/index.js"></script>
<script type="module">
import devtools from '../node_modules/devtools-detect/index.js';

// Check if it's open
console.log('Is DevTools open:', devtools.isOpen);

// Check it's orientation, `undefined` if not open
console.log('DevTools orientation:', devtools.orientation);

// Get notified when it's opened/closed or orientation changes
window.addEventListener('devtoolschange', event => {
console.log('Is DevTools open:', event.detail.isOpen);
console.log('DevTools orientation:', event.detail.orientation);
});
</script>
<script src="../node_modules/redux/dist/redux.min.js"></script>

<script type="module">
Expand Down Expand Up @@ -40,6 +54,7 @@
</style>
</custom-style>
<script type="module" src="../tangy-form.js"></script>
<script type="module" src="../tangy-form-item.js"></script>
<script type="module" src="../input/tangy-acasi.js"></script>
<script type="module" src="../input/tangy-box.js"></script>
<script type="module" src="../input/tangy-checkbox.js"></script>
Expand All @@ -62,6 +77,7 @@
<script type="module" src="../input/tangy-radio-block.js"></script>
<script type="module" src="../input/tangy-radio-blocks.js"></script>
<script type="module" src="../input/tangy-keyboard-input.js"></script>
<script type="module" src="../input/tangy-prompt-box.js"></script>

<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
Expand All @@ -71,42 +87,44 @@

<body>
<div class="vertical-section-container centered">
<h3>tangy-radio-blocks numbers demo</h3>
<h3>tangy-radio-blocks lists demo</h3>
<demo-snippet>
<template>
<tangy-form
id="numbers"
title="Numbers"
id="trb-lists"
title="TRB Lists"
>
<tangy-form-item
id="item2"
title="Item 2"
<tangy-form-item
id="item0"
title="Item 0"
>
<tangy-keyboard-input
keys="0 1 2 3 4 5 6 7 8 9"
name="keyboardInput1"
prefix="2,4,"
postfix=",8"
>
</tangy-keyboard-input>
<tangy-box id="tangerineMan" class=""><img src="./assets/images/ms-talk2.png" class="talk" onclick="play()"></tangy-box>
</tangy-form-item>
<tangy-form-item
<template>
<tangy-box>
Click Next
</tangy-box>
</template>
</tangy-form-item>
<tangy-form-item
id="item1"
title="Item 1"
>
<tangy-keyboard-input
keys="0 1 2 3 4 5 6 7 8 9"
name="keyboardInput1"
prefix="1 + 1 = "
>
</tangy-keyboard-input>
<tangy-box id="tangerineMan" class=""><img src="./assets/images/ms-talk2.png" class="talk" onclick="play()"></tangy-box>
<template>
<tangy-radio-blocks name="moving_windows_comp_02" label="What does Kofi like to do?" orientation="rows" class="" style="" required="">
<option value="0" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Tie_her_shoes.mp3">Tie her shoes</option>
<option value="1" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Visit_the_city.mp3">Visit the city</option>
<option value="2" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Run.mp3">Run</option>
<option value="3" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Get_up_early.mp3">Get up early</option>
</tangy-radio-blocks>
<tangy-prompt-box name="moving_windows_comp_02_prompt" justify-content="flex-end">
<option value="instructions" label="prompt" play-on-open="on" sound="assets/sounds/letters_moving_windows_comp_help.mp3" image="./assets/images/instructions.png"></option>
<option value="help" label="insturctions" prompt-for="moving_windows_comp_02" sound="assets/sounds/letters_moving_windows_comp_02_What_does_Kofi_like_to_do.mp3" image="./assets/images/ms-talk2.png"></option>
</tangy-prompt-box>
</template>
</tangy-form-item>

</tangy-form>
<script>
document.querySelector('#numbers').addEventListener('submit', event => {
document.querySelector('#trb-lists').addEventListener('submit', event => {
// By default, the form response is locked and the user can browse it. Use event.preventDefault()
// to do something else.
event.preventDefault()
Expand Down
2 changes: 2 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,5 @@ import './input/tangy-partial-date.js';
import './input/tangy-toggle.js';
import './input/tangy-gate.js';
import './input/tangy-ethio-date.js';
import './input/tangy-radio-blocks.js';
import './input/tangy-prompt-box.js';
85 changes: 85 additions & 0 deletions input/tangy-prompt-box.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { html } from '@polymer/polymer/polymer-element.js';
import { t } from '../util/t.js'
import '../util/html-element-props.js'
import { TangyRadioBlocks} from './tangy-radio-blocks.js'
import './tangy-radio-block.js'
import '../style/tangy-element-styles.js';
import '../style/tangy-common-styles.js'
import { TangyInputBase } from '../tangy-input-base.js';

/**
* `tangy-prompt-box`
*
*
* @customElement
* @polymer
* @demo demo/index.html
*/
export class TangyPrmoptBox extends TangyRadioBlocks {

static get is() { return 'tangy-prompt-box'; }

constructor() {
super()
this.value = []
}

static get template() {
return html`
<style include="tangy-element-styles"></style>
<style include="tangy-common-styles"></style>
<style>
#blockContainer.columns {
flex-direction: column;
justify-content: normal;
}
.columns tangy-radio-block {
--width: 100%;
--height: 4rem;
--justify-content: left;
width: 100%;
margin: .2rem 0;
padding: 0px;
}
#blockContainer {
display: flex;
font-size: 4rem;
font-weight: 700;
text-align: center;
flex-grow: 1;
align-items: left;
position: relative;
}
</style>
${super.template}
`;
}

static get properties() {
let properties = super.properties
properties.justifyContent = {
type: String,
value: 'flex-end',
reflectToAttribute: true
}
return properties;
}

ready() {
super.ready()
}

reflect() {
super.reflect()
}

render() {
this.$.blockContainer.style.justifyContent = this.hasAttribute('justify-content') ?
this.getAttribute('justify-content') : 'flex-end';
super.render()
}

}
window.customElements.define(TangyPrmoptBox.is, TangyPrmoptBox);
Loading

0 comments on commit e8492cf

Please sign in to comment.