How to get an array for audio files for feedback and multiple answer attempts working in a quiz


(Max Woollerton) #1

Hello. I am new to Hype and to Javascript and would like to find out what I am doing wrong!!

I started off following Darren Pearson’s Web based Trivia Game tutorial (at http://www.darrenscorner.com/tutorials/). I was able to complete this and then set about making some modifications, mainly by adding audio files to the game.

I was able to add two audio files, one for a correct response and one for an incorrect response and get these to play (thanks to Daniel). However, I wanted to take this further and add more audio. This is where I have found it very difficult to get things working the way I’d like.

What I am trying to do is this:

  1. Have more than one audio file available, chosen at random from an array for each correct response. For each correctly answered question, one audio file from the array would play. (It would not matter if the same audio clip was used more than once.)

  2. Have more than one audio file available, chosen at random from an array for each incorrect response.

  3. In the case of incorrect responses, it would be great for the user to be able to have further attempts at answering each question until the correct answer is selected. At the moment, I have a penalty of two points taken from the running total when an incorrect response is submitted. Unfortunately, currently only one attempt can be made for each question. Looking through Darren’s code, the Hype documentation and the forum discussions, I can’t really see why that might be. I think maybe I need to have some kind of event listener in place, but I’m not sure why or how to go about this.

I am uploading two files:

  1. This file works, but just has one audio file for correct answers and one for incorrect answers.

TEC-HypeQuizTemplate-v1a.zip (608.8 KB)

  1. This file is my attempt to use multiple audio files for correct and incorrect answers and does not work.

TEC-HypeQuizTemplate-v1c.zip (698.4 KB)

I am afraid the second file is a bit of a mess as I really do not know what I am doing. I tried to add Javascript based on a discussion I found here:
https://www.dreamincode.net/forums/topic/336569-pick-and-play-random-audio-file/page__st__15

Any help anyone can give would be much appreciated.


(Mark Hunte) #2

I probably would have coded and used a bit different logic flow butI am working with what you have, mainly as I do not really have time to rewrite it.

I nearly just ignored it all together as going through code and logic that has a lot of things going on can be very difficult to figure out what is doing what and when.

But I did have a look and think I fixed a few of the errors.

So here are the ones I remember… :grin:

1,

The Audio elements you set up had a src like “incorrectAudioArray[randomSelector]”

First this is completely wrong. the code has no way of knowing what that is or refers to. It has no context in this case and does not belong or work here.

2, You are replacing the audio src any way so we can simply leave the src empty. .i.e

<audio id="incorrectAudioPlayer">
    <source src="" type="audio/mpeg">  
</audio>

3, In the Hype function answerClicked()

You refer to the audio players by what should be global vars. But in the correctAudio() and incorrectAudio() functions they are initialised as local vars.

This means other functions like answerClicked() have no access to them and know nothing about them.

3.1
in the correctAudio() and incorrectAudio() the vars need to be made global.

There are a couple of ways to do this. I have chosen to do it by omitting the var definition tag

We also do not want any id or var clash so ( sometimes using an exact id name as a var name can make the document think you are trying to ref that element. Not normally a problem but can be so lets always try and avoid it)

So we just add a underscore to slightly change the named var.

So in example.

var incorrectAudioPlayer = h..

becomes

incorrectAudioPlayer_ = h...

3.2

The same lines are looking for the wrong elements .

incorrectAudioPlayer_ = hypeDocument.getElementById('incorrectAudioBox');

incorrectAudioBox is the hypeDocument element that has inside of it the audio element which has the id of incorrectAudioPlayer

That is what you must target. Also the hypeDocument will not know about the audio element since you manually created it. But the Main document does.

So we simply change those line respectively from:

incorrectAudioPlayer_ = hypeDocument.getElementById('incorrectAudioBox');

to:

incorrectAudioPlayer_ = document.getElementById('incorrectAudioPlayer');

4,

I have not really followed the full logic of you listeners in correctAudio & incorrectAudio() but for example:

    correctAudioPlayer.addEventListener('ended', function (){
    		if (correctAudioPlayer.ended){
    		correctAudio();
    		}
    		}, true);

Should be

correctAudioPlayer.addEventListener('ended', function (){
		if (correctAudioPlayer.ended){
		hypeDocument.functions().correctAudio()
		}
		}, true);

Since you are trying to call hype functions

5, answerClicked() function.

Your true and false checks are what is stopping any repeat actions from happening.

Just putting the window.answerClicked = true; statement in side the correct answer area solves this.

i.e

    	console.log(element);
		// Checks that no answer has been previously clicked and then sets answerClicked to true
		if (window.answerClicked == false) {
		
		// This takes the current value of the countdown text, changes it to an integer and
		// records it as the points scored for the current question
		var scoreValue = parseInt(hypeDocument.getElementById("countdownText").innerHTML);
		window.clickedAnswer = element.id.charAt(6);
			
		// This increments the current score by one if correct (and could reduce it by one if incorrect if code below reinserted)
		if (window.clickedAnswer == window.correctAnswer[window.currentSlide]) {
			window.currentScore = window.currentScore + scoreValue;
			correctAudioPlayer_.play();
			hypeDocument.goToTimeInTimelineNamed(14, 'Main');
			hypeDocument.getElementById("scoreDisplay").innerHTML = "Score: " + window.currentScore;
			//alert("CORRECT ANSWER");
			window.answerClicked = true;
		}
			else {
			window.currentScore = window.currentScore-2;
			hypeDocument.getElementById("scoreDisplay").innerHTML = "Score: " + window.currentScore;
			incorrectAudioPlayer_.play();
			//alert("WRONG ANSWER");
			 
		}
			
		// Removed (commented out) code that allows for negative scoring (to restore, put above the curly brace above)
		// window.currentScore = window.currentScore - scoreValue;
			
	}

6,

Check that you have the names of the audio files all correct in the arrays. I found at least one that was wrong.

nikhelmBlebleblebee.mp3 should be nikhelmBlebleblebee-1sec.mp3

I think the may be more that are spelt wrong…

Any way I think that was all of them…

TEC-HypeQuizTemplate-MHv1.hype.zip (688.4 KB)


Re ID clash for those of you who are not sure what I mean here is an illustration.

ID Clash Example.hype.zip (80.0 KB)


(Max Woollerton) #3

Hello Mark

Thanks so much for taking the time not only to fix the problems with the code, but also for explaining so clearly what was wrong and what you did. I’ve clearly got a lot to learn and I have been trying to run before I can walk. I will look carefully at each point you have written and try to make the most of your help. Thanks again!

Max.