So, I have made a simple widget that starts off displaying a five cornered hollow star and when clicked it changes scene to a bronze star, and one more click -> silver, then gold. But to my dismay I have found that when I click it to a gold star and flick a few pages and come back, the widget has gone back to the start.
Is there a way to make a widget that stays on the scene it is on, even when the book is closed and reopened?
It seems possible to accomplish my goal with some javascripting - localStorage - but I can’t seem to wrap my head around it. But I only have about 1 hour of experience with javascript, so…
Local Storage seems like a good place to start expanding your expertise. It seems that this is a common issue with iBooks and Local Storage might be the solution.
I am a bit pessimistic though - since the widget-“icon” in my ibook serves as my first star and the other stars are inside the widget - but replaces the Icon. I guess that even if I could manage to get local storage working, I would probably have to click on the widget icon to get the “latest” star I was on…
I'm confused. How are you displaying the widget icon in iBooks? Do you mean the default image? If that's what you mean, then you can just set the Widget to play automatically.
It sounds like you're building a level select. The first scene in Hype can be the level select – which is automatically updated by the local storage value.
localStorage.stars=stars;
So if "stars" equals 1, then it goes to frame 1 or scene 1. If it equals 2, then it goes to frame 2 or scene two.
I tested it out in A Book About Hype. It's an iBook that uses widgets created with Hype. Now one of my examples should have savable high scores.
That is very true, I didn’t think of the play automatically-setting! Then it should definitely be doable.
Would it be doable for someone like me with hardly any javascript-experience and very little html-experience (I can read and understand some of it, but writing - not so much) to get a localstorage-script-thing working through trial and error and tutorials or is it a task that demands having solid javascript experience?
It keeps track of whether an activity has been completed and the student’s name.
You could periodically run hypeDocument.currentSceneName(); to get the current scene, and write that to local storage, but there are many ways to do this. I’ll put together a demo soon.
Like I mentioned before, this is an opportunity to expand your expertise. It's actually a pretty good first project in JavaScript. I was surprised at how easy it was to add High Score saving to my project.
It does take patience and determination, as there are issue that appear. I call this "Grinding" in my book. It's hard to be a developer because of the constant problem solving. It's like lifting weights with your mind. Yet, by powering through it, you can become much better at web development.
I don't want to give the answer away, as solving problems is how to learn, but it's certainly much easier than what Daniel just posted. jQuery isn't necessary. Don't let that example scare you.
Allright! Well, I’ve have spent alot of time grinding before and the problem solver in me loves it. And hates it But yeah, I’m up for it. But would Daniels example be a good start or do you have somewhere you can point me that doesn’t include jquery? I feel like googling localstorage might be a bit ungraspable
A major hint – line up the keyframes with the number of stars... If localStorage.stars is greater than zero, then go to frame localStorage.stars.
I think that's a good starting point. By figuring out some of the basics in JavaScript and how to use that to leverage the Hype API, you should be able to do a lot more than what's available with the no-coding part of Hype.
Great, thanks!!
I’m gonna start the grind in a few hours, gotta go to the piano and write some music for next weekends gigs first before I start writing code
Honestly, the last two weeks I’ve been working in an office full time and on my free time I’ve been preparing and playing on a lot of church music-gigs. So if I grind on my almost non-existing free free time I’m gonna hit the wall But next week my schedule should start clearing up a bit, and then I’ll start. I have this page always open in a tab so I don’t forget it. And when I start I’ll definitely fill this page with new questions
Ok. So, my four weeks of 170% work load is over and I’m ready to do this.
Just to be clear about how my simple widget works. It’s about 120x120px. I have four scenes, the first is just blank/ a white rectangle on a white background, the next scene has a bronze star in it. Next scene has a silver star, and the last scene a gold star. You go to the next scene by clicking the rectangle or star.
Now to the coding. (I feel like I have no idea what I’m doing)
I understand that by writing localStorage.stars i create a variable that will be able to store info about the last visited star in my widget. I’m guessing I just named the variable ‘stars’, right?
Ok, so logically, I guess I somehow need to tell localStorage.stars to store the name of the scene I’m at every time a new scene is visited. Should there be js-code in each scene then, telling localStorage that this scene has just been visited?
Secondly I need to have some kind of code in the first scene saying that IF there is any data pointing to a scene in localStorage.stars then I will go there. And if localStorage.stars is empty or filled with “1” then I’ll just stay on scene 1. I guess I could assign value 1 to the variable right away.
But if I’m using scenes, can I move to another scene using this code:
hypeDocument.goToTimeInTimelineNamed(0, ‘timelineName’)
Isn’t this only for moving within a scene?
I feel like I kind of know what I need to do, but I have no idea where to start.
So then, instead of:
hypeDocument.showSceneNamed(‘1’)
could i instead write something like:
hypeDocument.showSceneNamed(‘stars’) or something to make it go to the scene contained in the stars-variable?
And, how do i declare the localStorage.stars? As a variable? var localStorage.stars?