This section of our app demonstrates a question mechanic where intervals are played and there are multiple choice options. This part of the app required the use of code and separate timelines, and was made possible with the intel on the forums here.

Interval audio files were made in Logic Pro X and then exported to import into Hype. The only way to do this is by using separate scenes, although, we experimented using timelines but it got too difficult to manage.

The Code

JavaScript was applied to the correct answer button, which allowed a “correct” timeline to occur before progressing to the next question.

if(typeof quizScore === ‘undefined’){
window.quizScore = 0;
};
window.quizScore ++;
hypeDocument.startTimelineNamed(‘Correct’, hypeDocument.kDirectionForward);
}

On the final page, it counts up the correct answers and displays the points by simply using some more JavaScript on the scene load.

hypeDocument.getElementById(‘score’).innerHTML = quizScore;

See the video below to see this put into effect.

Taking It Further

The way it was set out, there was no way to get a wrong answer and it made the point counting redundant. This meant that a new timeline had to be created for wrong answers that didn’t add points to the score. After the new timelines were added on the 10 scenes, it needed something to reward the users who got a high mark for the quiz. Using the javascript below, it is now possible to make it display a “well done” message if the mark is 7+/10.

if (window.quizScore >= 7) {
hypeDocument.getElementById(“wellDone”).style.display = “block”;;
} else {
hypeDocument.getElementById(“wellDone”).style.display = “none”;
}

The above code is basically saying that if the result is greater than 7, then it will display the “well done” message, and if they are below the mark, then the “well done” element will remain hidden. The “getElementById” part tells Hype to search the document for the element that I assigned the “wellDone” ID to.

Screen Shot 2016-11-16 at 6.52.15 pm.png
When I studied Java (I also learnt HTML and Flash) in high school, I learnt about the camel case method which you can see me using in the code. After seeing all the JavaScript inside Hype, I noticed it was using it. It essentially avoids the use of a space by using capital letters to mark the start of a new word. I actually forgot about this so my face lit up when I realised how the code was working again.

Advertisements