Better HTML5 Game Development: Data Attribute 1

Elements can have data. What the heck good is that? Why would your <div> tag need data?

I’m always trying to learn new things, even if I have no particular use for them at the moment, because you never know.

I had an idea that the sounds that play when you answer a question right or wrong should vary throughout the game levels. If your mom asked you a question and you got it wrong, that should be different than answering a question asked by your Uncle Don in the woods of Wisconsin, or your dad, who lives in Detroit.

Maybe if you got the question correct about whether you had enough money to buy a dog, the dog would bark, and if you got the question about speed limits wrong there could be the sound of cars crashing.

Coming up with sounds is Eric-the-Sound-Guy’s job. My job is to make it work in the game.

Here is the code to do it. First, the javascript:

// STRIPS OUT NON-NUMERIC DATA FROM RESPONSES. So, an answer like
"$4,892 is needed" becomes 4892. This makes my computer happy because computers like plain old numbers;
function NumberSansCommas(numberString) {
    return Number(numberString.replace(/[^d.- ]/g, ''));
}
// FUNCTION EXECUTES WHEN YOU CLICK ON THE NEXT ARROW (id="next" because creativity is NOT a good thing when naming elements), first we strip everything but numbers from the first answer in the form;
$('#next').click(function(){
    var answer = NumberSansCommas(document.form1.ans1.value) ;

// IF TWO NUMBERS ARE GIVEN IN THE ANSWER, THEN THE QUESTION ASKED FOR FRACTION and the answer the player gave was the first answer divided by the second answer ;
    if (typeof document.form1.ans2 != 'undefined') {
        var answer2 = NumberSansCommas(document.form1.ans2.value) ;
        answer = answer/ answer2 ;
    }

// HERE WE GET OUR DATA ELEMENT! HOW EXCITING! 
// IF THE VARIABLE WITH THE ID OF 'DUMMY' HAS A DATA-SRC ATTRIBUTE then the wrong answer sound is in the sounds directory with the name wrong_answerN , where N is the value f the data-src.
    if ($('#dummy').attr('data-src') != 'undefined') {
       var wrongsrc = '../sounds/wrong_answer' + $('#dummy').attr('data-src') ;
        var rightsrc = '../sounds/correct_answer' + $('#dummy').attr('data-src') ;
    }

// THE SOUNDS DON'T PLAY RIGHT AWAY  - the setTimeout function is used to give the player a couple of seconds to look at their answer before a right or wrong sound plays and a new page is brought up which either continues the game or sends them to study ;
        if (answer == document.form1.correct.value) {
           setTimeout(function(){
               document.getElementById("dummy").innerHTML=
                   "<audio autoplay> <source src = '" + rightsrc + ".ogg' type='audio/ogg'><source  src='" + rightsrc + ".mp3' type='audio/mpeg'></audio>" ;
               rightans()},2000);
    }
    else {

        setTimeout(function(){document.getElementById("dummy").innerHTML=
            "<audio autoplay> <source src = '" + wrongsrc + ".ogg' type='audio/ogg'><source  src='" + wrongsrc + ".mp3' type='audio/mpeg'></audio>" ;
            wrongans()},2000);
    }
})

And here is the element in our HTML , super simple

<span id="dummy" data-src="2"></span>

That's it. There is a reason why this is a brilliant solution. That is the topic of my next post.