Currently, I have a group of buttons that will play a sound and change to the corresponding scene that shows how to play that sound on the instrument. Ideally, I would like to be able to add an area that when a user presses a button, a list will be created of their button selections and they can print the song they created. Is this possible, and do you have any suggestions on Javascript or anything else I can try? Unfortunately, I am not able to share the project at this time.
Really lazy way...
On Button Press…
var e = hypeDocument.getElementById("id") // Where "ID" is the name for the element
e.innerHTML = e.innerHTML + event.target.id;
That's theoretical, as I haven't actually tested it and I'm not exactly sure that's what you're looking for, but the general idea is that the element itself stores the data. (The downside is that a reload would remove the data, so maybe LocalStorage could be used too.) You just add to the list. (It would need additional HTML, such as <p> & </p> or <br> to add line breaks. That depends on how you want to style it.)
As far as printing it, you can just add CSS to exclude everything except the element when printing...
- https://developer.mozilla.org/en-US/docs/Web/Guide/Printing
- https://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/ (Basically, item #3)
…again, theoretical. This is just a rough idea as to what might work. I usually have templates that fit with common problems, but these requirements are fairly unique. The proper way with JavaScript (which is different than Java) probably would involve arrays. The closest match I have is the "Capitals" quiz, but that kinda works in the opposite direction — removing potential questions from the list as the buttons are pressed.
1 Like
Hype has a global object you can use to add data.
hypeDocument.customData
You can give each cord a data attribute in the identity inspector defining its value.
When the button is clicked it goes to your how to scene & runs a function to store the cord in
hypeDocument.customData.
We also set up for printing later on.
///hypeDocument.customData.store check to see if it has been used already.
if( typeof hypeDocument.customData.store == "undefined"){
/// not used yet so we define it to a blank string
hypeDocument.customData.store = ""
/// While we are in here and this section will only run once , we may as well set up the print listeners
window.addEventListener("beforeprint", function(event) {
/// BEFORE Printing - find all elements with the class name noPrint and hide them
var noprintElements = Array.from(document.querySelectorAll('.noPrint'))
//noprintElements.forEach(thisElement => thisElement.style.style.visibility = "hidden");
for (let i = 0; i < noprintElements.length; i++) {
noprintElements[i].style.visibility = "hidden"
};
});
/// AFTER Printing - find all elements with the class name noPrint and show them again
window.addEventListener("afterprint", function(event) {
var noprintElements = Array.from(document.querySelectorAll('.noPrint'))
for (let i = 0; i < noprintElements.length; i++) {
noprintElements[i].style.visibility = "visible"
};
});
}
/// this will always run.
/// append a cord to the list
hypeDocument.customData.store += element.dataset.cord + " "
We have a done button & Back button ( in a persistent symbol)
When the done button is clicked it will take you to the Print scene, which has a JS Function Action on scene load which sets up the print text.
hypeDocument.getElementById('printCords').innerHTML = hypeDocument.customData.store
The Print scene has the back button symbol and a Print button .
These will be given the noPrint class name in the identity inspector.
When we hit print, they will hide and later show again according to the listener functions.
The print button simpley calls
window.print()
In its function
storeAndPrint.hype.zip (59.9 KB)
for longer term storage lookup LocalStorage as @Photics suggests.
2 Likes
Thanks! These are great articles!
Thanks! This is working great in my project. Is there any way to reset or clear the data if a user wants to start over?
Just have a button that calls a JS action/function with
hypeDocument.customData.store = ""
2 Likes