diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index cecb5fb0..0874fcef 100644
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -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
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2b42037e..d57ae783 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -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
+
+
+
+
+
+
+```
+
+__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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
## v4.42.0
- Add selected tangy-location labels to the input value for reporting outputs
diff --git a/demo/assets/images/instructions.png b/demo/assets/images/instructions.png
new file mode 100644
index 00000000..6d78c776
Binary files /dev/null and b/demo/assets/images/instructions.png differ
diff --git a/demo/assets/sounds/letters_moving_windows_comp_02_What_does_Kofi_like_to_do.mp3 b/demo/assets/sounds/letters_moving_windows_comp_02_What_does_Kofi_like_to_do.mp3
new file mode 100644
index 00000000..6cc47bc6
Binary files /dev/null and b/demo/assets/sounds/letters_moving_windows_comp_02_What_does_Kofi_like_to_do.mp3 differ
diff --git a/demo/assets/sounds/letters_moving_windows_comp_help.mp3 b/demo/assets/sounds/letters_moving_windows_comp_help.mp3
new file mode 100644
index 00000000..bbc3e47d
Binary files /dev/null and b/demo/assets/sounds/letters_moving_windows_comp_help.mp3 differ
diff --git a/demo/assets/sounds/letters_silent_rcomp_01_Get_up_early.mp3 b/demo/assets/sounds/letters_silent_rcomp_01_Get_up_early.mp3
new file mode 100644
index 00000000..49395707
Binary files /dev/null and b/demo/assets/sounds/letters_silent_rcomp_01_Get_up_early.mp3 differ
diff --git a/demo/assets/sounds/letters_silent_rcomp_01_Ran.mp3 b/demo/assets/sounds/letters_silent_rcomp_01_Ran.mp3
new file mode 100644
index 00000000..a0483a37
Binary files /dev/null and b/demo/assets/sounds/letters_silent_rcomp_01_Ran.mp3 differ
diff --git a/demo/assets/sounds/letters_silent_rcomp_01_Run.mp3 b/demo/assets/sounds/letters_silent_rcomp_01_Run.mp3
new file mode 100644
index 00000000..275d2909
Binary files /dev/null and b/demo/assets/sounds/letters_silent_rcomp_01_Run.mp3 differ
diff --git a/demo/assets/sounds/letters_silent_rcomp_01_Tie_her_shoes.mp3 b/demo/assets/sounds/letters_silent_rcomp_01_Tie_her_shoes.mp3
new file mode 100644
index 00000000..c2568b2a
Binary files /dev/null and b/demo/assets/sounds/letters_silent_rcomp_01_Tie_her_shoes.mp3 differ
diff --git a/demo/assets/sounds/letters_silent_rcomp_01_Visit_the_city.mp3 b/demo/assets/sounds/letters_silent_rcomp_01_Visit_the_city.mp3
new file mode 100644
index 00000000..16449561
Binary files /dev/null and b/demo/assets/sounds/letters_silent_rcomp_01_Visit_the_city.mp3 differ
diff --git a/demo/assets/sounds/letters_silent_rcomp_01_all.mp3 b/demo/assets/sounds/letters_silent_rcomp_01_all.mp3
new file mode 100644
index 00000000..f8623c4d
Binary files /dev/null and b/demo/assets/sounds/letters_silent_rcomp_01_all.mp3 differ
diff --git a/demo/assets/sounds/letters_silent_rcomp_01_what_did_Esse_do_for_the_first_time.mp3 b/demo/assets/sounds/letters_silent_rcomp_01_what_did_Esse_do_for_the_first_time.mp3
new file mode 100644
index 00000000..e2283c82
Binary files /dev/null and b/demo/assets/sounds/letters_silent_rcomp_01_what_did_Esse_do_for_the_first_time.mp3 differ
diff --git a/demo/eftouch.html b/demo/eftouch.html
index 8359ece9..0c73b32e 100644
--- a/demo/eftouch.html
+++ b/demo/eftouch.html
@@ -88,7 +88,7 @@
-
+
2 / 11
Touch the cat.
@@ -114,7 +114,7 @@
-
+
3 / 11
Touch the dog.
@@ -140,7 +140,7 @@
-
+
4 / 11
Touch the tortoise.
@@ -166,7 +166,7 @@
-
+
5 / 11
Touch the cow.
@@ -193,7 +193,7 @@
-
+
6 / 11
Touch the fish.
@@ -220,7 +220,7 @@
-
+
7 / 11
Touch the bird.
@@ -247,7 +247,7 @@
-
+
8 / 11
Touch the pig.
diff --git a/demo/tangy-radio-blocks-numbers.html b/demo/tangy-radio-blocks-lists.html
similarity index 57%
rename from demo/tangy-radio-blocks-numbers.html
rename to demo/tangy-radio-blocks-lists.html
index 758be6f0..bb5cb3c8 100644
--- a/demo/tangy-radio-blocks-numbers.html
+++ b/demo/tangy-radio-blocks-lists.html
@@ -5,10 +5,24 @@
- tangy-radio-blocks demo
+ tangy-radio-blocks lists demo
-
+
+
@@ -62,6 +77,7 @@
+
+
+
+
+
+ ${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);
diff --git a/input/tangy-radio-block.js b/input/tangy-radio-block.js
index 33843604..db93ddad 100644
--- a/input/tangy-radio-block.js
+++ b/input/tangy-radio-block.js
@@ -90,6 +90,26 @@ export class TangyRadioBlock extends TangyInputBase {
type: Boolean,
value: false,
reflectToAttribute: true
+ },
+ image: {
+ type: String,
+ value: '',
+ reflectToAttribute: true
+ },
+ sound: {
+ type: String,
+ value: '',
+ reflectToAttribute: true
+ },
+ promptFor: {
+ type: String,
+ value: '',
+ reflectToAttribute: true
+ },
+ playOnOpen: {
+ type: String,
+ value: '',
+ reflectToAttribute: true
}
}
}
@@ -112,10 +132,8 @@ export class TangyRadioBlock extends TangyInputBase {
.toggle {
position: absolute;
clip: rect(0,0,0,0);
- pointer-events: none;
}
.toggle:active + label, .toggle:checked + label {
- /* Old selected orange color: #ff620c */
border-color: var(--button-selected-border-color, green);
}
.btn-lg {
@@ -124,7 +142,6 @@ export class TangyRadioBlock extends TangyInputBase {
display: flex;
align-items: center;
justify-content: var(--justify-content, center);
- font-size: 2rem !important;
margin: 0 0.25rem;
}
.btn {
@@ -133,15 +150,12 @@ export class TangyRadioBlock extends TangyInputBase {
vertical-align: middle;
user-select: none;
padding: 0.375rem 0.75rem;
- font-family: 'Andika', sans-serif;
font-size: 1.3rem;
line-height: 1.5;
border-radius: 0.5rem;
- color: #2a3f55;
- border: 7px solid #ffbf09;
+ border: 4px solid #2c3e50;
text-decoration: none;
- box-shadow: 0px 1px 6px 3px #ffaa004d;
- background-color: #ffbf09;
+ background-color: #ffff;
transition-duration: 0.4s;
position: relative;
box-sizing: border-box;
@@ -159,9 +173,12 @@ export class TangyRadioBlock extends TangyInputBase {
name="answer"
>
-
+
${this.hasAttribute('hint-text') ? `